HTML meta標籤總結與屬性使用介紹

2022-08-22 03:06:11 字數 3234 閱讀 8672

metadata,中文名叫元資料,是用於描述資料的資料。它不會顯示在頁面上,但是機器卻可以識別。

注意:標籤通常位於 區域內。

注意:元資料通常以 名稱/值 對出現。

注意:如果沒有提供 name 屬性,那麼名稱/值對中的名稱會採用 http-equiv 屬性的值。

組成meta標籤共有兩個屬性,分別是http-equiv屬性和name屬性。

其中name屬性共有以下幾種引數。(a-c為常用屬性)

a. keywords(關鍵字)

b. description(**內容的描述)

說明:頁面描述,用於搜尋引擎收錄。舉例:

c. viewport(移動端的視窗)

說明:用於控制頁面縮放。這個屬性常用於設計移動端網頁。在用bootstrap,amazeui等框架時候都有用過viewport。舉例(常用範例):

d. robots(定義搜尋引擎爬蟲的索引方式)

說明:robots用來告訴爬蟲哪些頁面需要索引,哪些頁面不需要索引。content的引數有all,none,index,noindex,follow,nofollow。預設是all。舉例:

具體引數如下:

e. author(作者)

說明:用於標註網頁作者。舉例:

f. generator(網頁製作軟體)

說明:用於標明網頁是什麼軟體做的。舉例: (不知道能不能這樣寫):

h. revisit-after(搜尋引擎爬蟲重訪時間)

說明:如果頁面不是經常更新,為了減輕搜尋引擎爬蟲對伺服器帶來的壓力,可以設定乙個爬蟲的重訪時間。如果重訪時間過短,爬蟲將按它們定義的預設時間來訪問。舉例:

i. renderer(雙核瀏覽器渲染方式)

說明:renderer是為雙核瀏覽器準備的,用於指定雙核瀏覽器預設以何種方式渲染頁面。比如說360瀏覽器。舉例:

"renderer" content="webkit"> //預設webkit核心

"renderer" content="ie-comp"> //預設ie相容模式

"renderer" content="ie-stand"> //預設ie標準模式

http-equiv顧名思義,相當於http的檔案頭作用。語法格式是:

其中http-equiv屬性主要有以下幾種引數:

a. content-type(設定網頁字符集)(推薦使用html5的方式)

說明:用於設定網頁字符集,便於瀏覽器解析與渲染頁面舉例:

"content-type" content="text/html;charset=utf-8">  //舊的html,不推薦

"utf-8"> //html5設定網頁字符集的方式,推薦使用utf-8

b. x-ua-compatible(瀏覽器採取何種版本渲染當前頁面)

說明:用於告知瀏覽器以何種版本來渲染頁面。(x-ua-compatible是針對ie8新加的乙個設定,對於ie8之外的瀏覽器是不識別的。)舉例:

"x-ua-compatible" content="ie=edge,chrome=1"/> //指定ie和chrome使用最新版本渲染當前頁面

c. cache-control(指定請求和響應遵循的快取機制)

用法1:指導瀏覽器如何快取某個響應以及快取多長時間。舉例:

cache-control指定請求和響應遵循的快取機制。在請求訊息或響應訊息中設定cache-control並不會修改另乙個訊息處理過程中的快取處理過程。請求時的快取指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,響應訊息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。

共有以下幾種用法:

no-cache: 先傳送請求,與伺服器確認該資源是否被更改,如果未被更改,則使用快取。

public : 快取所有響應,但並非必須。因為max-age也可以做到相同效果

private : 只為單個使用者快取,因此不允許任何中繼進行快取。(比如說cdn就不允許快取private的響應)

max-age : 表示當前請求開始,該響應在多久內能被快取和重用,而不去伺服器重新請求。例如:max-age=60表示響應可以再快取和重用 60 秒。

min-fresh:指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。

max-stale:指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼客戶機可以接收超出超時期指定值之內的響應訊息。

d. expires(網頁到期時間)

說明:用於設定網頁的到期時間,過期後網頁必須到伺服器上重新傳輸。舉例:

e. refresh(自動重新整理並指向某頁面)
"refresh" content="2;url="> //意思是2秒後跳轉向我的部落格

f. set-cookie(cookie設定)

說明:如果網頁過期。那麼這個網頁存在本地的cookies也會被自動刪除。

"set-cookie" content="name, date"> //格式

"set-cookie" content="user=lxxyx; path=/; expires=sunday, 10-jan-16 10:00:00 gmt"> //具體範例

g.pragma

說明:是用於設定禁止瀏覽器從本地機的快取中調閱頁面內容,設定後一旦離開網頁就無法從cache中再調出 。

HTML meta標籤總結與屬性使用介紹

之前學習前端中,對meta標籤的了解僅僅只是這一句。charset utf 8 但是開啟任意的 其head標籤內都有一列的meta標籤。比如我部落格的。但是自己卻很不熟悉,於是把meta標籤加入了寒假學習計畫的最前方。the tag provides metadata about the html ...

HTML meta標籤總結與屬性使用介紹

之前學習前端中,對meta標籤的了解僅僅只是這一句。但是開啟任意的 其head標籤內都有一列的meta標籤。the tag provides metadata about the html document.metadata will not be displayed on the page,but...

HTML meta標籤總結與屬性使用介紹

之前學習前端中,對meta標籤的了解僅僅只是這一句。但是開啟任意的 其head標籤內都有一列的meta標籤。比如我部落格的。但是自己卻很不熟悉,於是把meta標籤加入了寒假學習計畫的最前方。the tag provides metadata about the html document.metad...