web前端知识体系之基础知识 - HTML元素和语言

1. 文档元信息

元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来（与此相对，其它标签，如语义类标签，描述的是业务）。

1.1 head

head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。

head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。

1.2 title

title 标签表示文档的标题。

1.3 meta

meta 标签是一组键值对，它是一种通用的元信息表示标签。

在 head 中可以出现任意多个 meta 标签。一般的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。

这里的 name 是一种比较自由的约定，http 标准规定了一些 name 作为大家使用的共识，也鼓励大家发明自己的 name 来使用。

除了基本用法，meta 标签还有一些变体，主要用于简化书写方式或者声明自动化行为。

• 具有 charset 属性的 meta

从 HTML5 开始，为了简化写法，meta 标签新增了 charset 属性。添加了 charset 属性的 meta 标签无需再有 name 和 content。

  <meta charset="UTF-8" />

• 具有 http-equiv 属性的 meta

具有 http-equiv 属性的 meta 标签，表示执行一个命令，这样的 meta 标签可以不需要 name 属性了。

例如，下面一段代码，相当于添加了 content-type 这个 http 头，并且指定了 http 编码方式。

  <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，声明内容安全策略。

• name 为 viewport 的 meta

实际上，meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以了。

name 为 viewport 的 meta，它没有在 HTML 标准中定义，却是移动端开发的事实标准。

这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。

例如：

  <meta name="viewport" content="width=500, initial-scale=1" />
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

这里只指定了两个属性，宽度和缩放，实际上 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">

• 其它预定义的 meta

在 HTML 标准中，还定义了一批 meta 标签的 name，可以视为一种有约定的 meta。

• application-name：如果页面是 Web application，用这个标签表示应用名称。
• author: 页面作者。
• description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
• generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
• keywords: 页面关键字，对于 SEO 场景非常关键。
• referrer: 跳转策略，是一种安全考量。
• theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。

2. 语义相关内容

2.1 语义化标签优点

• 语义类标签对开发者更为友好，使用语义类标签增强了可读性，即便是在没有 CSS 的时候，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
• 除了对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索（SEO），也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量，并且语义类还可以支持读屏软件，根据文章可以自动生成目录等等。

2.2 常用语义化标签

• aside：导航性质的工具内容，例如左侧侧边栏
• article：文章主体
• hgroup,h1,h2：hgroup 标签是标题组，h1 标签是一级标题，h2 标签是二级标题
• abbr：缩写内容
• hr：横向分割线，表示故事走向的转变或者话题的转变
• p：普通段落
• strong：黑体加粗，表示这个词很重要
• blockquote,q,cite：blockquote 标签表示段落级引述内容，q 标签表示行内的引述内容，cite 标签表示引述的作品名
• time：日期内容
• figure,figcaption：figure 标签用于表示与主文章相关的图像、照片等流内容，figcaption 标签表示内容的标题
• dfn：用来包裹被定义的名词
• nav,ol,ul：nav 标签是导航、目录内容，ol 标签表示有序列表，ul 标签表示无序列表
• pre,samp,code：pre 标签表示这部分内容是预先排版过的，不需要浏览器进行排版，smap 标签用于计算机程序的示例输出展示，code 标签用来包裹计算机程序代码。

2.3 适合使用语义化的场景

• 自然语言表达能力的补充；
• 文章标题摘要；
• 适合机器阅读的整体结构。

3. 链接

链接是 HTML 中的一种机制，它是 HTML 文档和其它文档或者资源的连接关系，在 HTML 中，链接有两种类型。一种是超链接型标签，一种是外部资源链接。

链接的家族中有 a 标签、area 标签和 link 标签。

3.1 link 标签

link 标签也是元信息的一种，在很多时候，它也是不会对浏览器产生任何效果的，这也是很多人会忽略 link 标签学习的原因。

link 标签会生成一个链接，它可能生成超链接，也可能生成外部资源链接。

一些 link 标签会生成超链接，这些超链接又不会像 a 标签那样显示在网页中。这就是超链接型的 link 标签。

这意味着多数浏览器中，这些 link 标签不产生任何作用。但是，这些 link 标签能够被搜索引擎和一些浏览器插件识别，从而产生关键性作用。

比如&#