HTML中body以上的那些标签

作者: 愿你如夏日清凉的风 | 来源:发表于2017-05-03 14:24 被阅读151次

在WebStorm中新建一个html文件，默认的模板是下面这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

<html lang="en">

上面这句有的时候我们可能会写成：<html lang="zh"> 或者>html lang="zh-cn">，

1，lang表示当前文档显示的语言，这个属性其实没有什么特别的用处，定义成什么值网页还是能正常显示中文，只是lang可能给特定场合解析用。

2，如果是 <html lang="en">，那么这一句代码的意思就是：

向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english，如果不是写的英文网站，最好是把这段去掉。

3，如果是lang="zh"，则表示是中文页面。

4，如果是lang="zh-cn"，则表示简体中文页面。

下面引用一些贺师俊老师在知乎说的话：
网页头部的声明应该是用 lang="zh" 还是 lang="zh-cn"?
地址是：(https://www.zhihu.com/question/20797118)

lang属性的取值应该遵循 BCP 47 - Tags for Identifying Languages**。

W3C指出：语言文字由IETF的BCP 47规范规定，BCP 47是由一系列会更新的标准组成。
Tags for Identifying Languages 翻译出来就是识别标签语言。

单一的 zh 和 zh-CN 均属于废弃用法。
如何标记的例子：
1，简体中文页面： html lang=zh-cmn-Hans
2，繁体中文页面： html lang=zh-cmn-Hant
3，英文页面： html lang=en

<meta charset="UTF-8">

先来解释一下meta:

那么charset="UTF-8"是什么意思，又有什么作用呢？

charset是表示页面使用哪一种编码方式，而charset="UTF-8"就表示页面使用UTF-8编码，这也是一种国际化的编码方式，UTF-8 是没有国家的编码，也就是独立于任何一种语言，任何语言都可以使用。

有的同学可能还用过gb2312这种方式，如果charset="gb2312"，则表示使用中文编码方式。

如果不加这一句会有什么后果呢？

当你没加这句的时候，网页中有中文字符，IE浏览器一般不会乱码，但是Chrome一定会乱码，所以，最好加上这一句。

我们可能还会遇到像下面这种写法：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

下面引用幕课网比较专业和详细的解释：
这句代码设定页面使用的字符集“Content-Type”，定义了当前页面的文件类型“text/html”和编码方式“utf-8”。

meta的用法：

语法： <meta name="name" content="string">
参数：
1）name项：常用的选项有keywords(关键字)、description（描述或说明）、author（制作者）等。
2）http-equiv项：可用于代替name项，常用的选项有creation-date（创作日期）、refresh（刷新与自动跳转）等。
3）content（内容）项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。

举个栗子：

除了默认模板自动生成的几句，我们有的时候还会根据需要另外添加一些meta标签，那么这些标签又表示什么意思呢？有什么作用呢？

我们先来看看各大知名网站是怎么写的，这些都是我从他们自己的网站上扒来的，去掉了我们这篇文章主题以外的内容，有些关键的地方我加了注释，还有一些他们自定义的meta标签就没有管，常用的下面会有详情的介绍：

京东移动端头部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>专业网上购物平台品质保障！ -  京东商城</title>
    <meta name="author" content="m.jd.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <meta name="author" content="m.jd.com">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <!--指定网页在缓存中的过期时间， 这里是永不到期的意思 -->
    <meta http-equiv="Expires" content="-1">
    <!--指定过期时间-->
    <!--<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />-->
    <!--指定请求和响应遵循的缓存机制-->
    <!--
        no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
        no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
        public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
        private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
        maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。
    -->
    <meta http-equiv="Cache-Control" content="no-cache">
    <!--缓存模式 禁止浏览器从本地机的缓存中调阅页面内容。注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。-->
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,在线销售家电、数码、电脑、服装、母婴、图书、食品等数万个品牌商品.便捷、诚信的服务,为您提供愉悦的网上商城购物体验! ">
    <meta name="Keywords" content="网上购物,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">
</head>

京东PC端头部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!--指定适合自己网站的渲染内核名称，当双核浏览器访问本网页时，就会根据我们的指示，选择我们指定的渲染内核来处理网页。WebKit内核则用于渲染「新一代」的网页，从而发挥出更快的显示速度、更好的显示效果、更优异的脚本执行性能。-->
    <meta name="renderer" content="webkit" />
</head>

天猫移动端头部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="aplus-terminal" content="1"/>
    <meta name="apple-mobile-web-app-title" content="TMALL"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="spm-id" content="875.7403452">
    <meta name="format-detection" content="telephone=no, address=no">
    <meta name="Alipay:imgUrl" content="//img.alicdn.com/tps/TB1eREfLVXXXXaHXFXXXXXXXXXX-480-260.png">
    <meta name="Alipay:desc" content="天猫">
    <title>天猫</title>
</head>

天猫PC端头部代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="spm-id" content="875.7931836/B"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <title>天猫tmall.com--上天猫，就够了</title>
</head>

新浪移动端头部代码

<!DOCTYPE html>
<html>
<head>
    <title>新浪网首页_手机新浪网</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="手机新浪网,新浪首页,新闻资讯,新浪新闻,新浪无线" />
    <meta name="description" content="手机新浪网是新浪网的手机门户网站，为亿万用户打造一个手机联通世界的超级平台，提供24小时全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等。手机新浪网触屏版 - sina.cn" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
    <meta http-equiv="Last-Modified" content="Wed, 26 Feb 1997 08:21:57 GMT" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="format-detection" content="telephone=no" />
    <!--
    目前大部分浏览器，在发生协议降级时默认不发送 Referrer 信息，最典型的场景就是从 HTTPS 页面点链接跳到 HTTP 网站时，浏览器并不会在请求头中带上 Referer 字段。对于给第三方导流的网站，这一点肯定无法接受。
针对现代浏览器，这个问题可以通过给页面加上下面这个 meta 标签来解决：
<meta name="referrer" content="always" />
    -->
    <meta name="referrer" content="always" />
    <!--robots 用于定义网页搜索引擎索引方式。
    robotterms 是一组使用逗号(,)分割的值，通常有如下几种取值：none，      
    noindex，nofollow，all，index和follow。各个值得具体释义如下：
    none 搜索引擎将忽略此网页，等价于noindex，nofollow。
    noindex 搜索引擎不索引此网页。
    nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
    all 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
    index 搜索引擎索引此网页。
    follow 搜索引擎继续通过此网页的链接索引搜索其它的网页。
    -->
    <meta name="robots" content="index, follow" />
    <!-- 谷歌蜘蛛 -->
    <meta name="googlebot" content="index, follow" />
    <meta name="author" content="sina_mobile" />
    <meta name="baidu-site-verification" content="rTnMzcp5WP" />
</head>

新浪PC端头部代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>新浪首页</title>
    <meta name="keywords" content="新浪,新浪网,SINA,sina,sina.com.cn,新浪首页,门户,资讯" />
    <meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自由互动交流空间。" />
    <meta name="stencil" content="PGLS000022" />
    <meta name="publishid" content="30,131,1" />
    <meta name="verify-v1" content="6HtwmypggdgP1NLw7NOuQBI2TW8+CfkYCoyeB8IDbn8=" />
    <meta name="360-site-verification" content="63349a2167ca11f4b9bd9a8d48354541" />
    <meta name="application-name" content="新浪首页"/>
    <meta name ="msapplication-TileImage" content="//i1.sinaimg.cn/dy/deco/2013/0312/logo.png"/>
    <meta name="msapplication-TileColor" content="#ffbf27"/>
    <meta name="sogou_site_verification" content="Otg5irx9wL"/>
    <!--_SINA_ADS_HEAD_BEGIN_-->
    <meta name="baidu_ssp_verify" content="c0e9f36397049594fb9ac93a6316c65b">
    <!--_SINA_ADS_HEAD_END_-->
</head>

腾讯移动端头部代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="keywords" content="资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent,腾讯网触屏版" />
    <meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站，是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户，致力成为最具传播力和互动性，权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务，为中国数以亿计的互联网用户提供富有创意的网上新生活。" />
    <title>腾讯网触屏版首页</title>
</head>

腾讯PC端头部代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta content="text/html; charset=gb2312" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="baidu-site-verification" content="cNitg6enc2">
    <title>腾讯首页</title>
    <meta name="apple-itunes-app" content="app-id=660653351">
    <meta content="资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent" name="Keywords">
    <meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站，是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户，致力成为最具传播力和互动性，权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务，为中国数以亿计的互联网用户提供富有创意的网上新生活。" />
</head>

我自己在切页面的时候
移动端的头部代码一般是这样写的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动设备上屏幕显示区域的设置-->
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--主要是针对苹果手机将数字自动识别为号码-->
    <meta name="format-detection" content="telephone=no">
    <!--启用全屏模式，伪装app，离线应用。-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--隐藏状态栏/设置状态栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 ，告诉浏览器页面是否为手持设备优化，会被MobileOptimized覆盖 (旧浏览器和功能机上某些浏览器识别)-->
    <meta name="HandheldFriendly" content="True">
    <!-- 微软的老式浏览器 告诉浏览器页面为某个宽度特殊优化-->
    <meta name="MobileOptimized" content="width">
    <!--指定适合自己网站的渲染内核名称-->
    <meta name="renderer" content="webkit" />
    <title>title</title>
</head>

PC端的头部一般是这样写，下面有简单版不带注释的：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="format-detection" content="telephone=no">  // 可以根据需要添加，告诉设备不识别数字，普遍用在电话号码，点击之后不自动拨打。
    <meta name="format-detection" content="date=no"> //可以根据需要添加 防止日期被显示成别的格式。这些浏览器自动产生的行为，可能会破坏页面原本布局，所以一律阻止掉它们。
    <meta name="format-detection" content="address=no"> // 可以根据需要添加，禁止跳转至地图！
   <meta name="format-detection" content="email=no"/> // 可以根据需要添加，告诉设备不识别邮箱，点击之后不自动发送
    <meta name="apple-mobile-web-app-capable" content="yes" /> //是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />//当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）
    <meta name="application-name" content="网站的名字"/>
    <meta name="keywords" content="网站的关键字，用来做SEO" />
    <meta name="description" content="网站的介绍" />
    <meta name="renderer" content="webkit" />
    <title>模版</title>
</head>

使用的时候可以直接复制下面的内容：

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="utf-8" http-equiv="Content-Type">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="format-detection" content="telephone=no">
    <meta name="application-name" content="网站名称"/>
    <meta name="keywords" content="网站的关键字，用来做SEO" />
    <meta name="description" content="网站的介绍" />
    <meta name="renderer" content="webkit" />
    <title>模版</title>
</head>

下面我们来看看常用的一些meta到底是作什么用的。

通过看上面这些代码，我们大致可以判断出，移动端比PC端的meta标签要多一些，而对于缓存、搜索引擎、SEO优化、过期时间，大型的网站设置的还是比较多的。那么，我们自己在开发过程中则可以根据项目的需要来设置，下面我把常用一些meta标签列出来，大家可以参考一下。

对pc端有用的：

优先使用IE最新版本和Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

指定适合自己网站的渲染内核名称，当双核浏览器访问本网页时，就会根据我们的指示，选择我们指定的渲染内核来处理网页。WebKit内核则用于渲染「新一代」的网页，从而发挥出更快的显示速度、更好的显示效果、更优异的脚本执行性能。
目前大部分浏览器，在发生协议降级时默认不发送 Referrer 信息，最典型的场景就是从 HTTPS 页面点链接跳到 HTTP 网站时，浏览器并不会在请求头中带上 Referer 字段。对于给第三方导流的网站，这一点肯定无法接受。
针对现代浏览器，这个问题可以通过给页面加上下面这个 meta 标签来解决：

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

关于这个有一篇文章写的非常详细，可以进去看看。

使用renderer meta标签使双核浏览器以指定内核处理自己的网页(http://www.365mini.com/page/renderer-meta.htm)

对SEO有用的：

页面关键词

每个网页应具有描述该网页内容的一组唯一的关键字, 不要太短也不要太长

<meta name="keywords" content="your tags" />

页面描述

每个网页都应该有一个不超过150个字符的页面描述

<meta name="description" content="150 words" />

设置搜索引擎索引方式

<meta name="robots" content="index,follow" />
<!--
    robots 用于定义网页搜索引擎索引方式。
    robotterms 是一组使用逗号(,)分割的值，通常有如下几种取值：none，      
    noindex，nofollow，all，index和follow。各个值得具体释义如下：
    none 搜索引擎将忽略此网页，等价于noindex，nofollow。
    noindex 搜索引擎不索引此网页。
    nofollow 搜索引擎不继续通过此网页的链接索引搜索其它的网页。
    all 搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。
    index 搜索引擎索引此网页。
    follow 搜索引擎继续通过此网页的链接索引搜索其它的网页。
 -->

缓存、过期时间

指定网页在缓存中的过期时间， content="-1"是永不到期的意思

 <meta http-equiv="Expires" content="-1">

下面是指定确定的过期时间

<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />

指定请求和响应遵循的缓存机制

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

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。
no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）
public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果
private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）
maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

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

缓存模式禁止浏览器从本地机的缓存中调阅页面内容。注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

对移动设备有用的：

viewport

**一、viewport的概念，引用至移动前端开发之viewport的深入理解
**
通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

一些设备上浏览器的默认viewport的宽度

viewport能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。

大部分4.7-5寸设备的viewport宽设为360px；
5.5寸设备设为400px；
iphone6设为375px；ipone6 plus设为414px。

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边

width 宽度

数值或 device-width, 范围从200 到 10000，默认为 980 像素

height 高度

数值或 device-height, 范围从 223 到 10000

initial-scale 初始的缩放比例

范围从0 到10

minimum-scale 允许用户缩放到的最小比例

maximum-scale 允许用户缩放到的最大比例

user-scalable 用户是否可以手动缩

no,yes

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

WebApp全屏模式

启用全屏模式，伪装app，离线应用。

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

隐藏状态栏/设置状态栏颜色

只有在开启WebApp全屏模式时才生效。 content的值为default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

忽略数字自动识别为电话号码

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

忽略识别邮箱

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

忽略识别日期

<meta content="date=no" name="format-detection" />

忽略识别地址

<meta content="address=no" name="format-detection" />

强制竖屏

<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

强制全屏

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

windows phone 点击无高光

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

针对IE浏览器的条件hack

IE7以下版本：<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
IE7：<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
IE8：<!--[if IE 8]> <html class="no-js lt-ie9"><![endif]-->
IE8以上：<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->兼容性