meta标签学习笔记

meta标签作用

  meta标签提供了title、base、link、style和script等标签无法提供的html文档元数据信息。

元数据

  元数据是用来描述数据的数据。html文档的元数据包括文档作者、描述、关键词、视口大小等信息。html文档的元数据不会展示在页面上,但会被浏览器或者其他web服务解析。

meta标签属性

  meta标签主要有以下四个属性:
  (1)charset。该属性用来设置html文档的编码类型,如utf-8。每个html文档最多只能包含一个设置了charset属性的meta标签。
  (2)http-equiv。该属性用来模拟http响应头的键值信息。
  (3)name。该属性用来设置html文档元数据的名字。
  (4)content。该属性用来设置html文档元数据的值。

meta标签用法

  每个meta标签只能设置charset、http-equiv、name三个属性中的一个,对于单个meta标签而言,它们是互斥的。name属性和http-equiv属性必须和content属性配对使用。

name取值

  标准的name属性值主要有6个:
  (1)application-name。当name取值为application-name时,content属性值必须设置为当前网页代表的web应用的名字。需要注意的是,在当前网页不是一个web应用的情况下,name属性不能取值为application-name。
  (2)author。当name取值为author时,content属性值代表的是网站的作者。
  (3)description。当name取值为description时,content属性值代表的是对当前网页的描述。设置description有利于网页的SEO。一个html文档最多只能由一个meta标签设置description。
  (4)generator。当name取值为generator时,content属性值记录了用来生成该文档的工具信息。当文档不是由工具生成时,无需使用meta标签设置generator信息。
  (5)keywords。当name取值为keywords时,content属性值代表了当前html文档的关键词信息,多个关键词可以使用逗号分隔。设置keywords有利与网页的seo。
  (6)referrer。当name取值为referrer时,content属性值对应于从当前页面跳转到其他页面时,http请求的referrer策略。content取值与http请求的referrer策略及对应的http请求头部的Referer字段取值对应如下:

content取值 referrer策略 Referer字段取值
never no-referrer 删除Referer字段
default no-referrer-when-downgrade 如果当前页面使用的是https协议,跳转的页面使用的是http协议,则取值为空。如果当前协议与跳转页面使用的协议一致,则取值为当前页面url的协议、域名、请求参数这三个值拼成的uri
always unsafe-url 当前页面url的协议、域名、请求参数拼成的uri
origin-when-crossorigin origin-when-cross-origin 跨域时取值与Origin字段一致,不是当前页面的完整url,只是协议和域名拼成的uri

  上述6个值是html标准规定的name取值。name属性还可以设置为可以被现代浏览器识别的其他非标准值,比如viewport。下面的meta标签设置页面的viewport宽度与设备宽度相同。

1
<meta name="viewport" content="width=device-width">

http-equiv取值

  http-equiv取值主要有5个:
  (1)content-language。当http-equiv取值为content-language时,content属性值代表了当前页面所采用的语言类型。设置网页为中文的示例:

1
<meta http-equiv="content-language" content="zh-CN">

  html5标准文档并不推荐使用content-language来设置网页语言类型,推荐使用html标签的lang属性代替。使用lang属性设置网页为中文的示例如下:

1
<html lang="zh-CN"></html>

  (2)content-type。当http-equiv取值为content-type时,content属性取值展示了网页的编码字符集。设置网页为utf-8编码的示例如下:

1
<meta http-equiv="content-type" content="text/html;charset=utf-8">

  推荐使用meta标签的charset属性来替换http-equiv的该功能。使用charset属性设置网页编码字符集的示例如下:

1
<meta charset="utf-8">

  (3)default-style。当http-equiv取值为default-style时,content属性值设定了要使用的预定义样式表。content属性取值为当前html文档某一个外链了样式表的link标签的title属性值或某一个style标签的title属性值。
  (4)refresh。当http-equiv取值为refresh时,content属性值为页面重定向的时间间隔。如设置页面每隔1s自动刷新一次:

1
<meta http-equiv="refresh" content="1">

  页面1s后重定向到百度首页示例:

1
<meta http-equiv="refresh" content="1;url=baidu.com">

  (5)set-cookie。当http-equiv取值为set-cookie时,content属性值用来设置网页的cookie。html标准文档并不推荐使用这种方法来设置网站的cookie。

参考文献

  1. https://www.w3.org/TR/html5/document-metadata.html
  2. https://www.w3schools.com/Tags/tag_meta.asp
  3. https://951759534.github.io/2017/06/06/%E5%85%B3%E4%BA%8Emeta%E7%9A%84referer%E5%B1%9E%E6%80%A7/
  4. https://www.jianshu.com/p/1f9c71850299
  5. https://www.jianshu.com/p/3afaf3f00096