HTML head 頭標簽介紹

HTML head 頭標簽，頭部分的標簽、元素有很多，涉及到浏覽器對網頁的渲染，SEO 等等，而各個浏覽器內核以及各個國內浏覽器廠商都有些自己的標簽元素,這就造成了很多差異性。

移動互聯網時代，head 頭部結構，移動端的 meta 元素，顯得更為重要。了解每個標簽的意義，寫出滿足自己需求的 head 頭標簽，是本文的目的。本篇以一絲的文章為基礎，進行擴展總結介紹常用的 head 中各個標簽、元素的意義以及使用場景。

DOCTYPE

DOCTYPE(Document Type)，該聲明位於文檔中最前面的位置，處於 html 標簽之前，此標簽告知浏覽器文檔使用哪種 HTML 或者 XHTML 規范。

DTD(Document Type Definition) 聲明以 開始，不區分大小寫，前面沒有任何內容，如果有其他內容(空格除外)會使浏覽器在 IE 下開啟怪異模式(quirks mode)渲染網頁。公共 DTD，名稱格式為注冊//組織//類型 標簽//語言,注冊指組織是否由國際標准化組織(ISO)注冊，+表示是，-表示不是。組織即組織名稱，如：W3C。類型一般是 DTD。標簽是指定公開文本描述，即對所引用的公開文本的唯一描述性名稱，後面可附帶版本號。最後語言是 DTD 語言的 ISO 639 語言標識符，如：EN 表示英文，ZH 表示中文。XHTML 1.0 可聲明三種 DTD 類型。分別表示嚴格版本，過渡版本，以及基於框架的 HTML 文檔。

HTML 4.01 strict

 

復制代碼

HTML 4.01 Transitional

 

復制代碼

HTML 4.01 Frameset

 

復制代碼

最新 HTML5 推出更加簡潔的書寫，它向前向後兼容，推薦使用。

 

復制代碼

在 HTML中 doctype 有兩個主要目的。

對文檔進行有效性驗證。

它告訴用戶代理和校驗器這個文檔是按照什麼 DTD 寫的。這個動作是被動的，每次頁面加載時，浏覽器並不會下載 DTD 並檢查合法性，只有當手動校驗頁面時才啟用。

決定浏覽器的呈現模式

對於實際操作，通知浏覽器讀取文檔時用哪種解析算法。如果沒有寫，則浏覽器則根據自身的規則對代碼進行解析，可能會嚴重影響 html 排版布局。浏覽器有三種方式解析 HTML 文檔。

非怪異(標准)模式

怪異模式

部分怪異(近乎標准)模式 關於IE浏覽器的文檔模式，浏覽器模式，嚴格模式，怪異模式，DOCTYPE 標簽，可詳細閱讀模式?標准!的內容。

charset

聲明文檔使用的字符編碼，

復制代碼

html5 之前網頁中會這樣寫：

復制代碼

這兩個是等效的，具體可移步閱讀： vs ，所以建議使用較短的，易於記憶。

lang屬性

簡體中文

 

復制代碼

繁體中文

 

復制代碼

為什麼 lang="zh-cmn-Hans" 而不是我們通常寫的 lang="zh-CN" 呢，請移步閱讀: 頁頭部的聲明應該是用 lang="zh" 還是 lang="zh-cn"。

優先使用 IE 最新版本和 Chrome

復制代碼

360 使用Google Chrome Frame

復制代碼

360 浏覽器就會在讀取到這個標簽後，立即切換對應的極速核。 另外為了保險起見再加入

復制代碼

這樣寫可以達到的效果是如果安裝了 Google Chrome Frame，則使用 GCF 來渲染頁面，如果沒有安裝 GCF，則使用最高版本的 IE 內核進行渲染。

相關鏈接：浏覽器內核控制 Meta 標簽說明文檔

 

百度禁止轉碼

通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，**你的衣服，往你的身上貼狗皮膏藥的廣告，為此可在 head 內添加

復制代碼

相關鏈接：SiteApp 轉碼聲明

SEO 優化部分

頁面標題

復制代碼

頁面關鍵詞 keywords

復制代碼

頁面描述內容 description

復制代碼

定義網頁作者 author

復制代碼

定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。

復制代碼

相關鏈接：WEB1038 - 標記包含無效的值

viewport

viewport 可以讓布局在移動浏覽器上顯示的更好。 通常會寫

復制代碼

width=device-width 會導致 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊(http://bigc.at/ios-webapp-viewport-meta.orz)

content 參數：

width viewport 寬度(數值/device-width)

height viewport 高度(數值/device-height)

initial-scale 初始縮放比例

maximum-scale 最大縮放比例

minimum-scale 最小縮放比例

user-scalable 是否允許用戶縮放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增屬性，可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：

復制代碼

而如果你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。

復制代碼

相關鏈接：非響應式設計的viewport

適配 iPhone 6 和 iPhone 6plus 則需要寫：

復制代碼

大部分 4.7~5 寸的安卓設備的 viewport 寬設為 360px，iPhone 6 上卻是 375px，大部分 5.5 寸安卓機器(比如說三星 Note)的 viewport 寬為 400，iPhone 6 plus 上是 414px。

ios 設備

添加到主屏後的標題(iOS 6 新增)

復制代碼

是否啟用 WebApp 全屏模式

復制代碼

設置狀態欄的背景顏色

復制代碼

只有在 "apple-mobile-web-app-capable" content="yes" 時生效

content 參數：

default 默認值。

black 狀態欄背景是黑色。

black-translucent 狀態欄背景是黑色半透明。 如果設置為 default 或 black ,網頁內容從狀態欄底部開始。 如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

禁止數字識自動別為電話號碼

 

復制代碼

iOS 圖標

rel 參數： apple-touch-icon 圖片自動處理成圓角和高光等效果。 apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。 iPhone 和 iTouch，默認 57x57 像素，必須有

復制代碼

iPad，72x72 像素，可以沒有，但推薦有

復制代碼

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有

復制代碼

Retina iPad，144x144 像素，可以沒有，但推薦有