HTML中的meta標籤屬性的使用

2021-10-09 11:22:30 字數 2576 閱讀 6142

之前學習前端中,對meta標籤的了解僅僅只是這一句。但是開啟任意的**,其head標籤內都有一列的meta標籤。下面我們就來詳細介紹一下meta標籤。

在查閱w3school中,第一句話中的「元資料」就讓我開始了google之旅。然後很順利的在英文版的w3school找到了想要的結果。

the tag provides metadata about the html document. metadata will not be displayed on the page, but will be machine parsable.

不難看出,其中的關鍵是metadata,中文名叫元資料,是用於描述資料的資料。它不會顯示在頁面上,但是機器卻可以識別。這麼一來meta標籤的作用方式就很好理解了。

組成

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

1、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瀏覽器。舉例:

//預設webkit核心

//預設ie相容模式

//預設ie標準模式

2、http-equiv屬性介紹之前,先說個小插曲。看文件和部落格關於http-equiv的介紹時,有這麼一句。

http-equiv顧名思義,相當於http的檔案頭作用。

meta標籤中http-equiv屬性語法格式是:

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

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

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

//舊的html,不推薦

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

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

說明:用於告知瀏覽器以何種版本來渲染頁面。(一般都設定為最新模式,在各大框架中這個設定也很常見。)舉例:

//指定ie和chrome使用最新版本渲染當前頁面
c. cache-control(指定請求和響應遵循的快取機制)

用法1.

說明:指導瀏覽器如何快取某個響應以及快取多長時間。這一段內容我在網上找了很久,但都沒有找到滿意的。最後終於在google developers中發現了我想要的答案。

舉例:

共有以下幾種用法:

d. expires(網頁到期時間)

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

e. refresh(自動重新整理並指向某頁面)

//意思是2秒後跳轉向我的部落格
f. set-cookie(cookie設定)

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

//格式

//具體範例

HTML中的meta標籤及其屬性

個人部落格 造輪小狐 釋義 charset屬性設定編碼格式,設定成utf 8避免出現中文亂碼 釋義 標籤必需的乙個屬性,依賴於http equive和name名稱和值對,存放其內容,值為text 釋義 http equiv 屬性為名稱 值對提供了名稱。並指示伺服器在傳送實際的文件之前要先傳送給瀏覽器...

html中的meta標籤

meta元素提供頁面的原資訊,位於文件頭部 content屬性 該屬性提供名稱 值對中的值,使用要與http equiv或name屬性一起使用 3.1 http equiv 屬性 對應的值有 content type expires refresh set cookie 該屬性把content屬性關...

HTML中的meta標籤常用屬性及其作用總結

文章同步到github 以前沒怎麼太注意過meta標籤的作用,只是簡單了解一些常用屬性,現在結合個人了解的進行記錄與總結 首先需要了解一下元資料 metadata 元素的概念,用來構建html文件的基本結構,以及就如何處理文件向瀏覽器提供資訊和指示,它們本身不是文件內容,但提供了關於後面文件內容的資...