HTML 中常用的 meta 元素

初看这个标题很容易理解错误，这里的meta元素不仅仅指的是<meta>，而是指元信息（meta information），即

头元素包含关于文档的概要信息，也称为元信息，元信息是关于信息的信息。

明白这一点以后，我们就可以总结一下常用的meta元素有哪些了。

<title>

<title>元素定义文档的标题，显示在标题栏或者标签页上。

属性
全局属性
使用环境
必须要有开始标签和结束标签，如果没有结束标签</title>，将会导致浏览器或略掉页面剩余的标签。
一个<head>元素只能包含一个<title>元素

<base>

<base>表示文档中所有相对url地址的基础url

属性
- 全局属性
href
该属性值允许绝对URL和相对URL
target

为没有显示target引用属性的元素指定一个名字或关键字，当元素的超链接或导致导航的形式被激活时，指定显示结果的默认位置

以下是关键字的含义：
1. _self:表示在当前窗口打开链接，是target属性的默认值

_blank：表示在新的窗口打开链接

_parent: 表示在当前窗口的父级窗口打开链接，如果没有父级窗口，就和_self一样

_top:载入结果到顶级浏览上下文（该浏览上下文是当前上下文的最顶级上下文）。如果没有父级，该选项的行为和_self一样。

如果含有多个包含href或者target的元素，则只有第一个有效,所以<base>元素必须写在所有属性值是URL的元素之前。另外href和target两个属性必须要使用其中一个或者都用。

<link>

<link>元素用来链接css等外部资源

属性
全局属性
charset：定义被链接资源的字符编码
crossorigin
disabled:用来启用或禁用多个样式表链接
href :用来指定被链接资源的URL，这个属性必须存在且要包含有效的url，如果不存在则不定义链接
hreflang:指明被链接资源的语言
integrity
meida：指定链接资源适用的媒体，例如：print(打印)、handheld（手持设备）
methods
rel:表明链接文档与当前文档的关系。最常见的值：stylesheet
rev
sizes
target
type:表示链接的内容类型，例如：text/css

<meta>

MDN HTML元素参考中关于<meta>的概述：

<meta>元素表示那些不能由其它HTML元相关元素 <base>、<link>、<style>或<title>之一表示的任何元数据信息.

<meta>可以提供一些页面的元信息，这些元信息可以分为以下几种：

<name>：把整个文档关联一个名称
可以设定的值有
- keywords:页面关键字
- description：页面描述
- robots：搜索引擎索引方式
- author：网页作者

更多值可在MDN HTML meta元素概述中找到
特别说明name的一个可选值—viewport。这个属性在响应式设计中有很大用处，具体可以看：Viewport Meta标签

<http-equiv>：把 content属性关联到HTTP头部
可以设定的值有：
content-type / expire /refresh / set-cookie
<charset>:声明网页字符集
<itemprop>:将定义一个用户自定义的元数据
属性
charset: 声明html文档使用的字符编码，但是这个声明可以被任何一个元素的
content：定义与http-equiv或者name属性相关的元信息，是<meta>标签的必要属性
其它
还有一些只有在特定浏览器里才能发挥作用的<meta>。例如:

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<!-- 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident） -->
<meta name="renderer" content="webkit" />

HTML5 spec-the meta element
博文 <meta>详解

<style>

MDN HTML元素参考中关于<style>的概述：

<style>元素包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内，通常是CSS的格式。

属性
type：默认值为text/css
media : 制定某个媒体使用该样式
scoped：如果该属性存在，则样式应用于其父元素；如果不存在，则应用于整个文档。
title：这里的title属性和别的地方不太一样，这里代表的意思是可选指定样式表
disabled ：如果使用了这个属性，则禁用了此样式

以上总结的是常用的meta元素，这些属性有些共同特点，其中重要的两点就是：

它们都在<head>元素里面
都不显示在呈现的页面上

在我看来，它们在html文档“低调”但是同时又非常重要，这些标签都比较抽象，需要我们多花点功夫了解熟悉。