（一）不只是 huohuo 的 HTML 面试题

这里我应该是有一些话想说的，可能一刹那的特殊情感未到，没想好到底要说哪些话，先占个坑~~~

HTML部分并不是前端面试中的重点，在组件化流行的开发背景下，其中丰富的标签也似乎难以出现在我们手底敲打的代码中。似渐行渐远，也似自己还未触及到哪个壁垒，这里还是想在自己回顾的同时好好探究一番遇到的相关问题。同时，也是为了知识体系的完整性，就先从此篇开始。好吧，其实也因为我有点整洁完整强迫症哈哈哈~~~

VScode 永远的神！

也许我们习惯了脚手架，习惯了 template，但我们仍然不能忘了 HTML 的那个快捷指令 h ~~~

很快我们就看到了第一天接触前端的时候，那个熟悉的她。。。

Dig：如何你想阅读更多HTML相关的基础概念的话，推荐上W3C

1、不容错过的第一行代码

DOCTYPE

DOCTYPE 是一个（HTML5标准网页）声明，不是标签。用来指示 web 浏览器的解析器用什么文档标准（HTML）解析这个文档（不同的渲染模式会影响浏览器对于CSS代码甚至JS脚本的解析）

网上你可能会看到一些其他的标准，比如 HTML4.01基于SGML（ 标准通用标记语言），所以需要引用DTD（ 文档类型定义），才能告知浏览器文档所使用的文档类型。而 HTML5 是不依赖于 SGML的，但是需要DOCTYPE来规范浏览器行为。

HTML 、XML、XHTML

这其实也是 HTML 的一个发展过程 ~

• HTML（超文本标记语言）：比较混乱松散
• XML（可扩展标记语言）==> JSON替代
• XHTML（可扩展超文本标记语言）==> HTML5 ==>标准模式

2、老生常谈的块级元素与内联元素✨

写到这里，我拿出了还未毕业时，初识前端的第一份笔记，我觉得它依然足够拿得出手......

注意到笔记上关于块级元素与内联元素的内容是放在CSS部分记录的？

说到标签，我们常常指的就是HTML标签，而我们也常用标签名来回答哪些是块级元素、哪些是内联元素。“人”如其名，标签只是个标签，真正决定它是什么元素取决于它的CSS属性，也即CSS属性决定元素（标签）以什么方式（块、行内块）进行显示。

对比表格

	举例	特点
块级元素	“<h1>~<h6>、<p><div>、<ul>、<li>”	① 独占一行 ② 宽高、内外边距可控 ③ 宽默认是容器父级宽度100% ④ 是一个容器及盒子，可放块级元素和内联元素
内联元素	“<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>”

3、那么谈谈你对HTML语义化的理解✨

什么是语义化？

语义化是指使用恰当语义的 HTML 标签，让页面具有良好的结构与含义，比如 标签就代表段落， 代表正文内容。

好处：

• 开发者友好：语义类标签增强了代码的可读性，开发者也能够清晰地看出网页的结构，非常有利于开发和维护
• 机器友好：带有语义的文字表现力丰富，更适合搜索引擎爬取有效信息
• SEO友好：语义化对一些如知乎、博客富文本类应用的内容传播有很大帮助，SEO效果明显

常见的语义化标签

• 头部："<header>"
• 导航："<nav>"
• 内容："<article>"
• 文档某区域："<section>"
• 侧边栏："<aside>"
• 尾部："<footer>"

4、你还知道哪些 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 。

这一部分我们关注的比较少，也确实很少会遇到需要在这里做修改，简单了解下。

6、 src 和 href 有什么区别？

我的简单理解就是，src 从另一个地方拿到东西放到我引入的位置（引入）， href 就是跳到另一个地方去（引用）。

再仔细看看他们的定义并做区别

• 指向：src 指向外部资源的位置，在请求src资源时会将其指向的资源下载并应⽤到⽂档内， href 是指向网络资源所在的位置（也即超链接），用来建立彼此的连接。
• 解析：当浏览器解析 src 资源时，会暂停对其他资源的下载和处理，直到该资源加载、编译、执行完毕（所以一般 js 脚本放在底部而不是头部）。而解析 href 资源时，会并行下载资源，不会停止对当前文档的处理。

7、script 标签中 defer 和 async 的区别？

都是异步加载脚本。区别是 defer 脚本是在文档被解析完毕后执行，async 脚本是在加载完毕后立即执行（脚本乱序）。

8、你是否会使用 Emmet 语法？

如果你经常写 HTML 标签的话，想必一定对 Emmet 语法爱不释手吧？来看看是否有你常用的

div + Tab/Enter

    <div></div>

div*3 + Tab/Enter

    <div></div>
    <div></div>
    <div></div>

ul>li + Tab/Enter

    <ui>
        <li></li>
    </ui>

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 篇的内容还会陆续把遇到的问题记录在此。我不做推广，但是如果你点赞关注，我会感谢你对我莫大的鼓励，谢谢！

好了，我已经迫不及待进行下一步了，因为浏览器相关的内容异常的丰富精彩，请跟我一起来欣赏 不只是 huohuo 的浏览器面试题