HTML 元信息类标签

1. 是什么？

所谓元信息，是指描述自身的信息。元信息类标签，就是 HTML 用于描述文档自身的一类标签。通常出现在 head 标签中，一般来说都不会被页面显示出来。（与此相对应的是，其他的标签，比如语义类标签，描述的是业务）。

元信息多数情况下是给浏览器、搜索引擎来阅读的，而不是给我们人类阅读的（大多数时候）。有时候这些信息会在页面之外显示，有时候不会。

2. 元信息标签概述

• head 标签

  head 标签是不携带任何的信息的，主要是用来盛放其他语义类标签的容器。

  head 标签规定了自身必须是 html 标签的第一个标签，它里面必须包含一个 title，并且最多只能包含一个 base，如果文档作为 iframe，或者有其他方式指定了文档的标题的时候，可以允许不包含 title。

• title 标签

  title 表示文档的标题。

  对比文档正文的标题标签：h1 - h6

  heading title 英文单词语义很奇妙，差不多。但是我们在使用的时候具有很大的差别。

  我们试着把以下的文字对比到title 和 h1

  • 蜜蜂求偶仪式舞蹈

    在没看答案的时候，我认为这里的答案为 title

  • 舞蹈

    在没看答案的时候，我认为这里的答案为 h1

  果然，看了答案，我是对的。

  title 作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等应用场景，这个时候往往是上下文缺失的。所以 title 应该包含完整的网页内容。

  h1 则用来展示页面，它可以有默认的上下文，并且有链接的辅助。

• base 标签

  base 标签实际上基本都不用，它是一个历史遗留的标签，作用是给页面上的相对 URL 提供一个 base url。

  实际开发中，都是使用 javascript 来代替 base 标签。

• meta 标签

  meta 标签值得说一说。

  meta 标签是一组 kv 对，它通常是一种元信息表示标签。

  在 head 中可以出现任意多个 meta 标签。一般的 meta标签由 name 和 content 两个属性来定义。name 表示元信息的名字，content 则表示元信息的值。

  eg：

  <meta name=application-name content="IsForums">
  

  这个 eg 里的 meta 意味着，这个标签所在页面的 application 名称为 IsForums。

  这里的 name是自由的，HTTP 标准制定了一些标准的 name，也鼓励大家自己搞一些 meta name 来使用。所以这个写的好，搜索引擎友好？？？

  • 具有 charset 属性的 meta

    charset 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式。建议这个标签放在 head 的第一个。

    一般情况下，HTTP 服务端会通过 http 头来指定正确的编码方式，但是有些特殊的情况如使用 file 协议打开一个 HTML 文件，则没有 http 头，这种时候，charset meta 就非常重要了。

  • 具有 http-equiv 属性的 meta

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

    具有 http-equiv 属性的 meta 标签，表示执行一个命令，这样的 meta 标签可以不需要 name 属性了。

    除了这个 content-type，下面还有一些命令。

    • content-language 指定内容的语言；
    • default-style 指定默认样式表；
    • refresh 刷新；
    • set-cookie 模拟 http 头 set-cookie，设置 cookie；
    • x-ua-compatible 模拟 http 头 x-ua-compatible，声明 ua 兼容性；
    • content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。

  • name 为 viewport 的 meta

    实际上，meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以了。

    我们来介绍一个 meta 类型，它没有在 HTML 标准中定义，却是移动端开发的事实标准：它就是 name 为 viewport 的 meta。

    这类 meta 的 name 属性为 viewport，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。

    eg:

    <meta name="viewport" content="width=500, initial-scale=1">
    

    这里只指定了两个属性，宽度和缩放，实际上 viewport 能控制的更多，它能表示的全部属性如下：

    • width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
    • height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
    • initial-scale：初始缩放比例。
    • minimum-scale：最小缩放比例。
    • maximum-scale：最大缩放比例。
    • user-scalable：是否允许用户缩放。

    对于已经做好了移动端适配的网页，应该把用户缩放功能禁止掉，宽度设为设备宽度，一个标准的 meta 如下：

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    

  • 其他预定义的 meta

    application-name：如果页面是 Web application，用这个标签表示应用名称。

    • author: 页面作者。
    • description：页面描述，这个属性可能被用于搜索引擎或者其它场合。
    • generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
    • keywords: 页面关键字，对于 SEO 场景非常关键。
    • referrer: 跳转策略，是一种安全考量。
    • theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。

  • 还有一些可能有用的 meta

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- 默认使用最新浏览器 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- 不被网页(加速)转码 -->
    <meta name="robots" content="index,follow">
    <!-- 搜索引擎抓取 -->
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- 设置苹果工具栏颜色 -->
    

    还有网友分享了 Open Graph 的标签组、Twitter 的标签组、msapplication 的标签组。用的不多，不详述了。