HTML的頭部?jī)?nèi)容特別多悄蕾，有針對(duì)SEO的頭部信息票顾，也有針對(duì)移動(dòng)設(shè)備的頭部信息。而且各個(gè)瀏覽器內(nèi)核以及各個(gè)國(guó)內(nèi)瀏覽器廠商都有些自己的標(biāo)簽元素,有很多差異性帆调。移動(dòng)端的工作已經(jīng)越來(lái)越成為前端工作的重要內(nèi)容奠骄，除了平常的項(xiàng)目開(kāi)發(fā)，HTML 頭部標(biāo)簽功能番刊，特別是meta含鳞，link等標(biāo)簽的功能屬性顯得非常重要。這里整理了一份 <head> 部分的清單芹务，讓大家了解每個(gè)標(biāo)簽及相應(yīng)屬性的意義民晒，寫(xiě)出滿足自己需求的 <head> 頭部標(biāo)簽，可以很有效的增強(qiáng)頁(yè)面的可用性锄禽。
HTML基本的頭部標(biāo)簽
下面是HTML基本的頭部元素:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--移動(dòng)端的頁(yè)面這個(gè)可以忽略潜必，具體可以查看本文Internet Explorer瀏覽器部分-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--具體可以查看本文 為移動(dòng)設(shè)備添加 viewport 部分-->
<!-- 以上 3 個(gè) meta 標(biāo)簽 *必須* 放在 head 的最前面；其他任何的 head 內(nèi)容必須在這些標(biāo)簽的 *后面* -->
<title>頁(yè)面標(biāo)題</title>
...
</head>
其中
<meta http-equiv="x-ua-compatible" content="ie=edge">
在桌面開(kāi)發(fā)的時(shí)候可以讓IE瀏覽器以最新的模式渲染頁(yè)面沃但，具體可以查看本文Internet Explorer瀏覽器部分磁滚。如果你的頁(yè)面確定只在桌面瀏覽器中運(yùn)行，那么
<meta name="viewport" content="width=device-width, initial-scale=1">
也可以省略宵晚。
DOCTYPE
DOCTYPE(Document Type)垂攘，該聲明位于文檔中最前面的位置，處于 html 標(biāo)簽之前淤刃，此標(biāo)簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規(guī)范晒他。
使用 HTML5 doctype，不區(qū)分大小寫(xiě)逸贾。
<!DOCTYPE html> <!-- 使用 HTML5 doctype陨仅，不區(qū)分大小寫(xiě) -->
charset
聲明文檔使用的字符編碼，
<meta charset="utf-8">
html5 之前網(wǎng)頁(yè)中會(huì)這樣寫(xiě)：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
這兩個(gè)是等效的铝侵，具體可移步閱讀：<meta charset='utf-8'>
vs <meta http-equiv='Content-Type'>
灼伤，所以建議使用較短的，易于記憶咪鲜。
lang屬性
更加標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 http://zhi.hu/XyIa
簡(jiǎn)體中文
<html lang="zh-cmn-Hans"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 http://zhi.hu/XyIa -->
繁體中文
<html lang="zh-cmn-Hant"> <!-- 更加標(biāo)準(zhǔn)的 lang 屬性寫(xiě)法 http://zhi.hu/XyIa -->
很少情況才需要加地區(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>
為什么 lang="zh-cmn-Hans" 而不是我們通常寫(xiě)的 lang="zh-CN" 呢崔慧，請(qǐng)移步閱讀: 頁(yè)頭部的聲明應(yīng)該是用 lang=”zh” 還是 lang=”zh-cn”。
Meta 標(biāo)簽
meta標(biāo)簽是HTML中head頭部的一個(gè)輔助性標(biāo)簽穴墅，它位于HTML文檔頭部的 <head> 和 <title> 標(biāo)記之間惶室，它提供用戶不可見(jiàn)的信息。雖然這部分信息用戶不可見(jiàn)玄货，但是其作用非常強(qiáng)大皇钞，特別是當(dāng)今的前端開(kāi)發(fā)工作中，設(shè)置合適的meta標(biāo)簽可以大大提升網(wǎng)站頁(yè)面的可用性松捉。
桌面端開(kāi)發(fā)中夹界，meta標(biāo)簽通常用來(lái)為搜索引擎優(yōu)化（SEO）及 robots定義頁(yè)面主題，或者是定義用戶瀏覽器上的cookie隘世；它可以用于鑒別作者可柿，設(shè)定頁(yè)面格式，標(biāo)注內(nèi)容提要和關(guān)鍵字丙者；還可以設(shè)置頁(yè)面使其可以根據(jù)你定義的時(shí)間間隔刷新自己复斥，以及設(shè)置RASC內(nèi)容等級(jí)，等等械媒。
移動(dòng)端開(kāi)發(fā)中目锭，meta標(biāo)簽除了桌面端中的功能設(shè)置外，還包括纷捞，比如viewport設(shè)置痢虹，添加到主屏幕圖標(biāo)，標(biāo)簽頁(yè)顏色等等實(shí)用設(shè)置主儡。具體可以看后面詳細(xì)的介紹奖唯。
meta標(biāo)簽分類
meta標(biāo)簽根據(jù)屬性的不同，可分為兩大部分：http-equiv 和 name 屬性糜值。
http-equiv：相當(dāng)于http的文件頭作用丰捷，它可以向?yàn)g覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網(wǎng)頁(yè)內(nèi)容臀玄。
name屬性：主要用于描述網(wǎng)頁(yè)瓢阴，與之對(duì)應(yīng)的屬性值為content畅蹂，content中的內(nèi)容主要是便于瀏覽器健无，搜索引擎等機(jī)器人識(shí)別，等等液斜。
推薦使用的meta標(biāo)簽
<!-- 設(shè)置文檔的字符編碼 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 個(gè) meta 標(biāo)簽 *必須* 放在 head 的最前面翔横；其他任何的 head 內(nèi)容必須在這些標(biāo)簽的 *后面* -->
<!-- 允許控制資源的過(guò)度加載 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 盡早地放置在文檔中 -->
<!-- 僅應(yīng)用于該標(biāo)簽下的內(nèi)容 -->
<!-- Web 應(yīng)用的名稱（僅當(dāng)網(wǎng)站被用作為一個(gè)應(yīng)用時(shí)才使用）-->
<meta name="application-name" content="應(yīng)用名稱">
<!-- 針對(duì)頁(yè)面的簡(jiǎn)短描述（限制 150 字符）-->
<!-- 在*某些*情況下妖混，該描述是被用作搜索結(jié)果展示片段的一部分 -->
<meta name="description" content="一個(gè)頁(yè)面描述">
<!-- 控制搜索引擎的抓取和索引行為 -->
<meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 僅對(duì) Google 有效 -->
<!-- 告訴 Google 不顯示網(wǎng)站鏈接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 告訴 Google 不提供此頁(yè)面的翻譯 -->
<meta name="google" content="notranslate">
<!-- 驗(yàn)證 Google 搜索控制臺(tái)的所有權(quán) -->
<meta name="google-site-verification" content="verification_token">
<!-- 用來(lái)命名軟件或用于構(gòu)建網(wǎng)頁(yè)（如 - WordPress期奔、Dreamweaver）-->
<meta name="generator" content="program">
<!-- 關(guān)于你的網(wǎng)站主題的簡(jiǎn)短描述 -->
<meta name="subject" content="你的網(wǎng)站主題">
<!-- 非常簡(jiǎn)短（少于 10 個(gè)字）的描述。主要用于學(xué)術(shù)論文硼被。-->
<meta name="abstract" content="">
<!-- 完整的域名或網(wǎng)址 -->
<meta name="url" content="https://example.com/">
<meta name="directory" content="submission">
<!-- 基于網(wǎng)站內(nèi)容給出一般的年齡分級(jí) -->
<meta name="rating" content="General">
<!-- 允許控制 referrer 信息如何傳遞 -->
<meta name="referrer" content="never">
<!-- 禁用自動(dòng)檢測(cè)和格式化可能的電話號(hào)碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 通過(guò)設(shè)置為 “off” 完全退出 DNS 預(yù)取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 在客戶端存儲(chǔ) cookie，web 瀏覽器的客戶端識(shí)別 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 指定要顯示在一個(gè)特定框架中的頁(yè)面 -->
<meta http-equiv="Window-Target" content="_value">
<!-- 地理標(biāo)簽 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 國(guó)家代碼 (ISO 3166-1): 強(qiáng)制性, 州代碼 (ISO 3166-2): 可選; 如 content="US" / content="US-NY" -->
<meta name="geo.region" content="country[-state]">
<!-- 如 content="New York City" -->
<meta name="geo.placename" content="city/town">
相關(guān)的詳細(xì)說(shuō)明請(qǐng)查看：
Google 可以識(shí)別的 Meta 標(biāo)簽
WHATWG Wiki: Meta 拓展
ICBM – 維基百科
地理標(biāo)記 – 維基百科
為移動(dòng)設(shè)備添加 viewport
viewport 可以讓布局在移動(dòng)瀏覽器上顯示的更好渗磅。 通常會(huì)寫(xiě)
<!-- width=device-width` 會(huì)導(dǎo)致 iPhone 5 添加到主屏后以 WebApp 全屏模式打開(kāi)頁(yè)面時(shí)出現(xiàn)黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
<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)
content 參數(shù)：
<pre>
width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
</pre>
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除）嚷硫，可以在頁(yè)面加載時(shí)最小化上下?tīng)顟B(tài)欄。這是一個(gè)布爾值始鱼，可以直接這樣寫(xiě)：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而如果你的網(wǎng)站不是響應(yīng)式的仔掸，請(qǐng)不要使用 initial-scale 或者禁用縮放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
相關(guān)鏈接：非響應(yīng)式設(shè)計(jì)的viewport
適配 iPhone 6 和 iPhone 6plus 則需要寫(xiě)：
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">
大部分 4.7~5 寸的安卓設(shè)備的 viewport 寬設(shè)為 360px医清，iPhone 6 上卻是 375px起暮，大部分 5.5 寸安卓機(jī)器（比如說(shuō)三星 Note）的 viewport 寬為 400，iPhone 6 plus 上是 414px会烙。
SEO 優(yōu)化部分
頁(yè)面標(biāo)題<title>標(biāo)簽(head 頭部必須)
<title>your title</title>
頁(yè)面關(guān)鍵詞 keywords
<meta name="keywords" content="your keywords">
頁(yè)面描述內(nèi)容 description
<meta name="description" content="your description">
定義網(wǎng)頁(yè)作者 author
<meta name="author" content="author,email address">
定義網(wǎng)頁(yè)搜索引擎索引方式负懦，robotterms 是一組使用英文逗號(hào)「,」分割的值，通常有如下幾種取值：none柏腻，noindex纸厉，nofollow，all五嫂，index和follow残腌。
<meta name="robots" content="index,follow">
相關(guān)鏈接：WEB1038 – 標(biāo)記包含無(wú)效的值
百度禁止轉(zhuǎn)碼
通過(guò)百度手機(jī)打開(kāi)網(wǎng)頁(yè)時(shí)，百度可能會(huì)對(duì)你的網(wǎng)頁(yè)進(jìn)行轉(zhuǎn)碼贫导，脫下你的衣服抛猫，往你的身上貼狗皮膏藥的廣告，為此可在 head 內(nèi)添加
<meta http-equiv="Cache-Control" content="no-siteapp" />
相關(guān)鏈接：SiteApp 轉(zhuǎn)碼聲明
不推薦的 meta 屬性
下面是不推薦使用的 meta 屬性孩灯，因?yàn)樗鼈儾捎寐实凸虢穑蛞褩売茫?/p>
<!-- 用于聲明文檔語(yǔ)言，但支持得不是很好峰档。最好使用 <html lang=""> -->
<meta name="language" content="en">
<!-- Google 無(wú)視 & Bing 認(rèn)為垃圾的指示器 -->
<meta name="keywords" content="你,關(guān)鍵字,在這里,不使用空格,而用逗號(hào)進(jìn)行分隔">
<!-- 目前沒(méi)有在任何搜索引擎中使用過(guò)的聲明 -->
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">
<!-- 為垃圾郵件機(jī)器人收獲 email 地址提供了一種簡(jiǎn)單的方式 -->
<meta name="reply-to" content="email@example.com">
<!-- 最好使用 <link rel="author"> 或 humans.txt 文件 -->
<meta name="author" content="name, email@example.com">
<meta name="designer" content="">
<meta name="owner" content="">
<!-- 告訴搜索機(jī)器人一段時(shí)間后重新訪問(wèn)該網(wǎng)頁(yè)败匹。這不支持，因?yàn)榇蠖鄶?shù)搜索引擎使用隨機(jī)時(shí)間間隔來(lái)重新抓取網(wǎng)頁(yè) -->
<meta name="revisit-after" content="7 days">
<!-- 在一段時(shí)間后將用戶重定向到新的 URL -->
<!-- W3C 建議不要使用該標(biāo)簽讥巡。Google 建議使用服務(wù)器端的 301 重定向掀亩。-->
<meta http-equiv="refresh" content="300; url=https://example.com/">
<!-- 描述網(wǎng)站的主題 -->
<meta name="topic" content="">
<!-- 公司概要或網(wǎng)站目的 -->
<meta name="summary" content="">
<!-- 一個(gè)已廢棄的標(biāo)簽，和關(guān)鍵詞 meta 標(biāo)簽的作用相同 -->
<meta name="classification" content="business">
<!-- 是否是相同的 URL欢顷，年代久遠(yuǎn)且不支持 -->
<meta name="identifier-URL" content="https://example.com/">
<!-- 和關(guān)鍵詞標(biāo)簽類似的功能 -->
<meta name="category" content="">
<!-- 確保你的網(wǎng)站在所有國(guó)家和語(yǔ)言中都能顯示 -->
<meta name="coverage" content="Worldwide">
<!-- 和 coverage 標(biāo)簽相同 -->
<meta name="distribution" content="Global">
<!-- 控制在互聯(lián)網(wǎng)上哪些用戶可以訪問(wèn) -->
<meta http-equiv="Pics-label" content="value">
<!-- 緩存控制 -->
<!-- 最好在服務(wù)器端配置緩存控制 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
link 標(biāo)簽
說(shuō)到 link 標(biāo)簽槽棍，估計(jì)大家的第一反應(yīng)和我一樣，就是引入外部CSS樣式文件的，不錯(cuò)炼七，這是 link 標(biāo)簽最最常用的功能缆巧。不過(guò)它還有很多別的用處，比如這是瀏覽器 favicon 圖標(biāo)豌拙，touch圖標(biāo)等等陕悬。
<!-- 有助于防止出現(xiàn)內(nèi)容重復(fù)的問(wèn)題 -->
<link rel="canonical" >
<!-- 之前用于包含 icon 鏈接，但已被廢棄并不再使用 -->
<link rel="shortlink" >
<!-- 鏈接到當(dāng)前文檔的一個(gè) AMP HTML 版本 -->
<link rel="amphtml" >
<!-- 表明一個(gè) CSS 樣式表 -->
<link rel="stylesheet" >
<!-- 鏈接到一個(gè)指定 Web 應(yīng)用程序“安裝”證書(shū)的 JSON 文件 -->
<link rel="manifest" href="manifest.json">
<!-- 鏈接到文檔的作者 -->
<link rel="author" href="humans.txt">
<!-- 指向一個(gè)適用于鏈接內(nèi)容的版權(quán)申明 -->
<link rel="copyright" href="copyright.html">
<!-- 給出可能的你的另一種語(yǔ)言的文檔位置參考 -->
<link rel="alternate" hreflang="es">
<!-- 提供了關(guān)于作者或其他人的信息 -->
<link rel="me" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 鏈接到一個(gè)文檔按傅，包含當(dāng)前文檔的一個(gè)歸檔鏈接 -->
<link rel="archives" title="May 2003">
<!-- 鏈接到層次結(jié)構(gòu)中的頂級(jí)資源 -->
<link rel="index" title="DeWitt Clinton">
<!-- 給出該文檔的起點(diǎn) -->
<link rel="start" title="Pattern Recognition 1">
<!-- 引導(dǎo)當(dāng)前文檔的前述資源序列 -->
<link rel="prev" title="OpenSearch and OpenID? A sure way to get my attention.">
<!-- 給出一個(gè)自我參考 - 當(dāng)文檔有多個(gè)可能的參考時(shí)非常有用 -->
<link rel="self" type="application/atom+xml" >
<!-- 分別是在一系列文件中的第一個(gè)捉超、下一個(gè)、上一個(gè)和最后一個(gè) -->
<link rel="first" >
<link rel="next" >
<link rel="previous" >
<link rel="last" >
<!-- 當(dāng)使用第三方服務(wù)來(lái)維護(hù) blog 時(shí)使用 -->
<link rel="EditURI" type="application/rsd+xml" title="RSD">
<!-- 當(dāng)另一個(gè) WordPress 博客鏈接到你的 WordPress 博客或文章時(shí)形成一個(gè)自動(dòng)化的評(píng)論 -->
<link rel="pingback" >
<!-- 當(dāng)你在自己的頁(yè)面上鏈接到一個(gè) url 時(shí)通知它 -->
<link rel="webmention" >
<!-- 加載一個(gè)外部的 HTML 文件到當(dāng)前 HTML 文件中 -->
<link rel="import" href="component.html">
<!-- 打開(kāi)搜索 -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- Feeds -->
<link rel="alternate" type="application/rss+xml" title="RSS">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3">
<!-- 預(yù)取唯绍，預(yù)載狂秦，預(yù)瀏覽 -->
<link rel="dns-prefetch" >
<link rel="preconnect" >
<link rel="prefetch" >
<link rel="prerender" >
<link rel="preload" href="image.png" as="image">
<!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
具體說(shuō)明查看：https://css-tricks.com/prefetching-preloading-prebrowsing/
rss訂閱
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->
不推薦的link標(biāo)簽
以下是不推薦使用的鏈接關(guān)系：
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 沒(méi)有用的, 專有的和錯(cuò)誤的, 詳見(jiàn) https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ -->
<link rel="subresource" href="styles.css">
具體說(shuō)明查看：https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ
favicon 圖標(biāo)
IE 11, Chrome, Firefox, Safari, Opera支持<link>形式設(shè)置：
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">
<link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">
注意：對(duì)于IE 10及以下版本不支持<link>形式設(shè)置，只通過(guò)將命名為favicon.ico的文件放置在網(wǎng)站根目錄中實(shí)現(xiàn)推捐。
比較詳細(xì)的 favicon 介紹可參考：
所有關(guān)于網(wǎng)站圖標(biāo)（和觸摸圖標(biāo)）
favicon 對(duì)照表
瀏覽器及平臺(tái)詳細(xì)說(shuō)明
QQ 瀏覽器（X5 內(nèi)核）
QQ 瀏覽器（X5 內(nèi)核）同樣適用于微信裂问，QQ等第三方應(yīng)用頁(yè)面開(kāi)發(fā)。
<!-- 設(shè)置鎖定橫屏牛柒、豎屏顯示模式堪簿，portrait（橫屏），landscape（豎屏）-->
<meta name="x5-orientation" content="portrait|landscape">
<!-- 設(shè)置全屏顯示頁(yè)面 -->
<meta name="x5-fullscreen" content="true">
<!-- 開(kāi)啟頁(yè)面以應(yīng)用模式顯示（全屏顯示等） -->
<meta name="x5-page-mode" content="app">
360瀏覽器
設(shè)置 360 瀏覽器渲染模式：webkit 為極速內(nèi)核皮壁，ie-comp 為 IE 兼容內(nèi)核椭更，ie-stand 為 IE 標(biāo)準(zhǔn)內(nèi)核。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
詳情文檔鏈接：瀏覽器內(nèi)核控制Meta標(biāo)簽說(shuō)明文檔
360 瀏覽器就會(huì)在讀取到這個(gè)標(biāo)簽后蛾魄，立即切換對(duì)應(yīng)的極速核虑瀑。 另外為了保險(xiǎn)起見(jiàn)再加入
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
這樣寫(xiě)可以達(dá)到的效果是如果安裝了 Google Chrome Frame，則使用 GCF 來(lái)渲染頁(yè)面滴须，如果沒(méi)有安裝 GCF舌狗，則使用最高版本的 IE 內(nèi)核進(jìn)行渲染。
UC 瀏覽器
設(shè)置屏幕方向
portrait 為橫屏扔水，landscape 為豎屏痛侍。
<meta name="screen-orientation" content="portrait|landscape">
設(shè)置全屏
<meta name="full-screen" content="yes">
設(shè)置適應(yīng)屏幕排版（縮放是否顯示滾動(dòng)條）
UC 瀏覽器在標(biāo)準(zhǔn)排版效果實(shí)現(xiàn)的基礎(chǔ)上，提供適應(yīng)屏幕的排版方式魔市，當(dāng)設(shè)置為 uc-fitscreen=yes主届，頁(yè)面進(jìn)行縮放操作時(shí)，僅放大圖片和文字等元素待德，但不放大屏幕寬度君丁，保持不出現(xiàn)水平（橫向）滾動(dòng)條。
<meta name="viewport" content="uc-fitscreen=no|yes">
排版模式
UC 瀏覽器提供兩種排版模式将宪，分別是適屏模式（fitscreen）及標(biāo)準(zhǔn)模式（standard）绘闷，其中適屏模式簡(jiǎn)化了一些頁(yè)面的處理橡庞，使得頁(yè)面內(nèi)容更適合進(jìn)行頁(yè)面閱讀、節(jié)省流量及響應(yīng)更快簸喂，而標(biāo)準(zhǔn)模式則能按照標(biāo)準(zhǔn)規(guī)范對(duì)頁(yè)面進(jìn)行排版及渲染毙死。
<meta name="layoutmode" content="fitscreen|standard">
夜間模式
可以幫助用戶在低亮度或黑暗情況下更舒適的進(jìn)行頁(yè)面瀏覽燎潮。由于基于網(wǎng)頁(yè)的應(yīng)用愈加復(fù)雜喻鳄，由瀏覽器實(shí)現(xiàn)的單一夜間模式不一定能夠適應(yīng)所有情況(例如游戲應(yīng)用)，因此 UC 瀏覽器允許網(wǎng)頁(yè)設(shè)計(jì)者對(duì)其設(shè)計(jì)的頁(yè)面禁用瀏覽器的夜間模式确封，自行設(shè)計(jì)更適合用戶使用的夜間模式除呵。
注意：頁(yè)面內(nèi)的 frame/iframe 中的夜間模式的 meta 不生效。
<meta name="nightmode" content="enable|disable">
整頁(yè)圖片強(qiáng)制顯示
為了節(jié)省流量及加快速度爪喘，UC 為用戶提供了無(wú)圖模式颜曾，在實(shí)際使用中存在頁(yè)面中的圖片是不可缺少的，例如驗(yàn)證碼秉剑，地圖等泛豪。通過(guò)強(qiáng)制圖片顯示的功能可以保證圖片顯示不受用戶的設(shè)置影響。
**注意：整頁(yè)圖片強(qiáng)制顯示僅對(duì)當(dāng)前頁(yè)面生效侦鹏，對(duì)頁(yè)面內(nèi)的 frame/iframe 不生效诡曙，也不影響前進(jìn)后退的頁(yè)面
<meta name="imagemode" content="force">
開(kāi)啟應(yīng)用模式
<meta name="browsermode" content="application">
應(yīng)用模式是為方便 Web 應(yīng)用及游戲開(kāi)發(fā)者設(shè)置的綜合開(kāi)關(guān)，通過(guò)meta標(biāo)簽進(jìn)行指示打開(kāi)略水，當(dāng)進(jìn)入應(yīng)用模式時(shí)价卤，瀏覽器將自動(dòng)調(diào)整以下參數(shù):
<pre>
參數(shù) 狀態(tài) 說(shuō)明
全屏 生效 可通過(guò) meta 或 JS API 調(diào)用退出全屏
長(zhǎng)按菜單 失效 可通過(guò) JS API 調(diào)用重新生效
瀏覽器默認(rèn)手勢(shì) 失效 可通過(guò) JS API 調(diào)用重新生效
排版模式 標(biāo)準(zhǔn)模式 可通過(guò) meta 或 JS API 調(diào)用設(shè)置其他排版模式
強(qiáng)制圖片顯示 生效 /
夜間模式 失效 可通過(guò) meta 或 JS API 調(diào)用啟用夜間模式
</pre>
縮放字體
例如：禁用的 UC 瀏覽器的字體縮放功能
<meta name="wap-font-scale" content="no">
具體UC 瀏覽器文檔鏈接：UC 瀏覽器文檔
Apple iOS原生瀏覽器
添加智能 App 廣告條
告訴瀏覽器這個(gè)網(wǎng)站對(duì)應(yīng)的app，并在頁(yè)面上顯示下載banner渊涝，需要注意的是Smart App Banners標(biāo)簽不能用在frame框架內(nèi)部慎璧，否則不起作用。
其中app-id(必須), affiliate-data (可選), app-argument (可選)
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
例如Digg的寫(xiě)法：
<meta name="apple-itunes-app" content="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://">
忽略數(shù)字自動(dòng)識(shí)別為電話號(hào)碼
<meta name="format-detection" content="telephone=no">
啟用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes">
添加到主屏后設(shè)置狀態(tài)欄的背景顏色
<meta name="apple-mobile-web-app-status-bar-style" content="black">
只有在 “apple-mobile-web-app-capable” content=”yes” 時(shí)生效:
- 如果設(shè)置為 default 或 black 跨释，網(wǎng)頁(yè)內(nèi)容從狀態(tài)欄底部開(kāi)始胸私。
- 如果設(shè)置為 black-translucent ，網(wǎng)頁(yè)內(nèi)容充滿整個(gè)屏幕鳖谈，頂部會(huì)被狀態(tài)欄遮擋盖文。
添加到主屏后的標(biāo)題（iOS 6 新增）
<meta name="apple-mobile-web-app-title" content="App Title">
iOS 圖標(biāo)
圖片自動(dòng)處理成圓角和高光等效果。
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
禁止系統(tǒng)自動(dòng)添加效果蚯姆，直接顯示設(shè)計(jì)原圖五续。
<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">
iOS 8+ 不再支持 precomposed, 只有 apple-touch-icon 是必須的在大多數(shù)情況下，在head中一個(gè)180×180px的圖標(biāo)就足夠了龄恋。如果您想要由設(shè)備確定的唯一圖標(biāo)疙驾，請(qǐng)使用不同大小的圖標(biāo)。
<link rel="apple-touch-icon" sizes="57x57" href="path/to/icon@57.png">
<link rel="apple-touch-icon" sizes="72x72" href="path/to/icon@72.png">
<link rel="apple-touch-icon" sizes="114x114" href="path/to/icon@114.png">
<link rel="apple-touch-icon" sizes="144x144" href="path/to/icon@144.png">
啟動(dòng)畫(huà)面 ( 不贊成使用 )
iPad 的啟動(dòng)畫(huà)面是不包括狀態(tài)欄區(qū)域的郭毕，iPhone 和 iPod touch 的啟動(dòng)畫(huà)面是包含狀態(tài)欄區(qū)域的
<link rel="apple-touch-startup-image" href="path/to/startup.png">
具體描述設(shè)置請(qǐng)查看http://www.css88.com/archives/5480中相應(yīng)的說(shuō)明它碎。
iOS 應(yīng)用深度鏈接
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">
Google Android原生瀏覽器
標(biāo)簽頁(yè)選項(xiàng)卡顏色
Android Lollipop 中的 Chrome 39 增加 theme-color meta 標(biāo)簽，用來(lái)控制選項(xiàng)卡顏色。
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
<meta name="theme-color" content="#db5945">
添加到主屏
<!-- 添加到主屏 -->
<meta name="mobile-web-app-capable" content="yes">
詳細(xì)鏈接: https://developer.chrome.com/multidevice/android/installtohomescreen
安卓應(yīng)用深度鏈接（網(wǎng)頁(yè)上喚起應(yīng)用）
<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample.com">
注：貌似沒(méi)測(cè)試成功扳肛，如果你知道如何正確設(shè)置傻挂，歡迎留言斧正。
Apple Safari 瀏覽器
Safari 10開(kāi)始支持固定書(shū)簽頁(yè)的SVG favicons了挖息，你可以這樣使用：
<!-- Pinned Site -->
<link rel="mask-icon" href="path/to/icon.svg" color="red">
擴(kuò)展閱讀：https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/
Google Chrome瀏覽器
關(guān)閉chrome瀏覽器下翻譯插件
有些時(shí)候感覺(jué)chrome瀏覽器下翻譯插件很煩人金拒，可以通過(guò)下面的代碼禁用它。
<meta name="google" value="notranslate" />
chrome瀏覽器插件安裝
有時(shí)候套腹，你需要在你的頁(yè)面上點(diǎn)擊某個(gè)安卓绪抛，直接安卓你的chrome瀏覽器插件，而不是鏈接到Chrome webstore 的詳細(xì)地址再安裝电禀，那么你可以使用：
<link rel="chrome-webstore-item" >
具體使用幢码，請(qǐng)查看：Using Inline Installation
Google Chrome Mobile (只針對(duì) Android)
從 Chrome 31 開(kāi)始，你可以設(shè)置你的 Web 應(yīng)用為“app mode”尖飞，如 Safari症副。
<!-- 鏈接到一個(gè) manifest 并定義 manifest 的元數(shù)據(jù)。-->
<!-- manifest.json 中的例子也可以通過(guò)以下鏈接找到政基。-->
<link rel="manifest" href="manifest.json">
<!-- 定義你的網(wǎng)頁(yè)為 Web 應(yīng)用 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 第一個(gè)是官方推薦格式贞铣。-->
<link rel="icon" sizes="192x192" href="nice-highres.png">
<link rel="icon" sizes="128x128" href="niceicon.png">
<!-- 所有帶 apple 前綴的格式已廢棄，所以不要使用它們腋么。-->
<link rel="apple-touch-icon" sizes="128x128" href="niceicon.png">
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="niceicon.png">
Internet Explorer瀏覽器
模式設(shè)置
//IE8以下以IE7標(biāo)準(zhǔn)模式呈現(xiàn)網(wǎng)頁(yè)咕娄，而IE9則以IE9的標(biāo)準(zhǔn)模式呈現(xiàn)網(wǎng)頁(yè)：
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
//如果安裝了GCF，則使用GCF來(lái)渲染頁(yè)面（"chrome=1"）珊擂，
//如果沒(méi)有安裝GCF圣勒，則使用最高版本的IE內(nèi)核進(jìn)行渲染（"IE=edge"）
<meta http-equiv="x-ua-compatible" content="ie=edge">
GCF（Google Chrome Frame ）相關(guān)鏈接：https://www.chromium.org/developers/how-tos/chrome-frame-getting-started
X-UA-Compatible相關(guān)鏈接：https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/
win8,win10下的一些設(shè)置
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!--
Disable link highlighting on IE 10 on Windows Phone
具體說(shuō)明查看：https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/
-->
<meta name="msapplication-tap-highlight" content="no">
<!--Pinned sites具體說(shuō)明查看：https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx-->
<meta name="application-name" content="Contoso Pinned Site Caption">
<meta name="msapplication-tooltip" content="Example Tooltip Text">
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-config" content="http://example.com/browserconfig.xml">
<meta name="msapplication-allowDomainApiCalls" content="true">
<meta name="msapplication-allowDomainMetaTags" content="true">
<meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">
<meta name="msapplication-navbutton-color" content="#FF3300">
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">
<meta name="msapplication-square150x150logo" content="path/to/logo.png">
<meta name="msapplication-square310x310logo" content="path/to/largelogo.png">
<meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">
<meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">
<meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">
<meta name="msapplication-task-separator" content="1">
//Windows 8 磁貼顏色
<meta name="msapplication-TileColor" content="#FF3300">
//Windows 8 磁貼圖標(biāo)
<meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
<meta name="msapplication-window" content="width=1024;height=768">
APP 鏈接
<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web Fallback -->
<meta property="al:web:url" content="http://applinks.org/documentation">
<!-- More info: http://applinks.org/documentation/ -->
具體請(qǐng)查看：App Links Docs
相關(guān)項(xiàng)目
Atom HTML Head 片段 – Atom HEAD 片段包
Sublime Text HTML Head 片段 – Sublime Text HEAD 片段包
head-it – HEAD 片段的 CLI 接口
vue-head – 在 Vue.js 中操作 HEAD 標(biāo)簽的 meta 信息
參考閱讀文章：
HTML5 樣板文檔：HTML 標(biāo)簽
HTML5 樣板文檔：擴(kuò)展和定制
常用的 HTML 頭部標(biāo)簽
<head> 對(duì)照表
HTML head 頭標(biāo)簽
html5_header
amazeui css
DOCTYPE
WEB 工程師和設(shè)計(jì)師必學(xué)的 10 個(gè) IOS 8 新鮮改變
本文由 愚人碼頭 發(fā)表，本文鏈接：http://www.css88.com/archives/6410
