最熟悉的陌生人——<meta> 标签

meta 标签

元数据 Metadata

html中,每个DOM元素都有其内容模型(Content model):

An HTML element must have contents that match the requirements described in the element’s content model.

而所谓 Content 正是指该DOM元素的子项。根据 Content ,又可将DOM元素分为好几个类别,其中,Metadata content一类包含以下元素: <base> <link> <meta> <noscript> <script> <style> <template> <title>

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

meta元素用来表示那些不能由其他Metadata content类元素表示的元数据(Metadata),如页面的说明,关键字,最后修改日期等。移动互联网出现之后,其name属性中的viewport被广泛应用于移动 web。

属性

meta标签共有四个属性:

  1. charset
  2. content
  3. http-equiv
  4. name(全局属性,在<meta>中有特殊含义)
  5. itemprop(全局属性)

1.charset

The charset attribute specifies the character encoding used by the document. This is a character encoding declaration.

注意:每个html文档不能有多个具有charset属性的meta元素

关于编码详情:https://www.w3.org/TR/html51/document-metadata.html#specifying-the-documents-character-encoding

2.content

这个属性为 http-equivname 属性提供了与其相关的值的定义,其值取决于具体的上下文。

3.http-equiv

http-equiv 属性是一个可枚举属性。下表是属性可选关键字及这些关键字所映射的内容。

关键字 所映射的内容 备注
content-language Content Language 已过时。 使用<html>元素上全局的 lang 属性来替代它。
content-type Encoding declaration 已过时。推荐使用<meta charset="">。不能和含有charset属性的<meta>标签同时使用。
default-style Default style
refresh Refresh
set-cookie Cookie setter 已过时。 使用HTTP header set-cookie 来替代它。
content-security-policy Content security policy
x-ua-compatible X-UA-Compatible
  1. default-style

    用于指定首选css。

    Descriptions for attributes specific to this element

    • http-equiv = "default-style"

      Indicates that the meta element is a pragma directive that specifies the document’s preferred stylesheet.

    • content = default-style name

      Specifies the name of the document’s preferred stylesheet. The name must meet either of the following sets of constraints:

      • The name must match the value of the title attribute on a link element in the same document, and that link element must have an href attribute that references the location of a CSS stylesheet.
      • The name must match the value of the title attribute on a style element in the same document, and the contents of that element must be a CSS stylesheet.
  2. refresh

    每隔一段时间自动刷新并指向某页面,以下是使用举例

    1. 新闻网站首页可能会在页面的头元素中包含以下标记,以确保页面每五分钟自动从服务器重新加载:

      <meta http-equiv="Refresh" content="300">
      
    2. 可以将一系列页面用作自动幻灯片放映:

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

    通常防止站点脚本攻击(XSS):

    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">
    
  4. x-ua-compatible

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
    <!-- 指定IE使用最新版本渲染当前页面
     Note, the W3C validator will flag chrome=1 as an error.
    -->
    

4.name

  1. application-name

    设置 Web App 名称。可通过使用lang属性设置不同语言版本的名称。free-form string。

    <meta name="application-name" content="zhizhi">
    
  2. author

    标注网页作者。free-form string。

    <meta name="author" content="zsd,clarkzsd@gmail.com">
    
  3. description

    页面介绍。措辞应当合适,因为会在搜索引擎中显示。free-form string。

    <meta name="description" content="betahouse工作室博客">
    
  4. keywords

    页面关键字。set of comma-separated tokens。

    <meta name="keywords" content="british,typeface,font,fonts,highway,highways">
    
  5. referrer

    指定 referrer 策略

    <meta name="referrer" content="no-referrer|no-referrer-when-downgrade|origin|origin-when-crossorigin|unsafe-url">
    

    关于 referrer 策略: https://w3c.github.io/webappsec-referrer-policy/#referrer-policy

  6. theme-color

    HTML 规范定义:

    The value must be a string that matches the CSS color production, defining a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. For example, a browser might color the page's title bar with the specified value, or use it as a color highlight in a tab bar or task switcher.

    不过现在只有 Android 上面的 Chrome 支持 theme-color。

    Support for theme-color in Chrome 39 for Android

    theme-color in chrome

    注意:nametheme-colormeta元素只能出现一次。

  7. generator

    The value must be a free-form string that identifies one of the software packages used to generate the document. This value must not be used on pages whose markup is not generated by software, e.g. pages whose markup was written by a user in a text editor.

    例子:

    <!-- 
    	Here is what a tool called "Frontweaver" could include in its output, in the page's head element, to identify itself as the tool used to generate the page:
    -->
    <meta name=generator content="Frontweaver 8.2">
    

    在过去,某些网站编辑器(如 FrontPage)会在创建新的HTML文档或使用它们发布站点时自动插入生成器标签。这被认为是指“此页面是使用FrontPage创建的”。现在几乎不使用……

  8. Other metadata names

    任何人都可以创建并使用自己的扩展 metadata name。

    详情:https://html.spec.whatwg.org/multipage/semantics.html#other-metadata-names

  9. viewport

    viewport 指的是 web 的可视区域。在不同的设备上,viewport 都不同。

    meta viewport标签首先是由 Apple 在其 safari 浏览器中引入的,目的是解决移动设备的 viewport 问题。后来其他各大厂商纷纷也引入了对 viewport 的支持。

    这个特性虽然被广泛使用,但仍然未被标准化。(在 w3c 规范中翻了好久没翻出来。。。)

Value 可能值 描述
width 一个正整数或者字符串 device-width defines the width, in pixels, of the viewport
height 一个正整数或者字符串 device-height defines the height, in pixels, of the viewport
initial-scale 一个0.010.0之间的正数 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
maximum-scale 一个0.010.0之间的正数 defines the maximum value of the zoom; it must be greater or equal to the minimum-scale or the behavior is indeterminate.
minimum-scale 一个0.010.0之间的正数 defines the minimum value of the zoom; it must be smaller or equal to the maximum-scale or the behavior is indeterminate.
user-scalable 一个布尔值(yes 或者no) If set to no, the user is not able to zoom in the webpage. Default value is yes.

Learn more about viewport

参考

Show Comments