HTML 之 Head

每一個(gè)標(biāo)準(zhǔn)的 HTML 文檔都包含一個(gè) <head> 頭部分，除了聲明文檔類型，編碼方式和文檔標(biāo)題，引入外部資源這些基本功能外， 頭還能做很多非常有用的事情，這篇文章整理了作者認(rèn)可的一些最佳實(shí)踐，寫在這里與各位分享。

語言

在 html 標(biāo)簽中通過 lang 屬性進(jìn)行明確的語言聲明，將會(huì)有助于翻譯，英文、簡(jiǎn)體中文和繁體中文網(wǎng)頁所屬性值如下：

<html lang="en">
<html lang="zh-Hans">
<html lang="zh-Hant">

編碼

請(qǐng)?jiān)?<head> 中第一行統(tǒng)一使用 utf-8 編碼聲明。

<meta charset="utf-8">

Base 元素

盡量不使用 <base> 元素，絕對(duì)地址和 URL 對(duì)于開發(fā)者和用戶來說都更好。

<!-- Bad -->
<base href="/blog/">
<link href="hello-world" rel="canonical">

<!-- Good -->
<link href="/blog/hello-world" rel="canonical">

Viewport

設(shè)置 viewport 的寬度為設(shè)備寬度，默認(rèn)縮放比為 1（允許用戶縮放），設(shè)置 viewport-fit=cover 以兼容 iPhone X 全面屏“劉?！钡娘@示。

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

DNS 預(yù)讀取

DNS 預(yù)讀取是一項(xiàng)使瀏覽器主動(dòng)去執(zhí)行域名解析的功能，其范圍包括當(dāng)前文檔內(nèi)的所有鏈接，這能夠減少用戶點(diǎn)擊鏈接時(shí)的延遲。

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" >
<link rel="dns-prefetch" >

預(yù)加載

指示瀏覽器預(yù)先請(qǐng)求當(dāng)前頁面所需要的關(guān)鍵性資源

<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

預(yù)請(qǐng)求

指示瀏覽器預(yù)先請(qǐng)求用戶即將瀏覽頁面所需要的關(guān)鍵性資源。

<link rel="prefetch" href="/img/css-sprite.png">
<link rel="prefetch" href="/fonts/icons.woff2">

渲染偏好

對(duì)于國(guó)內(nèi)各種雙核瀏覽器，通過設(shè)置 renderer 頭要求它們使用 webkit 內(nèi)核；對(duì)于 IE 瀏覽器，通過設(shè)置 IE=edge 要求它使用最新的版本；對(duì)于百度搜索強(qiáng)制轉(zhuǎn)碼的流氓做法，通過 no-transform 禁止其自動(dòng)轉(zhuǎn)碼；指示瀏覽器對(duì)類似電話、郵箱或地址的內(nèi)容不要自作聰明的瞎識(shí)別（移動(dòng)端）。

<meta name="renderer" content="webkit"> <!-- 用在360中 -->
<meta name="force-rendering" content="webkit"> <!-- 用在其它 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 針對(duì) IE 瀏覽器 -->
<meta http-equiv="Cache-Control" content="no-transform"> <!-- 針對(duì)百度搜索 -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">

文檔信息

HTML 文檔的一些元數(shù)據(jù)，包括：作者、描述、關(guān)鍵詞和生成工具；設(shè)置 robots 為 index,follow 指示搜索引擎爬蟲該頁面需要進(jìn)入索引，并且頁面內(nèi)的所有鏈接都要繼續(xù)跟蹤；設(shè)置 referrer 為 origin-when-cross-origin 指示瀏覽器在進(jìn)行跨域跳轉(zhuǎn)時(shí)，其 referrer 值將統(tǒng)一為域名，而非具體的 URL 地址。

<meta name="author" content="米老朱">
<meta name="description" content="米老朱的個(gè)人博客">
<meta name="keywords" content="米老朱,極客,博客,WEB,開發(fā),產(chǎn)品設(shè)計(jì)">
<meta name="generator" content="Hugo 0.32">
<meta name="robots" content="index,follow">
<meta name="referrer" content="origin-when-cross-origin">

Icons

雖說所有瀏覽器都還支持過時(shí)的 favicon.ico 格式，但在 HTML5 時(shí)代，我們應(yīng)該使用更好的 PNG icon with sizes 方案。同時(shí)為了兼容老舊瀏覽器，我們可以將生成好的 favicon.ico 文件放在網(wǎng)站的根目錄下面，通常瀏覽器會(huì)自動(dòng)請(qǐng)求并加載它，并不需要額外通過 link 標(biāo)簽引入。

