HTML 的 meta 标签

最后更新：
阅读次数： 次
许可协议： 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议

我们先来看看维基百科上对 meta element 的定义：

Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page.

这里提到了 metadata ，中文译过来是元数据，它指的是用来描述数据的数据！

Metadata is “data that provides information about other data”.

那么 meta 标签有什么用呢？维基百科上是这样说的：

The meta element has two uses: either to emulate the use of an HTTP response header field, or to embed additional metadata within the HTML document.

meta 标签可以为 HTML 文档嵌入表示 HTML 页面的元信息，还可以模拟一个 HTTP 响应头部（例如重定向到不同页面）。

在 HTML 发展到 HTML4.01 和 XHTML的过程中，meta 标签只有四个有效的属性：content，http-equiv，name，scheme！在 HTML5 到来了以后，meta 标签又新增加了一个属性：charset。

但是请注意：HTML5的meta标签不支持scheme 属性。

  • content ：给出了与 http-equiv 或 name 属性相关的值
  • http-equiv ：用于模拟一个 HTTP 响应头
  • name ：规定元数据的名称
  • scheme ：设置或返回用于解释 content 属性的值的格式
  • charset ：规定 HTML 文档的字符编码(HTML5 新属性)

charset 属性

charset 是 HTML5 中的新属性，它规定了 HTML 文档的字符编码，替代了之前规定 HTML 文档字符编码的方法。

<!-- 旧的规定字符编码的方法，不建议使用 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- 使用这个! -->
<meta charset="utf-8" 　 />

name 属性

  • name 属性的语法格式：
<meta name="参数" content="具体的描述" />
  • 参数：keywords
    功能：标明你网页的关键字
<meta name="keywords" content="关键词1,关键词2,关键词3..." />
<meta name="description" content="不超过150个字符" />
  • 参数：language
    功能：标明你网页内容使用的语言
<meta name="language" content="zh-CN" />
  • 参数：author
    功能：标注网页的作者
<meta name="author" content="作者的相关信息" />
  • 参数：generator
    功能：标明制作该网页所使用的软件或工具
<meta name="generator" content="Sublime Text3" />
  • 参数：copyright
    功能：标注版权信息
<!-- 不推荐使用 -->
<meta name="copyright" content="版权信息" />
  • 参数：robots
    功能：定义搜索引擎爬虫的索引方式
<meta name="robots" content="参数1,参数2" />

content 通常有如下几种取值：none，noindex，nofollow，all，index和follow。

  • none 搜索引擎将忽略此网页，等价于 noindex，nofollow。
  • noindex 搜索引擎不索引此网页。
  • nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
  • all 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于 index，follow。
  • index 搜索引擎索引此网页。
  • follow 搜索引擎继续通过此网页的链接索引搜索其它的网页。
  • 注：如页面没有定义该标签，则默认是

http-equiv 属性

  • http-equiv 的语法格式：
<meta http-equiv="参数" content="具体的描述" />
  • 参数：content-Type
    功能：定义网页的字符编码方式(不推荐使用，推荐使用 HTML5 的 charset 属性)
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
  • 参数：X-UA-Compatible
    功能：用于告知浏览器以何种版本来渲染页面(一般都设置为最新模式)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
  • 参数：cache-control
    功能：指导浏览器如何缓存某个响应以及缓存多长时间
<meta http-equiv="cache-control" content="参数" />

content 通常有如下几种取值：

  • no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
  • no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
  • public : 缓存所有响应，但并非必须。因为 max-age 也可以做到相同效果
  • private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说 CDN 就不允许缓存 private 的响应）
  • maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60 表示响应可以再缓存和重用 60 秒
  • 参数：expires
    功能：指定网页在缓存中的过期时间，过期后网页必须到服务器上重新传输
<meta http-equiv="expires" content="date" />

<!-- 注意：date必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期) -->
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" />
<meta http-equiv="expires" content="0" /><!-- Disable caching -->
  • 参数：refresh
    功能：网页将在设定的时间内，自动刷新并调向设定的网址
<meta http-equiv="refresh" content="5" />
<!-- 5秒后自动刷新页面 -->
<meta http-equiv="refresh" content="5；URL=http://www.baidu.com/" />
<!-- 5秒后自动跳转到指定的链接 -->

scheme 属性

注：HTML5不支持scheme属性。

<!-- 功能：设置或返回用于解释 content 属性的值的格式 -->
<meta name="date" content="2009-01-02" scheme="YYYY-MM-DD" />
<meta name="identifier" content="0-2345-6634-6" scheme="ISBN" />

说了这么多，其实以上内容只是 meta 标签的一部分内容，我以后再遇到别的有用的内容的话，会补充添加到这篇文章内的。

至于移动端使用到的 meta 标签，我会在下一篇文章中做出总结！^_^

参考资料