原文
大綱
1、頭部標(biāo)簽列表
2、頭部標(biāo)簽詳解
1、頭部標(biāo)簽列表
<!DOCTYPE html>
<!-- 使用 HTML5 doctype，不區(qū)分大小寫 -->
<html lang="zh-cmn-Hans">
<!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa -->
<head>
<meta charset='utf-8'>
<!-- 聲明文檔使用的字符編碼 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 優(yōu)先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超過(guò)150個(gè)字符" />
<!-- 頁(yè)面描述 -->
<meta name="keywords" content=""/>
<!-- 頁(yè)面關(guān)鍵詞 -->
<meta name="author" content="name, email@gmail.com" />
<!-- 網(wǎng)頁(yè)作者 -->
<meta name="robots" content="index,follow" />
<!-- 搜索引擎抓取 -->
<!-- 為移動(dòng)設(shè)備添加 viewport -->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開(kāi)頁(yè)面時(shí)出現(xiàn)黑邊
http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 設(shè)備 begin -->
<meta name="apple-mobile-web-app-title" content="標(biāo)題">
<!-- 添加到主屏后的標(biāo)題（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 是否啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 設(shè)置狀態(tài)欄的背景顏色，只有在 `"apple-mobile-web-app-capable" content="yes"` 時(shí)生效 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁止數(shù)字識(shí)自動(dòng)別為電話號(hào)碼 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari） -->
<!-- iOS 圖標(biāo) begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />
<!-- iPhone 和 iTouch，默認(rèn) 57x57 像素，必須有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以沒(méi)有，但推薦有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
<!-- Retina iPad，144x144 像素，可以沒(méi)有，但推薦有 -->
<!-- iOS 圖標(biāo) end -->
<!-- iOS 啟動(dòng)畫面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
<!-- iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率） -->
<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（標(biāo)準(zhǔn)分辨率） -->
<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 (標(biāo)準(zhǔn)分辨率) -->
<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) -->
<!-- iOS 啟動(dòng)畫面 end -->
<!-- iOS 設(shè)備 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁貼圖標(biāo) -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<!-- 添加 RSS 訂閱 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<!-- 添加 favicon icon -->
<title>標(biāo)題</title>
</head>
2、頭部標(biāo)簽詳解
2.1、聲明文檔規(guī)范：<!DOCTYPE>
DOCTYPE(Document Type)，該聲明位于文檔中最前面的位置，處于 html 標(biāo)簽之前，此標(biāo)簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規(guī)范。
HTML有多個(gè)不同的版本，只有完全明白頁(yè)面中使用的確切的HTML版本，瀏覽器才能完全正確的顯示出HTML頁(yè)面。
DTD(Document Type Definition) 聲明以 <!DOCTYPE> 開(kāi)始，不區(qū)分大小寫，前面沒(méi)有任何內(nèi)容，如果有其他內(nèi)容(空格除外)會(huì)使瀏覽器在 IE 下開(kāi)啟怪異模式(quirks mode)渲染網(wǎng)頁(yè)。
在 HTML中 doctype 有兩個(gè)主要作用
1、對(duì)文檔進(jìn)行有效性驗(yàn)證：它告訴用戶代理和校驗(yàn)器這個(gè)文檔是按照什么 DTD 寫的。這個(gè)動(dòng)作是被動(dòng)的，每次頁(yè)面加載時(shí)，瀏覽器并不會(huì)下載 DTD 并檢查合法性，只有當(dāng)手動(dòng)校驗(yàn)頁(yè)面時(shí)才啟用。
2、決定瀏覽器的呈現(xiàn)模式：對(duì)于實(shí)際操作，通知瀏覽器讀取文檔時(shí)用哪種解析算法。如果沒(méi)有寫，則瀏覽器則根據(jù)自身的規(guī)則對(duì)代碼進(jìn)行解析，可能會(huì)嚴(yán)重影響 html 排版布局。瀏覽器有三種方式解析 HTML 文檔。(1) 非怪異（標(biāo)準(zhǔn)）模式(2) 怪異模式(3) 部分怪異（近乎標(biāo)準(zhǔn)）模式(關(guān)于IE瀏覽器的文檔模式，瀏覽器模式，嚴(yán)格模式，怪異模式)
<!--HTML5-->
<!DOCTYPE html>
<!--HTML4.01-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<!--XHTML 1.0-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
2.2、聲明文檔使用的字符編碼
<!-- 聲明文檔使用的字符編碼 -->
<meta charset='utf-8'>
<!-- 在 html5 之前網(wǎng)頁(yè)中會(huì)這樣寫 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2.3、 lang 屬性
<head lang="en"></head>
<!--簡(jiǎn)體中文-->
<html lang="zh-cmn-Hans"></html>
<!--繁體中文-->
<html lang="zh-cmn-Hant"></html>
<!--很少情況才需要加地區(qū)代碼，通常是為了強(qiáng)調(diào)不同地區(qū)漢語(yǔ)使用差異-->
<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其實(shí)是同一種水果。只是大陸和臺(tái)灣稱謂不同，且新加坡、馬來(lái)西亞一帶的稱謂也是不同的，稱之為<strong lang="zh-cmn-Hans-SG">黃梨</strong>。
</p>
2.4、設(shè)置瀏覽器渲染模式
<!-- 優(yōu)先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--
這樣寫可以達(dá)到的效果是如果安裝了 Google Chrome Frame，則使用 GCF 來(lái)渲染頁(yè)面，如
果沒(méi)有安裝 GCF，則使用最高版本的 IE 內(nèi)核進(jìn)行渲染。
-->
<!--
設(shè)置 360 瀏覽器渲染模式，webkit 為極速內(nèi)核，ie-comp 為 IE 兼容內(nèi)核，
ie-stand 為 IE 標(biāo)準(zhǔn)內(nèi)核。360 瀏覽器就會(huì)在讀取到這個(gè)標(biāo)簽后，立即切換到對(duì)應(yīng)的內(nèi)核
-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
2.5、SEO（搜索引擎）優(yōu)化
name是描述網(wǎng)頁(yè)的，對(duì)應(yīng)于Content（網(wǎng)頁(yè)內(nèi)容），以便于搜索引擎機(jī)器人查找、分類（目前幾乎所有的搜索引擎都使用網(wǎng)上機(jī)器人自動(dòng)查找meta值來(lái)給網(wǎng)頁(yè)分類）。（即：通過(guò)設(shè)置這些來(lái)優(yōu)化搜索引擎對(duì)當(dāng)前網(wǎng)頁(yè)的分類，檢索）
2.5.1、頁(yè)面描述
<!--
每個(gè)網(wǎng)頁(yè)都應(yīng)有一個(gè)不超過(guò) 150 個(gè)字符且能準(zhǔn)確反映網(wǎng)頁(yè)內(nèi)容的描述標(biāo)簽
-->
<meta name="description" content="不超過(guò)150個(gè)字符" /> <!-- 頁(yè)面描述 -->
2.5.2、頁(yè)面關(guān)鍵詞
<meta name="keywords" content=""/> <!-- 頁(yè)面關(guān)鍵詞 -->
<!--一個(gè)網(wǎng)頁(yè)的關(guān)鍵字最好是3-4個(gè)。 seo(搜索引擎優(yōu)化) --!>
2.5.3、定義頁(yè)面標(biāo)題
<title>標(biāo)題</title>
<!--
title標(biāo)簽是一個(gè)封閉標(biāo)簽，在head中是成對(duì)出現(xiàn)的，在打開(kāi)一個(gè)網(wǎng)頁(yè)時(shí)，網(wǎng)頁(yè)上方的文字就是title部分。
title是對(duì)整個(gè)頁(yè)面的核心思想的總結(jié)，也是seo非常重要的設(shè)置部分。
-->
2.5.4、Copyright (版權(quán))
<meta name="Copyright" Content="本頁(yè)版權(quán)歸Zerospace所有。All Rights Reserved">
<!--
說(shuō)明：標(biāo)注版權(quán)
用法：<Meta name="Copyright" Content="本頁(yè)版權(quán)歸Zerospace所有。All Rights Reserved">
-->
2.5.5、Author (作者)
<meta name="Author" Content="張三,abc@sina.com">
<!--
說(shuō)明：標(biāo)注網(wǎng)頁(yè)的作者或制作組
用法：<Meta name="Author" Content="張三，abc@sina.com">
注意：Content可以是：你或你的制作組的名字,或Email
-->
2.6、 添加 RSS 訂閱
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->
2.7、添加 favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->
2.8、viewport
<!--為移動(dòng)設(shè)備添加 viewport-->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!--
content 參數(shù)：
width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁(yè)面加載時(shí)最小化上下?tīng)顟B(tài)欄。這是一個(gè)布爾值，可以直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
-->
參考網(wǎng)址
http://www.runoob.com/w3cnote/html-meta-intro.html
https://www.cnblogs.com/avilang/p/6741811.html
http://blog.csdn.net/xiongchao2011/article/details/7038627
https://www.cnblogs.com/menyiin/p/6527339.html
