《重学前端》学习笔记(10)

HTML 元信息类标签

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

元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。

元信息类标签数量不多，逐一为你介绍一下。

head 标签

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

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

title 标签

title 标签表示文档的标题

考虑到 title 作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景，这时侯往往是上下文缺失的，所以title 应该是完整地概括整个网页内容的。
而 h1-h6则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有很大的影响。

base标签

base标签实际上是个历史遗留标签。它的作用是给页面上所有的 URL 相对地址提供一个基础。
base 标签最多只有一个，它改变全局的链接地址，它是一个非常危险的标签，容易造成跟 JavaScript 的配合问题，所以在实际开发中，我比较建议你使用JavaScript 来代替 base 标签。

meta 标签

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

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

meta 标签还有一些变体，主要用于简化书写方式或者声明自动化行为。下面挑几种重点的内容来分别讲解一下。

具有 charset 属性的 meta

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

charset 型meta 标签非常关键，它描述了 HTML 文档自身的编码形式。因此，我建议这个标签放在 head的第一个。

 <meta charset="UTF-8" >

这样，浏览器读到这个标签之前，处理的所有字符都是 ASCII 字符，众所周知，ASCII 字符是 UTF-8 和绝大多数字符编码的子集，所以，在读到meta 之前，浏览器把文档理解多数编码格式都不会出错，这样可以最大限度地保证不出现乱码。
一般情况下，http 服务端会通过 http 头来指定正确的编码方式，但是有些特殊的情况如使用 file 协议打开一个 HTML 文件，则没有 http 头，这种时候，charset meta 就非常重要了。

具有 http-equiv 属性的 meta

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

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

<meta http-equiv="content-type" content="text/html; charset=UTF-8"