【青训营】- 一纸新手向的 HTML 基础说明书-一一网

一、前端开发三件套

前端开发最基础的知识，是前端工程师入门的起点，也是陪伴我们整个职业生涯的伙伴。

HTML (Hyper Text Markup Language)：构建页面基本结构；
CSS (Cascading Style Sheet)：定义前端页面的展现效果；
JS (JavaScript)：实现页面的交互等功能。

二、HTML 简史 ^[1]

HTML 1.0：在 1993 年 6 月作为互联网工程工作小组(IETF)工作草案发布,由此超文本标记语言第一版诞生。
HTML 2.0：1995 年 1 1 月作为 RFC 1866 发布，于 2000 年 6 月发布之后被宣布已经过时。
HTML 3.2：1997 年 1 月 14 日，W3C 推荐标准。
HTML 4.0：1997 年 12 月 18 日，W3C 推荐标准。
HTML 4.01（微小改进）：1999 年 12 月 24 日，W3C 推荐标准。
HTML 5：HTML5 是公认的下一代 Web 语言，极大地提升了 Web 在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。 2014 年 10 月 28 日，W3C 推荐标准。

三、HTML 结构

先来看一个示例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>
复制代码

HTML 文件内容为树形结构。一对尖括号包裹的字符称为一个标签，大多数标签都有开始标签与闭合标签。

3.1 `<!DOCTYPE html>`

<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

现在 HTML 5 已经普及，所以我们在前端开发过程中，写 HTML 时需要按照这种方式声明文档类型。这是 HTML 5 指定的唯一 doctype。

在支持 HTML 5 的浏览器中，如果不写这个声明，浏览器会自动补充；但对于不支持 HTML 5 的老版本 IE 浏览器而言，如果不写这个声明，显示效果会有偏差。为了兼容性，一般网页都会写这个声明。

3.2 `<html></html>`

这是网页的根元素，其他的标签都包裹在这个标签之内。

3.2.1 `<head></head>`

head 标签主要包含浏览器相关的元素以及一些对用户不可见的元素。

title：网页的标题，显示在浏览器的标题栏；
meta：元标签，可以保存诸如 keywors、description 之类的 SEO 相关的信息，在搜索引擎中可见，在网页内不可见。
link：链接标签，用于引入外部静态资源，例如 favicon、CSS 以及 JS 文件等，该标签不受同源策略限制。
style、script：可以将 CSS、JS 代码直接写在 HTML 文件中。

3.2.2 `<body></body>`

body 标签中包含展示在浏览器主题区域的内容，常用的标签可分为三类：

行内元素
块级元素
行内块级元素

三者的主要区别如下：

	行内元素	块级元素	行内块级元素
宽度	内容的宽度，不可设置	父容器宽度的 100%，可设置	内容宽度，可设置
高度	不可设置	可设置	可设置
margin	只有左右，没有上下	正常	正常
padding	只有左右，没有上下	正常	正常

常见的行内元素以及块级元素整理如下：^[2]

行内元素	块级元素
a	address
abbr	blockquote
big	center
br	div
cite	dl
code	form
em	h1 等标题
font	hr
i	menu
img	ol
input	p
kbd	table
label	ul
select	–
small	–
span	–
strong	–
sub	–
sup	–
textarea	–

表格左右列无对应关系。

元素转换可以通过设置元素样式中的 display 属性完成。

如果将一个元素设置为 float: left/right;，那么这个元素将成为一个块级元素，并且具有浮动属性。

如果将一个元素设置为 position: absolute/fixed;，那么这个元素也将成为一个块级元素，并且遵循新的定位要求。

四、语义化标签

HTML 5 提出了语义化标签。使用语义化的标签，可以增加 HTML 文件的可读性。下面对仅使用 div 标签和使用了语义化标签的两段 HTML 文本进行对比。

<!-- 仅使用 div -->
<body>
  <div class="header">
    <div class="nav"></div>
  </div>
  <div class="main">
    <div class="section"></div>
    <div class="section"></div>
    <!-- ... -->
    <div class="article"></div>
  </div>
  <div class="aside">
    <div class="nav">
  </div>
  <div class="footer"></div>
</body>
复制代码

<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <section></section>
    <section></section>
    <!-- ... -->
    <article></article>
  </main>
  <aside>
    <nav></nav>
  </aside>
  <footer></footer>
</body>
复制代码

语义化标签并不能对浏览器解析 HTML 起到什么帮助，并非所有语义化标签都有默认样式，但是语义化标签对于代码可读性的提升有重要意义。

下面整理了 HTML 5 中常见的语义化标签及其含义。

标签名	含义
header	顶部栏
nav	导航栏
article	文章或一整块内容
section	会出现在文档大纲中
aside	侧边栏、次要信息
footer	底部栏
figure	图表
figcaption	图题、表题
blockquote	引用
dl/dt	键值对
cite	引用
time	时间（机器只能读懂特定格式的时间或日期）
address	地址
mark	标记
code	代码
small	小字体，用于写注意事项
track	字幕

五、HTML 解析

5.1 看似简单的 “上网冲浪”，竟有这么深的门道

经典面试题：从在浏览器地址栏中输入网址到看到网页的过程，都发生了什么？

当用户输入了键盘字符，键盘控制器就会产生扫描码数据，并将其缓冲在键盘控制器的寄存器中…… ^[3]

不皮了不皮了 ?

URL 解析 ^[4]
- 判断 URL 格式是否合法
- HSTS 强制使用 HTTPS 访问
- 其他操作（例如访问限制）
- 检查缓存
  - 有缓存 – 页面加载成功
  - 无缓存 – 继续向下进行
解析域名对应的 IP 地址
- 本地 DNS 缓存
  - 浏览器缓存
  - 操作系统缓存
  - 路由器缓存
  - 本地 DNS 服务器缓存
- 根域名服务器
  - 递归
  - 迭代
请求 HTML 文件
- HTTP
  - 构建 HTTP 请求头和请求体
- TCP
  - 构建 TCP 请求头和请求体
  - 三次握手建立 TCP 连接
- IP
  - 加入源 IP 和目的 IP
- 以太网成帧
- 服务器接收请求
  - 将以上过程倒过来
服务器处理请求
- 主进程监听
- 子进程处理请求
浏览器接收响应
- 分析资源（response header）
- 解压
- 缓存
解析 HTML 文件
- 解码
- 预解析
  - 请求静态资源文件
- 符号化
  - 解析区分 HTML 的标签
渲染
- 构建 DOM
- 构建 VSSOM
- 合并 DOM 和 CSSOM，构建渲染树
- 计算布局
- 绘制

当然，在初识 HTML 的时候，可以只简单了解最后的 “渲染” 部分即可，后期通过这种拓展学习，拓宽知识广度，加深知识深度。

5.2 重绘与回流

关于 HTML 的渲染，还有两个相关概念，重绘和回流。

只看概念太枯燥，先来举一个例子 ?。

我们现在画了一幅画，画上从左到右依次是 一个苹果、一个香蕉和一个橘子。画上的苹果是红色的，我们感觉不好看，想把它变为深空灰，那只需要给苹果刷一层新的颜色就可以了，这就叫做重绘。交画的时候，老师说我们的画布太大了，留白太多，让我们换一块小的画布，并且把黑苹果去掉；于是我们重新画了一幅画，把香蕉和橘子画小了一些，画进了一块小画布，并且没有再画苹果，这就是回流（重拍）。

栗子 ? 一炒会 “崩开”，可能会不太 “严谨（紧）”，所以还是要看一下更权威的解释 ^[5] ?。