那些你不知道的meta標籤

2021-09-11 12:09:41 字數 2007 閱讀 5890

作為一名切圖仔,對meta一直都是用於seo優化、設定視口標籤,但是最近一段時間檢視**、京東、蘇寧等**的前端**卻發現meta標籤的使用多種多樣,這才知道自己一直小覷了meta標籤。 在陸續看了其他幾家大型**的前端**和翻閱了相關資料寫下了這篇文章,如果文章中有什麼錯誤,麻煩指出,立即更正。

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

content-security-policy

處於安全方面的考慮,瀏覽器的同源策略在一定程度上保護了使用者安全,但是像script、link、img等標籤是不受同源策略的影響,而這些因素會給我們的使用者帶來安全風險,這個時候,該屬性就出馬了。 在瀏覽器中,通過設定該屬性來宣告哪些動態資源允許被載入以此減少xss攻擊。該屬性的內容包括了對script、style、font、media等靜態資源的控制,由於其內容過多,在此就不再進行贅述, 想要對此進行了解的,可以閱讀content security policy reference。

cache-control、pragma、expires

將這三個屬性並列在一起,是因為其跟http頭有著同樣的屬性。從字面上看,加上相應的屬性能夠讓瀏覽器快取相應的html內容,所以在某些**(包括大型**)上你能夠看到以下meta標籤內容

複製**
但是,現實是殘酷的,這些標籤往往不會生效,甚至在html5規範中,http-equiv中的屬性並不包括這三個,如果我們需要進行快取控制的話,還是 寄希望與http headers上。

x-dns-prefetch-control

雖然在meta標籤設定快取無效,但是我們可以設定meta標籤來提前進行dns解析以此來提公升**效能。在html頁面中的a標籤會自動啟用dns提前解析,但是在https上卻失效了,這個時候就輪到該屬性登場了 通過設定就可以讓a標籤在https環境下進行dns預解析。

refresh

這個屬性的值可以進行頁面的跳轉,其效果跟如下函式一樣。

settimeout(function(),time)

複製**

其常用的用法如下:

//當前頁面每一秒後重新整理一下

//當前頁面一秒後跳轉到首頁

複製**

需要注意的是,在某些瀏覽器(firefox)需要使用者手動啟用autorefreh,同時其相對於js執行,跳轉需要等待時間過長。

default-style

這個屬性指定了在頁面上使用的首選樣式表. content屬性必須包含元素的標題, href屬性鏈結到css樣式表或包含css樣式表的元素的標題.

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

/*保留歷史記錄以及動畫效果*/

/*啟用360瀏覽器的極速模式(webkit)*/

/*uc強制豎屏*/

/*qq強制豎屏*/

/*uc強制全屏*/

/*qq強制全屏*/

/*uc應用模式*/

複製**

雜項

其實meta標籤的作用不止於此,很多**(google,baidu,sogou,twitter)都有一套屬於自己的規範,開發者為了相容性,自然要加上相應的屬性。 相應的meta標籤在此也就不再進行講解。

你不知道的那些console

前一陣在查詢問題的時候,偶然間發現了console的乙個用法,彷彿開啟了我新世界的大門,原來console還有這麼多的用法,這讓一直以來只用console.log 的我情何以堪啊,所以在這裡記錄一下我認為有意思和比較實用的幾種用法。console.log 文字資訊 console.info 提示資訊...

你不知道的那些「XX即服務」

雲計算引發了一系列xx即服務的新模式,從早期的軟體即服務 saas 到現在流行的網路即服務 naas 各種 xx即服務 的術語也讓很多it工作者覺得一頭霧水,本期的資訊化內參,帶你全面了解各種各樣的xx即服務。在雲計算之前,上乙個資料倉儲和商業智慧型專案通常意味著花費數月獲取硬體和軟體,實現自定製設...

你不知道的那些「XX即服務」

雲計算引發了一系列xx即服務的新模式,從早期的軟體即服務 saas 到現在流行的網路即服務 naas 各種 xx即服務 的術語也讓很多it工作者覺得一頭霧水,本期的資訊化內參,帶你全面了解各種各樣的xx即服務。在雲計算之前,上乙個資料倉儲和商業智慧型專案通常意味著花費數月獲取硬體和軟體,實現自定製設...