#HEAD
---
###文檔類型
在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現。
示例：
```html
<!DOCTYPE html>
```
PS:雖然doctype不區分大小寫，但是按照慣例，doctype大寫。
###語言屬性 (酌情采用)
為什么使用 lang="zh-cmn-Hans" 而不是我們通常寫的 lang="zh-CN" 呢? 請參考知乎上的討論: [網頁頭部的聲明應該是用 lang="zh" 還是 lang="zh-cn"？](http://www.zhihu.com/question/20797118)
示例：
```HTML
<!-- 中文 -->
<html lang="zh-Hans">
<!-- 簡體中文 -->
<html lang="zh-cmn-Hans">
<!-- 繁體中文 -->
<html lang="zh-cmn-Hant">
<!-- English -->
<html lang="en">
```
###字符編碼
* 通過聲明一個明確的字符編碼，讓瀏覽器輕松、快速的確定適合網頁內容的渲染方式，通常指定為'UTF-8'。
* 指定字符編碼的 meta 必須是 head 的第一個直接子元素。
示例：
```HTML
<html>
<head>
<meta charset="utf-8">
......
</head>
<body>
......
</body>
</html>
```
###meta標簽
元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位于文檔的頭部，不包含任何內容。 標簽的屬性定義了與文檔相關聯的名稱/值對。 詳細可查看[HTML META 標簽](http://www.w3school.com.cn/tags/tag_meta.asp)
常用的meta標簽如下,[詳情可查看](http://fex.baidu.com/blog/2014/10/html-head-tags/)：
```html
<meta charset="utf-8">
<!-- 啟用雙核瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="your author">
以下是移動端用的比較多的
<!-- 適應移動端 -->
<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" />
<!-- 忽略頁面中的數字識別為電話，忽略email識別 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 針對手持設備優化，主要是針對一些老的不識別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">
<!-- /適應移動端 -->
```
###SEO優化
H1標簽和H2標簽為SEO預留，所以，頁面上盡量不要有H1和H2標簽。
```html
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- SEO模塊 -->
<title>Style Guide</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="your author">
<!-- /SEO模塊 -->
</head>
```
###favicon
在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：
* 在 Web Server 根目錄放置 favicon.ico 文件；
* 使用 link 指定 favicon；
```html
<link rel="shortcut icon" href="path/to/favicon.ico">
```
###viewport
* viewport: 一般指的是瀏覽器窗口內容區的大小，不包含工具條、選項卡等內容；
* width: 瀏覽器寬度，輸出設備中的頁面可見區域寬度；
* device-width: 設備分辨率寬度，輸出設備的屏幕可見寬度；
* initial-scale: 初始縮放比例；
* maximum-scale: 最大縮放比例；
我們在移動端開發如果使用lib-flexible方案，viewport標簽將由lib-flexible庫自動生成。其適配原理見：[使用Flexible實現手淘H5頁面的終端適配](http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?utm_source=tuicool&utm_medium=referral)；Flexible庫地址：[Flexible的Github地址](https://github.com/amfe/lib-flexible)
如果沒有使用lib-flexible方案，需要指定頁面的viewport屬性
viewport示例代碼：
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
###iOS 圖標
* apple-touch-icon 圖片自動處理成圓角和高光等效果;
* apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖;
* 詳情見：[WebApp之 apple-touch-icon](http://blog.sina.com.cn/s/blog_5a073f0f01014jfc.html)
```html
<!-- iPhone 和 iTouch，默認 57x57 像素，必須有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">
<!-- iPad，72x72 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">
<!-- Retina iPad，144x144 像素，可以沒有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
```
###dns-prefetch
* DNS Prefetch是一種DNS預解析技術，這項技術是針對減少DNS解析所需要的請求時間而進行的web前端優化技術。
* 詳情見：[控制 DNS 預讀取](https://developer.mozilla.org/zh-CN/docs/Controlling_DNS_prefetching)
```html
<link rel="dns-prefetch" href="//static.zhangyoubao.com">
```
