HTML中常用的meta元素

作者：彭志明
日期：2017年4月29日

本文主要针对常用的meta元素的http-equiv，content属性值对以及name，content属性值对的作用进行说明。

一.http-equiv,content属性值对

http-equiv属性http-equiv 属性提供了content属性的信息/值的 HTTP头(即http response header), 目前常用值有content-type,default-style,refresh,另外还有X-UA-Compatible，各自有对应的content属性值，以下各自分析其作用：

1. http-equiv="content-type"用于规定文档字符编码，此时content属性值常为UTF-8（unicode字符编码）或ISO-8859-1（拉丁字母字符编码）,HTML5中常用charset属性来定义编码方式
   eg:<meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <meta charset="UTF-8">

2. http-equiv="default-style",规定要使用的预定义的样式表，此时content值必须匹配同一文档中的一个 link 元素上的 title 属性的值，或者必须匹配同一文档中的一个 style 元素上的 title 属性的值
   eg:<meta http-equiv="default-style" content="the document's preferred stylesheet">

3. http-equiv="refresh"定义文档自动刷新的时间间隔，此时content属性值为表示时间的数字,但是此属性会导致页面不受用户控制，应当谨慎使用
   eg:<meta http-equiv="refresh" content="300">

4. http-equiv="X-UA-Compatible"指定以何种IE版本渲染网页，出现在IE8之后，content值有"IE=edge,chrome=1"表示使用最新版IE且在支持时使用Chrome Frame，而IE=6,IE=7,IE=8等等分别表示使用默认IE版本
   eg:<meta http-equiv="X-UA-Compatible" content="edge">
   <meta http-equiv="X-UA-Compatible" content="IE6">
   <meta http-equiv="X-UA-Compatible" content="IE7">
   <meta http-equiv="X-UA-Compatible" content="IE8">

二.name,content属性值对

文档中常用name 属性来定义一个 HTML 文档的描述、关键词、作者等元数据信息，content属性值即为相应信息；name属性常用值有application-name，author，description，generator，keywords,以及renderer,viewport，referrer详情见下：

1. name="application-name"规定页面所代表的 Web 应用程序的名称

2. name="author"规定文档的作者的名字
   eg: <meta name="author" content="Hege Refsnes">

3. name="description"规定页面的描述。搜索引擎会把这个描述显示在搜索结果中
   eg:<meta name="description" content="Free web tutorials">

4. name="generator"规定用于生成文档的一个软件包（不用于手写页面）。
   eg:<meta name="generator" content="FrontPage 4.0">

5. name="keywords" 规定一个逗号分隔的关键词列表,每个关键词用于告诉搜索引擎本页面与什么相关
   eg:<meta name="keywords" content="HTML, meta tag, tag reference">

6. name="renderer"控制浏览器选择何种内核渲染，content值有webkit默认极速核，ie-comp即ie兼容核，ie-stand即ie标准内核
   eg:<meta name="renderer" content="webkit">
   <meta name="renderer" content="ie-comp">
   <meta name="renderer" content="ie-stand">

7. name="viewport"能优化移动浏览器的显示,content中可对多个页面属性进行设置，width：宽度，height：高度，initial-scale：初始的缩放比例，minimum-scale：允许用户缩放到的最小比例，maximum-scale：允许用户缩放到的最大比例，user-scalable：用户是否可以手动缩放(no,yes)
   eg:<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

8. name="referrer"控制是否发送引用数据，content有五种值：
   (1)no-referrer:表示不发送引用数据,
   (2)no-referrer-when-downgrade:仅当发生协议降级（如 HTTPS 页面引入 HTTP 资源，从 HTTPS 页面跳到 HTTP 等）时不发送 Referrer 信息,
   (3)origin发送只包含 host 部分的 Referrer,
   (4)origin-when-crossorigin:仅在发生跨域访问时发送只包含 host 的 Referrer，同域下还是完整的,
   (5)unsafe-url:无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送 Referrer 信息
   eg:<meta name =“referrer”content =“no-referrer”>
   <meta name =“referrer”content =“no-referrer-when-downgrade”>
   <meta name =“referrer”content =“origin”>
   <meta name =“referrer”content =“origin-when-crossorigin”>
   <meta name =“referrer”content =“unsafe-url”>

三.参考资料

1. W3C html5 meta属性https://www.w3.org/TR/html5/document-metadata.html#the-meta-element

2. 菜鸟教程 HTML 常用头部标签（meta）http://www.runoob.com/w3cnote/html-meta-intro.html

3. 菜鸟教程 常用meta整理
   http://www.runoob.com/w3cnote/meta.html

4. The Meta Referrer Tag: An Advancement for SEO and the Internet
   https://moz.com/blog/meta-referrer-tag

5. Referrer Policy 介绍
   https://imququ.com/post/referrer-policy.html