<meta name="theme-color" content="#db5945"> <!-- 主題顏色 -->
<meta name="application-name" content="米老朱的博客"> <!-- 應(yīng)用名稱 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 隱藏狀態(tài)欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 狀態(tài)欄顏色 -->
<meta name="apple-mobile-web-app-title" content="米老朱的博客"> <!-- iOS 下的應(yīng)用名稱 -->
<meta name="msapplication-tooltip" content="米老朱的博客"> <!-- Hover 的提示信息 -->
<meta name="msapplication-TileColor" content="#db5945"> <!-- 磁貼背景顏色 -->
<meta name="msapplication-TileImage" content="/img/logo-144.png"> <!-- 磁貼圖標(biāo) -->
<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 rel="apple-touch-icon" href="/img/logo-120.png"> <!-- iPhone -->
<link rel="apple-touch-icon" href="/img/logo-152.png" sizes="152x152"> <!-- iPad -->
<link rel="apple-touch-icon" href="/img/logo-180.png" sizes="180x180"> <!-- iPhone Plus -->
<link rel="apple-touch-icon" href="/img/logo-167.png" sizes="167x167"> <!-- iPad Pro -->
<link rel="mask-icon" href="/img/logo.svg" color="green"> <!-- Safari Pinned Tab Icon -->

微軟為了讓 Metro UI 更好看，引入了 browserconfig.xml 文件，主要用于定制網(wǎng)站固定磁鐵的圖標(biāo)和背景顏色，其格式如下所示：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="/img/logo-70.png"/>
        <square150x150logo src="/img/logo-150.png"/>
        <wide310x150logo src="/img/logo-310x150.png"/>
        <square310x310logo src="/img/logo-310.png"/>
        <TileImage src="/img/logo-144.png"/>
        <TileColor>#db5945</TileColor>
     </tile>
   </msapplication>
</browserconfig>

favicon.ico 實(shí)際上是一個(gè)圖片容器，里面至少應(yīng)該包含 16x16，32x32，48x48 三個(gè)尺寸的 png 圖片，我們可以使用 ImageMagick 工具在本地直接生成（生成之前需要對(duì) png 圖片進(jìn)行壓縮以減小尺寸）。

$ convert favicon-16.png favicon-32.png favicon-48.png favicon.ico

注意：apple-mobile-web-app-status-bar-style 值默認(rèn)狀態(tài)欄為白色，可設(shè)置為 black（黑色） 或者 black-translucent（灰色半透明）；mask-icon 引入的 svg 文件必須只有一個(gè)圖層，并且 viewBox 屬性應(yīng)該為 “0 0 16 16”。

Twitter Cards

Twitter 卡片用于將網(wǎng)站內(nèi)容以更加優(yōu)雅漂亮的方式分享到 twitter.com 網(wǎng)站，從形式上說，分為：summary, summary_large_image, app, player 四種形式，通常我們的站點(diǎn)只需要 summary 這種形式。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@melaozhu">
<meta name="twitter:title" content="此處為分享標(biāo)題">
<meta name="twitter:description" content="此處為分享描述">
<meta name="twitter:image" content="此處為分享配圖">

配置上線后，你可以通過這個(gè) Card validator 工具檢查是否正確顯示。

Facebook Open Graph

Open Graph 是一套開放的網(wǎng)頁標(biāo)注協(xié)議，通過 meta 標(biāo)簽標(biāo)注網(wǎng)頁的類型，主要由 Facebook 推動(dòng)，已經(jīng)成為社交分享領(lǐng)域的事實(shí)標(biāo)準(zhǔn)。如果你希望明確告訴社交網(wǎng)絡(luò)或搜索引擎你的網(wǎng)頁類型，你應(yīng)該添加這些 meta 標(biāo)簽。

<meta property="og:type" content="article">
<meta property="og:title" content="此處為分享標(biāo)題">
<meta property="og:description" content="此處為分享描述">
<meta property="og:image" content="此處為分享配圖">
<meta property="og:url" content="此處為分享的鏈接地址">

固定鏈接

對(duì)于一份文檔存在多個(gè) URL 的情況，通過 rel="canonical" 指定唯一的固定鏈接。

<link rel="canonical" >

RSS 鏈接

對(duì)于支持 RSS 訂閱的頁面，可針對(duì) RSS 閱讀器提供可訂閱的源文件。

<link rel="alternative" href="/index.xml" title="米老朱的博客" type="application/atom+xml">

Polyfill

可以專門為老舊的 IE 瀏覽器引入 Polyfill 方案，舉個(gè)例子，為了讓 IE6-IE8 瀏覽器能夠使用 HTML5 標(biāo)簽和 Media Query 特性，我們需要引入 html5shiv 和 response.js 這兩個(gè)庫。

<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

其他的 Polyfill 方案寫法類似。

打印樣式表

對(duì)于可打印的頁面（如文章頁面），可提供針對(duì)打印機(jī)的樣式表，使得網(wǎng)站用戶可以將文章打印下來閱讀。

<link rel="stylesheet" href="/css/print.css" media="print">

交替樣式表

定義交替樣式表的時(shí)候，指定其 title 屬性，以方便用戶在瀏覽器中根據(jù)名稱選擇替代樣式，交替樣式表多用于多主題切換的站點(diǎn)。

<link href="default.css" rel="stylesheet">
<link href="high-contrast.css" rel="alternate stylesheet" title="High contrast">
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容