HTML 元信息类标签

什么是元信息类标签？

• 所谓元信息，是指描述自身的信息，元信息类标签，就是 HTML 用于描述文档自身的一类标签，它们通常出现在 head 标签中，一般都不会在页面被显示出来。
• 元信息多数情况下是给浏览器、搜索引擎等机器阅读的，有时候这些信息会在页面之外显示给用户，有时候则不会。

head 标签

• head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器使用。
• head 标签规定了自身必须是 html 标签中的第一个标签，它的内容必须包含一个 title，并 且最多只能包含一个 base。如果文档作为 iframe，或者有其他方式指定了文档标题时， 可以允许不包含 title 标签。

title 标签

• title 标签表示文档的标题。
• title 应该是完整地概括整个网页内容的。
• h1 ~ h6 则仅仅用于页面展示，它可以默认具有上下文，并且有链接辅助，所以可以简写， 即便无法概括全文，也不会有很大的影响。

base 标签

• base 标签的作用是给页面上所有的 URL 相对地址提供一个基础。
• base 标签最多只有一个，它改变全局的链接地址，是一个非常危险的标签，容易造成跟 JavaScript 的配合问题，所以在实际开发中，建议使用 JavaScript 来代替 base 标签。

meta 标签

• meta 标签是一组键值对，它是一种通用的元信息表示标签。
• 在 head 中可以出现任意多个 meta 标签。
• 一般的 meta 标签由 name 和 content 两个属性来定义。name 表示元信息的名，content 则用于表示元信息的值。

// 基本用法
<meta name="application-name" content="lsForums">

// 具有 charset 属性的 meta，描述了 HTML 文档自身的编码形式
// 建议这个标签放在 head 的第一个
<meta charset="UTF-8" >

// 具有 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，声明 ua 兼容性
content-security-policy：模拟 http 头 content-security-policy，声明内容安全策略
*/

// name 为 viewport 的 meta，是移动端开发的事实标准，它的 content 是一个复杂结构，是用逗号分隔的键值对，键值对的格式是 key=value
<meta name="viewport" content="width=500, initial-scale=1">
/*
width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度 相等。
initial-scale：初始缩放比例
minimum-scale：最小缩放比例
maximum-scale：最大缩放比例
user-scalable：是否允许用户缩放
*/

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