HTML的頭部內容特別多,有針對SEO的頭部信息,也有針對移動設備的頭部信息。並且各個瀏覽器內核以及各個國內瀏覽器廠商都有些本身的標籤元 素,有不少差別性。移動端的工做已經愈來愈成爲前端工做的重要內容,除了日常的項目開發,HTML 頭部標籤功能,特別是meta,link等標籤的功能屬性顯得很是重要。這裏整理了一份 <head>
部分的清單,讓你們瞭解每一個標籤及相應屬性的意義,寫出知足本身需求的 <head>
頭部標籤,能夠頗有效的加強頁面的可用性。php
注:去年整理過移動前端不得不瞭解的html5 head 頭標籤,隨着時間和瀏覽器廠商的升級,如今看起來彷佛有些過期了。因此從新整理了一下。增長了新的內容,及過期的一些提示,同時增長了部分桌面端瀏覽器的一些說明。css
下面是HTML基本的頭部元素:html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!--移動端的頁面這個能夠忽略,具體能夠查看本文Internet Explorer瀏覽器部分-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--具體能夠查看本文 爲移動設備添加 viewport 部分-->
<!-- 以上 3 個 meta 標籤 *必須* 放在 head 的最前面;其餘任何的 head 內容必須在這些標籤的 *後面* -->
<title>頁面標題</title> ... </head>
其中 html 代碼:前端
<meta http-equiv="x-ua-compatible" content="ie=edge">
在桌面開發的時候可讓IE瀏覽器以最新的模式渲染頁面,具體能夠查看本文Internet Explorer瀏覽器部分。
若是你的頁面肯定只在桌面瀏覽器中運行,那麼vue
<meta name="viewport" content="width=device-width, initial-scale=1">
也能夠省略。html5
DOCTYPE(Document Type),該聲明位於文檔中最前面的位置,處於 html
標籤以前,此標籤告知瀏覽器文檔使用哪一種 HTML 或者 XHTML 規範。android
使用 HTML5 doctype,不區分大小寫。ios
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不區分大小寫 -->
聲明文檔使用的字符編碼,git
<meta charset="utf-8">
html5 以前網頁中會這樣寫:github
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
這兩個是等效的,具體可移步閱讀:<meta charset='utf-8'>
vs <meta http-equiv='Content-Type'>
,因此建議使用較短的,易於記憶。
更加標準的 lang 屬性寫法 http://zhi.hu/XyIa
簡體中文
<html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
繁體中文
<html lang="zh-cmn-Hant"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
不多狀況才須要加地區代碼,一般是爲了強調不一樣地區漢語使用差別,例如:
<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>實際上是同一種水果。只是大陸和臺灣稱謂不一樣,且新加坡、馬來西亞一帶的稱謂也是不一樣的,稱之爲<strong lang="zh-cmn-Hans-SG">黃梨</strong>。 </p>
爲何 lang="zh-cmn-Hans"
而不是咱們一般寫的 lang="zh-CN"
呢,請移步閱讀: 頁頭部的聲明應該是用 lang=」zh」 仍是 lang=」zh-cn」。
meta標籤是HTML中head頭部的一個輔助性標籤,它位於HTML文檔頭部的 <head>
和 <title>
標記之間,它提供用戶不可見的信息。雖然這部分信息用戶不可見,可是其做用很是強大,特別是當今的前端開發工做中,設置合適的meta標籤能夠大大提高網站頁面的可用性。
桌面端開發中,meta標籤一般用來爲搜索引擎優化(SEO)及 robots定義頁面主題,或者是定義用戶瀏覽器上的cookie;它能夠用於鑑別做者,設定頁面格式,標註內容提要和關鍵字;還能夠設置頁面使其能夠根 據你定義的時間間隔刷新本身,以及設置RASC內容等級,等等。
移動端開發中,meta標籤除了桌面端中的功能設置外,還包括,好比viewport設置,添加到主屏幕圖標,標籤頁顏色等等實用設置。具體能夠看後面詳細的介紹。
<!-- 設置文檔的字符編碼 -->
<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 個 meta 標籤 *必須* 放在 head 的最前面;其餘任何的 head 內容必須在這些標籤的 *後面* -->
<!-- 容許控制資源的過分加載 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 儘早地放置在文檔中 -->
<!-- 僅應用於該標籤下的內容 -->
<!-- Web 應用的名稱(僅當網站被用做爲一個應用時才使用)-->
<meta name="application-name" content="應用名稱">
<!-- 針對頁面的簡短描述(限制 150 字符)-->
<!-- 在*某些*狀況下,該描述是被用做搜索結果展現片斷的一部分 -->
<meta name="description" content="一個頁面描述">
<!-- 控制搜索引擎的抓取和索引行爲 -->
<meta name="robots" content="index,follow,noodp"><!-- 全部的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 僅對 Google 有效 -->
<!-- 告訴 Google 不顯示網站連接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 告訴 Google 不提供此頁面的翻譯 -->
<meta name="google" content="notranslate">
<!-- 驗證 Google 搜索控制檯的全部權 -->
<meta name="google-site-verification" content="verification_token">
<!-- 用來命名軟件或用於構建網頁(如 - WordPress、Dreamweaver)-->
<meta name="generator" content="program">
<!-- 關於你的網站主題的簡短描述 -->
<meta name="subject" content="你的網站主題">
<!-- 很是簡短(少於 10 個字)的描述。主要用於學術論文。-->
<meta name="abstract" content="">
<!-- 完整的域名或網址 -->
<meta name="url" content="https://example.com/">
<meta name="directory" content="submission">
<!-- 基於網站內容給出通常的年齡分級 -->
<meta name="rating" content="General">
<!-- 容許控制 referrer 信息如何傳遞 -->
<meta name="referrer" content="never">
<!-- 禁用自動檢測和格式化可能的電話號碼 -->
<meta name="format-detection" content="telephone=no">
<!-- 經過設置爲 「off」 徹底退出 DNS 預取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- 在客戶端存儲 cookie,web 瀏覽器的客戶端識別 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
<!-- 指定要顯示在一個特定框架中的頁面 -->
<meta http-equiv="Window-Target" content="_value">
<!-- 地理標籤 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 國家代碼 (ISO 3166-1): 強制性, 州代碼 (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">
相關的詳細說明請查看:
viewport
可讓佈局在移動瀏覽器上顯示的更好。 一般會寫
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊 http://bigc.at/ios-webapp-viewport-meta.orz -->
width=device-width
會致使 iPhone 5 添加到主屏後以 WebApp 全屏模式打開頁面時出現黑邊(http://bigc.at/ios-webapp-viewport-meta.orz)
content 參數:
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而若是你的網站不是響應式的,請不要使用 initial-scale 或者禁用縮放。
<meta name="viewport" content="width=device-width,user-scalable=yes">
相關連接:非響應式設計的viewport
適配 iPhone 6 和 iPhone 6plus 則須要寫:
<meta name="viewport" content="width=375"> <meta name="viewport" content="width=414">
大部分 4.7~5 寸的安卓設備的 viewport 寬設爲 360px,iPhone 6 上倒是 375px,大部分 5.5 寸安卓機器(好比說三星 Note)的 viewport 寬爲 400,iPhone 6 plus 上是 414px。
<title>
標籤(head 頭部必須)<title>your title</title>
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
相關連接:WEB1038 – 標記包含無效的值
經過百度手機打開網頁時,百度可能會對你的網頁進行轉碼,脫下你的衣服,往你的身上貼狗皮膏藥的廣告,爲此可在 head 內添加
<meta http-equiv="Cache-Control" content="no-siteapp" />
相關連接:SiteApp 轉碼聲明
下面是不推薦使用的 meta 屬性,由於它們採用率低,或已棄用:
<!-- 用於聲明文檔語言,但支持得不是很好。最好使用 <html lang=""> --> <meta name="language" content="en"> <!-- Google 無視 & Bing 認爲垃圾的指示器 --> <meta name="keywords" content="你,關鍵字,在這裏,不使用空格,而用逗號進行分隔"> <!-- 目前沒有在任何搜索引擎中使用過的聲明 --> <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm"> <!-- 爲垃圾郵件機器人收穫 email 地址提供了一種簡單的方式 --> <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=""> <!-- 告訴搜索機器人一段時間後從新訪問該網頁。這不支持,由於大多數搜索引擎使用隨機時間間隔來從新抓取網頁 --> <meta name="revisit-after" content="7 days"> <!-- 在一段時間後將用戶重定向到新的 URL --> <!-- W3C 建議不要使用該標籤。Google 建議使用服務器端的 301 重定向。--> <meta http-equiv="refresh" content="300; url=https://example.com/"> <!-- 描述網站的主題 --> <meta name="topic" content=""> <!-- 公司概要或網站目的 --> <meta name="summary" content=""> <!-- 一個已廢棄的標籤,和關鍵詞 meta 標籤的做用相同 --> <meta name="classification" content="business"> <!-- 是不是相同的 URL,年代久遠且不支持 --> <meta name="identifier-URL" content="https://example.com/"> <!-- 和關鍵詞標籤相似的功能 --> <meta name="category" content=""> <!-- 確保你的網站在全部國家和語言中都能顯示 --> <meta name="coverage" content="Worldwide"> <!-- 和 coverage 標籤相同 --> <meta name="distribution" content="Global"> <!-- 控制在互聯網上哪些用戶能夠訪問 --> <meta http-equiv="Pics-label" content="value"> <!-- 緩存控制 --> <!-- 最好在服務器端配置緩存控制 --> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache">
說到 link 標籤,估計你們的第一反應和我同樣,就是引入外部CSS樣式文件的,不錯,這是 link 標籤最最經常使用的功能。不過它還有不少別的用處,好比這是瀏覽器 favicon 圖標,touch圖標等等。
<!-- 有助於防止出現內容重複的問題 -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">
<!-- 以前用於包含 icon 連接,但已被廢棄並再也不使用 -->
<link rel="shortlink" href="https://example.com/?p=42">
<!-- 連接到當前文檔的一個 AMP HTML 版本 -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- 代表一個 CSS 樣式表 -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- 連接到一個指定 Web 應用程序「安裝」證書的 JSON 文件 -->
<link rel="manifest" href="manifest.json">
<!-- 連接到文檔的做者 -->
<link rel="author" href="humans.txt">
<!-- 指向一個適用於連接內容的版權申明 -->
<link rel="copyright" href="copyright.html">
<!-- 給出可能的你的另外一種語言的文檔位置參考 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- 提供了關於做者或其餘人的信息 -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 連接到一個文檔,包含當前文檔的一個歸檔連接 -->
<link rel="archives" href="https://example.com/2003/05/" title="May 2003">
<!-- 連接到層次結構中的頂級資源 -->
<link rel="index" href="https://example.com/" title="DeWitt Clinton">
<!-- 給出該文檔的起點 -->
<link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
<!-- 引導當前文檔的前述資源序列 -->
<link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">
<!-- 給出一個自我參考 - 當文檔有多個可能的參考時很是有用 -->
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
<!-- 分別是在一系列文件中的第一個、下一個、上一個和最後一個 -->
<link rel="first" href="https://example.com/atomFeed.php">
<link rel="next" href="https://example.com/atomFeed.php?page=4">
<link rel="previous" href="https://example.com/atomFeed.php?page=2">
<link rel="last" href="https://example.com/atomFeed.php?page=147">
<!-- 當使用第三方服務來維護 blog 時使用 -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- 當另外一個 WordPress 博客連接到你的 WordPress 博客或文章時造成一個自動化的評論 -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- 當你在本身的頁面上連接到一個 url 時通知它 -->
<link rel="webmention" href="https://example.com/webmention">
<!-- 加載一個外部的 HTML 文件到當前 HTML 文件中 -->
<link rel="import" href="component.html">
<!-- 打開搜索 -->
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- 預取,預載,預瀏覽 -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
<!-- 更多信息:https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
具體說明查看:https://css-tricks.com/prefetching-preloading-prebrowsing/
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 訂閱 -->
如下是不推薦使用的連接關係:
<link rel="shortcut icon" href="path/to/favicon.ico"> <!-- 沒有用的, 專有的和錯誤的, 詳見 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ --> <link rel="subresource" href="styles.css">
具體說明查看:https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ
IE 11, Chrome, Firefox, Safari, Opera支持<link>
形式設置:
<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">
注意:對於IE 10及如下版本不支持<link>
形式設置,只經過將命名爲favicon.ico
的文件放置在網站根目錄中實現。
比較詳細的 favicon 介紹可參考:
QQ 瀏覽器(X5 內核)一樣適用於微信,QQ等第三方應用頁面開發。
<!-- 設置鎖定橫屏、豎屏顯示模式,portrait(橫屏),landscape(豎屏)-->
<meta name="x5-orientation" content="portrait|landscape">
<!-- 設置全屏顯示頁面 -->
<meta name="x5-fullscreen" content="true">
<!-- 開啓頁面以應用模式顯示(全屏顯示等) -->
<meta name="x5-page-mode" content="app">
設置 360 瀏覽器渲染模式:webkit
爲極速內核,ie-comp
爲 IE 兼容內核,ie-stand
爲 IE 標準內核。
<meta name="renderer" content="webkit|ie-comp|ie-stand">
詳情文檔連接:瀏覽器內核控制Meta標籤說明文檔
360 瀏覽器就會在讀取到這個標籤後,當即切換對應的極速核。 另外爲了保險起見再加入
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
這樣寫能夠達到的效果是若是安裝了 Google Chrome Frame,則使用 GCF 來渲染頁面,若是沒有安裝 GCF,則使用最高版本的 IE 內核進行渲染。
portrait 爲橫屏,landscape 爲豎屏。
<meta name="screen-orientation" content="portrait|landscape">
<meta name="full-screen" content="yes">
UC 瀏覽器在標準排版效果實現的基礎上,提供適應屏幕的排版方式,當設置爲 uc-fitscreen=yes,頁面進行縮放操做時,僅放大圖片和文字等元素,但不放大屏幕寬度,保持不出現水平(橫向)滾動條。
<meta name="viewport" content="uc-fitscreen=no|yes">
UC 瀏覽器提供兩種排版模式,分別是適屏模式(fitscreen)及標準模式(standard),其中適屏模式簡化了一些頁面的處理,使得頁面內容更適合進行頁面閱讀、節省流量及響應更快,而標準模式則能按照標準規範對頁面進行排版及渲染。
<meta name="layoutmode" content="fitscreen|standard">
能夠幫助用戶在低亮度或黑暗狀況下更溫馨的進行頁面瀏覽。因爲基於網頁的應用越發複雜,由瀏覽器實現的單一晚上間模式不必定可以適應全部狀況(例如遊戲應用),所以 UC 瀏覽器容許網頁設計者對其設計的頁面禁用瀏覽器的夜間模式,自行設計更適合用戶使用的夜間模式。
注意:頁面內的 frame/iframe 中的夜間模式的 meta 不生效。
<meta name="nightmode" content="enable|disable">
爲了節省流量及加快速度,UC 爲用戶提供了無圖模式,在實際使用中存在頁面中的圖片是不可缺乏的,例如驗證碼,地圖等。經過強制圖片顯示的功能能夠保證圖片顯示不受用戶的設置影響。
**注意:整頁圖片強制顯示僅對當前頁面生效,對頁面內的 frame/iframe 不生效,也不影響前進後退的頁面
<meta name="imagemode" content="force">
<meta name="browsermode" content="application">
應用模式是爲方便 Web 應用及遊戲開發者設置的綜合開關,經過meta標籤進行指示打開,當進入應用模式時,瀏覽器將自動調整如下參數:
參數 | 狀態 | 說明 |
---|---|---|
全屏 | 生效 | 可經過 meta 或 JS API 調用退出全屏 |
長按菜單 | 失效 | 可經過 JS API 調用從新生效 |
瀏覽器默認手勢 | 失效 | 可經過 JS API 調用從新生效 |
排版模式 | 標準模式 | 可經過 meta 或 JS API 調用設置其餘排版模式 |
強制圖片顯示 | 生效 | / |
夜間模式 | 失效 | 可經過 meta 或 JS API 調用啓用夜間模式 |
例如:禁用的 UC 瀏覽器的字體縮放功能
<meta name="wap-font-scale" content="no">
具體UC 瀏覽器文檔連接:UC 瀏覽器文檔
告訴瀏覽器這個網站對應的app,並在頁面上顯示下載banner,須要注意的是Smart App Banners標籤不能用在frame框架內部,不然不起做用。
其中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的寫法:
<meta name="apple-itunes-app" content="app-id=362872995, affiliate-data=bevbOqLt02I, app-argument=digg://">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
只有在 「apple-mobile-web-app-capable」 content=」yes」 時生效。
<meta name="apple-mobile-web-app-title" content="App Title">
圖片自動處理成圓角和高光等效果。
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">
禁止系統自動添加效果,直接顯示設計原圖。
<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">
iOS 8+ 再也不支持 precomposed, 只有 apple-touch-icon 是必須的
在大多數狀況下,在head中一個180×180px的圖標就足夠了。若是您想要由設備肯定的惟一圖標,請使用不一樣大小的圖標。
<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">
iPad 的啓動畫面是不包括狀態欄區域的,iPhone 和 iPod touch 的啓動畫面是包含狀態欄區域的
<link rel="apple-touch-startup-image" href="path/to/startup.png">
具體描述設置請查看http://www.css88.com/archives/5480中相應的說明。
<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">
Android Lollipop 中的 Chrome 39 增長 theme-color meta 標籤,用來控制選項卡顏色。
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">
詳細連接: https://developer.chrome.com/multidevice/android/installtohomescreen
<!-- 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">
注:貌似沒測試成功,若是你知道如何正確設置,歡迎留言斧正。
Safari 10開始支持固定書籤頁的SVG favicons了,你能夠這樣使用:
<!-- Pinned Site -->
<link rel="mask-icon" href="path/to/icon.svg" color="red">
相似的效果
擴展閱讀:https://yoast.com/dev-blog/safari-pinned-tab-icon-mask-icon/
有些時候感受chrome瀏覽器下翻譯插件很煩人,能夠經過下面的代碼禁用它。
<meta name="google" value="notranslate" />
有時候,你須要在你的頁面上點擊某個安卓,直接安卓你的chrome瀏覽器插件,而不是連接到Chrome webstore 的詳細地址再安裝,那麼你可使用:
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
具體使用,請查看:Using Inline Installation
從 Chrome 31 開始,你能夠設置你的 Web 應用爲「app mode」,如 Safari。
<!-- 連接到一個 manifest 並定義 manifest 的元數據。-->
<!-- manifest.json 中的例子也能夠經過如下連接找到。-->
<link rel="manifest" href="manifest.json">
<!-- 定義你的網頁爲 Web 應用 -->
<meta name="mobile-web-app-capable" content="yes">
<!-- 第一個是官方推薦格式。-->
<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">
//IE8如下以IE7標準模式呈現網頁,而IE9則以IE9的標準模式呈現網頁: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> //若是安裝了GCF,則使用GCF來渲染頁面("chrome=1"), //若是沒有安裝GCF,則使用最高版本的IE內核進行渲染("IE=edge") <meta http-equiv="x-ua-compatible" content="ie=edge">
GCF(Google Chrome Frame )相關連接:https://www.chromium.org/developers/how-tos/chrome-frame-getting-started
X-UA-Compatible相關連接:https://blogs.msdn.microsoft.com/ie/2010/06/16/ies-compatibility-features-for-site-developers/
<meta http-equiv="cleartype" content="on">
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Disable link highlighting on IE 10 on Windows Phone 具體說明查看: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 具體說明查看: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 磁貼圖標 <meta name="msapplication-TileImage" content="path/to/tileimage.jpg">
<meta name="msapplication-window" content="width=1024;height=768">
<!-- 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/ -->
具體請查看:App Links Docs
HEAD
片斷包HEAD
片斷包HEAD
片斷的 CLI 接口HEAD
標籤的 meta 信息參考閱讀文章: