HTML元信息类标签简述

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

head标签

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

head表i请安规定了自身必须是html标签中的第一个标签，他内容必须包含一个title，除非文档作为iframe或者其他指定了文档标题时可以不包含title。

title标签

表示文档的标题。作为元信息，可能会被用于浏览器收藏夹、微信推送卡片、微博等各种场景，所以title应该完整的概括整个网页内容。

base标签

历史遗留标签，作用给页面上所有的URL加一个基础地址，只能有一个base标签。实际开发中一般不再使用。

meta标签

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

在head中可以出现多个meta标签，一般是meta标签由name和content两个属性来定义。

它的基本用发如下所示：

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

具有charset属性的meta

<meta charset='UTF-8'>

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

具有http-equiv属性的meta

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

除了content-type，还有几种命令：

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

name为viewport的meta

它是移动端开发的事实标准

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

这里指定两个属性，宽度和缩放，实际上他还有很多属性：

• width 页面宽度
• height 页面高度
• initial-scalse 初始缩放比例
• 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

• author 作者
• description 描述
• generator 生成页面所用的工具
• keywords 页面关键字，用于seo场景
• referrer 跳转策略
• theme-color 风格颜色