HTML-meta标签详解

meta 标签的作用

• 搜索引擎（SEO）优化；
• 定义页面使用语言；
• 自动刷新页面；
• 控制页面缓存；
• 网页定级评价；
• 控制页面显示的窗口；
• 等等...

meta 使用

<meta>标签总共有 4 个属性，不同的属性和值组成了网页不同的功能：

• charset（HTML5新增）
• name
• http-equiv
• content

前三个属性规定标签给谁传递信息；content属性用来说明name和http-equiv的具体内容。

charset属性

用来定义当前文档的编码方式，告诉浏览器如何解析当前页面:

<meta charset=" utf-8">

规定当前页面的编码方式是"utf-8"。

name 属性

name属性主要是用于描述网页的，对应content属性中的内容是便于搜索引擎查找和分类信息。语法：

<meta name="" content="" />

name="keywords"

它是用来设置，让搜索引擎获取网页的关键字：

<meta name="keywords" content="活动,聚会，拓展，团建，培训，讲座" />

name="description"

它是用来设置，让搜索引擎获取网页的内容描述：

<meta name="description" content="百场汇是中国最大的会议活动和工作场地短租平台，提供场地直销服务，价格超低，无任何附加费用，帮助用户寻找各种各样的特色场地。" />

name="robots"

它是用来设置，让搜索引擎哪些页面需要索引，哪些页面不需要索引。content 有如下参数：

• all：文件将被检索，且页面上的链接可以被查询；
• none：文件将不被检索，且页面上的链接不可以被查询；
• index：文件将被检索；
• noindex：文件将不被检索，但页面上的链接可以被查询；
• follow：页面上的链接可以被查询；
• nofollow：文件将被检索，但页面上的链接不可以被查询。

<meta name="robots" content="all" />

name="author"

它是来设置页面的作者：

<meta name="author" content="jay" />

name="generator"

它是来设置网站采用什么软件制作的：

<meta name="generator" content="hobbit" />

name="COPYRIGHT"

它是来设置网站的版权信息的：

<meta name="COPYRIGHT" content="百场汇" />

name="revisit-after"

它是来设置网站的重访，30day代表30天：

<meta name="revisit-after" content="30day" />

name="viewport"

它是来控制浏览器窗口的大小和缩放的，由于它在现代浏览器，特别是 Mobile 端浏览器非常常用：

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

说明：是用户网页的可视区域。移动设备的屏幕一般都比PC小很多，webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上，默认的虚拟窗口为980像素宽（目前大部分网站的标准宽度），然后按一定的比例（3：1或2：1）进行缩放。也就是说当我们加载一个普通网页的时候，webkit会先以980像素的浏览器标准加载网页，然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小，也就是页面上的所有元素都会缩小。

1.width=device-width //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0 //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0 //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0 //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）

shrink-to-fit=no
在iOS9中要想起作用，得加上"shrink-to-fit=no"，原因如下:
Viewport meta tags using "width=device-width" cause the page to scale down to fit content that overflows the viewport bounds. You can override this behavior by adding "shrink-to-fit=no" to your meta tag as shown below. The added value will prevent the page from scaling to fit the viewport.

name="format-detection"

用来检测html里的一些格式的。

<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="format-detection" content="adress=no" />

也可以连写：

<meta name="format-detection" content="telephone=no,email=no,adress=no" />　 

(1)telephone 一串数字没加链接样式，而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！想去掉这个拨号链接该如何操作呢？
telephone=no 禁止把数字转化为拨号链接！
telephone=yes开启把数字转化为拨号链接，要开启转化功能，meta不用写,在默认是情况下就是开启！
(2)email 告诉设备不识别邮箱，点击之后不自动发送
email=no 禁止作为邮箱地址
email=yes 开启了把文字默认为邮箱地址，meta不用写,,在默认是情况下就是开启！
(3)adress
adress=no禁止跳转至地图！
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启！

name="apple-touch-fullscreen"

添加到主屏幕后，全屏显示：

<meta name="apple-touch-fullscreen" content="yes" />

name="apple-mobile-web-app-capable"

作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示：

<meta name="apple-mobile-web-app-capable" content="yes" />

name="App-Config"

保留历史记录以及动画效果：

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

name="msapplication-tap-highlight"

点击无高光(高亮)：

<meta name="msapplication-tap-highlight" content="no" />

http-equiv 属性

http-equiv相当于 HTTP 的文件头的设置。语法：

<meta http-equiv="" content="" />

http-equiv="X-UA-Compatible"

文档兼容模式的定义，从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<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=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。

http-equiv="x-dns-prefetch-control"

DNS预解析是根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度：

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//img.alicdn.com">

DNS Prefetch应该尽量的放在网页的前面，推荐放在<meta charset=”/>后面。
可以减少DNS的请求次数，进行DNS预先获取。

