HTML面试题

参考：
https://juejin.cn/post/6844904021308735502 。
https://juejin.cn/post/6844903951377104903 。

标签语义化

• IFE-NOTE：页面结构语义化
• 有利于构架良好的 HTML 结构，有利于搜索引擎的建立索引、抓取。
• 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）。
• 有利于构建清晰的机构，有利于团队的开发、维护。

src 属性和 href 属性

参考：https://juejin.cn/post/6875953466267664398 。

src 属性

src 是 source 的缩写，翻译为“来源、源头”。
src 指向外部资源的位置，src 指向的内容会嵌入到文档中当前标签所在的位置。
src 用在 script 标签、iframe 标签、img 标签、video 标签、audio 标签等等。

href 属性

href 是 hypertext reference 的缩写，翻译为“超文本引用”。
href 用来建立当前元素和文档之间的链接。
href 用在 link 标签、a 标签等等。

link 标签和@import

• 从属关系不同
  link 标签除了加载 CSS 以外，还可以定义 RSS 等其他事物，@import 属于 CSS 范畴，只能加载 CSS。
• 加载顺序不同
  link 标签引用 CSS 时在页面载入的同时进行加载，@import 需要等待网页全部加载完以后才进行加载。
• 兼容性不同
  link 标签是标签，没有兼容性的问题，@import 是在 CSS2.1 之后提出的，低版本的浏览器并不支持。
• DOM 可控性不同
  link 标签支持 Javascript 控制 DOM 改变样式，@import 不支持。

head 标签

参考：https://juejin.cn/post/6987919006468407309 。

head标签与html标签、body标签一样是一个文档必须的标签。head标签用于说明文档头部信息，它是所有头部标签的容器。head中的标签可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

这些标签可用在 head 标签：base，link，meta，script，style，title等等。

meta 标签

参考：
https://juejin.cn/post/6844904099184377870 。
https://juejin.cn/post/6987919006468407309 。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta 。

meta 标签是用来描述网页属性的一种语言，标准的 meta 标签可以便于搜索引擎排序，提高搜索引擎网站权重排名。

浏览器前缀

CSS3 规范要达到 W3C 的推荐标准（即定稿）状态要经过数年。浏览器则通常在 W3C 开发标准的过程中就会提前实现这些特性。这样，标准在最终敲定之前就能知道哪些地方还能进一步改进。

在包含某个特性的初始阶段，浏览器通常会使用厂商前缀实现这类特性。如今，在多数情况下，我们一般只需要 -webkit 前缀，并非所有的 CSS3 属性都需要使用为浏览器准备的前缀。

• -moz-：代表 firefox 浏览器私有属性
• -ms-：代表 ie 浏览器私有属性
• -webkit-：代表 safari、chrome 私有属性
• -o-：代表 Opera 私有属性

其它问题

• 为什么 link 标签放在头部，script 标签放在尾部