HTML head 頭標籤詳細介紹_HTML/Xhtml_網頁製作

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/ameset.dtd">  

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

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

1. html>  

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

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

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

●決定瀏覽器的呈現模式

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

●非怪異（標準）模式

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

charset

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

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

1. meta charset=charset >>  

html5 之前網頁會這樣寫：

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

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

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

lang屬性

　　簡體中文 

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

1. html lang=lang=lang=

"

>

  

　　繁體中文

1. XML/HTML Code複製內容到剪貼簿 html lang=

lang

=

lang
=

"h

>    

1. 　　為什麼lang="zh-cmn-Hans" 而不是我們通常寫的lang="zh-CN" 呢，請移步閱讀: 頁頭部的聲明應該是用lang="zh" 還是lang="zh-cn"。 優先使用 IE 最新版本和 Chrome XML/HTML Code複製內容到剪貼簿 meta http-equiv= Compatible"

 

content

=

"IE=edge,chrome=1" 

  

1. 　　360 使用Google Chrome Frame XML/HTML Code複製內容到剪貼簿 meta name=
"renderer"

 

content

=

"webkit">

 >   　　360 瀏覽器就會在讀取到這個標籤後，立即切換對應的極速核。 另外為了保險起見再加入 XML/HTML Code複製內容到剪貼簿

1. meta http-equiv= Compatible" content="IE=Edge,chrome=1">

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

　　相關連結：瀏覽器核心控制Meta 標籤說明文件


百度禁止轉碼

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

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

1. meta http-equiv= content="no-siteapp"  >  

　　相關連結：

SiteApp 轉碼聲明

SEO 最佳化部分

頁標題

XML/HTML Code

複製內容到剪貼簿

1. title>your titleyour title>  

頁面關鍵字 keywords

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

1. meta name=name=name=name=名 content

=

"your keywords"

>

  >

頁面描述內容 description

1. XML/HTML Code複製內容到剪貼簿 meta name=name=name=
name

=

名
 

content

="your description"

>

 🎜>
1. >  定義網頁作者 author XML/HTML Code複製內容到剪貼簿 meta name

=

"author" content="author,email address">

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

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

1. meta name=name=name=name=名稱 
content

=

"index,follow">
 
>

相關連結：

WEB1038 - 標記包含無效的值 viewport

　　viewport 可以讓佈局在行動瀏覽器上顯示的更好。 通常會寫
1. XML/HTML Code複製內容到剪貼簿 meta name=name=name

=

name

 content

=

"width=device-width, initial-scale=1.0"

>

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 初始縮放比例
1. maximum-scale 最大縮放比例minimum-scale-scale-scale最小縮放比例user-scalable 是否允許使用者縮放(yes/no)minimal-ui iOS 7.1 beta 2 中新增屬性，可以在頁面載入時最小化上下狀態列。這是一個布林值，可以直接這樣寫： XML/HTML Code複製內容到剪貼簿 meta name=name

=

name

=

name content

=

"width=device-width, initial-scale=1, malmal-ui"
1.    而如果你的網站不是響應式的，請不要使用 initial-scale 或停用縮放。 XML/HTML Code複製內容到剪貼簿 meta 

name

=name=name=name content="width=device-width,user-scalable=yes">> >

相關連結：非響應式設計的viewport

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

XML/HTML CodeXML/HTML Code

XML/HTML Code

1. 複製內容到剪貼簿 meta name=name=name=name
 
2. content="width=375"> 🎜>>  meta name=name=

 

content

=
"width=414"

>

>

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

1. 　　ios 裝置 　　加入主畫面後的標題（iOS 6 新增） XML/HTML Code複製內容到剪貼簿 meta name=oname=pile
name

=問

name

=pile

"app-mobile app-title" content

=

1. "標題">"標題">"標題">"標題">"名> 🎜>   是否啟用 WebApp 全螢幕模式 XML/HTML Code複製內容到剪貼簿

meta 

name

=o
1. name=pilename=問name=pile"app-mobile app-capable" content="yes"  
   

設定狀態列的背景顏色 XML/HTML Code複製內容到剪貼簿 meta name=oname=pilename=問name=pile"app-mobile app-status-bar-style" content="black-translucent""black-translucent"  >/>       

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

　　content 參數：

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

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

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

