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有兩個主要目的。

1. 對文檔進行有效性驗證。

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

2. 決定浏覽器的呈現模式

對于實際操作，通知浏覽器讀取文檔時用哪種解析算法。如果沒有寫，則浏覽器則根據自身的規則對代碼進行解析，可能會嚴重影響 html 排版布局。浏覽器有三種方式解析 HTML 文檔。 * 非怪異（标準）模式 * 怪異模式 * 部分怪異（近乎标準）模式 關于IE浏覽器的文檔模式，浏覽器模式，嚴格模式，怪異模式，

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 核心進行渲染。

百度禁止轉碼

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

SEO 優化部分

頁面标題标簽(head 頭部必須)

頁面關鍵詞 keywords

頁面描述内容 description

定義網頁作者 author

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

viewport

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

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 或者禁用縮放。

移動端的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 -->
           

文章轉自：http://fex.baidu.com/blog/2014/10/html-head-tags/