ToB企服应用市场:ToB评测及商务社交产业平台

标题: HTML口试题 [打印本页]
作者: 怀念夏天    时间: 昨天 21:54
标题: HTML口试题
1. 前端页面有哪三层构成，分别是什么？作用是什么？

前端页面主要由三层构成，分别是布局层、表示层和举动层。这三层各自的作用如下：
1. HTML（HyperText Markup Language）：布局层，它是网页的根本，用于定义网页的内容布局，如标题、段落、列表、图像等元素。HTML标签告诉浏览器如何组织和呈现这些内容。
2. CSS（Cascading Style Sheets）：样式层，CSS负责为HTML元素添加样式，如颜色、字体、布局、间距等，使得内容具有视觉吸引力并适应不同的装备和屏幕尺寸。通过媒体查询，可以实现相应式设计。
3. JavaScript（JS）：举动层，JavaScript是动态交互的核心，它使网页能够相应用户的操作，执行复杂的逻辑，好比表单验证、动画效果、数据绑定等。现代前端开辟还可能用到框架和库（如React、Vue或Angular）来简化开辟过程。

2. 行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

1. 行内元素（Inline Elements）通常是文本内容的一部分，它们不会影响布局，只占据内容所在的行宽度。例如：
<span>、<a>、<img>、<b>、<strong>、<em> 等。
2. 块级元素（Block Elements）占据一行，形成独立的块，可以设置宽高，影响布局。例如：
<div>、<p>、<h1>~<h6>、<ul>、<ol>、<li>、<table>、<form> 等。
3. 空(void)元素，也称为无内容元素，它们不包含任何内容，但可以有属性。它们通常用于定义布局，不会影响布局。例子有：
<hr>（水平线）、<br>（换行）、<img>（图片，当src为空时）、<input type="hidden"> 等。
元素之间的转换问题：
display: inline;              把某元素转换成了行内元素      ===>不独占一行的，并且不能设置宽高
display: inline-block;     把某元素转换成了行内块元素         ===>不独占一行的，可以设置宽高
display: block;                    把某元素转换成了块元素               ===>独占一行，并且可以设置宽高

3. 怎么办理2个行内块元素中心的空白

导致缘故原由：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，归并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
  1. 方案一：手动取消空格和换行：
  3. <ul>
  4.         <li>1</li><li>2</li><li>3</li><li>4</li>
  5. </ul>
  7. 非常不推荐，原因：
  8. 1. 部分编译器可能会代码整理的时候会强制换行
  9. 2. 代码比较臃肿，美观度不行，一点不优雅
复制代码
  1. 方案二：父元素设置font-size:0px（推荐）
  3. <style type="text/css">
  4.         *{margin: 0;padding: 0;}
  5.         ul{
  6.                 list-style: none;
  7.                 font-size: 0;
  8.         }
  9.         ul li{
  10.                 display: inline-block;
  11.                 width: 100px;
  12.                 height: 100px;
  13.                 background: red;
  14.                 font-size: 18px;
  15.         }
  16. </style>
  17. <ul>
  18.         <li>1</li>
  19.         <li>2</li>
  20.         <li>3</li>
  21.         <li>4</li>
  22. </ul>
  24. 注意：如果子盒子有文本，需要单独设置font-size
复制代码
4. 页面导入样式时，使用link和@import有什么区别？

区别一：加载方式和顺序
    link标签会先加载（多个 <link> 标签同时引入，加载顺序由 HTML 中 <link> 标签的顺序决定）
    @import会在当前样式表加载完成后再加载引入外部样式表（@import 规则必须写在样式表的最前面，加载顺序受到 CSS 文件中 @import 规则的顺序决定。）
    加载顺序区别：页面被加载时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载。
    
区别二：权重区别
    link 方式的样式的权重高于 @import 权重。
    
区别三：附属关系区别
    link 属于 HTML 标签，而 @import 是 CSS 提供的。
    
区别四：兼容性区别
    link 没有兼容性问题，@import 不兼容 ie5 以下。

5. title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别：
定义：
    title：概括了网站信息，可以告诉搜索引擎大概用户关于这个网站的内容主题是什么
    h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
    title他是表现在网页标题上、h1是表现在网页内容上
    title比h1更加的紧张 (title > h1 ) ==》对于seo的了解
