重学前端----HTML元信息类标签----寒冬winter
来自 重学前端--------寒冬Winter
今天要讲的是元信息类标签
所谓页面元信息类标签，就是指描述自身的信息。元信息类标签一般不会被页面所显示出来。
元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，而有的时候不会。
head标签
html中的head标签本身一般来说是不携带任何信息的，它主要是作为盛放其它语义类标签的容器使用。
它的内容必须包含一个title，并且最多只能包含一个base。如果文档作为iframe，或者其他方式指定了文档的标题的时候，可以不包含title标签。
title标签
title作为元信息，可能会被用在浏览器收藏夹、微信推送卡片、微博等应用场景。这个时候往往是上下文缺失的。所以，title应该是完整地概括整个网页内容。h1这种则可以简写，因为它有默认上下文。
base标签
不太重要，历史遗留。改变全局的链接地址，是一个非常危险的标签，容易造成JS配合的问题。日常开发中，用JS代替base标签比较好。
meta标签
这个就比较重要了，meta标签是一组键值对，它是一种通用的元信息表示标签。
meta标签由name和content两个属性来定义。name表示元信息的名，content表示元信息的值。
<meta name=application-name content="IsForums">
这里的 name 是一种比较自由的约定，http 标准规定了一些 name 作为大家使用的共 识，也鼓励大家发明自己的 name 来使用。除了基本用法，meta 标签还有一些变体，主要用于简化书写方式或者声明自动化行为。
具有 charset 属性的 meta
从 HTML5 开始，为了简化写法，meta 标签新增了 charset 属性。添加了 charset 属性 的 meta 标签无需再有 name 和 content。
charset 型 meta 标签非常关键，它描述了 HTML 文档自身的编码形式。因此，我建议这个标签放在 head 的第一个。
<html>
<head>
<meta charset="UTF-8">
具有 **http-equiv 属性的 meta
下面一段代码，相当于添加了 content-type 这个 http 头，并且指定了 http 编码 方式。
<meta http-equiv="content-type" content="text/html"; charset="UTF-8">
除了 content-type，还有以下几种命令:
- 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="viewport" content="width=500, initial-scale=1">
- 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.0, minimum-scale=1,maximum-scale=1">
其他预定义的meta
application-name
- author: 页面作者。
- description:页面描述，这个属性可能被用于搜索引擎或者其它场合。
- generator: 生成页面所使用的工具，主要用于可视化编辑器，如果是手写 HTML 的网页，不需要加这个 meta。
- keywords: 页面关键字，对于 SEO 场景非常关键。
- referrer: 跳转策略，是一种安全考量。
- theme-color: 页面风格颜色，实际并不会影响页面，但是浏览器可能据此调整页面之外的 UI(如窗口边框或者 tab 的颜色)。
