理解HTML的head标签
2015-12-17 18:03:08 
阿炯
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
头部标记(Head)
<title>这里放该主页的标题</title> 将会显示在浏览器的标题栏
<base>定义一个相对路径的绝对路径
<link>相关文件的关联
<meta>
<meta http-equiv="Content-type" content="text/html;charset=gbk"> 这是我们最常见的一个meta标签，表示主页编码为中文。
HTMl中Meta标签详解
Meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content网页内容，以便于搜索引擎机器人查找、分类目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。这其中最重要的是description站点在搜索引擎上的描述和keywords分类关键词，所以应该给每页加一个meta值。比较常用的有以下几个：
name属性
1、<meta name="generator" contect="">用以说明生成工具等；
2、<meta name="keysords" contect="">向搜索引擎说明你的网页的关键词；
3、<meta name="description" contect="">告诉搜索引擎你的站点的主要内容；
4、<meta name="author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；
5、<meta name="robots" contect= "all|none|index|noindex|follow|nofollow">
Robots的属性说明如下：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv属性
1)、<meta http-equiv="Content-Type" contect="text/html";charset=gb2312">和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc等字符集；
2)、<meta http-equiv="Refresh" contect="url=http://yourlink">定时让网页在指定的时间n内，跳转到页面http://yourlink；
3)、<meta http-equiv="Expires" contect="Mon,12 May 2011 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
4)、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
5)、<meta http-equiv="set-cookie" contect="Mon,12 May 2011 00:20:00 GMT"> cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
6)、<meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
7)、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
8)、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果(特效)，不过所加的页面不能够是一个frame页面。
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级等等。
6、Window-target (显示窗口的设定)
说明：强制页面在当前窗口以何种方式打开。
用法：<meta http-equiv=”Widow-target” Content=”_top”>
注意：这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。
7、Pics-label (网页RSAC等级评定)
说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的。
注意：不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。用户可以设置Microsoft Internet Explorer来排除包含有色情和暴力内容的站点。级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www.rsac.org/。
8、Page-Enter、Page-Exit (进入与退出)
说明：这个是页面被载入和调出时的一些特效。
用法：<Meta http-equiv=”Page-Enter” Content=”blendTrans(Duration=0.5)”>
<Meta http-equiv=”Page-Exit” Content=”blendTrans(Duration=0.5)”>
注意：blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:
<Meta http-equiv=”Page-Enter” Content=”revealTrans(duration=x, transition=y)”>
<Meta http-equiv=”Page-Exit” Content=”revealTrans(duration=x, transition=y)”>
Duration表示滤镜特效的持续时间(单位：秒)
Transition滤镜类型。表示使用哪种特效，取值为0-23。
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种
详细介绍
下面介绍一些有关此类标记的例子及解释。META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
★HTTP-EQUIV
HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有：
1、Content-Type和Content-Language (显示字符集的设定)
说明：设定页面使用的字符集，用以说明主页制作所使用的文字已经语言，浏览器会根据此来调用相应的字符集显示page内容。
用法：<Meta http-equiv=”Content-Type” Content=”text/html; Charset=gbk″>
<Meta http-equiv=”Content-Language” Content=”zh-CN”>
注意：该META标签定义了HTML页面所使用的字符集为GB2132，就是国标汉字码。如果将其中的“charset=GB2312”替换成“BIG5”，则该页面所用的字符集就是繁体中文Big5码。当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE就提示下载。其他的语言也对应不同的charset，比如日文的字符集是“iso-2022-jp ”，韩文的是“ks_c_5601”。
Content-Type的Content还可以是：text/xml等文档类型；
Charset选项：ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw,x-cns11643-1,x-cns11643-2等字符集；Content-Language的Content还可以是：EN、zh-cn等语言代码。
2、Refresh (刷新)
说明：让网页多长时间秒刷新自己，或在多长时间后让网页自动链接到其它网页。
用法：<Meta http-equiv=”Refresh” Content=”30″>
<Meta http-equiv=”Refresh” Content=”5; Url=http://www.downme.com”>
注意：其中的5是指停留5秒钟后自动刷新到URL网址。
3、Expires (期限)
说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。
用法：<Meta http-equiv=”Expires” Content=”0″>
<Meta http-equiv=”Expires” Content=”Wed, 26 Feb 1997 08:21:57 GMT”>
注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。
4、Pragma (cach模式)
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：<Meta http-equiv=”Pragma” Content=”No-cach”>
注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。
5、Set-Cookie (cookie设定)
说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。
用法：<Meta http-equiv=”Set-Cookie” Content=”cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/”>
注意：必须使用GMT的时间格式。
9、MSThemeCompatible (XP主题)
说明：是否在IE中关闭 xp 的主题
用法：<Meta http-equiv=”MSThemeCompatible” Content=”Yes”>
注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。
10、Generator (页面生成器)
说明：页面生成器generator
用法：<Meta http-equiv="Perl CGI" Content=”Generator”>
注意：用什么东西做的，类似商品出厂厂商或程序。
11、Content-Script-Type (脚本相关)
说明：这是近来W3C的规范，指明页面中脚本的类型。
用法：<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
★NAME变量
name是描述网页的，对应于Content网页内容，以便于搜索引擎机器人查找、分类目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。
name的value值name=""指定所提供信息的类型。有些值是已经定义好的。例如description(说明)、keyword(关键字)、refresh(刷新)等。还可以指定其他任意值，如：creationdate(创建日期) 、document ID(文档编号)和level(等级)等。name的content指定实际内容。如：如果指定level(等级)为value(值)，则Content可能是beginner(初级)、intermediate(中级)、advanced(高级)。
1、Keywords (关键字)
说明：为搜索引擎提供的关键字列表
用法：<Meta name=”Keywords” Content=”关键词1,关键词2，关键词3,关键词4,……”>
注意：各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个META元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。例如：
<Meta name=”Kyewords” Lang=”EN” Content=”vacation,greece,sunshine”>
<Meta name="kyewords" Lang=”FR” Content=”vacances,grè:ce,soleil”>
2、Description (简介)
说明：Description用来告诉搜索引擎你的网站主要内容。
用法：<Meta name=”Description” Content=”你网页的简述”>
3、Robots (机器人向导)
说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：<Meta name=”Robots” Content=”All|None|Index|Noindex|Follow|Nofollow”>
注意：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
index：文件将被检索；让robot/spider登录
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
4、Author (作者)
说明：标注网页的作者或制作组
用法：<Meta name=”Author” Content=”张三，abc@163.com”>
注意：Content可以是：你或你的制作组的名字,或Email
5、Copyright (版权)
说明：标注版权
用法：<Meta name=”Copyright” Content=”本页版权归FreeOA所有，All Rights Reserved”>
6、Generator (编辑器)
说明：编辑器的说明
用法：<Meta name=”Generator” Content=”PCDATA|FrontPage|”>
注意：Content=”你所用编辑器”
7、revisit-after (重访)
说明：
用法：<META name=”revisit-after” CONTENT=”7 days” >
★Head中的其它一些用法
1、scheme (方案)
说明：scheme can be used when name is used to specify how the value of content should be interpreted.
用法：<meta scheme=”ISBN” name=”identifier” content=”0-14-043205-1″ />
2、Link (链接)
说明：链接到文件
用法：<Link href=”soim.ico” rel=”Shortcut Icon”>
注意：很多网站如果你把她保存在收件夹中后，会发现它连带着一个小图标，如果再次点击进入之后还会发现地址栏中也有个小图标。现在只要在你的页头加上这段话，就能轻松实现这一功能。<Link> 用来将目前文件与其它 URL 作连结，但不会有连结按钮，用於 <HEAD> 标记间， 格式如下：
<link href=”URL” rel=”relationship”>
<link href=”URL” rev=”relationship”>
3、Base (基链接)
说明：插入网页基链接属性
用法：<Base href=”http://www.freeoa.net/” target=”_blank”>
注意：你网页上的所有相对路径在链接时都将在前面加上“http://www.freeoa.net/”。其中target=”_blank”是链接文件在新的窗口中打开，你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开；改为“_self”链接文件在当前窗口帧中打开；改为“_top”链接文件全屏显示。
以上是META标签的一些基本用法，其中最重要的就是：Keywords和Description的设定。为什么呢？道理很简单，这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问你的站点!根据现在流行搜索引擎的工作原理，搜索引擎先派机器人自动在WWW上搜索，当发现新的网站时，便于检索页面中的Keywords和Description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。由此看来，我们必须记住添加Keywords和Description的META标签，并尽可能写好关键字和简介。否则后果就会是：
●如果你的页面中根本没有Keywords和Description的META标签，那么机器人是无法将你的站点加入数据库，网友也就不可能搜索到你的站点。
●如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可能性也是非常小的。
写好Keywords(关键字)要注意以下几点：
●不要用常见词汇。例如www、homepage、net、web等。
●不要用形容词，副词。例如最好的，最大的等。
●不要用笼统的词汇，要尽量精确。例如“爱立信手机”改用“T28SC”会更好。
搜索与你的网站内容相仿的网站，查看排名前十位的网站的META关键字，将它们用在你的网站上，效果可想而知了。
★小窍门
为了提高搜索点击率，这里还有一些“捷径”可以帮得到你：
●为了增加关键词的密度，将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。
●在图像的ALT注释语句中加入关键字。如：<IMG SRC=”xxx.gif” Alt=”keywords”>
●利用HTML的注释语句，在页面代码里加入大量关键字。用法： <!– 这里插入关键字 –>
<head>
<title>理解HTML头</title>
<meta http-equiv=”Content-Language” content=”zh-cn”><meta http-equiv=”Content-Type” content=”text/html; charset=utf8″>
<meta name=”GENERATOR” content=”FreeOA Perl Cgi″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<meta name="kyewords" content=”FreeOA HTML HEAD 网页制作”>
</head>
下文转自：HTML head & meta标签详解，感谢原作者。
Head标签综述
在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的。它包含了像页面的<title>(标题),CSS(如果你选择用 CSS 来为 HTML 内容添加样式)，指向自定义图标的链接和其他的元数据(描述HTML的数据，比如，作者，和描述文档的重要关键词)。本文将涵盖上述内容并拓展，为您对标记的使用打下一个良好的基础。
Doctype(文档类型)
DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”，在Web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。在HTML中 doctype 有两个主要目的。
1)对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
2)决定浏览器的呈现模式
对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html 排版布局。浏览器有三种方式解析HTML文档。
非怪异(标准)模式
怪异模式
部分怪异(近乎标准)模式
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
HTML DOCTYPE文档类型举例说明
HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如：font、b等)，不可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签(例如：font、b等)，不可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如：font、b等)，不可以使用框架(推荐使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签(例如：font、b)，不可以使用框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5文档类型
<!DOCTYPE html>
<!DOCTYPE>的用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
解析：在上面的声明中，声明了文档的根元素是 html，它在公共标识符被定义为 “-//W3C//DTD XHTML 1.0 Strict//EN” 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
-：表示组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。+为默认,表示组织名称已注册。
DTD：指定公开文本类，即所引用的对象类型。默认为DTD。
HTML：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML。
URL：指定所引用对象的位置。
Strict：排除所有 W3C 专家希望逐步淘汰的代表性属性和元素。
HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
使用建议
目前的主流浏览器基本上都支持了HTML，所以只需使用：
<!-- Doctype HTML5 -->
<!doctype html>
Language attribute(语言属性)
语言声明详解
我们经常需要用缩写的代码来表示一种语言，比如用en表示英语，用de表示德语。ISO 639就是规定语种代码的国际标准。最早的时候，ISO 639规定的代码是，用两个拉丁字母表示一种语言，这被称为ISO 639-1。但是，两个拉丁字母最多只有26^2=676种组合，而世界上已知的语言总数可能有六七千种，因此明显是不够的。所以，后来又规定了ISO 639-2，用三个拉丁字母的组合表示一种语言。
常见语言的ISO 代码如下表：
完整的语言代码表请看这里。
但是只规定语种代码还不够，在同一种语言中，往往还包括许多种变体，比如中文分为简体中文和繁体中文两种，因此还必须规定子代码。以往，人们常用zh-CN表示在中国大陆地区使用的中文，也就是简体中文，用zh-TW表示在台湾地区使用的中文，也就是繁体中文。但是，这种表示法很不完善，试问中国大陆地区出版的繁体中文书籍，应该如何用代码表示呢？
于是就有了语言的标签表示法的国际标准RFC 4646，名称是《Tags for Identifying Languages》。
简单说，这个文件规定，一种语言的标签应该按照如下方式排列：
language-script-region-variant-extension-privateuse
language：这部分就是ISO 639规定的代码，比如中文是zh。
script：表示变体，比如简体汉字是zh-Hans，繁体汉字是zh-Hant。
region：表示语言使用的地理区域，比如zh-Hans-CN就是中国大陆使用的简体中文。
variant：表示方言。
extension-privateus：表示扩展用途和私有标识。
一般约定，language标签全部小写，region标签全部大写，script标签只有首字母大写。不同标签之间用连字号-链接。下面列出一些与中文有关的语言标签。
zh-Hans 简体中文
zh-Hans-CN 大陆地区使用的简体中文
zh-Hans-HK 香港地区使用的简体中文
zh-Hans-MO 澳门使用的简体中文
zh-Hans-SG 新加坡使用的简体中文
zh-Hans-TW 台湾使用的简体中文
zh-Hant 繁体中文
zh-Hant-CN 大陆地区使用的繁体中文
zh-Hant-HK 香港地区使用的繁体中文
zh-Hant-MO 澳门使用的繁体中文
zh-Hant-SG 新加坡使用的繁体中文
zh-Hant-TW 台湾使用的繁体中文
zh 是中文，代表的是宏语言(Macrolanguage)，zh 单独用表示中文整体，可以是方言、文言文、简繁体等混合内容，毕竟大陆地区大部分人都能认识不少繁体字，台湾地区大部分人也能认识很多简体字。理论上 zh-CN 表示的是中国大陆中文，包含方言和简繁体，但默认指简体普通话，局限性就体现出来了，没法表达繁体普通话，这时为了精准性，应该用独立语种替换，包括但不仅限于普通话和七大方言：
cmn 普通话(官话、国语)
wuu 吴语(江浙话、上海话)、czh 徽语(徽州话、严州话、吴语-徽严片)
hak 客家语
yue 粤语(广东话)
nan 闽南语(福建话、台语)、cpx 莆仙话(莆田话、兴化语)、cdo 闽东语、mnp 闽北语、zco 闽中语
gan 赣语(江西话)
hsn 湘语(湖南话)
cjy 晋语(山西话、陕北话)
目前，最新的语言标签标记法的国际标准是IETF的BCP 47(Best Current Practice)，也就是RFC 5646取代了之前的RFC 4646
RFC 5646和之前版本的区别：
所有子标签都在IANA registry查询。
所有子标签有固定的位置和长度。
描述更具灵活性。
RFC 5646规定语言标签按以下形式排列：
language-extlang-script-region-variant-extension-privateuse
语言文字种类-扩展语言文字种类-书写格式-国家和地区-变体-扩展-私有
所有语言标签都是大小写无关的，但是依照惯例 language 标签小写，region 标签大写，script 标签首字大写。
BCP47中语言tag的BNF语法定义在的第3、4页：
Language-Tag = langtag ; normal language tags
/ privateuse ; private use tag
/ grandfathered ; grandfathered tags
规范的语言tag必须是符合3种情况其中的一种。第二种的私有定义我们就不讨论了，而第三种为了兼容和过渡，比如zh-xiang。我们只关注第一种情况：看看langtag的定义：
langtag = language
["-" script]
["-" region]
*("-" variant)
*("-" extension)
["-" privateuse]
language = 2*3ALPHA ; shortest ISO 639 code
["-" extlang] ; sometimes followed by
; extended language subtags
/ 4ALPHA ; or reserved for future use
/ 5*8ALPHA ; or registered language subtag
extlang = 3ALPHA ; selected ISO 639 codes
*2("-" 3ALPHA) ; permanently reserved
script = 4ALPHA ; ISO 15924 code
region = 2ALPHA ; ISO 3166-1 code
/ 3DIGIT ; UN M.49 code
variant = 5*8alphanum ; registered variants
/ (DIGIT 3alphanum)
extension = singleton 1*("-" (2*8alphanum))
“langtag”定义中很明确：“language”是必须的，后面“script”，“region”，“variant”都为可选，且必须使用-分隔，“varient”可以出现0次或无数次，而“script”等只能出现0或1次。
这个最重要的“language”的定义有三种情况：使用最短ISO 639代码2个或3个字符(注意这个最短！！)加可选的“extlang”(3个字符长度的ISO 639-3代码)。language必须优先考虑ISO 639-1中的代码，如果没有则选择639-2中三位的，如果有extlang，那extlang必须使用ISO 639-3中的代码和扩展预留。
另外两种“language”的定义，一个是必须4个字符长度保留，另一个是5到8个字符的subtag。subtag其实就是一个符合language的定义，因为extlang的扩展可以出现0到2次，所以subtag的字符长度可能是5-8之间。
语言文字标签示例：
language:
fr 法语
es 西班牙语
language-extlang 或 language:
zh-lzh 或 lzh 中文 (文言文)
sgn-csl 或 csl 手语 (中国大陆)
language-region:
zh-CN 中文 (简体, 中国大陆)
en-US 英语 (美国)
language-script:
cmn-Hans 普通话 (简体)
yue-Hant 粤语 (繁体)
language-script-region：
cmn-Hans-CN 普通话 (简体, 中国大陆)
cmn-Hant-TW 普通话 (繁体, 台湾)
language-script-variant:
zh-Latn-pinyin 汉语拼音(例：nǐ，拉丁字母形式)
zh-Bopo-pinyin 注音拼音(例：ㄋ丨ˇ，罗马字形式，中国大陆1958年以前使用，台湾目前使用)
使用建议
在设置页面语言的时候，需要特别注意，对于简体中文页面，应该设置为lang=“zh-cmn-Hans”，而不是lang=”zh-CN”。
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
Charset(字符格式)
在HTML5场景下，只需使用如下代码即可。
<!-- Set character encoding for the document -->
<meta charset="utf-8">
如果是非HTML5场景，使用：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
需要注意，为避免造成解析的错误，最好的HTTP的HEAD中“Content-Type”字段指定charset。
X-UA-Compatible(浏览器兼容模式)
X-UA-Compatible简介
X-UA-Compatible是针对IE8新加的一个设置，对于IE8以下的浏览器是不识别的。以下为一些常用的兼容模式：
<meta http-equiv="X-UA-Compatible" content="IE=9">
IE9 模式支持全范围的既定行业标准，包括 HTML5(草案), W3C CSS Level 3 规范(草案), SVG 1.0 规范等
<meta http-equiv="X-UA-Compatible" content="IE=8">
IE8 模式支持许多既定行业标准，W3C CSS Level 2.1 规范和 W3C Selectors API，有限支持 W3C CSS Level 3 规范(草案)和其他行业标准
<meta http-equiv="X-UA-Compatible" content="IE=7">
IE7 模式强制浏览器按照 IE 7 标准模式渲染文档，忽略是否定义指令
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
Emulate IE9 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE9 渲染，怪癖模式下以 IE5 渲染。和 IE9 模式不同的是，Emulate IE9 模式会考虑指令。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
Emulate IE8 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE8 渲染，怪癖模式下以 IE5 渲染。和 IE8 模式不同的是，Emulate IE8 模式会考虑指令
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Emulate IE7 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE7 渲染，怪癖模式下以 IE5 渲染。和 IE7 模式不同的是，Emulate IE7 模式会考虑指令。对于大多数站点而言，这是首选的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=5">
IE5 模式告诉 IE7 是否以怪癖模式渲染文档
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。
<meta http-equiv="X-UA-Compatible" content="chrome=1">
使用以上代码强制 IE 使用 Chrome Frame 渲染
提示 IE 用户安装 Google Frame：Google 官方提供了对 Google Frame 插件安装情况的检测，这里直接调用方法即可，如果检测到 IE 并未安装 Google Frame，则弹出对话框提示安装。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
针对IE 6，7，8等版本的浏览器插件Google Chrome Frame，可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核。
最佳的兼容模式方案，结合考虑以上两种：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
如果IE有安装Google Chrome Frame，那么就走安装的组件，如果没有就和<meta http-equiv=”X-UA-Compatible” content=”edge” />一样。
使用建议
由于目前IE使用的量越来越少，先前IE的怪异模式也越来越少见，所以浏览器兼容模式也没有什么设置的必要性。
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
Viewport(视窗)
设备像素和CSS像素
设备像素(device pixel, dp): 又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位pt。pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(英寸)，而1英寸等于2.54厘米。所以设备像素的特点就是大小固定，不可变。比如 iPhone 5 的分辨率为 640 x 1136px.
CSS像素(css pixel, px): 又称为虚拟像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是前面所说的设备像素(device pixel)。比如 iPhone 5 的 CSS 像素数为 320 x 568px.
px 相对单位指的是图像显示的基本单元，作为一个抽象概念，CSS 像素又具有两个方面的相对性，即：
在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的
在不同的设备之间，每1个 CSS 像素所代表的设备像素是可以变化的
所以，CSS中的1px(CSS像素 可变)!== 设备的1px(设备像素 不可变)。
在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是CSS中的像素就是设备的物理像素。但实际情况却并非如此，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。
那么px 都会受哪些因素的影响而变化？
每英寸像素(pixel per inch, ppi/PPI)：它表示的是每英寸所拥有的像素(pixel)数目，更确切的说法应该是像素密度，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。数值越高，代表显示屏能够以越高的密度显示图像。
设备像素比(device pixel ratio, dpr/DPR)：它描述的是未缩放状态下，设备像素和 CSS 像素的初始比例关系，也可以解释为默认缩放比例。通俗来说，它是指在开发中1个 CSS 像素占用多少设备像素，如dpr=2代表1个 CSS 像素用2×2个设备像素来绘制，所以，可以理解为1px由多少个设备像素组成。
DPI: 每英寸多少点。当用于描述显示器时，我们可以吧 ppi 和 dpi 认为是同一个概念。那么 ppi和dpr到底是什么关系呢？ppi用作显示设备的工业标准，业界人士用ppi的值来衡量一个屏幕是否为高清屏，然后根据得到的密度分界来获得此时对应的dpr值，也即默认缩放比例。dpr和ppi相关，一般dpr为ppi/160的整数倍，如下所示：
项名 ldpi mdpi hdpi xhdpi
密度分界(密度值) 120 160 240 320
屏幕尺寸(分辨率) 240×320 320×480 480×800 640×960
默认缩放比例 0.75 1.0 1.5 2.0
了解了这两个概念后，我们可以来说说导致 CSS 中 px 变化的因素了。
从 iPhone4 开始，苹果推出了 Retina 屏，分辨率提高了一倍(640*960)，而屏幕尺寸却没变。这时一个css像素=2个设备像素(换算公式为 1px = (dpr)^2 * 1dp, 必须让css中的1px代表更多的设备像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，否则会因太小而看不清)，即 DPR=2，示意图如下：
引起css中px的变化的因素还有用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
如何理解上面说到的缩放呢？放大1倍，原来 1px 的东西变成 2px，但1px 变为 2px 并不是把原来的320px 变为640px，而是在实际宽度不变的情况下，1px 变得跟原来的 2px 的长度(长宽)一样了(元素会占据更多的设备像素)，所以放大1倍后原来需要 320px 才能填满的宽度现在只需要 160px，也即原来 320px 的面积里现在只能填入 160px 的东西了。
什么是viewport？
viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做“视窗“或”视区”。Viewport 虽然它只是一个单词，但它却囊括了三个方面。Viewport 分为：视觉视窗、布局视窗和理想视窗。
视觉视窗(visual viewport)
所谓的视觉视窗说白了就是设备的屏幕区域，换句话说就是用户通过屏幕所看到的页面内容。但它所对应的并不是指屏幕区域里的物理像素，而是CSS 像素。并且它所包含的 CSS 像素的数量也是随着用户缩放而有所改变。
布局视窗(layout viewport)
移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。
布局视窗表示的是浏览器默认的viewport，一般情况下这个宽度要大于浏览器可视区域宽度。
创建移动设备的布局视窗宽度：
理想视窗(ideal viewport)
现在我们已经有两个viewport了：visual viewport(视觉视窗)和layout viewport(布局视窗)。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。
理想视窗是为了布局视窗而生的，它其实就是变了尺寸的布局视窗。理想视窗就是把布局视窗调整到合适的状态，让页面有最好的表面效果，这也是它名字的由来。
理想视窗并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备ideal viewport的宽度都为多少，可以到http://viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。
利用meta标签对viewport进行控制
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？ 我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
<meta name=”viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”>
该meta标签的作用是让当前viewport的宽度等于设备的宽度(ideal viewport)，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
在苹果的规范中，meta viewport 有6个属性，如下：
内容 含义
width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
利用CSS @VIEWPORT 做设备适配
在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。W3C正在尝试规范一种新的设备适配方法的原因，将HTML对viewport的控制转交给CSS。
@viewport CSS 规则
使用@viewport规则控制viewport，与使用meta标签的效果相同，只是我们完全使用CSS来控制。与使
@viewport {
width: device-width;
}
@viewport 描述符(Descriptors)
zoom描述符等同于viewport meta 标签的initial-sacale属性。
@viewport {
width: device-width;
zoom: 2;
}
与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。
@viewport {
width: device-width;
max-zoom: 3;
min-zoom: 0.50;
}
user-zoom与user-scalable属性等效。
@viewport {
width: device-width;
user-zoom: fixed;
}
由于目前各大浏览器对@viewport支持情况还不佳，目前阶段还是建议使用viewport meta 标签进行控制。
使用建议
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
viewport-fit是Apple新加的属性，目的是控制iPhone X的刘海显示。
Title(标题)
页面标题需要注意长度，在能够反应页面的内容的情况不宜过长，英文控制在55字符以内，中文则控制在23个文字以内。
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
Description(描述)
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
同样需要控制页面描述的长度。
Favicons(图标)
非常建议将favicon.ico放在网站的根目录，原因是IE10及以下会自动请求网站根目录的favicon.ico文件。对于For IE 11, Edge, Chrome, Firefox, Safari, Opera推荐使用.png格式的图片来代替.ico文件(推荐尺寸32x32px)
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
Meta标签详解
<meta>标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他 web 服务。meta 标签包含了 HTTP 标题信息(http-equiv)和页面描述信息(name)。
http-equiv：该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。最常见的大概属于Content-Type了，设置编码类型。如
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5中可以简化为
<meta charset="utf-8">
http-equiv常见还有其它如下等。
Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过期时间
last-modified : 页面最后生成时间
expires : 设置 cache 过期时间
cache-control : 设置文档的缓存机制
…
name:该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport。
SEO相关
页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
<meta name="keywords" content="your tags" />
页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="150 words" />
搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。
<meta name="robots" content="index,follow" />
定义网页作者
<meta name="author" content="author,email address">
显示区域
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 到10,000，默认为980 像素)
height：高度(数值 / device-height)(范围从223 到10,000)
initial-scale：初始的缩放比例 (范围从>0 到10)
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
minimal-ui：iOS 7.1 beta 2 中新增属性(注意：iOS8 中已经删除)，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name=”viewport” content=”width=device-width, initial-scale=1, minimal-ui”>
注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
IOS私有属性
1)apple-mobile-web-app-capable
启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
2)apple-mobile-web-app-status-bar-style
隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default(白色，默认)| black(黑色)| black-translucent(半透明)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方(会覆盖页面 20px 高度， Retina 屏幕为 40px )。
3)添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="标题">
4)iOS 图标
rel 参数：
apple-touch-icon 图片自动处理成圆角和高光等效果。
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
iPhone 和 iTouch，默认 57×57 像素，必须有
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /><!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"><!--IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。适配iPhone 6 plus，则需要在加上这段-->
5)iOS 启动画面
iPad 的启动画面是不包括状态栏区域的。iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496(Retina) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率)-->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina)-->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)-->
6)添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
浏览器内核控制
国内浏览器很多都是双内核(webkit和Trident)，webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。国内双核浏览器默认内核模式如下：
搜狗高速浏览器、QQ浏览器：IE内核(兼容模式)
360极速浏览器、遨游浏览器：Webkit内核(极速模式)
<meta name="renderer" content="webkit|ie-comp|ie-stand"><!--内核选择-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!--优先使用 IE 最新版本和Chrome这，如果安装了Google Chrome Frame，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。-->
<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 -->
其他一些meta标签：
<meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="MobileOptimized" content="320"><!-- 微软的老式浏览器 -->
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->
<meta content="telephone=no" name="format-detection" /><!--忽略数字自动识别为电话号码-->
<meta content="email=no" name="format-detection" /><!--忽略识别邮箱-->
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"><!--[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。-->
<meta http-equiv="Cache-Control" content="no-siteapp" /><!--用百度打开网页可能会对其进行转码(比如贴广告)，避免转码可添加如下meta-->
<meta name="google" value="notranslate"><!--禁止 Chrome 浏览器中自动提示翻译-->
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
头部标记(Head)
<title>这里放该主页的标题</title> 将会显示在浏览器的标题栏
<base>定义一个相对路径的绝对路径
<link>相关文件的关联
<meta>
<meta http-equiv="Content-type" content="text/html;charset=gbk"> 这是我们最常见的一个meta标签，表示主页编码为中文。
HTMl中Meta标签详解
Meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content网页内容，以便于搜索引擎机器人查找、分类目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。这其中最重要的是description站点在搜索引擎上的描述和keywords分类关键词，所以应该给每页加一个meta值。比较常用的有以下几个：
name属性
1、<meta name="generator" contect="">用以说明生成工具等；
2、<meta name="keysords" contect="">向搜索引擎说明你的网页的关键词；
3、<meta name="description" contect="">告诉搜索引擎你的站点的主要内容；
4、<meta name="author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；
5、<meta name="robots" contect= "all|none|index|noindex|follow|nofollow">
Robots的属性说明如下：
设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv属性
1)、<meta http-equiv="Content-Type" contect="text/html";charset=gb2312">和 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言；又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc等字符集；
2)、<meta http-equiv="Refresh" contect="url=http://yourlink">定时让网页在指定的时间n内，跳转到页面http://yourlink；
3)、<meta http-equiv="Expires" contect="Mon,12 May 2011 00:20:00 GMT">可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；
4)、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；
5)、<meta http-equiv="set-cookie" contect="Mon,12 May 2011 00:20:00 GMT"> cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；
6)、<meta http-equiv="Pics-label" contect="">网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；
7)、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；
8)、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20，transtion=6)">设定进入和离开页面时的特殊效果(特效)，不过所加的页面不能够是一个frame页面。
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级等等。
6、Window-target (显示窗口的设定)
说明：强制页面在当前窗口以何种方式打开。
用法：<meta http-equiv=”Widow-target” Content=”_top”>
注意：这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。
7、Pics-label (网页RSAC等级评定)
说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的。
注意：不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。用户可以设置Microsoft Internet Explorer来排除包含有色情和暴力内容的站点。级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www.rsac.org/。
8、Page-Enter、Page-Exit (进入与退出)
说明：这个是页面被载入和调出时的一些特效。
用法：<Meta http-equiv=”Page-Enter” Content=”blendTrans(Duration=0.5)”>
<Meta http-equiv=”Page-Exit” Content=”blendTrans(Duration=0.5)”>
注意：blendTrans是动态滤镜的一种，产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:
<Meta http-equiv=”Page-Enter” Content=”revealTrans(duration=x, transition=y)”>
<Meta http-equiv=”Page-Exit” Content=”revealTrans(duration=x, transition=y)”>
Duration表示滤镜特效的持续时间(单位：秒)
Transition滤镜类型。表示使用哪种特效，取值为0-23。
0 矩形缩小
1 矩形扩大
2 圆形缩小
3 圆形扩大
4 下到上刷新
5 上到下刷新
6 左到右刷新
7 右到左刷新
8 竖百叶窗
9 横百叶窗
10 错位横百叶窗
11 错位竖百叶窗
12 点扩散
13 左右到中间刷新
14 中间到左右刷新
15 中间到上下
16 上下到中间
17 右下到左上
18 右上到左下
19 左上到右下
20 左下到右上
21 横条
22 竖条
23 以上22种随机选择一种
详细介绍
下面介绍一些有关此类标记的例子及解释。META标签分两大部分：HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
★HTTP-EQUIV
HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有：
1、Content-Type和Content-Language (显示字符集的设定)
说明：设定页面使用的字符集，用以说明主页制作所使用的文字已经语言，浏览器会根据此来调用相应的字符集显示page内容。
用法：<Meta http-equiv=”Content-Type” Content=”text/html; Charset=gbk″>
<Meta http-equiv=”Content-Language” Content=”zh-CN”>
注意：该META标签定义了HTML页面所使用的字符集为GB2132，就是国标汉字码。如果将其中的“charset=GB2312”替换成“BIG5”，则该页面所用的字符集就是繁体中文Big5码。当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE就提示下载。其他的语言也对应不同的charset，比如日文的字符集是“iso-2022-jp ”，韩文的是“ks_c_5601”。
Content-Type的Content还可以是：text/xml等文档类型；
Charset选项：ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw,x-cns11643-1,x-cns11643-2等字符集；Content-Language的Content还可以是：EN、zh-cn等语言代码。
2、Refresh (刷新)
说明：让网页多长时间秒刷新自己，或在多长时间后让网页自动链接到其它网页。
用法：<Meta http-equiv=”Refresh” Content=”30″>
<Meta http-equiv=”Refresh” Content=”5; Url=http://www.downme.com”>
注意：其中的5是指停留5秒钟后自动刷新到URL网址。
3、Expires (期限)
说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。
用法：<Meta http-equiv=”Expires” Content=”0″>
<Meta http-equiv=”Expires” Content=”Wed, 26 Feb 1997 08:21:57 GMT”>
注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。
4、Pragma (cach模式)
说明：禁止浏览器从本地机的缓存中调阅页面内容。
用法：<Meta http-equiv=”Pragma” Content=”No-cach”>
注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。
5、Set-Cookie (cookie设定)
说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。
用法：<Meta http-equiv=”Set-Cookie” Content=”cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/”>
注意：必须使用GMT的时间格式。
9、MSThemeCompatible (XP主题)
说明：是否在IE中关闭 xp 的主题
用法：<Meta http-equiv=”MSThemeCompatible” Content=”Yes”>
注意：关闭 xp 的蓝色立体按钮系统显示样式，从而和win2k 很象。
10、Generator (页面生成器)
说明：页面生成器generator
用法：<Meta http-equiv="Perl CGI" Content=”Generator”>
注意：用什么东西做的，类似商品出厂厂商或程序。
11、Content-Script-Type (脚本相关)
说明：这是近来W3C的规范，指明页面中脚本的类型。
用法：<Meta http-equiv=”Content-Script-Type” Content=”text/javascript”>
★NAME变量
name是描述网页的，对应于Content网页内容，以便于搜索引擎机器人查找、分类目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类。
name的value值name=""指定所提供信息的类型。有些值是已经定义好的。例如description(说明)、keyword(关键字)、refresh(刷新)等。还可以指定其他任意值，如：creationdate(创建日期) 、document ID(文档编号)和level(等级)等。name的content指定实际内容。如：如果指定level(等级)为value(值)，则Content可能是beginner(初级)、intermediate(中级)、advanced(高级)。
1、Keywords (关键字)
说明：为搜索引擎提供的关键字列表
用法：<Meta name=”Keywords” Content=”关键词1,关键词2，关键词3,关键词4,……”>
注意：各关键词间用英文逗号“,”隔开。META的通常用处是指定搜索引擎用来提高搜索质量的关键词。当数个META元素提供文档语言从属信息时，搜索引擎会使用lang特性来过滤并通过用户的语言优先参照来显示搜索结果。例如：
<Meta name=”Kyewords” Lang=”EN” Content=”vacation,greece,sunshine”>
<Meta name="kyewords" Lang=”FR” Content=”vacances,grè:ce,soleil”>
2、Description (简介)
说明：Description用来告诉搜索引擎你的网站主要内容。
用法：<Meta name=”Description” Content=”你网页的简述”>
3、Robots (机器人向导)
说明：Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。Content的参数有all、none、index、noindex、follow、nofollow。默认是all。
用法：<Meta name=”Robots” Content=”All|None|Index|Noindex|Follow|Nofollow”>
注意：许多搜索引擎都通过放出robot/spider搜索来登录网站，这些robot/spider就要用到meta元素的一些特性来决定怎样登录。
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；(和 “noindex, no follow” 起相同作用)
index：文件将被检索；让robot/spider登录
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)
nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)
4、Author (作者)
说明：标注网页的作者或制作组
用法：<Meta name=”Author” Content=”张三，abc@163.com”>
注意：Content可以是：你或你的制作组的名字,或Email
5、Copyright (版权)
说明：标注版权
用法：<Meta name=”Copyright” Content=”本页版权归FreeOA所有，All Rights Reserved”>
6、Generator (编辑器)
说明：编辑器的说明
用法：<Meta name=”Generator” Content=”PCDATA|FrontPage|”>
注意：Content=”你所用编辑器”
7、revisit-after (重访)
说明：
用法：<META name=”revisit-after” CONTENT=”7 days” >
★Head中的其它一些用法
1、scheme (方案)
说明：scheme can be used when name is used to specify how the value of content should be interpreted.
用法：<meta scheme=”ISBN” name=”identifier” content=”0-14-043205-1″ />
2、Link (链接)
说明：链接到文件
用法：<Link href=”soim.ico” rel=”Shortcut Icon”>
注意：很多网站如果你把她保存在收件夹中后，会发现它连带着一个小图标，如果再次点击进入之后还会发现地址栏中也有个小图标。现在只要在你的页头加上这段话，就能轻松实现这一功能。<Link> 用来将目前文件与其它 URL 作连结，但不会有连结按钮，用於 <HEAD> 标记间， 格式如下：
<link href=”URL” rel=”relationship”>
<link href=”URL” rev=”relationship”>
3、Base (基链接)
说明：插入网页基链接属性
用法：<Base href=”http://www.freeoa.net/” target=”_blank”>
注意：你网页上的所有相对路径在链接时都将在前面加上“http://www.freeoa.net/”。其中target=”_blank”是链接文件在新的窗口中打开，你可以做其他设置。将“_blank”改为“_parent”是链接文件将在当前窗口的父级窗口中打开；改为“_self”链接文件在当前窗口帧中打开；改为“_top”链接文件全屏显示。
以上是META标签的一些基本用法，其中最重要的就是：Keywords和Description的设定。为什么呢？道理很简单，这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问你的站点!根据现在流行搜索引擎的工作原理，搜索引擎先派机器人自动在WWW上搜索，当发现新的网站时，便于检索页面中的Keywords和Description，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。由此看来，我们必须记住添加Keywords和Description的META标签，并尽可能写好关键字和简介。否则后果就会是：
●如果你的页面中根本没有Keywords和Description的META标签，那么机器人是无法将你的站点加入数据库，网友也就不可能搜索到你的站点。
●如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可能性也是非常小的。
写好Keywords(关键字)要注意以下几点：
●不要用常见词汇。例如www、homepage、net、web等。
●不要用形容词，副词。例如最好的，最大的等。
●不要用笼统的词汇，要尽量精确。例如“爱立信手机”改用“T28SC”会更好。
搜索与你的网站内容相仿的网站，查看排名前十位的网站的META关键字，将它们用在你的网站上，效果可想而知了。
★小窍门
为了提高搜索点击率，这里还有一些“捷径”可以帮得到你：
●为了增加关键词的密度，将关键字隐藏在页面里(将文字颜色定义成与背景颜色一样)。
●在图像的ALT注释语句中加入关键字。如：<IMG SRC=”xxx.gif” Alt=”keywords”>
●利用HTML的注释语句，在页面代码里加入大量关键字。用法： <!– 这里插入关键字 –>
<head>
<title>理解HTML头</title>
<meta http-equiv=”Content-Language” content=”zh-cn”><meta http-equiv=”Content-Type” content=”text/html; charset=utf8″>
<meta name=”GENERATOR” content=”FreeOA Perl Cgi″>
<meta name=”ProgId” content=”FrontPage.Editor.Document”>
<meta name="kyewords" content=”FreeOA HTML HEAD 网页制作”>
</head>
下文转自：HTML head & meta标签详解，感谢原作者。
Head标签综述
在页面加载完成的时候，标签head里的内容，是不会在页面中显示出来的。它包含了像页面的<title>(标题),CSS(如果你选择用 CSS 来为 HTML 内容添加样式)，指向自定义图标的链接和其他的元数据(描述HTML的数据，比如，作者，和描述文档的重要关键词)。本文将涵盖上述内容并拓展，为您对标记的使用打下一个良好的基础。
Doctype(文档类型)
DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”，在Web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的XHTML网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。在HTML中 doctype 有两个主要目的。
1)对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
2)决定浏览器的呈现模式
对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html 排版布局。浏览器有三种方式解析HTML文档。
非怪异(标准)模式
怪异模式
部分怪异(近乎标准)模式
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
HTML DOCTYPE文档类型举例说明
HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如：font、b等)，不可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签(例如：font、b等)，不可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如：font、b等)，不可以使用框架(推荐使用)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签(例如：font、b)，不可以使用框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML5文档类型
<!DOCTYPE html>
<!DOCTYPE>的用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
解析：在上面的声明中，声明了文档的根元素是 html，它在公共标识符被定义为 “-//W3C//DTD XHTML 1.0 Strict//EN” 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
-：表示组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。+为默认,表示组织名称已注册。
DTD：指定公开文本类，即所引用的对象类型。默认为DTD。
HTML：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。默认为HTML。
URL：指定所引用对象的位置。
Strict：排除所有 W3C 专家希望逐步淘汰的代表性属性和元素。
HTML5 为什么只需要写 <!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
使用建议
目前的主流浏览器基本上都支持了HTML，所以只需使用：
<!-- Doctype HTML5 -->
<!doctype html>
Language attribute(语言属性)
语言声明详解
我们经常需要用缩写的代码来表示一种语言，比如用en表示英语，用de表示德语。ISO 639就是规定语种代码的国际标准。最早的时候，ISO 639规定的代码是，用两个拉丁字母表示一种语言，这被称为ISO 639-1。但是，两个拉丁字母最多只有26^2=676种组合，而世界上已知的语言总数可能有六七千种，因此明显是不够的。所以，后来又规定了ISO 639-2，用三个拉丁字母的组合表示一种语言。
常见语言的ISO 代码如下表：
完整的语言代码表请看这里。
但是只规定语种代码还不够，在同一种语言中，往往还包括许多种变体，比如中文分为简体中文和繁体中文两种，因此还必须规定子代码。以往，人们常用zh-CN表示在中国大陆地区使用的中文，也就是简体中文，用zh-TW表示在台湾地区使用的中文，也就是繁体中文。但是，这种表示法很不完善，试问中国大陆地区出版的繁体中文书籍，应该如何用代码表示呢？
于是就有了语言的标签表示法的国际标准RFC 4646，名称是《Tags for Identifying Languages》。
简单说，这个文件规定，一种语言的标签应该按照如下方式排列：
language-script-region-variant-extension-privateuse
language：这部分就是ISO 639规定的代码，比如中文是zh。
script：表示变体，比如简体汉字是zh-Hans，繁体汉字是zh-Hant。
region：表示语言使用的地理区域，比如zh-Hans-CN就是中国大陆使用的简体中文。
variant：表示方言。
extension-privateus：表示扩展用途和私有标识。
一般约定，language标签全部小写，region标签全部大写，script标签只有首字母大写。不同标签之间用连字号-链接。下面列出一些与中文有关的语言标签。
zh-Hans 简体中文
zh-Hans-CN 大陆地区使用的简体中文
zh-Hans-HK 香港地区使用的简体中文
zh-Hans-MO 澳门使用的简体中文
zh-Hans-SG 新加坡使用的简体中文
zh-Hans-TW 台湾使用的简体中文
zh-Hant 繁体中文
zh-Hant-CN 大陆地区使用的繁体中文
zh-Hant-HK 香港地区使用的繁体中文
zh-Hant-MO 澳门使用的繁体中文
zh-Hant-SG 新加坡使用的繁体中文
zh-Hant-TW 台湾使用的繁体中文
zh 是中文，代表的是宏语言(Macrolanguage)，zh 单独用表示中文整体，可以是方言、文言文、简繁体等混合内容，毕竟大陆地区大部分人都能认识不少繁体字，台湾地区大部分人也能认识很多简体字。理论上 zh-CN 表示的是中国大陆中文，包含方言和简繁体，但默认指简体普通话，局限性就体现出来了，没法表达繁体普通话，这时为了精准性，应该用独立语种替换，包括但不仅限于普通话和七大方言：
cmn 普通话(官话、国语)
wuu 吴语(江浙话、上海话)、czh 徽语(徽州话、严州话、吴语-徽严片)
hak 客家语
yue 粤语(广东话)
nan 闽南语(福建话、台语)、cpx 莆仙话(莆田话、兴化语)、cdo 闽东语、mnp 闽北语、zco 闽中语
gan 赣语(江西话)
hsn 湘语(湖南话)
cjy 晋语(山西话、陕北话)
目前，最新的语言标签标记法的国际标准是IETF的BCP 47(Best Current Practice)，也就是RFC 5646取代了之前的RFC 4646
RFC 5646和之前版本的区别：
所有子标签都在IANA registry查询。
所有子标签有固定的位置和长度。
描述更具灵活性。
RFC 5646规定语言标签按以下形式排列：
language-extlang-script-region-variant-extension-privateuse
语言文字种类-扩展语言文字种类-书写格式-国家和地区-变体-扩展-私有
所有语言标签都是大小写无关的，但是依照惯例 language 标签小写，region 标签大写，script 标签首字大写。
BCP47中语言tag的BNF语法定义在的第3、4页：
Language-Tag = langtag ; normal language tags
/ privateuse ; private use tag
/ grandfathered ; grandfathered tags
规范的语言tag必须是符合3种情况其中的一种。第二种的私有定义我们就不讨论了，而第三种为了兼容和过渡，比如zh-xiang。我们只关注第一种情况：看看langtag的定义：
langtag = language
["-" script]
["-" region]
*("-" variant)
*("-" extension)
["-" privateuse]
language = 2*3ALPHA ; shortest ISO 639 code
["-" extlang] ; sometimes followed by
; extended language subtags
/ 4ALPHA ; or reserved for future use
/ 5*8ALPHA ; or registered language subtag
extlang = 3ALPHA ; selected ISO 639 codes
*2("-" 3ALPHA) ; permanently reserved
script = 4ALPHA ; ISO 15924 code
region = 2ALPHA ; ISO 3166-1 code
/ 3DIGIT ; UN M.49 code
variant = 5*8alphanum ; registered variants
/ (DIGIT 3alphanum)
extension = singleton 1*("-" (2*8alphanum))
“langtag”定义中很明确：“language”是必须的，后面“script”，“region”，“variant”都为可选，且必须使用-分隔，“varient”可以出现0次或无数次，而“script”等只能出现0或1次。
这个最重要的“language”的定义有三种情况：使用最短ISO 639代码2个或3个字符(注意这个最短！！)加可选的“extlang”(3个字符长度的ISO 639-3代码)。language必须优先考虑ISO 639-1中的代码，如果没有则选择639-2中三位的，如果有extlang，那extlang必须使用ISO 639-3中的代码和扩展预留。
另外两种“language”的定义，一个是必须4个字符长度保留，另一个是5到8个字符的subtag。subtag其实就是一个符合language的定义，因为extlang的扩展可以出现0到2次，所以subtag的字符长度可能是5-8之间。
语言文字标签示例：
language:
fr 法语
es 西班牙语
language-extlang 或 language:
zh-lzh 或 lzh 中文 (文言文)
sgn-csl 或 csl 手语 (中国大陆)
language-region:
zh-CN 中文 (简体, 中国大陆)
en-US 英语 (美国)
language-script:
cmn-Hans 普通话 (简体)
yue-Hant 粤语 (繁体)
language-script-region：
cmn-Hans-CN 普通话 (简体, 中国大陆)
cmn-Hant-TW 普通话 (繁体, 台湾)
language-script-variant:
zh-Latn-pinyin 汉语拼音(例：nǐ，拉丁字母形式)
zh-Bopo-pinyin 注音拼音(例：ㄋ丨ˇ，罗马字形式，中国大陆1958年以前使用，台湾目前使用)
使用建议
在设置页面语言的时候，需要特别注意，对于简体中文页面，应该设置为lang=“zh-cmn-Hans”，而不是lang=”zh-CN”。
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
Charset(字符格式)
在HTML5场景下，只需使用如下代码即可。
<!-- Set character encoding for the document -->
<meta charset="utf-8">
如果是非HTML5场景，使用：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
需要注意，为避免造成解析的错误，最好的HTTP的HEAD中“Content-Type”字段指定charset。
X-UA-Compatible(浏览器兼容模式)
X-UA-Compatible简介
X-UA-Compatible是针对IE8新加的一个设置，对于IE8以下的浏览器是不识别的。以下为一些常用的兼容模式：
<meta http-equiv="X-UA-Compatible" content="IE=9">
IE9 模式支持全范围的既定行业标准，包括 HTML5(草案), W3C CSS Level 3 规范(草案), SVG 1.0 规范等
<meta http-equiv="X-UA-Compatible" content="IE=8">
IE8 模式支持许多既定行业标准，W3C CSS Level 2.1 规范和 W3C Selectors API，有限支持 W3C CSS Level 3 规范(草案)和其他行业标准
<meta http-equiv="X-UA-Compatible" content="IE=7">
IE7 模式强制浏览器按照 IE 7 标准模式渲染文档，忽略是否定义指令
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
Emulate IE9 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE9 渲染，怪癖模式下以 IE5 渲染。和 IE9 模式不同的是，Emulate IE9 模式会考虑指令。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
Emulate IE8 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE8 渲染，怪癖模式下以 IE5 渲染。和 IE8 模式不同的是，Emulate IE8 模式会考虑指令
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Emulate IE7 模式告诉 IE 使用指令来决定如果渲染文档。标准模式下以 IE7 渲染，怪癖模式下以 IE5 渲染。和 IE7 模式不同的是，Emulate IE7 模式会考虑指令。对于大多数站点而言，这是首选的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=5">
IE5 模式告诉 IE7 是否以怪癖模式渲染文档
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。
<meta http-equiv="X-UA-Compatible" content="chrome=1">
使用以上代码强制 IE 使用 Chrome Frame 渲染
提示 IE 用户安装 Google Frame：Google 官方提供了对 Google Frame 插件安装情况的检测，这里直接调用方法即可，如果检测到 IE 并未安装 Google Frame，则弹出对话框提示安装。
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script><script>CFInstall.check();</script>
针对IE 6，7，8等版本的浏览器插件Google Chrome Frame，可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核。
最佳的兼容模式方案，结合考虑以上两种：
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
如果IE有安装Google Chrome Frame，那么就走安装的组件，如果没有就和<meta http-equiv=”X-UA-Compatible” content=”edge” />一样。
使用建议
由于目前IE使用的量越来越少，先前IE的怪异模式也越来越少见，所以浏览器兼容模式也没有什么设置的必要性。
<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
Viewport(视窗)
设备像素和CSS像素
设备像素(device pixel, dp): 又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位pt。pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(英寸)，而1英寸等于2.54厘米。所以设备像素的特点就是大小固定，不可变。比如 iPhone 5 的分辨率为 640 x 1136px.
CSS像素(css pixel, px): 又称为虚拟像素，也可以理解为直觉像素。CSS 像素是 Web 编程的概念，指的是 CSS 样式代码中使用的逻辑像素。在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px 是一个相对单位，相对的是前面所说的设备像素(device pixel)。比如 iPhone 5 的 CSS 像素数为 320 x 568px.
px 相对单位指的是图像显示的基本单元，作为一个抽象概念，CSS 像素又具有两个方面的相对性，即：
在同一个设备上，每1个 CSS 像素所代表的设备像素是可以变化的
在不同的设备之间，每1个 CSS 像素所代表的设备像素是可以变化的
所以，CSS中的1px(CSS像素 可变)!== 设备的1px(设备像素 不可变)。
在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是CSS中的像素就是设备的物理像素。但实际情况却并非如此，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。
那么px 都会受哪些因素的影响而变化？
每英寸像素(pixel per inch, ppi/PPI)：它表示的是每英寸所拥有的像素(pixel)数目，更确切的说法应该是像素密度，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。数值越高，代表显示屏能够以越高的密度显示图像。
设备像素比(device pixel ratio, dpr/DPR)：它描述的是未缩放状态下，设备像素和 CSS 像素的初始比例关系，也可以解释为默认缩放比例。通俗来说，它是指在开发中1个 CSS 像素占用多少设备像素，如dpr=2代表1个 CSS 像素用2×2个设备像素来绘制，所以，可以理解为1px由多少个设备像素组成。
DPI: 每英寸多少点。当用于描述显示器时，我们可以吧 ppi 和 dpi 认为是同一个概念。那么 ppi和dpr到底是什么关系呢？ppi用作显示设备的工业标准，业界人士用ppi的值来衡量一个屏幕是否为高清屏，然后根据得到的密度分界来获得此时对应的dpr值，也即默认缩放比例。dpr和ppi相关，一般dpr为ppi/160的整数倍，如下所示：
项名 ldpi mdpi hdpi xhdpi
密度分界(密度值) 120 160 240 320
屏幕尺寸(分辨率) 240×320 320×480 480×800 640×960
默认缩放比例 0.75 1.0 1.5 2.0
了解了这两个概念后，我们可以来说说导致 CSS 中 px 变化的因素了。
从 iPhone4 开始，苹果推出了 Retina 屏，分辨率提高了一倍(640*960)，而屏幕尺寸却没变。这时一个css像素=2个设备像素(换算公式为 1px = (dpr)^2 * 1dp, 必须让css中的1px代表更多的设备像素，才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多，否则会因太小而看不清)，即 DPR=2，示意图如下：
引起css中px的变化的因素还有用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
如何理解上面说到的缩放呢？放大1倍，原来 1px 的东西变成 2px，但1px 变为 2px 并不是把原来的320px 变为640px，而是在实际宽度不变的情况下，1px 变得跟原来的 2px 的长度(长宽)一样了(元素会占据更多的设备像素)，所以放大1倍后原来需要 320px 才能填满的宽度现在只需要 160px，也即原来 320px 的面积里现在只能填入 160px 的东西了。
什么是viewport？
viewport 是用户网页的可视区域。viewport 翻译为中文可以叫做“视窗“或”视区”。Viewport 虽然它只是一个单词，但它却囊括了三个方面。Viewport 分为：视觉视窗、布局视窗和理想视窗。
视觉视窗(visual viewport)
所谓的视觉视窗说白了就是设备的屏幕区域，换句话说就是用户通过屏幕所看到的页面内容。但它所对应的并不是指屏幕区域里的物理像素，而是CSS 像素。并且它所包含的 CSS 像素的数量也是随着用户缩放而有所改变。
布局视窗(layout viewport)
移动设备上的浏览器认为自己必须能让所有的网站都正常显示，即使是那些不是为移动设备设计的网站。但如果以浏览器的可视区域作为viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌面浏览器设计的网站放到移动设备上显示时，必然会因为移动设备的viewport太窄，而挤作一团，甚至布局什么的都会乱掉。所以这些浏览器就决定默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。
布局视窗表示的是浏览器默认的viewport，一般情况下这个宽度要大于浏览器可视区域宽度。
创建移动设备的布局视窗宽度：
理想视窗(ideal viewport)
现在我们已经有两个viewport了：visual viewport(视觉视窗)和layout viewport(布局视窗)。但浏览器觉得还不够，因为现在越来越多的网站都会为移动设备进行单独的设计，所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。当然，不只是文字，其他元素像图片什么的也是这个道理。
理想视窗是为了布局视窗而生的，它其实就是变了尺寸的布局视窗。理想视窗就是把布局视窗调整到合适的状态，让页面有最好的表面效果，这也是它名字的由来。
理想视窗并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。所有的iphone的ideal viewport宽度都是320px。但是安卓设备就比较复杂了，有320px的，有360px的，有384px的等等，关于不同的设备ideal viewport的宽度都为多少，可以到http://viewportsizes.com去查看一下，里面收集了众多设备的理想宽度。
利用meta标签对viewport进行控制
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。
移动设备默认的viewport是layout viewport，也就是那个比屏幕要宽的viewport，但在进行移动设备网站的开发时，我们需要的是ideal viewport。那么怎么才能得到ideal viewport呢？ 我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：
<meta name=”viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”>
该meta标签的作用是让当前viewport的宽度等于设备的宽度(ideal viewport)，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。
在苹果的规范中，meta viewport 有6个属性，如下：
内容 含义
width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。
利用CSS @VIEWPORT 做设备适配
在需要调整设备浏览器的viewport时，我们通常在HTML中使用来解决。但是令人意想不到的是，viewport meta标签并不具有“规范性”，即它不是W3C的正式标准，也非Web标准。W3C正在尝试规范一种新的设备适配方法的原因，将HTML对viewport的控制转交给CSS。
@viewport CSS 规则
使用@viewport规则控制viewport，与使用meta标签的效果相同，只是我们完全使用CSS来控制。与使
@viewport {
width: device-width;
}
@viewport 描述符(Descriptors)
zoom描述符等同于viewport meta 标签的initial-sacale属性。
@viewport {
width: device-width;
zoom: 2;
}
与minimum-scale, maximum-scale对应的描述符是max-zoom, min-zoom。
@viewport {
width: device-width;
max-zoom: 3;
min-zoom: 0.50;
}
user-zoom与user-scalable属性等效。
@viewport {
width: device-width;
user-zoom: fixed;
}
由于目前各大浏览器对@viewport支持情况还不佳，目前阶段还是建议使用viewport meta 标签进行控制。
使用建议
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
viewport-fit是Apple新加的属性，目的是控制iPhone X的刘海显示。
Title(标题)
页面标题需要注意长度，在能够反应页面的内容的情况不宜过长，英文控制在55字符以内，中文则控制在23个文字以内。
<!-- Document Title -->
<title>Page Title less than 55 characters</title>
Description(描述)
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
同样需要控制页面描述的长度。
Favicons(图标)
非常建议将favicon.ico放在网站的根目录，原因是IE10及以下会自动请求网站根目录的favicon.ico文件。对于For IE 11, Edge, Chrome, Firefox, Safari, Opera推荐使用.png格式的图片来代替.ico文件(推荐尺寸32x32px)
<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
Meta标签详解
<meta>标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面)，搜索引擎(关键词)，或其他 web 服务。meta 标签包含了 HTTP 标题信息(http-equiv)和页面描述信息(name)。
http-equiv：该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。最常见的大概属于Content-Type了，设置编码类型。如
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
HTML5中可以简化为
<meta charset="utf-8">
http-equiv常见还有其它如下等。
Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过期时间
last-modified : 页面最后生成时间
expires : 设置 cache 过期时间
cache-control : 设置文档的缓存机制
…
name:该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport。
SEO相关
页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
<meta name="keywords" content="your tags" />
页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="150 words" />
搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。
<meta name="robots" content="index,follow" />
定义网页作者
<meta name="author" content="author,email address">
显示区域
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 到10,000，默认为980 像素)
height：高度(数值 / device-height)(范围从223 到10,000)
initial-scale：初始的缩放比例 (范围从>0 到10)
minimum-scale：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩 (no,yes)
minimal-ui：iOS 7.1 beta 2 中新增属性(注意：iOS8 中已经删除)，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name=”viewport” content=”width=device-width, initial-scale=1, minimal-ui”>
注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。
IOS私有属性
1)apple-mobile-web-app-capable
启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
2)apple-mobile-web-app-status-bar-style
隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default(白色，默认)| black(黑色)| black-translucent(半透明)
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
注意：若值为“black-translucent”将会占据页面位置，浮在页面上方(会覆盖页面 20px 高度， Retina 屏幕为 40px )。
3)添加到主屏后的标题(iOS 6 新增)
<meta name="apple-mobile-web-app-title" content="标题">
4)iOS 图标
rel 参数：
apple-touch-icon 图片自动处理成圆角和高光等效果。
apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
iPhone 和 iTouch，默认 57×57 像素，必须有
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /><!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"><!--IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。适配iPhone 6 plus，则需要在加上这段-->
5)iOS 启动画面
iPad 的启动画面是不包括状态栏区域的。iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496(Retina) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率)-->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina)-->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)-->
6)添加智能 App 广告条 Smart App Banner(iOS 6+ Safari)
iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) -->
浏览器内核控制
国内浏览器很多都是双内核(webkit和Trident)，webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。国内双核浏览器默认内核模式如下：
搜狗高速浏览器、QQ浏览器：IE内核(兼容模式)
360极速浏览器、遨游浏览器：Webkit内核(极速模式)
<meta name="renderer" content="webkit|ie-comp|ie-stand"><!--内核选择-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!--优先使用 IE 最新版本和Chrome这，如果安装了Google Chrome Frame，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。-->
<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 -->
其他一些meta标签：
<meta name="HandheldFriendly" content="true"><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="MobileOptimized" content="320"><!-- 微软的老式浏览器 -->
<meta name="screen-orientation" content="portrait"><!-- uc强制竖屏 -->
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 -->
<meta name="full-screen" content="yes"><!-- UC强制全屏 -->
<meta name="x5-fullscreen" content="true"><!-- QQ强制全屏 -->
<meta name="browsermode" content="application"><!-- UC应用模式 -->
<meta name="x5-page-mode" content="app"><!-- QQ应用模式 -->
<meta name="msapplication-tap-highlight" content="no"><!-- windows phone 点击无高光 -->
<meta content="telephone=no" name="format-detection" /><!--忽略数字自动识别为电话号码-->
<meta content="email=no" name="format-detection" /><!--忽略识别邮箱-->
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url"><!--[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。-->
<meta http-equiv="Cache-Control" content="no-siteapp" /><!--用百度打开网页可能会对其进行转码(比如贴广告)，避免转码可添加如下meta-->
<meta name="google" value="notranslate"><!--禁止 Chrome 浏览器中自动提示翻译-->