HTML 部分并不是前端面试中的重点，在组件化流行的开发背景下，其中丰富的标签也似乎难以出现在我们手底敲打的代码中。似渐行渐远，也似自己还未触及到哪个壁垒，这里还是想在自己回顾的同时好好探究一番遇到的相关问题。同时，也是为了知识体系的完整性，就先从此篇开始。好吧，其实也因为我有点整洁完整强迫症哈哈哈~~~
VScode 永远的神！
也许我们习惯了脚手架，习惯了 template，但我们仍然不能忘了HTML的那个快捷指令 h ~~~
很快我们就看到了最初接触前端的时候，那个熟悉的她。。。
Dig：如过你想阅读更多HTML相关的基础概念的话，推荐上W3C
一、不容错过的第一行代码
DOCTYPE
DOCTYPE 是一个（HTML5标准网页）声明，不是标签。用来指示web浏览器的解析器用什么文档标准（HTML）解析这个文档（不同的渲染模式会影响浏览器对于CSS代码甚至JS脚本的解析）
网上你可能会看到一些其他的标准，比如HTML4.01基于SGML（ 标准通用标记语言），所以需要引用DTD（ 文档类型定义），才能告知浏览器文档所使用的文档类型。而HTML5是不依赖于SGML的，但是需要DOCTYPE来规范浏览器行为。
HTML 、XML、XHTML
这其实也是 HTML 的一个发展过程 ~
HTML（超文本标记语言）：比较混乱松散XML（可扩展标记语言）==>JSON替代XHTML（可扩展超文本标记语言）==>HTML5==>标准模式
二、老生常谈的块级元素与内联元素 ✨
写到这里，我拿出了还未毕业时，初识前端的第一份笔记，我觉得它依然足够拿得出手......
注意到笔记上关于块级元素与内联元素的内容是放在CSS部分记录的？
说到标签，我们常常指的就是HTML标签，而我们也常用标签名来回答哪些是块级元素、哪些是内联元素。“人”如其名，标签只是个标签，真正决定它是什么元素取决于它的CSS属性，也即CSS属性决定元素（标签）以什么方式（块、行内块）进行显示。
三方对比
块级元素
- 特点：① 独占一行 ② 宽高、内外边距可控 ③ 宽默认是容器父级宽度 100% ④ 是一个容器及盒子，可放块级元素和内联元素
- 举例：
h1~h6、p、div、ul、li
内联元素
- 特点：① 相邻内联元素在同一行 ② 宽高设置无效 ③ 宽默认是本身内容宽 ④ 只能容纳文本或其他内联元素
- 举例：
a、b、em、i、span
行内块元素
- 特点：包含以上的特点。且设置的高度默认为行高，垂直居中
- 举例：
img、input、td
追问：如何转换？
有时候使用内联元素可能需要你实现块级元素的特性，比如增加某个链接的触发范围（点变成面）。
早期的办法：
- 转块元素：
display: block - 转内联元素：
display: inline - 转行内块元素：
display: inline-block - 继承（父类）：
display: inherit
进化一下：
- 内联元素转块级元素：设置
float属性或position属性（absolute或fixed） - 块级元素转行内块元素：
display: flex - ......
可能你还会被问到什么是空元素，就是标签内没有内容的元素，如 img、link、meta
三、谈谈你对 HTML 语义化的理解
什么是语义化？
语义化是指使用恰当语义的HTML标签，让页面具有良好的结构与含义，比如 标签就代表段落，代表正文内容。
好处：
- 开发者友好：语义类标签增强了代码的可读性，开发者也能够清晰地看出网页的结构，非常有利于开发和维护
- 机器友好：带有语义的文字表现力丰富，更适合搜索引擎爬取有效信息
SEO友好：语义化对一些如知乎、博客富文本类应用的内容传播有很大帮助，SEO 效果明显
常见的语义化标签
- 头部：
header - 导航：
nav - 内容：
article - 文档某区域：
section - 侧边栏：
aside - 尾部：
footer
四、你还知道哪些 HTML5 新增特性
新的媒介元素
- 音频：
audio - 视频：
video（常用属性autoplay、control、loop、poster）
HTML5 图像
- JS 绘图
- SVG 绘图
你还可以说一些加分项：另外还增加了一些输入类型（color、date、search 等）和表单属性（required、placeholder、autofocus 等）
HTML5 与 HTML4 的不同之处
个人觉得这种问题不该出现在面试上，没有什么意义，除非面试官想刁难你。
前面所说的语义化以及新增特性，其实就是它们的不同之处。如果面试官想要更多的答案，除了新增的元素以及属性，你可以说说 HTML5 不依赖于 SGML，文档类型声明改为单一的，以及一些被移除的元素（applet、basefont、big 等）
5、关于 meta 标签
meta标签由name和content两个属性来定义，来描述⼀个HTML⽹⻚⽂档的属性，例如作者、⽇期和时间、⽹⻚描述、 关键词、⻚⾯刷新等，除了⼀些http标准规定了⼀些name作为⼤家使⽤的共识，开发者也可以⾃定义 name。
这一部分我们关注的比较少，也确实很少会遇到需要在这里做修改，简单了解下。
六、 src 和 href 有什么区别？
我的简单理解就是，src 从另一个地方拿到东西放到我引入的位置（引入）， href 就是跳到另一个地方去（引用）。
再仔细看看他们的定义并做区别
- 指向：
src指向外部资源的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内，href是指向网络资源所在的位置（也即超链接），用来建立彼此的连接。 - 解析：当浏览器解析
src资源时，会暂停对其他资源的下载和处理，直到该资源加载、编译、执行完毕（所以一般 js 脚本放在底部而不是头部）。而解析href资源时，会并行下载资源，不会停止对当前文档的处理。
七、script 标签中 defer 和 async 的区别？
都是异步加载脚本。区别是 defer 脚本是在文档被解析完毕后执行，async 脚本是在加载完毕后立即执行（脚本乱序）。
八、你是否会使用 Emmet 语法？
如果你经常写 HTML 标签的话，想必一定对 Emmet 语法爱不释手吧？来看看是否有你常用的
div + Tab/Enter
<div></div>
div*3 + Tab/Enter
<div></div>
<div></div>
<div></div>
ul>li + Tab/Enter
<ul>
<li></li>
</ul>
div+p + Tab/Enter
<div></div>
<p></p>
.demo 与 #two + Tab/Enter
<!-- .demo -->
<div class="demo"></div>
<!-- #two -->
<div id="two"></div>
<!-- .demo#two -->
<div class="demo" id="two"></div>
.demo$*2 + Tab/Enter
<div class="demo1"></div>
<div class="demo2"></div>
div{火火} + Tab/Enter
<div>火火</div>
div{$}*3 + Tab/Enter
<div>1</div>
<div>2</div>
<div>3</div>
BulingBuling ~
写到这里，我想写的是有关前端存储的知识，但是我觉得这些应该放在浏览器篇中，HTML 篇的内容还会陆续把遇到的问题记录在此。我不做推广，但是如果你点赞关注，我会感谢你对我莫大的鼓励，谢谢！
