Netherspite

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的颜色

 评论