本帖最后由 一车水萝卜 于 2019-7-24 17:21 编辑
![]()
元信息类标签——就是HTML用于描述文档自身的一类标签，它们通常出现在head标签中，一般都不会在页面被显示出来。 多数的情况是给浏览器、搜索引擎等机器阅读的，有时候这些信息回在页面之外显示给用户，有时候则不会。
head标签 head标签本身不携带任何信息，它主要作为盛放其它语义类标签的容器使用。 head标签规定了自身必须是html标签中的第一个标签，内容中必须包含一个title，最多只能包含一个base。如果文档作为iframe,或者有其他方式指定了文档标题时，可以允许不包含title标签。
title标签 title标签表示文档的标题，从字面上就非常容易理解。然而语义类标签中有一组表示标题的标签：h1~h6。 英文单词heading和title的词义区分十分微妙,在中文中找不到对应的词汇来区分，但在实际应用中，还是有去别的。 title作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等各种场景，这个时候往往时上下文缺失的，所以title应该时完整地概括整个网页内容地。 而h1则仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写，即便无法概括全文，也不会有太大地影响。
base标签 base标签是给页面上所有的URL相对地址提供一个基础。base标签最多只有一个，它改变全局地链接地址，是一个非常危险地标签，容易造成跟JavaScript地配合问题，在实际开发中，可以用JavaScript来代替base标签。
meta标签 meta标签是一组键值对，是一种通用地元信息表示标签。 在head中可以出现任意多个meta标签。一般地meta标签由name和content两个属性来定义。name表示元信息的名，content 表示元信息地值。其中name是一种比较自由地约定，HTTP标准规定了一些name作为大家使用地共识，也鼓励大家发明自己的name来使用。
![]()
除了基本用法，meta 标签还有一些变体，主要用于简化书写方式或者声明自动化行为。
1、具有 charset 属性的 meta 从 HTML5 开始，为了简化写法，meta 标签新增了 charset 属性。添加了 charset 属性的 meta 标签无需再有 name 和 content。 <meta charset="UTF-8" >
<meta charset="UTF-8" >
charset 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式。因此，meta标签放在 head 的第一个。
<html><head><meta charset="UTF-8">……
这样，浏览器读到这个标签之前，处理的所有字符都是 ASCII 字符，众所周知，ASCII 字符是 UTF-8 和绝大多数字符编码的子集，所以，在读到 meta 之前，浏览器把文档理解多数编码格式都不会出错，这样可以最大限度地保证不出现乱码。
一般情况下，HTTP 服务端会通过 http 头来指定正确的编码方式，但是有些特殊的情况如使用 file 协议打开一个 HTML 文件，则没有 http 头，这种时候，charset meta 就非常重要了。
2、具有 http-equiv 属性的 meta 具有 http-equiv 属性的 meta 标签，表示执行一个命令，这样的 meta 标签可以不需要 name 属性了。 例如，下面一段代码，相当于添加了 content-type 这个 http 头，并且指定了 http 编码方式。
<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，声明 ua 兼容性； content-security-policy 模拟 http 头 content-security-policy，声明内容安全策略。
3、name 为 viewport 的 meta 实际上，meta 标签可以被自由定义，只要写入和读取的双方约定好 name 和 content 的格式就可以了。 viewport 的 meta 类型，它没有在 HTML 标准中定义，却是移动端开发的事实标准，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value。 例如：
<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">
4、其它预定义的 meta 在 HTML 标准中，还定义了一批 meta 标签的 name，可以视为一种有约定的 meta，可以简单了解一下。
application-name：如果页面是 Web application，用这个标签表示应用名称。 author: 页面作者。 description：页面描述，这个属性可能被用于搜索引擎或者其它场合。 generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。 keywords: 页面关键字，对于 SEO 场景非常关键。 referrer: 跳转策略，是一种安全考量。 theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI（如窗口边框或者 tab 的颜色）。
![]()
结语 元信息仅仅是对页面的描述，掌握它们可以使我们编写的页面跟各种浏览器、搜索引擎等结合地更好。
| 
收藏
淘帖
踩
