前端回顾（三）HTML 知识架构
HTML.png
- 「元信息类标签」head 里面的标签，诸如 title, meta, style, link, base 这些，它们用于描述文档的一些基本信息
- 「语义类标签」诸如 section, nav 的标签，它们在视觉表现上跟 div 并没有区别，但是各有各的使用场景，扩展了纯文本，表达文章结构、不同语言要素的标签
- 「替换型媒体类标签」，如 img, video, audio，用于引入声音、图片、视频等外部元素替换自身的一类标签
- 「表单」如 input, button，用于填写和提交信息的一类标签
- 「表格」表头、表尾、单元格等表格的结构
- 补充标准： ARIA，它是 HTML 的扩展，在可访问性领域，它有至关重要的作用
语义类标签
比较常见的应用场景：
- 自然语言表达能力的补充
- 文章标题摘要
- 适合机器阅读的整体结构
- 语义类标签的特点是视觉上互相都差不多，主要的区别在于它们表示了不同的语义，常见语义标签：
<title><p><hn><ul><li><header><nav><main><article><section><aside><footer><small><strong><em><mark><figure><figcaption><cite><blockquoto><q><time><abbr><dfn><address><del><ins><code><meter><progress><pre><samp>
** 注：
<em>(斜体)
<figure> (规定独立的流内容 -- 「图像、图表、照片、代码等等」，默认 40px 左右的 margin)
<figcaption> (定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置)
-
语义类标签是纯文字的补充，比如标题、自然段、章节、列表，这些内容是纯文字无法表达的， 所以需要依靠语义标签代为表达。
-
正确地使用语义标签可以带来很多好处：
- 增强可读性，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
- 语义类标签也十分适宜机器阅读，更适合搜索引擎检索(SEO)，也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量。
- 语义类还可以支持读屏软件，根据文章可以自动生成目录等等。
-
使用原则： “用对” > “不用” > “用错”
-
其他标签
Others
head 里的标签
1. head 标签规定：
- head 必须是 html 标签中的第一个标签
- 它的内容必须包含一个 title
- 最多只能包含一个 base
- ** 如果文档作为 iframe，或者有其他方式指定了文档标题时， 可以允许不包含 title 标签
2. base 标签
base 的作用是给页面上所有的 URL 相对地址提供一个基础。实际开发中慎用！
3. meta 标签
3.1 charset 属性
建议放在第一位
<html>
<head>
<meta charset="UTF-8">
……
一般情况下，HTTP 服务端会通过 http 头来指定正确的编码方式，但是有些特殊情况如使用 file 协议打开一个 HTML 文件，则没有 http 头，这种时候，charset meta 就非常重要了。
3.2 具有 http-equiv 属性的 meta
具有 http-equiv 属性的 meta 标签，表示执行一个命令，这样的 meta 标签可以不需要 name 属性了。
例如，下面一段代码，相当于添加了 content-type 这个 http 头，并且指定了 http 编码 方式。
1 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
除了 content-type，还有以下几种命令:
- content-language 指定内容的语言;
- default-style 指定默认样式表;
- refresh 刷新;
- set-cookie 模拟 http 头 set-cookie，设置 cookie;
- x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性; content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。
3.3 name 为 viewport 的 meta
实际上，meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以了。
我们来介绍一个 meta 类型，它没有在 HTML 标准中定义，却是移动端开发的事实标准: 它就是 name 为 viewport 的 meta。
这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。
例如:
<meta name="viewport" content="width=500, initial-scale=1">
这里只指定了两个属性，宽度和缩放，实际上 viewport 能控制的更多，它能表示的全部属性如下:
- width:页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
- height:页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
- initial-scale:初始缩放比例。
- minimum-scale:最小缩放比例。
- maximum-scale:最大缩放比例。
- user-scalable:是否允许用户缩放。
对于已经做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一 个标准的 meta 如下:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
3.4 其它预定义的 meta
在 HTML 标准中，还定义了一批 meta 标签的 name，可以视为一种有约定的 meta，我
在这里列出来，你可以简单了解一下。
application-name:如果页面是 Web application，用这个标签表示应用名称。
- author: 页面作者。
- description:页面描述，这个属性可能被用于搜索引擎或者其它场合。
- generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网 页，不需要加这个 meta。
- keywords: 页面关键字，对于 SEO 场景非常关键。 referrer: 跳转策略，是一种安全考量。
- theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外 的 UI(如窗口边框或者 tab 的颜色)。
链接
