移动前端不得不了解的HTML5 head 头标签
HTML的頭部內容特別多，有針對SEO的頭部信息，也有針對移動設備的頭部信息。而且各個瀏覽器內核以及各個國內瀏覽器廠商都有些自己的標簽元素,有很多差異性。移動端的工作已經越來越成為前端工作的重要內容，除了平常的項目開發，HTML 頭部標簽功能，特別是meta，link等標簽的功能屬性顯得非常重要。這里整理了一份?<head>?部分的清單，讓大家了解每個標簽及相應屬性的意義，寫出滿足自己需求的?<head>?頭部標簽，可以很有效的增強頁面的可用性。
<!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>
<meta http-equiv="x-ua-compatible" content="ie=edge">
在桌面開發的時候可以讓IE瀏覽器以最新的模式渲染頁面，具體可以查看本文Internet Explorer瀏覽器部分。
如果你的頁面確定只在桌面瀏覽器中運行，那么
html 代碼:
<meta name="viewport" content="width=device-width, initial-scale=1">
也可以省略。
DOCTYPE
DOCTYPE(Document Type)，該聲明位于文檔中最前面的位置，處于 html 標簽之前，此標簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規范。
使用 HTML5 doctype，不區分大小寫。
html 代碼:
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不區分大小寫 -->
charset
聲明文檔使用的字符編碼，
html 代碼:
<meta charset="utf-8">
html5 之前網頁中會這樣寫：
html 代碼:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
這兩個是等效的，具體可移步閱讀：<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，所以建議使用較短的，易于記憶。
lang屬性
更加標準的 lang 屬性寫法 http://zhi.hu/XyIa
簡體中文
html 代碼:
<html lang="zh-cmn-Hans"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
繁體中文
html 代碼:
<html lang="zh-cmn-Hant"> <!-- 更加標準的 lang 屬性寫法 http://zhi.hu/XyIa -->
很少情況才需要加地區代碼，通常是為了強調不同地區漢語使用差異，例如：
html 代碼:
<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”。
詳情見：http://www.css88.com/archives/6410
Meta 標簽
meta標簽是HTML中head頭部的一個輔助性標簽，它位于HTML文檔頭部的?<head>?和?<title>?標記之間，它提供用戶不可見的信息。雖然這部分信息用戶不可見，但是其作用非常強大，特別是當今的前端開發工作中，設置合適的meta標簽可以大大提升網站頁面的可用性。
桌面端開發中，meta標簽通常用來為搜索引擎優化（SEO）及 robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用于鑒別作者，設定頁面格式，標注內容提要和關鍵字；還可以設置頁面使其可以根據你定義的時間間隔刷新自己，以及設置RASC內容等級，等等。
移動端開發中，meta標簽除了桌面端中的功能設置外，還包括，比如viewport設置，添加到主屏幕圖標，標簽頁顏色等等實用設置。具體可以看后面詳細的介紹。
meta標簽分類
meta標簽根據屬性的不同，可分為兩大部分：http-equiv 和 name 屬性。
http-equiv：相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。
name屬性：主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于瀏覽器，搜索引擎等機器人識別，等等。
推薦使用的meta標簽
<!-- 設置文檔的字符編碼 -->
<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
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 -->
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 中新增屬性（注意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
而如果你的網站不是響應式的，請不要使用 initial-scale 或者禁用縮放。
html 代碼:
<meta name="viewport" content="width=device-width,user-scalable=yes">
相關鏈接：非響應式設計的viewport
適配 iPhone 6 和 iPhone 6plus 則需要寫：
html 代碼:
<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。
不推薦的 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">
SEO 優化部分
頁面標題<title>標簽(head 頭部必須)
<title>your title</title>
頁面關鍵詞 keywords
<meta name="keywords" content="your keywords">
頁面描述內容 description
<meta name="description" content="your description">
定義網頁作者 author
<meta name="author" content="author,email address">
定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。
<meta name="robots" content="index,follow">
百度禁止轉碼
通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你的身上貼狗皮膏藥的廣告，為此可在 head 內添加
<meta?http-equiv="Cache-Control"?content="no-siteapp"?/>
link 標簽
說到 link 標簽，估計大家的第一反應和我一樣，就是引入外部CSS樣式文件的，不錯，這是 link 標簽最最常用的功能。不過它還有很多別的用處，比如這是瀏覽器 favicon 圖標，touch圖標等等。
<!-- 有助于防止出現內容重復的問題 -->
<link rel="canonical" >
<!-- 之前用于包含 icon 鏈接，但已被廢棄并不再使用 -->
<link rel="shortlink" >
<!-- 鏈接到當前文檔的一個 AMP HTML 版本 -->
<link rel="amphtml" >
<!-- 表明一個 CSS 樣式表 -->
<link rel="stylesheet" >
<!-- 鏈接到一個指定 Web 應用程序“安裝”證書的 JSON 文件 -->
<link rel="manifest" href="manifest.json">
<!-- 鏈接到文檔的作者 -->
<link rel="author" href="humans.txt">
<!-- 指向一個適用于鏈接內容的版權申明 -->
<link rel="copyright" href="copyright.html">
<!-- 給出可能的你的另一種語言的文檔位置參考 -->
<link rel="alternate" hreflang="es">
<!-- 提供了關于作者或其他人的信息 -->
<link rel="me" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 鏈接到一個文檔，包含當前文檔的一個歸檔鏈接 -->
<link rel="archives" title="May 2003">
<!-- 鏈接到層次結構中的頂級資源 -->
<link rel="index" title="DeWitt Clinton">
<!-- 給出該文檔的起點 -->
<link rel="start" title="Pattern Recognition 1">
<!-- 引導當前文檔的前述資源序列 -->
<link rel="prev" title="OpenSearch and OpenID? A sure way to get my attention.">
<!-- 給出一個自我參考 - 當文檔有多個可能的參考時非常有用 -->
<link rel="self" type="application/atom+xml" >
<!-- 分別是在一系列文件中的第一個、下一個、上一個和最后一個 -->
<link rel="first" >
<link rel="next" >
<link rel="previous" >
<link rel="last" >
<!-- 當使用第三方服務來維護 blog 時使用 -->
<link rel="EditURI" type="application/rsd+xml" title="RSD">
<!-- 當另一個 WordPress 博客鏈接到你的 WordPress 博客或文章時形成一個自動化的評論 -->
<link rel="pingback" >
<!-- 當你在自己的頁面上鏈接到一個 url 時通知它 -->
<link rel="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" type="application/rss+xml" title="RSS">
<link rel="alternate" type="application/atom+xml" title="Atom 0.3">
<!-- 預取，預載，預瀏覽 -->
<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/ -->
不推薦的link標簽
<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">
rss訂閱
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<!-- 添加 RSS 訂閱 -->
favicon 圖標
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 介紹可參考：
- 所有關于網站圖標（和觸摸圖標）
- favicon 對照表
參考鏈接：
https://www.cnblogs.com/happiness-mumu/p/6054637.html
https://www.cnblogs.com/happiness-mumu/p/6054836.html
https://www.cnblogs.com/happiness-mumu/p/6054852.html
總結
以上是生活随笔為你收集整理的移动前端不得不了解的HTML5 head 头标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 会议室管理系统综评：德睿电子、英思杰、盛
- 下一篇： 华为进行组织架构调整 Cloud&