参考：http://fex.baidu.com/blog/2014/10/html-head-tags/
Head DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。 DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始，不区分大小写，前面没有任何内容。 HTML 4.01 strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> HTML5: <!doctype html> 它向前向后兼容，推荐使用。 在 HTML中 doctype 有两个主要目的 a)对文档进行有效性验证。它告诉用户代理和校验器这个文档是按照什么 DTD 写的。是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。 b)决定浏览器的呈现模式。http://padding.me/blog/2014/07/04/mode-or-standard/Charset 声明文档使用的字符编码 推荐写法： <meta charset="utf-8"> Html5之前的写法：<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 两者等效，具体：http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-typeLang属性 简体中文： <html lang="zh-cmn-Hans"> 繁体中文页面：<html lang="zh-cmn-Hant"> 英语页面：<html lang="en">Meta 优先使用 IE 最新版本和 Chrome： <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 360 使用Google Chrome Frame： <meta name="renderer" content="webkit"> 另外为了保险起见再加入： <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 浏览器内核控制Meta标签说明文档： http://se.360.cn/v6/help/meta.html移动端的meta <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <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, email=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <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="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 --> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- 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"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- 适应移动端end -->百度禁止转码 <meta http-equiv="Cache-Control" content="no-siteapp" /> 百度转码说明：http://m.baidu.com/pub/help.php?pn=22&ssid=0&from=844b&bd_page_type=1SEO 优化部分 a)页面标题<title>标签(head 头部必须)： <title>your title</title> b)页面关键词 keywords：<meta name="keywords" content="your keywords"> 多个用逗号隔开 c)页面描述内容 description： <meta name="description" content="your description"> d)定义网页作者 author： <meta name="author" content="author,email address"> c)定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。: <meta name="robots" content="index,follow">viewport viewport 可以让布局在移动浏览器上显示的更好。 通常会写: <meta name="viewport" content="width=device-width, initial-scale=1.0"> content 参数： width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否允许用户缩放(yes/no)
