head里的标签

head里的标签

• head：元信息的容器。
• title：文档标题。
• base：页面的基准 URL。
• meta: 元信息通用标签。

meta 标签

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

name 表示元信息的名，content 则用于表示元信息的值。

具有 charset 属性的 meta

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

添加了 charset 属性的 meta 标签无需再有 name 和 content。
ASCII 字符是 UTF-8 和绝大多数字符编码的子集

具有 http-equiv 属性的 meta

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

相当于添加了 content-type 这个 http 头，并且指定了 http 编码方式。

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

移动端开发的事实标准

指定了两个属性，宽度和缩放

全部属性:

• width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
• height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
• initial-scale：初始缩放比例。
• minimum-scale：最小缩放比例。
• maximum-scale：最大缩放比例。
• user-scalable：是否允许用户缩放。

对于已经做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的 meta 如下：

其它预定义的 meta

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

重学前端笔记