CSS入门2-认识html之meta标签详解
CSS入门2-认识html之meta标签详解
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）
（注2：更多内容请查看我的目录。）
上篇我们主要认识了头部内容的标签，但是还留了一个小尾巴，那就是meta标签。在文章中我给出了一篇文章Http meta详解供大家学习参考，该篇作者所述的内容已经非常详尽了，但是我们还是要用自己的方式去理解一遍。
1. 简介
理解一样东西，首先在于理解其存在的意义，或者说这个东西的出现是为了解决什么问题。那么meta到底为我们的网页带来了什么作用呢？大家试想一下，我们写了一个网页丢在网上，是希望别人来访问的。我们把写好的代码放在服务器，需要通过浏览器的处理变成网页。而网络上的网页多如繁星，需要吸引用户搜索，点击这个链接，然后才能最终呈现在用户面前。这里有两个关键点：
- 浏览器会如何显示网页的内容
- 用户为何会点击你的网页
meta的出现就是为了解决这两个问题。那么，它是如何解决这两个问题呢？
2. http-equiv
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是：
<meta http-equiv="参数" content="参数变量值"> ；当浏览器等设备接收服务器端传送的文件时，首先会接收文件的相关名称/值对，通常为多个。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
其中http-equiv属性主要有以下几种参数：
2.1 content-Type(定义mime类型，显示字符集)
作用 content-type用于定义用户的浏览器或相关设备如何显示将要加载的数据，或者如何处理将要加载的数据，此属性的值可以查看MIME类型。但是其最重要的MIME类型是text/html，并用来设置字符集。
用法：
<meta http-equiv="content-type" content="text/html;charset=XXX">示例：
<meta http-equiv="content-type" content="text/html;charset=utf-8">设置字符集时，可以简写：
<meta charset="utf-8">XXX取值：
- gb2312（或gbk）时，代表说明网站是采用的编码是简体中文
- big5时，代表说明网站是采用的编码是繁体中文
- iso-2022-jp时，代表说明网站是采用的编码是日文
- ks_c_5601时，代表说明网站是采用的编码是韩文
- iso-8859-1时，代表说明网站是采用的编码是英文
- utf-8时，代表世界通用的语言编码（最常用）
2.2content-language(显示语言设置)
作用：设定页面的语言以及国家代码（HTML文档的语言可通过在html标签的lang属性、xml:lang属性或meta标签的content-language中声明。明确网页使用的语言，有助于浏览器与搜索引擎进行相应的解析与索引。
）
用法：
<meta http-equiv="content-language" content="primarycode-subcode">示例：
<meta http-equiv="content-language" content="zh-cn">例如：language-code为"en"时，代表English英文，而language-code为"en-US"时，代表the U.S. version of English美国版本的英文。
primary-code为语言代码设置，subcode为国家代码
primarycode常用取值：
- zh (Chinese)中国
- fr (French)法国
- de (German)德国
- it (Italian)意大利
- nl (Dutch)荷兰
- el (Greek)希腊
- es (Spanish)西班牙
- pt (Portuguese)葡萄牙
- ar (Arabic)阿拉伯
- ru (Russian)俄罗斯
- ja (Japanese)日本
另外，关于charset和content-type的区别，大家可以参考这篇文章：html中charset和content-language的区别
2.3 refresh(刷新与重定向)
作用：用于刷新与重定向页面。
用法示例：
5秒之后刷新本页面：
<meta http-equiv="refresh" content="5">5秒之后跳转到我的简书主页：
<meta http-equiv="refresh" content="5; url=http://www.jianshu.com/u/7a62ab344c39">2.4 expires(过期时间-控制缓存)
作用：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。时间必须使用GMT格式。
用法示例：
<meta http-equiv="expires" content="Sunday 26 October 2008 01:00 GMT" >2.5 pragma(cache模式)
作用：禁止浏览器从本地计算机读取缓存
用法：
<meta http-equiv="pragma" content="no-cache">注意：这样设定，访问者将无法脱机浏览。
2.6 cache-control(缓存设定)
作用：HTTP1.1中启用Cache-Control 来控制页面的缓存与否
用法：
<meta http-equiv="cache-control" content="XXX">XXX取值如下;
- max-age=秒 — 执行缓存被认为是最新的最长时间。类似于过期时间，这个参数是基于请求时间的相对时间间隔，而不是绝对过期时间，秒是一个数字，单位是秒：从请求时间 开始到过期时间之间的秒数。
- s-maxage=秒 — 类似于max-age属性，除了他应用于共享（如：代理服务器）缓存。
- public — 标记认证内容也可以被缓存，一般来说： 经过HTTP认证才能访问的内容，输出是自动不可以缓存的。
- no-cache — 强制每次请求直接发送给源服务器，而不经过本地缓存版本的校验。这对于需要确认认证应用很有用（可以和public结合使用），或者严格要求使用最新数据的应用（不惜牺牲使用缓存的所有好处）。
- no-store — 强制缓存在任何情况下都不要保留任何副本。
- must-revalidate — 告诉缓存必须遵循所有你给予副本的新鲜度，HTTP允许缓存在某些特定情况下返回过期数据，指定了这个属性，你可以高速缓存，表明你希望严格的遵循你的规则。
- proxy-revalidate — 和 must-revalidate类似，除了他只对缓存代理服务器起作用。
(ps:可以看到expires,pragma和cache-control都对缓存起作用，那么他们有什么区别，不同的参数在不同的浏览器表现形式如何呢。这一块我们今后会在HTTP系列具体说明。)
2.7 set-cookie(cookie设定)
作用：如果网页过期，那么存盘的cookie将被删除。
用法：
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">注意：必须使用GMT的时间格式。
2.8 window-target(显示窗口的设定)
作用：强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。
用法：
<meta http-equiv="Window-target" content="_top">2.9 X-UA-Compatible(IE8专用标记-兼容)
作用：IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题。
用法示例：
<meta http-equiv="X-UA-Compatible" content="IE=7"> 以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8"> 以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。
PS：谷歌添加一个插件：Google Chrome Frame（谷歌内嵌浏览器框架GCF），这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。
3. name
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：
<meta name="参数" content="具体的参数值">；name主要有以下几种参数：
3.1 author(定义网页作者)
作用：定义网页作者
用法示例：
<meta name="author" content="yourName">网页作者是yourName
3.2 keywords(定义关键词)
作用：定义页面关键词，用于被搜索引擎收录。
用法示例：
<meta name ="keywords" content="science,education,culture,politics,ecnomics,relationships,entertainment,human">3.3 descption(网页描述)
作用：用来告诉搜索引擎你的网站主要内容。
用法示例：
<meta name="description" content="This page is about the meaning of science,education,culture.">网站内容描述（description）的设计要点：
①网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）；
②尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息；
③网页描述中含有有效关键词；
④网页描述内容与网页标题内容有高度相关性；
⑤网页描述内容与网页主体内容有高度相关性；
⑥网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数（通常在100中文字之内，不同搜索引擎略有差异）。
3.4 robots(搜索引擎索引方式)
作用：用于定义网页搜索引擎索引方式。告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
用法：
<meta name="robots" content="XXX">XXX取值说明（默认是all）：
- none 搜索引擎将忽略此网页，等价于noindex，nofollow。
- noindex 搜索引擎不索引此网页。
- nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
- all 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
- index 搜索引擎索引此网页。
- follow 搜索引擎继续通过此网页的链接索引搜索其它的网页。
- noarchive 禁止搜索引擎建立网页快照。
特殊用法示例：
- 针对谷歌GOOGLEBOT使用robots 可以将name的属性只定义为GOOGLEBOT标识为谷歌搜索引擎。
<meta name="googlebot" content="noindex, nofollow" />- 针对百度baiduspider使用robots 可以将name的属性只定义为baiduspider标识为百度搜索引擎。
<meta name="baiduspider" content="noarchive" />3.5 copyright(网页版权)
作用：定义网页的版权
用法示例：
<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />3.6 data(定义网页生成时间)
作用：定义网页生成时间
用法示例：
<meta name="data" content="2017-11-22T13:47:30+00:00">3.7 revisied(定义网页文档修改时间)
作用：定义网页文档修改时间
用法示例：
<meta name="revised" content="css入门修炼, 11/23/2017"/>3.8 renderer(渲染方式)
作用：指定双核浏览器默认以何种方式渲染页面。
用法示例：
<meta name="renderer" content="webkit">//默认webkit内核
<meta name="renderer" content="ie-comp">//默认IE兼容模式
<meta name="renderer" content="ie-stand">//默认IE标准模式PS：360浏览器支持
3.9 generator(网页制作软件)
用法示例：
<meta name="generator" content="Microsoft"/>3.10 viewport(用户网页的可视区域)
作用：设置用户网页的可视区域
(ps：viewport展开来讲又是一个很大的话题，首先需要我们对像素，分辨率等内容有所了解。这一块我会专门放在单位和响应式布局的章节中来讲解。现在我们先简单看一下，content的可选项)
- width：viewport 的宽度
- height：viewport的高度 （很少使用）
- initial-scale：设置页面的初始缩放值
- minimum-scale：允许用户的最小缩放值
- maximum-scale：允许用户的最大缩放值
- user-scalable：是否允许用户进行缩放
- target-densitydpi（android才生效）：设备的密度等级
常用移动端设置方法如下：
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一般主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和设备上的真实分辨率是一样的，不做任何缩放，网页会因此显得更高细腻。
参考
html中charset和content-language的区别
HTML meta content-language 定义页面语言