當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML meta标签总结与属性使用介绍

發布時間：2025/3/21 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML meta标签总结与属性使用介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

轉載自：

https://segmentfault.com/a/1190000004279791

之前學習前端中，對meta標簽的了解僅僅只是這一句。

但是打開任意的網站，其head標簽內都有一列的meta標簽。

簡介

在查閱w3school中，第一句話中的“元數據”就讓我開始了Google之旅。然后很順利的在英文版的w3school找到了想要的結果。（中文w3school說的是元信息，Google和百度都沒有相關的詞條。但元數據在Google就有詳細解釋。所以這兒采用英文版W3school的解釋。）

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

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

用處

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services

這句話對meta標簽用處的介紹，簡潔明了。
翻譯過來就是：meta常用于定義頁面的說明，關鍵字，最后修改日期，和其它的元數據。這些元數據將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它網絡服務。

組成

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

1. name屬性

name屬性主要用于描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便于搜索引擎抓取。
meta標簽中name屬性語法格式是：

其中name屬性共有以下幾種參數。(A-C為常用屬性)

A. keywords(關鍵字)

說明：用于告訴搜索引擎，你網頁的關鍵字。
舉例：

B. description(網站內容的描述)

說明：用于告訴搜索引擎，你網站的主要內容。
舉例：

C. viewport(移動端的窗口)

說明：這個概念較為復雜，具體的會在下篇博文中講述。
這個屬性常用于設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（常用范例）：

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

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。
content的參數有all,none,index,noindex,follow,nofollow。默認是all。

舉例：

具體參數如下：

1.none : 搜索引擎將忽略此網頁，等價于noindex，nofollow。
2.noindex : 搜索引擎不索引此網頁。
3.nofollow: 搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁。
4.all : 搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引，等價于index，follow。
5.index : 搜索引擎索引此網頁。
6.follow : 搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁。

E. author(作者)

說明：用于標注網頁作者
舉例：

F. generator(網頁制作軟件)

說明：用于標明網頁是什么軟件做的
舉例: (不知道能不能這樣寫)：

G. copyright(版權)

說明：用于標注版權信息
舉例：

H. revisit-after(搜索引擎爬蟲重訪時間)

說明：如果頁面不是經常更新，為了減輕搜索引擎爬蟲對服務器帶來的壓力，可以設置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認時間來訪問。
舉例：

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

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

2. http-equiv屬性

介紹之前，先說個小插曲。看文檔和博客關于http-equiv的介紹時，有這么一句。

http-equiv顧名思義，相當于http的文件頭作用。

一開始看到這句話的時候，我是迷糊的。因為我看各類技術名詞，都會習慣性的去記住它的英文全稱。equiv的全稱是”equivalent”，意思是相等，相當于。然后我腦子里出現了大大的迷惑：“HTTP相等？”

后來還準備去Segmentfault提問來著。結果在寫問題的時候，突然反應出equivalent還有相當于的意思。意思就是相當于http的作用。至于文件頭是哪兒出來的，估計是從其作用來分析的。我認為顧名思義并不能得出”相當于http的文件頭作用”這個論斷。

這個我所認為的http-equiv意思的簡介。
相當于HTTP的作用，比如說定義些HTTP參數啥的。

meta標簽中http-equiv屬性語法格式是：

其中http-equiv屬性主要有以下幾種參數：

A. content-Type(設定網頁字符集)(推薦使用HTML5的方式)

說明：用于設定網頁字符集，便于瀏覽器解析與渲染頁面
舉例：

B. X-UA-Compatible(瀏覽器采取何種版本渲染當前頁面)

說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式，在各大框架中這個設置也很常見。）
舉例：

C. cache-control(指定請求和響應遵循的緩存機制)

用法1.

說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。這一段內容我在網上找了很久，但都沒有找到滿意的。
最后終于在Google Developers中發現了我想要的答案。

舉例:

共有以下幾種用法：

no-cache: 先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。

no-store: 不允許緩存，每次都要去服務器上，下載完整的響應。（安全措施）

public : 緩存所有響應，但并非必須。因為max-age也可以做到相同效果

private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）

maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。

參考鏈接：HTTP緩存

用法2.(禁止百度自動轉碼)

說明：用于禁止當前頁面在移動端瀏覽時，被百度自動轉碼。雖然百度的本意是好的，但是轉碼效果很多時候卻不盡人意。所以可以在head中加入例子中的那句話，就可以避免百度自動轉碼了。
舉例：

D. expires(網頁到期時間)

說明:用于設定網頁的到期時間，過期后網頁必須到服務器上重新傳輸。
舉例：

E. refresh(自動刷新并指向某頁面)

說明：網頁將在設定的時間內，自動刷新并調向設定的網址。
舉例:

F. Set-Cookie(cookie設定)

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

最后

暫時總結的就這么多了，meta標簽的自定義屬性實在太多了。所以只去找了常用的一些，還有像Window-target這樣已經基本被廢棄的屬性，我也沒有添加。
一開始以為一兩個小時就能學習完畢，結果沒想到竟然花了五六個小時，各處查資料，推敲文字。敲擊文字的時候，也感覺自己學習了非常多。比如基本的SEO，HTTP協議的再次理解等。

因為經驗尚淺，所以如果有出錯的地方，希望各位能幫忙指正。

總結

以上是生活随笔為你收集整理的HTML meta标签总结与属性使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。