场景：
    网站的logo都是用h1标签包裹的    

b与strong的区别：
定义：
    b：标签用于为文本设置粗体样式，但它只是简朴地表示文本应该呈现为粗体，并不带有语义夸大的意义。
    strong：标签用于表示文本的夸大语义，默认会呈现为粗体，同时也向屏幕阅读器和搜索引擎表明这段笔墨的紧张性。
区别：
    b标签只有加粗的样式，没有实际含义。
    strong表示标签内字符比力紧张，用以夸大的。
    
题外话：为了符合css3的规范，b只管少用，改用strong就行了。

i与em的区别：
定义：
    i:标签用于表示文本的斜体样式，但它只是简朴地表示文本应该呈现为斜体，并不带有语义夸大的意义。
    em：标签用于表示文本的夸大语义，通常会呈现为斜体，同时也向屏幕阅读器和搜索引擎表明这段笔墨的夸大紧张性。
区别：
    i只是一个倾斜标签，没有实际含义。
    em表示标签内字符紧张，用以夸大的。
场景：
    i更多的用在字体图标，em术语上（医药，生物）。

6. img标签的title和alt有什么区别？

区别一：表现形式不同
    title ： 鼠标移入到图片展示笔墨值
    alt   ： 图片无法表现时展示笔墨值
区别二：SEO层面 ( alt > title )
    在seo的层面上，蜘蛛抓取不到图片的内容，所从前端在写img标签的时候为了增加seo效果要参加alt属性来形貌这张图是什么内容大概关键词。

7. png、jpg、gif 这些图片格式解释一下，分别什么时候用？

一、png：
    特点：png格式支持无损压缩，同样尺寸情况下，体积要比jpg/jpeg的大。
    实用场景：png格式适合保存，必要保持高质量细节和透明配景的图像，如图标、线条图、笔墨、Logo 等。
    
二、jpg：
    特点：jpg格式支持有损压缩。
    实用场景：jpg式适合保存照片、图像和艺术作品等真实场景图像，常用于网站上发布的照片、配景图等。
三、gif：
    特点：gif格式支持无损压缩和动画功能，能够保存多帧图像并以动画形式表现。
    实用场景：gif格式适合保存简朴的动画、图标、心情包等图像。实用于网页上的小型动画、简朴图标等。
四、webp：
    特点：webp是一种由 Google 开辟的图像格式，支持有损压缩和无损压缩，通常比 PNG 和 JPG 文件大小更小，同时保持较高的图像质量。它还支持动画和透明度。
    实用场景：webp格式适适用于网站优化和速度提升，可以资助减小图像文件大小，进步网页加载速度。特别适适用于要求高速加载和移动装备访问的网页，可以有用减少网页加载时间。
五、总结：
    PNG 适合保存高质量细节和透明配景的图像
    JPG 适合保存照片和真实场景图像；
    GIF 适合保存简朴的动画和图标；
    WebP 适适用于网站优化和速度提升，特别适合要求高速加载和移动装备访问的网页（存在兼容性）。

8. iframe的优点和缺点？

是什么：用于嵌入另一个 HTML 文档或外部资源（如网页、视频、地图等）到当前页面中。
优点：
1.嵌入外部内容： <iframe> 答应你在一个网页中嵌入来自不同源或服务器的内容，这有助于创建丰富多彩的页面。
2.独立性： 内嵌的内容在 <iframe> 中运行，与主页面相互隔离，这意味着它不会受到主页面的影响，保持了独立性。
3.轻便性： 使用 <iframe> 非常简朴，只需提供要嵌入的资源的 URL 或相对路径即可。
缺点：
1.性能问题： 假如滥用 <iframe>，在同一个页面中加载多个 <iframe> 可能会导致性能问题，由于每个 <iframe> 都必要单独加载资源。
2.可访问性问题： 内嵌内容可能导致可访问性问题，由于屏幕阅读器等辅助技能可能无法精确解释和浏览 <iframe> 内的内容。
3.安全性风险： 假如未审慎处理来自不受信任源的内容，可能会存在安全风险，例如点击劫持（clickjacking）攻击。
防止自己的网站被别人 iframe 嵌套
  1. if (top != self) {
  2.     top.location = self.location;
  3. }
  4. //这段代码会检测页面是否被嵌套，如果是，则将页面重定向到自身。
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4