2021-前端高频面试题整理-HTML篇（持续更新）

整理的同时自己也复习一下，答案仅供参考。

语义化标签

• 什么是标签语义化？有什么作用

  用正确的标签做正确的事情。有利于SEO(搜索引擎优化)，有利于开发和维护

• 都有哪些标签，都是啥意思

  常见块级标签:

标签	描述
div	常用块级容器
p	段落
h1-h6	1-6级标题
ol、ul、li	有序列表、无序列表、列表项
dl、dt、dd	定义列表、定义术语、定义描述
table	表格
form	表单

常见行内标签：

标签	描述
a	锚点
b	加粗
span	文本
select	下拉列表
strong	加粗强调

常见行内块标签：、、

• 块级标签和行内标签的区别

  块级标签独占一行，可指定宽、高；行内标签无法设置宽高，不会自动换行，宽度与高度由内容决定，只有在内容超过HTML的宽度时，才会换行；行内块标签同时具备行内标签、块级标签的特点，能够设置宽高，不会自动换行。

• 内联元素可以使用padding和margin吗

内联元素只有margin-left/margin-right和padding-left/padding-right是有效的，竖直方向的margin和padding无效果。但是内联元素父级设置的padding对内联元素是有作用的

作者：Husbin
链接：https://www.jianshu.com/p/5a78a19f18bf
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

• 如何转换

display: inline 转换为行内元素

display: linline-block 转换为行内块元素

display: block 转换为块级元素

• display除了这几个值还有哪些

display: none; display: table; display: flex

• display:none
  • 让元素隐藏，你可以怎么做？

1.visibility: hidden
2.display: none
3.opacity: 0
4.宽高设置为0
5.position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外
6.filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

• display:none 和 visibility:hidden的区别

visibility: hidden只是简单的隐藏某个元素，元素依然占用空间;display: none元素会变得不可见，并且不会再占用空间。

---

浏览器内核

国内的主流浏览器内核

IE浏览器：Trident内核，俗称IE内核。

Chrome浏览器： 以前是Webkit内核，现在是Blink内核。

Firefox浏览器： Gecko内核，俗称Firefox内核。

Safari浏览器：Webkit内核。

Opera浏览器：Blink内核。

内核主要分成两部分：渲染引擎和 JS 引擎。

渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，生成DOM树,render，repaint这些工作，然后会输出至显示器或打印机。

JS引擎负责解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

---

meta viewport 是做什么的

meta viewport 是用于适配移动设备的，目的是让无论什么宽度的页面都能在移动设备端得到完美适配。

通过meta标签设置视口大小:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

属性介绍：

width=device-width 设置视口宽度等于设备的宽度
initial-scale=1.0 初始缩放比例
maximum-scale 允许用户缩放到的最大比例
minimum-scale 允许用户缩放到的最小比例
user-scalable 用户是否可以手动缩放

---

href和src的区别

href表示超文本引用，用来建立当前元素和文档之间的链接。常用的有：link、a。例如：

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为css文档，会并行下载该文档，并且页面解析不会暂停。这与把css文件内容写在