head标签本身不携带仍和信息,主要是作为盛放其他语义类标签的容器使用。head必须是HTML标签中的第一个标签,内容必须包含title,并且最多只能包含一个base。如果文档作为iframe,或者有其他方式制定了文档标题时,可以不包含title标签。
meta
meta是一组键值对,是一种通用的元信息表示标签。在head中可以出现任意多个meta标签。一般的meta由name和content两个属性来定义。name表示元信息的名,content表示元信息的值。
具有charset属性的meta标签无需再有name和content。一般情况下,HTTP服务端会通过HTTP头来指定正确的编码方式,但是没有HTTP头的时候charset meta就十分重要。
<meta charset="UTF-8"> |
具有http-equiv属性的meta标签表示执行一个命令,可以不需要name属性。下面的meta标签相当于添加了content-type这个HTTP头,并且指定了HTTP编码方式。其他命令有:
- content-language:指定内容的语言
- default-style:指定默认样式表
- refresh:刷新
- set-cookie:模拟HTTP头set-cookie
- x-ua-compatible:模拟HTTP头x-ua-compatible,声明ua兼容性
- content-security-policy:模拟HTTP头content-security-policy,声明内容安全策略
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
name为viewport的meta,content是用逗号分隔的键值对,它不在标准中定义但是移动端开发的标准。下面的meta标签指定了宽度和缩放两个属性。它能表示的属性有:
- width:页面宽度,可以是数字也可以是device-width,表示与设备宽度相等
- height:页面高度,可以是数字也可以是device-height,表示与设备高度相等
- initial-scale:初始缩放比例
- minimum-scale/maximum-scale:最小/最大缩放比例
- user-scalable:是否允许用户缩放
<meta name="viewport" content="width=500, initial-scale=1"> |
其他预定义的meta:
- author:页面作者
- description:页面描述
- generator:生成页面所使用的工具,主要用于可视化编辑器,若是手写HTML则不需要
- keywords:页面关键字,用于SEO
- referrer:跳转策略,是安全考量
- theme-color:页面风格颜色,不会影响页面,但浏览器可能据此调整页面之外的UI,比如窗口边框或TAB的颜色