head 标签

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

title 标签

title 标签标识文档的标题。

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

base 标签

base 标签实际上是个历史遗留标签。它的作用是给页面上所有的 URL 相对地址提供一个基础。

base 标签最多只有一个，它改变全局的链接地址，它是一个非常危险的标签，容易造成跟 JS 的配合问题，所以在实际开发中，建议使用 JS 来代替 base 标签。

meta 标签

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

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

<meta name=application-name content="IsForums">

这个标签表示页面所在的 web-application ，名为 IsForums 。

http 标准规定了一些 name 作为大家使用的共识，也鼓励大家法命自己的 name 来使用。

具有 charset 属性的 meta

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

<meta charset="UTF-8">

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

具有 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-campatible ，声明 ua 兼容性；
content-security-policy 模拟 http 头 content-security-policy ，声明内容安全策略。
expires 设定网页的到期时间。<meta http-equiv="expires" content="0">
Pragma 设定禁止浏览器从本地机的缓存中调阅页面内容。 <meta http-equiv="Pragma" content="no-cache">
cache-control <meta http-equiv="cache-control" content="no-cache">

name 为 viewport 的 meta
name 为 viewport 的 meta ，它的 content 是一个复杂结构，使用逗号分隔的键值对，键值对的格式是 key=value。
例如：
```
<meta name="viewport" content="width=500, initial-scale=1">
```
这里只指定了两个属性，宽度和缩放，实际上，viewport 能控制得更多，它能表示的全部属性如下：
width：页面宽度，为一个正整数，或字符串 device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等，很少使用。
initial-scale：设置页面的初始缩放比例，为一个数字，可以带小数
minium-scale：允许用户的最小缩放比例，为一个数字，可以带小数
maximum-scale：允许缩放的最大比例，为一个数字，可以带小数
user-scalable：是否允许用户进行缩放，值为 no 或 yes

此外，在安卓中还支持 target-densitydpi 这个私有属性，它表示目标设备的密度等级，作用是决定 css 中的 1px 代表多少物理像素。

target-densitydpi：值可以为一个数值或 high-dpi、medium-dpi、low-dpi、device-dpi 这几个字符串中的一个

特别说明的是，当 target-densitydpi=device-dpi 时，css 中的 1px 会等于物理像素中的 1px 。因为这个属性只有安卓支持，并且安卓已经决定要废弃这个属性了，所以这个属性要避免进行使用。

其它预定义的 meta

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

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

参考资料：

重学前端 —— 第15课，HTML元信息类标签

前端学习记录

元信息标签