http-equiv="expires"

它是来设置网页的过期时间的：

<meta http-equiv="expires" content="Fri May 13 2016 22:49:44 GMT+0800 (CST)" />

注意：必须使用GMT的时间格式。

http-equiv="Pragma"

它是来设置禁止浏览器从本地缓存中访问页面：

<meta http-equiv="Pragma" content="no-cache" />

注意:这样设定，访问者将无法脱机浏览。

http-equiv="Refresh"

它是来设置自动刷新并跳转新页面，其中content第一个数字代表 5 秒后自动刷新：

<meta http-equiv="Refresh" content="5;URL=http://m.baichanghui.com" />

注意后面的引号，分别在秒数的前面和网址的后面。

http-equiv="Set-Cookie"

它是来设置 Cookie 的：

<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/" />

注意：必须使用GMT的时间格式。如果网页过期，那么存盘的cookie将被删除。

http-equiv="Window-target"

强制页面在当前窗口以独立页面显示：

<meta http-equiv="Window-target" content="top" />

注意：可以用来防止别人在框架里调用自己的页面。

http-equiv="content-Type"

它是来设置页面使用的字符集：

<meta http-equiv="content-Type" content="text/html;charset=gb2312" />

具体如下:

meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；

meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；

meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；

meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；

meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；

meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

特别说明:现在直接使用HTML5的charset属性替代即可。

http-equiv="Content-Language"

它是来设置页面的语言的：

<meta http-equiv="Content-Language" content="zh-cn" />

http-equiv="Cache-Control"

设置页面缓存：

<meta http-equiv="Cache-Control" content="no-cache" />

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。

各个消息中的指令含义如下:

<1>.Public指示响应可被任何缓存区缓存

<2>.Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效

<3>.no-cache指示请求或响应消息不能缓存

<4>.no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

<5>.max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应

<6>.min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

<7>.max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

注意：

禁止百度转码和百度快照缓存的META声明
1、禁止百度转码
禁止百度转码的做法很简单，直接在head部分加入如下META申明即可：
<meta http-equiv=“Cache-Control” content=“no-transform” />
<meta http-equiv=“Cache-Control” content=“no-siteapp” />

2、禁止百度快照缓存
百度会缓存一份网页快照，有部分用户人存在先点快照的习惯，因为从快照点开的结果中，搜索关键词会高亮显示，方便他直达。
<meta name=“Baiduspider” content=“noarchive”>
当然，如果要针对所有搜索引擎，只要将Baiduspider改成robots即可。
修改后，并不会立即生效，得等到百度刷新数据才能看的效果：点击搜索结果中的百度快照，将直接跳转到源站，而不会展示百度缓存的页面。

http-equiv="Content-Script-Type"

它是设置页面中脚本的类型：

<meta http-equiv="Content-Script-Type" content="text/javascript" />

 

html标签中lang属性及xml:lang属性的作用

lang属性：HTML语言声明属性，用来定义当前文档显示的语言。

如：lang="en"表示定义语言为英文；lang="zh-CN"表示定义语言为中文。其实对于文档显示来说怎样写都无所谓，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。但还是应该遵循标准，毕竟这个属性对浏览器和搜索引擎还是有作用的。lang="en"是为了告诉搜索引擎爬虫我们是关于什么内容的

在新的XHTML文档中，lang属性已经被xml:lang属性代替。但是，XHTML规范建议在XHTML 1.0文档的<html>元素中同时使用lang属性和xml:lang属性，以在不同的浏览器之间获得最大的兼容性。如果网页定义为XHTML1.1或者XML格式,那么可以使用xml:lang属性(因为xml:lang属性是在XML中确定语言信息的标准用法)。

设计 lang 属性是为了向用户提供语言特有的显示，尽管它对主要的浏览器具有较小的影响。使用lang属性后，真正受益的是搜索引擎(搜索引擎利用它能够告诉用户采用哪一种语言编写文档)、屏幕阅读器(屏幕阅读器利用它能够以不同的方式发音不同的语言)以及一些应用程序(应用程序能够在它们不支持所提供的语言或者该语言与它们的默认语言不同时向用户发出警报)。当lang属性用于<html>元素中时，它将作用于整个文档；而在用于其他元素中时，它将仅作用于这些元素的内容。

lang属性的值是ISO-639标准两字符语言代码。如果希望指定某种语言的方言，可以在语言代码后面紧跟一个破折号和一个子代码名称。

示例如下：

声明英文文档：

1	<html lang="en" xml:lang="en">

声明中文文档：

1	<html lang="zh-cn" xml:lang="zh-cn">

HTML设置图标icon

html head添加：
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
注意：
1、favicon.icon路径为根目录，但不限于根目录。
2、href="/项目名/favicon.ico" 包含项目名的href只能在本地使用，linux环境会报错，所以建议不要加。