1. meta name=name=name=名稱 content="telephone=no" />
 

/>

  

iOS 圖示

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

複製代碼

代碼如下:

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

複製代碼

代碼如下:

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

複製代碼

代碼如下:

　　Retina iPad，144x144 像素，可以沒有，但建議有

複製代碼

代碼如下:

　　IOS 圖示大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 適配iPhone 6 plus，則需要在中加上這段

複製代碼

代碼如下:

iOS 啟動畫面

官方文件：
https://developer.apple.com/library/ios/qa/qa1686/_index.html

參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/ iPad 的啟動畫面是不包含狀態列區域的。

　　iPad 垂直螢幕 768 x 1004（標準解析度）

複製代碼代碼如下:

　　iPad 垂直螢幕 1536x2008（Retina）

複製代碼

代碼如下:

　　iPad 橫屏 1024x748（標準解析度）

複製代碼

代碼如下:

　　iPad 橫屏 2048x1496（Retina）

複製代碼

代碼如下:

　　iPhone 和 iPod touch 的啟動畫面是包含狀態列區域的。

　　iPhone/iPod Touch 垂直螢幕320x480 (標準解析度)

複製程式碼

複製程式碼

複製程式碼

複製程式碼

複製碼

　　iPhone 5/iPod Touch 5 垂直螢幕 640x1136 (Retina)

複製代碼

代碼如下:

　　新增智慧 App 廣告條 Smart App Banner（iOS 6 Safari）

複製程式碼

程式碼如下:

　　iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148 。

複製代碼

代碼如下:

Windows 8

　　Windows 8 磁貼顏色

複製程式碼

程式碼如下:

　　Windows 8 磁貼圖示

複製程式碼

程式碼如下:

　　rss訂閱 複製程式碼程式碼如下:

　　favicon icon

複製程式碼

程式碼如下:

比較詳細的favicon 介紹可參考https://github.com/audreyr/favicon-cheat-sheet

行動端的meta

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

1. 元 名稱=名稱=名稱 內容="width=device-width, initial-scale=1, -scalable=nouser-scalable> >/>  
2. 元 名稱=名稱=名稱=名稱=名稱=
名稱
3. =名稱=名稱=「蘋果支持行動網路應用程式」 內容=「是」    
4. 元 名字=名稱=名稱=名稱=名稱=名稱 -web-app-status-bar-style" 內容=
「黑色」
5. />   元 名稱="格式偵測"名稱="格式偵測"內容="
電話
6. =否，電子郵件，電子郵件，電子郵件，電子郵件，電子郵件，電子郵件 >=
無
7. " />   元 名稱="視口"  內容=「寬度=裝置寬度，初始規模=1，使用者可擴充=否」
 
8. />   元 名稱=名稱=名稱=名稱=
名稱
9. =名稱=
名稱
10. =名稱=「蘋果支持行動網路應用程式」 內容=「是」    
11. 元 
名稱=名稱=名稱=名稱=名稱=名稱=名稱 -web-app-status-bar-style" 內容=「黑色」 />   元 名稱="格式-檢測" 內容="電話=否，電子郵件=否"        元 名稱=名稱=名稱=名稱=名稱=名稱  內容物="webkit">    
12. meta http-equiv= -UA-Compatible" content="IE=edge">
13.   
14. meta name=name=name 🎜> content="true">
 
15.   
16. meta name=name=name= content="320"
>
17.  🎜> 
  
18. meta name=name=name=名 "
 
19. content="portrait"
>
20.  >    meta name＝ " content=
21. "portrait"> >
22.    meta name=name= content=
23. "yes"> >
24.    meta name="x5-fullscreen " content="true"
25. > 
26.    meta namename=name 🎜> content=
"application"
27. > >
28.    meta name﹀ -mode" content="app">
"app"> >
29.   
30. meta name=name=name -highlight" content="no"
31. >"no"> >

  

這是來自
• toobug 的分享總結。
　　更多的 meta 標籤參考
COMPLETE LIST OF HTML META TAGS

18 Meta Tags Every Webpage Should Have in 2013
　　參考文章：
常用的 HTML 頭部標籤
html5_header
amazeui css
DOCTYPE

WEB 工程師和設計師必學的 10 個 IOS 8 新鮮改變