HTML元信息类标签

我们可以先来了解一下什么是元信息类标签。所谓元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来。

元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。

（引用Winter的解释,很合理）

以下是几个常用的标签

head

head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。

head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title。如果文档作为 iframe，或者有其他方式指定了文档标题时，可以允许不包含 title 标签。

title

title 标签表示文档的标题，应该是完整地概括整个网页内容的。

meta

meta 标签是一组键值对，它是一种通用的元信息表示标签。

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

基本写法

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

具有 charset 属性的 meta

  <meta charset="UTF-8">

从 HTML5 开始，为了简化写法，meta 标签新增了 charset 属性。添加了 charset 属性的 meta 标签无需再有 name 和 content。

charset 型 meta 标签描述了 HTML 文档自身的编码形式。建议这个标签放在 head 的第一个，以防文档出现乱码

name 为 viewport 的 meta

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

这个meta类型没有在HTML中标准定义，但是是移动开发中的事实标准(就是行业内的一个约定俗成的写法)。他的content是一个复杂结构，值是用逗号分隔的键值对，格式是key=value。

viewport能够控制的全部属性：

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

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

上述的meta标签写法普遍用于做移动端适配: 禁止用户缩放，将宽度设为设备宽度。

其他meta写法(一些常见的)

• author: 页面作者。
• description：页面描述，一般被用于搜索引擎。
• keywords: 页面关键字，SEO 场景用的较多。
• referrer: 跳转策略，是一种安全考量。