那些你不知道的meta標籤

做爲一名切圖仔，對meta一直都是用於SEO優化、設置視口標籤，可是最近一段時間查看淘寶、京東、蘇寧等網站的前端代碼卻發現meta標籤的使用多種多樣，這才知道本身一直小覷了meta標籤。 在陸續看了其餘幾家大型網站的前端代碼和翻閱了相關資料寫下了這篇文章，若是文章中有什麼錯誤，麻煩指出，當即更正。

http-equiv

http-equiv是meta標籤內容中很是重要的一環，從字面上看是跟HTTP相關，事實上其該屬性的內容值都是特定HTTP的頭，該屬性與服務器和瀏覽器進行交互，讓網站內容顯示的準確和及時。 該屬性中content-type、content-language和set-cookie已經被廢除了，同時像cleartype、imagetoolbar這類不在HTML標準範圍內的，在此再也不進行描述。

content-security-policy

處於安全方面的考慮，瀏覽器的同源策略在必定程度上保護了用戶安全，可是像script、link、img等標籤是不受同源策略的影響，而這些因素會給咱們的用戶帶來安全風險，這個時候，該屬性就出馬了。 在瀏覽器中，經過設置該屬性來聲明哪些動態資源容許被加載以此減小XSS攻擊。該屬性的內容包括了對script、style、font、media等靜態資源的控制，因爲其內容過多，在此就再也不進行贅述， 想要對此進行了解的，能夠閱讀Content Security Policy Reference。

cache-control、Pragma、Expires

將這三個屬性並列在一塊兒，是由於其跟HTTP頭有着一樣的屬性。從字面上看，加上相應的屬性可以讓瀏覽器緩存相應的html內容，因此在某些網站（包括大型網站）上你可以看到如下meta標籤內容

<meta http-equiv="cache-control" content="max-age=180" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
複製代碼

可是，現實是殘酷的，這些標籤每每不會生效，甚至在HTML5規範中，http-equiv中的屬性並不包括這三個，若是咱們須要進行緩存控制的話，仍是 寄但願與HTTP headers上。

x-dns-prefetch-control

雖然在meta標籤設置緩存無效，可是咱們能夠設置meta標籤來提早進行DNS解析以此來提高網站性能。在HTML頁面中的a標籤會自動啓用DNS提早解析，可是在HTTPS上卻失效了，這個時候就輪到該屬性登場了 經過設置<meta http-equiv="x-dns-prefetch-control" content="on" />就可讓a標籤在HTTPS環境下進行DNS預解析。

refresh

這個屬性的值能夠進行頁面的跳轉，其效果跟以下函數同樣。

setTimeout(function(){
  window.location.href = "https://www.example.com"
},time)
複製代碼

其經常使用的用法以下：

//當前頁面每一秒後刷新一下
<meta http-equiv="refresh" content="1">
//當前頁面一秒後跳轉到首頁
<meta http-equiv="refresh" content="0;url='/'">
/當前頁面一秒後跳轉到百度
<meta http-equiv="refresh" content="0;url='https://www.baidu.com'">
複製代碼

須要注意的是，在某些瀏覽器（Firefox）須要用戶手動啓用autorefreh，同時其相對於JS執行，跳轉須要等待時間過長。

default-style

這個屬性指定了在頁面上使用的首選樣式表. content屬性必須包含<link>元素的標題, href屬性連接到CSS樣式表或包含CSS樣式表的<style>元素的標題.

name

name是咱們平常使用最頻繁的屬性，其中author、keywords、description、robots、viewport的值在平時中常用，因此不在此進行講解。 下面列出一些在應用中比較有用的值。

/*保留歷史記錄以及動畫效果*/
<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">

/*是否啓用 WebApp 全屏模式*/
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 設置狀態欄的背景顏色,只有在 「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="App Title">

/*在網頁上方顯示一個app banner，提供app store下載*/
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"

/*啓用360瀏覽器的極速模式(webkit)*/
<meta name="renderer" content="webkit">

/*uc強制豎屏*/
<meta name="screen-orientation" content="portrait">

/*QQ強制豎屏*/
<meta name="x5-orientation" content="portrait">

/*UC強制全屏*/
<meta name="full-screen" content="yes">

/*QQ強制全屏*/
<meta name="x5-fullscreen" content="true">

/*UC應用模式*/
<meta name="browsermode" content="application">

/*QQ應用模式*/
<meta name="x5-page-mode" content="app">

/*禁止自動探測並格式化手機號碼*/
<meta name="format-detection" content="telephone=no">
複製代碼

雜項

其實meta標籤的做用不止於此，不少網站（google,baidu,sogou,twitter）都有一套屬於本身的規範，開發者爲了兼容性，天然要加上相應的屬性。 相應的meta標籤在此也就再也不進行講解。