HTML meta 詳解

簡(jiǎn)介

meta標(biāo)簽是HTML語言HEAD區(qū)的一個(gè)輔助性標(biāo)簽。

meta常用于定義頁面的說明，關(guān)鍵字，最后修改日期，和其它的元數(shù)據(jù)。這些元數(shù)據(jù)將服務(wù)于瀏覽器（如何布局或重載頁面），搜索引擎和其它網(wǎng)絡(luò)服務(wù)。

mata 標(biāo)簽包含全局屬性（https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes）

charset

聲明網(wǎng)頁的字符編碼：

<meta charset="UTF-8">

content

content屬性的內(nèi)容是 htp-equiv或 name屬性的值，具體取決于你用哪一個(gè)。

http-equiv

該屬性可以包含HTTP頭的名稱，屬性的英文全稱為 http-equivalent。它定義了可以改變 server和 user-agent行為的指令。該指令的值在content屬性內(nèi)定義，可以是以下之一：

content-language（已過時(shí)）

定義頁面的默認(rèn)語言。它可以被任何元素上的lang屬性所覆蓋。

Pragma

禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。如：

<meta http-equiv="Pragma" content="no-cache">

expires

可以用于設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。

cache-control

指定請(qǐng)求和響應(yīng)遵循的緩存機(jī)制。共有以下幾種用法：

no-cache: 先發(fā)送請(qǐng)求，與服務(wù)器確認(rèn)該資源是否被更改，如果未被更改，則使用緩存。
no-store: 不允許緩存，每次都要去服務(wù)器上，下載完整的響應(yīng)。（安全措施）
public : 緩存所有響應(yīng)，但并非必須。因?yàn)閙ax-age也可以做到相同效果
private : 只為單個(gè)用戶緩存，因此不允許任何中繼進(jìn)行緩存。（比如說CDN就不允許緩存private的響應(yīng)）
max-age : 表示當(dāng)前請(qǐng)求開始，該響應(yīng)在多久內(nèi)能被緩存和重用，而不去服務(wù)器重新請(qǐng)求。例如：max-age=60表示響應(yīng)可以再緩存和重用 60 秒。

content-security-policy

允許頁面作者定義當(dāng)前頁面的內(nèi)容策略。內(nèi)容策略主要指定允許的服務(wù)器地址和腳本端點(diǎn)，這有助于防止 cross-site scripting 攻擊。

CSP 的實(shí)質(zhì)就是白名單制度，開發(fā)者明確告訴客戶端，哪些外部資源可以加載和執(zhí)行，等同于提供白名單。它的實(shí)現(xiàn)和執(zhí)行全部由瀏覽器完成，開發(fā)者只需提供配置。

CSP 大大增強(qiáng)了網(wǎng)頁的安全性。攻擊者即使發(fā)現(xiàn)了漏洞，也沒法注入腳本，除非還控制了一臺(tái)列入了白名單的可信主機(jī)。 兩種方法可以啟用 CSP。一種是通過 HTTP 頭信息的 Content-Security-Policy的字段。

Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org;child-src https:

另一種是通過網(wǎng)頁的標(biāo)簽。

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

上面代碼中，CSP 做了如下配置:

腳本：只信任當(dāng)前域名
標(biāo)簽：不信任任何URL，即不加載任何資源
樣式表：只信任 cdn.example.org和 third-party.org
框架（frame）：必須使用HTTPS協(xié)議加載
其他資源：沒有限制
啟用后，不符合 CSP 的外部資源就會(huì)被阻止加載。

更多介紹可見：Content Security Policy 入門教程

content-type（已過時(shí)）

定義文檔的MIME類型，后跟其字符編碼。

不要使用這個(gè)值，因?yàn)樗呀?jīng)過時(shí)了。推薦使用元素上的charset屬性。
由于無法在XHTML或HTML5的XHTML序列化中更改文檔類型，因此不要使用將MIME類型設(shè)置為 XHTML MIME類型。
refresh

該指令指定：

如果content屬性只包含一個(gè)正整數(shù)，則表示該頁面重新加載的秒數(shù)。
如果content屬性包含一個(gè)正整數(shù)，后跟字符串'; url ='，那么表示當(dāng)前頁面XX秒后重定向到另一個(gè)有效的URL。

<meta http-equiv="refresh" content="2；URL=https://www.jb51.net/">
 //意思是2秒后跳轉(zhuǎn)到腳本之家

set-cookie（已過時(shí)）

定義頁面的cookie，對(duì)應(yīng)的content值必須遵循IETF HTTP Cookie Specification（https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14）

不要使用這條指令，使用HTTP頭的Set-Cookie（https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie）替代

X-UA-Compatible

用于告知瀏覽器以何種版本來渲染頁面。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 //指定IE和Chrome使用最新版本渲染當(dāng)前頁面

name

name屬性的定義是屬于 document-level metadata，不能和以下屬性同時(shí)設(shè)置： itemprop, http-equiv 或 charset。

該元數(shù)據(jù)名稱與content屬性包含的值相關(guān)聯(lián)。 name屬性的可能值為：

application-name

定義在網(wǎng)頁中運(yùn)行的應(yīng)用程序的名稱。

author

用于標(biāo)注網(wǎng)頁作者。

description

包括一個(gè)關(guān)于頁面內(nèi)容的縮略而精準(zhǔn)的描述。一些瀏覽器，如Firefox和Opera，會(huì)使用這個(gè)當(dāng)做網(wǎng)頁書簽的默認(rèn)描述。

generator

用于標(biāo)明網(wǎng)頁是什么軟件做的。

keywords

用于告訴搜索引擎，你網(wǎng)頁的關(guān)鍵字

revisit-after

如果頁面不是經(jīng)常更新，為了減輕搜索引擎爬蟲對(duì)服務(wù)器帶來的壓力，可以設(shè)置一個(gè)爬蟲的重訪時(shí)間。如果重訪時(shí)間過短，爬蟲將按它們定義的默認(rèn)時(shí)間來訪問。舉例：

<meta name="revisit-after" content="7 days">

renderer

renderer是為雙核瀏覽器準(zhǔn)備的，用于指定雙核瀏覽器默認(rèn)以何種方式渲染頁面。比如說360瀏覽器。舉例：

<meta name="renderer" content="webkit"> 
//默認(rèn)webkit內(nèi)核
<meta name="renderer" content="ie-comp"> 
//默認(rèn)IE兼容模式
<meta name="renderer" content="ie-stand"> 
//默認(rèn)IE標(biāo)準(zhǔn)模式

referrer

referrer 控制document發(fā)起的Request請(qǐng)求中附加的Referer HTTP header（https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer），相應(yīng)的值在content中：