HTML基础知识巩固复习之meta（元数据）

 首先，我要知道mate标签是什么，有什么作用

一、我们应该理解什么是元数据 ？ 

元数据（metaData）：描述数据的数据就是元数据，关于该文件或对象的一切信息都是元数据。

比如：  一张照片的信息：拍照的日期时间，相机设置，地理位置，图片上的文字图画。

一个文件的创建时间，大小(多少字节)，他的问题件路径，名称，类型

再比如：今天天气36℃，很热，很热就是36℃的元数据。

二、理解meta标签

meta标签就是提供了HTML文档的元数据。常用语指定网页的描述，关键字，文件最后修改的时间。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。

meta的属性

1. charset : 用于规定html文档的字符编码，则其值必须是字符串 "utf-8" 的不区分 ASCII 大小写的匹配，因为 UTF-8 是 HTML5 文档的唯一有效编码。
2. name：把 content 属性关联到一个名称。
3. content：定义与 http-equiv 或 name 属性相关的元信息。
4. http-equiv：把 content 属性关联到 HTTP 头部。

name属性

name属性主要是用于描述网页，比如网页的关键词，叙述等。与之对应的属性值为content，content中的内容是对name填入类型的具体描述，便于搜索引擎抓取。

<meta name="参数" content="具体的描述">

（1）author(作者)

说明：用于标注网页作者举例：

<meta name="author" content="PHP中文网">

（2）description(网站内容的描述)

说明：用于告诉搜索引擎，你网站的主要内容。举例：

<meta name="description" content="php中文网提供大量免费、原创、高清的php视频教程">

（3）viewport(移动端的窗口)

说明：这个概念较为复杂，具体的会在下篇博文中讲述。这个属性常用于设计移动端网页。在用bootstrap,AmazeUI等框架时候都有用过viewport。

<meta name="keywords" content="PHP中文网">

 （4）robots(定义搜索引擎爬虫的索引方式) 

说明robots用来告诉爬虫那些页面需要索引，那些页面不需要索引。content的参数有 all、none、index、onindex、follow、nofollow。默认all

<meta name="robots" content="none">

具体参数如下：

all： 搜索引擎可以抓取本页面，也可以通过本页面中的链接抓取其他页面

none：搜索引擎不能抓取本页面，也不能通过本页面中的链接抓取其他页面

index：搜索引擎可以抓取本页面

follow：搜索引擎可以通过本页面的链接抓取其他页面

nofollow：禁止搜索引擎通过本页面中的链接抓取页面

 （5）keywords(关键字)

说明：用于告诉搜索引擎，你的网页的关键字，例如

<meta name="keywords" content="PHP中文网">

（9）renderer(双核浏览器渲染方式)

说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。举例：

<meta name="renderer" content="webkit"> //默认webkit内核

<meta name="renderer" content="ie-comp"> //默认IE兼容模式

<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv属性 

http-equiv顾名思义，相当于HTTP的作用。

meta标签中http-equiv属性语法格式是：

<meta http-equiv="参数" content="具体的描述">

其中http-equiv属性主要有以下几种参数：

（1） content-Type(设定网页字符集)(推荐使用HTML5的方式)

说明：用于设定网页字符集，便于浏览器解析与渲染页面举例：

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  
//旧的HTML，不推荐

<meta charset="utf-8"> 
//HTML5设定网页字符集的方式，推荐使用UTF-8

（2）X-UA-Compatible(浏览器采取何种版本渲染当前页面)

说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式，在各大框架中这个设置也很常见。）可以用于浏览器适配

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
IE=edge告诉浏览器，以当前浏览器支持的最新版本来渲染，IE9就以IE9版本来渲染。
chrome=1告诉浏览器，如果当前IE浏览器安装了Google Chrome Frame插件，就以chrome内核来渲染页面。

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

参考文献

什么是架构师？ - 知乎 (zhihu.com)

对meta常用标签的总结_PHP中文网手记