从掘金的一篇文章中摘下来的部分问题，这种级别的面试题，问问三年前的新人还好，问现在的新人多少有点过时了。
而问我这种前端老登，如果不是为了找工作，放在以前我真会喷他。
这里没什么好说的，谁叫现在是为了找工作呢，统一整理出来看看吧，我实在想不懂问这些阴间问题的到底是哪些面试官想出来的，这些面试题显得你很会搜集面试题吗？
正文
本篇基本上都是HTML5的冷门问题，HTML的知识，真的。。。我都麻了，在掘金上刷到还有面试官来问这种问题？
呵呵，放在两年前，问这种问题只会让我感觉到这个面试官水平不行。
这些问题中不乏一些偏到犄角旮旯的垃圾问题，有些甚至是我这个前端老登都感觉真他妈离谱，真想把一些问题拍在面试官的脸上。
你这些狗日的问题，你要不查文档，你自己能答的出来吗？你到底是从哪个题库中扒出来的？你弄这些东西到底对你自己的项目有什么促进作用？这些基础问题，要是你自己不花点时间准备，你到底能回答出来多少？
这些问题对业务上的促进作用是什么？你问这些问题你要不给个为什么，我真他吗的。。。。算了，人在屋檐下。
罢了，就当是听孔乙己说茴香豆的四种写法了，真你妈的离谱。
DOCUTYPE作用
DOCTYPE（文档类型声明）是HTML文档中的一个重要组成部分，它位于HTML文档的第一行，位于<html>标签之前。
这个声明用于指定当前文档所采用的HTML版本。
DOCTYPE不是HTML标签，而是一个指令，告诉浏览器当前页面采用了哪个HTML版本，以便浏览器按照相应版本的规范来解析和渲染页面。
<!DOCTYPE html>声明的主要作用是规范浏览器行为，确保HTML文档的正确解析和渲染。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat。
- document.compatMode：BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面、（默认）。
- document.compatMode： CSS1Compat：标准模式、浏览器使用W3C标准解析渲染页面。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。
如果你不加，浏览器如果按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式、很可能出现兼容问题。
这个问题基本上是最初那一代的前端开发者才会知道的问题，因为最初浏览器还没有定下W3C标准，各家浏览器都按照自家的标准做事，所以那时候才有了那么多恶心的兼容问题。
在W3C标准出现之前，彼时不同浏览器的内核是不统一，割裂极度严重，IE浏览器，火狐，还有谷歌，三家浏览器各搞各的，直到后续各家浏览器出来统一制定了W3C规则之后，统一进行页面的解析。
当然，在那之后，IE浏览器依旧不老实，还是坚持要搞自己的一些小动作，所以在18年~22年左右，依然有很多政府项目要求兼容IE。
不过随着时代的发展，这种项目估计除了银行之类的ToG的政府项目才会关心，实际上都不在关注这种问题了，毕竟现在都在使用W3C标准，而坚持自己个性标准的IE浏览器，在IE11之后就进了历史垃圾堆。
在这之后，微软也宣布推出了Edge，摆脱了原有的历史包袱，使用W3C标准。
所以，到现在<!DOCTYPE html>成了前端标准的兼容行为，这个操作太过基石，以至于没什么人会去关注。
这里稍微总结一下<!DOCTYPE html>的作用
- 规范浏览器行为：通过指定正确的DOCTYPE，可以确保浏览器按照相应版本的HTML规范来解析和渲染页面，从而避免出现兼容性问题。
- 避免混杂模式：早期的HTML标准中，如果没有提供DOCTYPE声明或者提供了错误的声明，浏览器会进入混杂模式（Quirks Mode），这可能导致页面显示不一致或出现兼容性问题。通过明确指定正确的DOCTYPE，可以避免进入混杂模式。
- 支持新特性：随着HTML标准的不断更新和演进，新版本中引入了许多新特性和语法规则。使用适当的DOCTYPE声明，可以告诉浏览器当前页面采用了哪个HTML版本，并使其能够理解并支持该版本中新增加的功能和语法。
- 提示验证工具：DOCTYPE声明还对验证工具起到提示作用。验证工具（如W3C的HTML验证器）可以根据DOCTYPE声明来判断文档是否符合相应版本的HTML规范，从而帮助开发者发现和修复代码中的错误。
META的作用
这里放一段W3C的示例，结合实例稍微说一下作用，实际开发过程中，最多可能常用到控制缩放。
至于常规keywords，description，基本上都是SEO常用到的配置，而后台管理类项目，平常基本上没人在乎这个的。
1 | <head> |
meta 元素可以使用名/值对定义元数据，为此需要用到其 name 和 content 属性。
| name | content | 描述 |
|---|---|---|
| charset | UTF-8 | 声明当前页面使用的字符集 |
| keywords | HTML, CSS, JavaScript | 搜索引擎关键字 |
| description | Free Web tutorials for HTML and CSS | 网页描述 |
| author | John Doe | 页面作者 |
| viewport | width=device-width, initial-scale=1.0 | 控制设备上缩放效果 |
| http-equiv=”refresh” | 30 | 每 30 秒刷新一次文档 |
这里大概列举了一下，至于详情，这里就不列举了。
详情这里实在不想细说，有兴趣可以自行去看HTML 标签 _meta(w3school.com.cn)。
HTML5语义化
语义化，顾名思义，就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。
不仅对自己来说，容易阅读，书写。
别人，甚至是网络爬虫机器看你的代码和结构也容易理解。
语义化简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
在解释这个概念之前，应该先解释下“结构-表现-行为”。
如果说解耦合是代码的高境界，那么“结构-表现-行为”的原则就是前台的标杆。
前端代码是有HTML + CSS + JS来实现的。他们对应的就是负责“结构-表现-行为”。
不过，现在兴起的前端技术大多要求是用来处理后台，这时候把很多以前的PC应用搬到了浏览器上。
而应用就不怎么在乎浏览器器的语义化了，秉承着能用就行的原则，大多数后台应用类的网站的语义化要求被淡化，大多数都是div一把梭。
除了页面SEO，或者是静态新闻网站之外，大多数网页开发都不再在乎应用，感兴趣的可以看看这篇博客园的博客：Html的语义化。
HTML5新特性
2024年了，还是那些个新特性，这些东西没有什么可聊的，从H5标准出来到现在，作为浏览器的基石，这些规则基本都没有什么改变。
后续会稍微整理这些新特性的详情玩法，每个特性都很基础，但是深挖之后，都是深坑，我们这里就简单的了解一下概念，应对面试就可以。
- 语义化标签，（hrader、footer等），使得页面的内容结构化，见名知义
- 增强型表单，拥有多个新的表单input输入类型，可提供更好的输入控制和验证
- video和audio元素，提供了播放视频和音频文件的标准方法
- canvas绘图， 画布功能，通过 JavaScript 来绘制 2D 图形。
- svg绘图，SVG 是一种使用 XML 描述 2D 图形的语言。
- 地理定位，Geolocation（地理定位）用于定位用户的位置
- 拖放API，在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放
- web worker，web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
- web storage，使用HTML5可以在本地存储用户的浏览数据，cookie，local storage，sessionStorage。
- WebSocket，WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
以上十个新特性在现代开发中衍生出了很多内容，譬如websocket的聊天室，基于canvas画布实现的流程图和很多酷炫的图表。
哪怕是最基础的语义化形成的SEO，还有表单的提交增强，都是很强力的增强，这里后续我们会基于每个特性进行深入的了解。
src 和 href 的区别
二者的区别，这里要从请求资源类型，解析方式，权重角度来分析。
请求资源类型不同
href（Hypertext Reference）
作用指定超链接目标的URL，主要用来建立当前元素和href引用元素的链接关系。
href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。
常用link，a标签。
Src（Source）
作用是指向物件的来源地址，主要指向需下载的资源。
src将其指向的资源下载并应用到当前document中，并且替换当前元素。
常用标签script，img，iframe等。
浏览器解析方式和权重的不同
用 href时，加载到对应位置的时，不会暂停其他资源的下载或行为。
- 权重思想： href链接的的是当前页面的一部分附属资源。
- 注意点：所以CSS样式可以放在html结构的头部优先加载（因为不影响页面的核心加载，只是HTML标签的对应样式表）
用src时候，会暂停其他资源的下载，直到当前资源加载，编译，执行完成了，并且把当前资源替换到src引用处了。
- 权重思想： src加载的是当前页面的一部分。
- 注意点：这就是为何js脚本一般回放到document底部加载而不是头部。
BFC 及其应用
说了半天，这个算是一个比较正常的面试题，值得重点看看。
BFC(Blcok formatting context) 直译为“块级格式化上下文”。
他是一个独立的渲染区域，只有块级元素参与，它规定了内部块级元素的布局，并且与这个区域外部毫不相关，外部元素也不会影响这个渲染区域的元素。
简单说：BFC 就是页面上的一个隔离的独立渲染区域，区域里边的子元素不会影响到外面的元素。外边的元素也不会影响到区域里面的子元素。
以下是一些常见的创建 BFC 的方法：
- 浮动元素：将一个元素设置为浮动（
float: left或float: right）会创建一个 BFC。 - 绝对定位元素：将一个元素设置为绝对定位（
position: absolute）会创建一个 BFC。 - 固定定位元素：将一个元素设置为固定定位（
position: fixed）会创建一个 BFC。 - 具有
overflow属性的元素：将一个元素的overflow属性设置为非visible的值（例如overflow: hidden、overflow: auto或overflow: scroll）会创建一个 BFC。 - 具有
display属性为inline-block、table-cell、table-caption或flex的元素：这些元素会自动创建一个 BFC。 - 根元素（
html元素）：根元素始终是一个 BFC。
BFC 可以解决那些问题
- 避免垂直方向的
margin合并。问题：垂直方向上的，两个元素margin相遇，两元素间的距离并不等于两个margin之和。而是等于最大的margin。小的margin会被大的margin吞并。 - 清除浮动元素的影响。问题：如果父元素包含一个浮动元素，那么其他元素可能会受到浮动元素的影响，导致布局混乱。但是给父元素变成BFC，浮动元素对其他元素的布局不再产生影响。
- 防止高度塌陷。问题：父元素不写高度时，子元素浮动后，导致父元素会发生高度塌陷（造成父元素高度为0）。但是将父元素变成BFC，就不会造成高度塌陷，最简单的方法是，给父元素设置
overflow: hidden属性。 - 垂直布局。问题：父元素包含多个子元素，并且这些子元素的高度不同，那么在没有创建 BFC 的情况下，这些子元素可能会在垂直方向上重叠。但是将父元素变成BFC，子元素在垂直方向上就能正确排列。
结语
真的是。。。越整理越感觉离谱，我都感觉自己人生中浪费了数个小时在整理这些冷门问题到底在干嘛。
实话实说，这些老古董问题，在我眼里除了AI应该知道之外，正常的前端开发都不需要知道，最多就大概了解一下就行，哪怕是专门拿来问都有点显得掉架子，正经的老开发很难去了解这些问题。
我实在想不通为什么有很多傻逼面试官会问到这种老古董的冷僻问题，他自己平时难道用得到吗？难道这些人平时自己就能用得到？就是为了考察所谓的基础？这些基础到底有什么用？
我不说别的，DOCUTYPE的作用这个，在这些年里真的会有人遇到这方面的问题吗？兼容IE11? 除非是银行项目，到底是哪些人还他妈的固执的在用IE11?
很多政府项目都不在要求兼容IE11了，偏偏这些人还在要求，这是否有点太离谱了？
只能说，内卷化的极端时间里，现在找个工作太难，导致这种不知道从哪抠出来的冷僻问题居然成了热门的面试题，真他妈的傻逼。
除了外行和新手，我真的想不懂这些问题对开发的意义，哪怕多问问项目实现的难点我都不会对这些面试官有意见。