HTML head 头标签
参考：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-type
Lang属性
简体中文： <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=1
SEO 优化部分
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)
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
