HTML元信息类标签

head 标签

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

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

title 标签

title 标签表示文档的标题，可以完整地概括整个网页内容。

meta 标签

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

具有 charset 属性的 meta

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

<meta charset="UTF-8" >

具有 http-equiv 属性的 meta

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

• <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

      <!-- 默认使用最新浏览器 -->

• <meta http-equiv="Cache-Control" content="no-siteapp">

       <!-- 不被网页(加速)转码 -->

name 为 viewport 的 meta

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

其它预定义的 meta

在 HTML 标准中，还定义了一批 meta 标签的 name，可以视为一种有约定的 meta，我在这里列出来，你可以简单了解一下。application-name：如果页面是 Web application，用这个标签表示应用名称。

• author: 页面作者。
• description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
• generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
• keywords: 页面关键字，对于 SEO 场景非常关键。
• referrer: 跳转策略，是一种安全考量。
• theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。
• <meta name="apple-mobile-web-app-capable" content="yes">  <!-- 删除苹果默认的工具栏和菜单栏 -->
• <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><!-- 设置苹果工具栏颜色 -->