HTML head 頭標籤詳細介紹

本篇以一絲的文章為基礎，進行擴展總結介紹常用的 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

XML/HTML Code#複製內容到剪貼簿

1. HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org /TR/html4/strict.dtd">

#●HTML 4.01 Transitional

XML/HTML Code複製內容到剪貼簿

1. HTML PUBLIC "-//W3C// DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

#●HTML 4.01 Frameset

XML/HTML Code複製內容到剪貼簿

1. HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

XML/HTML Code複製內容到剪貼簿

1. html>

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

●對文件進行有效性驗證。

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

●決定瀏覽器的呈現模式

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

●非怪異（標準）模式
●怪異模式
●部分怪異（近乎標準）模式關於IE瀏覽器的文檔模式，瀏覽器模式，嚴格模式，怪異模式，DOCTYPE 標籤，可詳細閱讀模式？標準！的內容。

charset

聲明文件使用的字元編碼，

XML/HTML Code複製內容到剪貼簿

#

1. meta charset="utf-8">

html5 之前網頁中會這樣寫：

#XML/HTML Code##複製內容到剪貼簿

1. #meta http-equiv="Content- Type" content="text/html; charset=utf-8">

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

　　簡體中文 

XML/HTML Code 複製內容到剪貼簿

1. html lang#=" zh-cmn-Hans">

#　　繁體中文

#XML /HTML Code

複製內容到剪貼簿

1. ###html lang #="zh-cmn-Hant">#　　為什麼lang="zh-cmn-Hans" 而不是我們通常寫的lang="zh-CN" 呢，請移步閱讀: 頁頭部的聲明應該是用lang="zh" 還是lang="zh-cn"。 優先使用IE 最新版本和Chrome

#XML/HTML Code

複製內容到剪貼簿

#

meta
1.  

   http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />　　360 使用Google Chrome Frame

XML/HTML Code

複製內容到剪貼簿

< ;

meta
1.  

   name="renderer" content="webkit"> 　　360 瀏覽器就會在讀取到這個標籤後，立即切換對應的極速核。 另外為了保險起見再加入

XML/HTML Code

複製內容到剪貼簿

meta

 http-equiv="X-UA-Compatible" 

content###= ###"IE=Edge,chrome=1"######>################　　這樣寫可以達到的效果是如果安裝了Google Chrome Frame，則使用GCF 來渲染頁面，如果沒有安裝GCF，則使用最高版本的IE 核心進行渲染。 ######　　相關連結：瀏覽器核心控制Meta 標籤說明文件######百度禁止轉碼######　　透過百度手機開啟網頁時，百度可能會對你的網頁進行轉碼，脫下你的衣服，往你的身上貼狗皮膏藥的廣告，為此可在head 內添加 #####################XML/HTML Code## ####複製內容到剪貼簿#######

1. meta #http-equiv="Cache-Control" content="no-siteapp" />

#　　相關連結：SiteApp 轉碼宣告


#SEO 最佳化部分

頁面標題

以上是HTML head 頭標籤詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！