HTML 文檔之 Head 最佳實踐--摘抄
HTML 文檔之 Head 最佳實踐
每個標準的 HTML 文檔都包含一個 <head> 頭部分，除了聲明文檔類型，編碼方式和文檔標題，引入外部資源這些基本功能外， 頭還能作不少很是有用的事情，這篇文章整理了做者承認的一些最佳實踐，寫在這裏與各位分享。css
語言
在 html 標籤中經過 lang 屬性進行明確的語言聲明，將會有助於翻譯，英文、簡體中文和繁體中文網頁所屬性值以下：html
<html lang="en"> <html lang="zh-Hans"> <html lang="zh-Hant">
編碼
請在 <head> 中第一行統一使用 utf-8 編碼聲明。html5
<meta charset="utf-8">
Base 元素
儘可能不使用 <base> 元素，絕對地址和 URL 對於開發者和用戶來講都更好。git
<!-- Bad --> <base href="/blog/"> <link href="hello-world" rel="canonical"> <!-- Good --> <link href="/blog/hello-world" rel="canonical">
Viewport
設置 viewport 的寬度爲設備寬度，默認縮放比爲 1（容許用戶縮放），設置 viewport-fit=cover 以兼容 iPhone X 全面屏「劉海」的顯示。github
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
DNS 預讀取
DNS 預讀取是一項使瀏覽器主動去執行域名解析的功能，其範圍包括當前文檔內的全部連接，這可以減小用戶點擊連接時的延遲。web
<meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link rel="dns-prefetch" href="//fonts.googleapis.com">
預加載
指示瀏覽器預先請求當前頁面所須要的關鍵性資源。api
<link rel="preload" href="/css/main.css" as="style"> <link rel="preload" href="/js/main.js" as="script">
預請求
指示瀏覽器預先請求用戶即將瀏覽頁面所須要的關鍵性資源。跨域
<link rel="prefetch" href="/img/css-sprite.png"> <link rel="prefetch" href="/fonts/icons.woff2">
渲染偏好
對於國內各類雙核瀏覽器，經過設置 renderer 頭要求它們使用 webkit 內核；對於 IE 瀏覽器，經過設置 IE=edge 要求它使用最新的版本；對於百度搜索強制轉碼的流氓作法，經過 no-transform 禁止其自動轉碼；指示瀏覽器對相似電話、郵箱或地址的內容不要自做聰明的瞎識別（移動端）。瀏覽器
<meta name="renderer" content="webkit"> <!-- 用在360中 --> <meta name="force-rendering" content="webkit"> <!-- 用在其它 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對 IE 瀏覽器 --> <meta http-equiv="Cache-Control" content="no-transform"> <!-- 針對百度搜索 --> <meta name="format-detection" content="telephone=no,email=no,adress=no">
文檔信息
HTML 文檔的一些元數據，包括：做者、描述、關鍵詞和生成工具；設置 robots 爲 index,follow 指示搜索引擎爬蟲該頁面須要進入索引，而且頁面內的全部連接都要繼續跟蹤；設置 referrer 爲 origin-when-cross-origin 指示瀏覽器在進行跨域跳轉時，其 referrer 值將統一爲域名，而非具體的 URL 地址。markdown
<meta name="author" content="米老朱"> <meta name="description" content="米老朱的我的博客"> <meta name="keywords" content="米老朱,極客,博客,WEB,開發,產品設計"> <meta name="generator" content="Hugo 0.32"> <meta name="robots" content="index,follow"> <meta name="referrer" content="origin-when-cross-origin">
Icons
雖然說全部瀏覽器都還支持過期的 favicon.ico 格式，但在 HTML5 時代，咱們應該使用更好的 PNG icon with sizes 方案。同時爲了兼容老舊瀏覽器，咱們能夠將生成好的 favicon.ico 文件放在網站的根目錄下面，一般瀏覽器會自動請求並加載它，並不須要額外經過 link 標籤引入。
<meta name="theme-color" content="#db5945"> <!-- 主題顏色 --> <meta name="application-name" content="米老朱的博客"> <!-- 應用名稱 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 隱藏狀態欄 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 狀態欄顏色 --> <meta name="apple-mobile-web-app-title" content="米老朱的博客"> <!-- iOS 下的應用名稱 --> <meta name="msapplication-tooltip" content="米老朱的博客"> <!-- Hover 的提示信息 --> <meta name="msapplication-TileColor" content="#db5945"> <!-- 磁貼背景顏色 --> <meta name="msapplication-TileImage" content="/img/logo-144.png"> <!-- 磁貼圖標 --> <meta name="msapplication-config" content="/browserconfig.xml"> <!-- 磁貼配置文件 --> <link rel="icon" type="image/png" href="/img/logo-16.png" sizes="16x16"> <!-- Browser Favicon --> <link rel="icon" type="image/png" href="/img/logo-32.png" sizes="32x32"> <!-- Taskbar Shortcut --> <link rel="icon" type="image/png" href="/img/logo-96.png" sizes="96x96"> <!-- Desktop Shortcut --> <link rel="icon" type="image/png" href="/img/logo-128.png" sizes="128x128"> <!-- Chrome Web Store --> <link rel="icon" type="image/png" href="/img/logo-196.png" sizes="196x196"> <!-- Chrome for Android Home Screen --> <link rel="icon" type="image/png" href="/img/logo-228.png" sizes="228x228"> <!-- Opera Coast Icon --> <link