HTML <meta> 元素

HTML<meta>元素表示各种元数据信息。

元数据（Metadata），又称中介数据、中继数据，是用来描述数据的数据。通过元数据我们通常能够大致了解其描述的具体数据的相关信息。 比如我们面试时都要填写的登记表，其中的姓名、性别、年龄、学历等都属于元数据，这些数据能够精确描述应聘者。

通过 meta 元素提供一组描述网页相关信息的元数据：

<!--taobao-->
<meta name="spm-id" content="a21bo" />
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />

meta 元素属性: name、http-equiv、content、charset

• charset

  指定文档使用的字符编码

  eg: <meta charset="utf-8">

• content

  与 name 或 http-equiv 属性配合使用，给出了文档元数据或编译指令的值

• name

  name属性指定设置的是哪方面的元数据，如果这个meta元素没有content属性，那么这组元数据的值是空字符串。

  标准元数据名（name值）：（大小写不敏感）

  • application-name：Web 应用的名字，必须使用 lang 属性来指定该 Web 应用的每个名字的语言。
  • author：作者的名字
  • description：描述本页面
  • generator：产生该文档的软件包
  • keywords：页面的关键字

  • referrer：文档的引用策略

    enum ReferrerPolicy { “”, “no-referrer”, “no-referrer-when-downgrade”, “same-origin”, “origin”, “strict-origin”, “origin-when-cross-origin”, “strict-origin-when-cross-origin”, “unsafe-url” };

  • theme-color：为用户代理定义了一个建议的颜色， 用来自定义该页面或周边 UI 的显示。例如，浏览器可能会用指定的颜色渲染页面的标题栏， 或者把它作为任标签栏或务栏的高亮颜色

  自定义元数据名称: 任何人都可以对预定义的元数据名称集合进行 扩展， 创建和使用自己的元数据

• http-equiv (编译指令)

  定义了能改变服务器和用户引擎行为的编译项，这个编译项的值使用 content 属性来定义。

  枚举值：

  • “content-security-policy”内容安全策略

    它允许页面作者定义当前页的 内容策略。 内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。

  • content-language、content-type、set-cookie (废弃/不支持)

  • default-style 指定默认 CSS 样式表集的 name属性值

    指定在页面上使用的首选样式表. content 属性必须包含 <link> 元素的标题, href 属性链接到CSS样式表或包含CSS样式表的

  • refresh：设置重定向倒计时

    <meta http-equiv="Refresh" content="300">
    <meta http-equiv="Refresh" content="20; URL=page4.html">
    

  • x-ua-compatible：建议IE尽量兼容规范，content 值只能是 IE=edge

    <meta http-equiv="x-ua-compatible" content="IE=edge">

参考：MDN <meta>、WHATWG

附

<!--github-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="fb:app_id" content="1401488693436528">
<meta property="og:url" content="https://github.com">
<meta property="og:site_name" content="GitHub">
<meta property="og:title" content="Build software better, together">
<meta property="og:description" content="GitHub is where people build software. More than 31 million people use GitHub to discover, fork, and contribute to over 100 million projects.">
<meta property="og:image" content="https://github.githubassets.com/images/modules/open_graph/github-logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="1200">
<meta name="analytics-location" content="/dashboard" data-pjax-transient="true" />
<meta name="hostname" content="github.com">
<meta name="user-login" content="CQByte">
<meta name="theme-color" content="#1e2327">
...

<!--google-->
<meta charset="UTF-8">
<meta content="origin" name="referrer">
<meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
<meta content="origin" name="referrer">