meta 屬性的簡單理解

2021-07-09 10:17:42 字數 4783 閱讀 6805

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

charset="utf-8">

簡介

the 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標籤共有兩個屬性,分別是http-equiv屬性和name屬性。

name="引數"

content="具體的描述">。

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

a. keywords(關鍵字)

說明:用於告訴搜尋引擎,你網頁的關鍵字。

舉例:

name="keywords"

content="lxxyx,部落格,文科生,前端">

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

說明:用於告訴搜尋引擎,你**的主要內容。

舉例:

name="description"

content="文科生,熱愛前端與程式設計。目前大二,這是我的前端部落格">

c. viewport(移動端的視窗)

說明:這個概念較為複雜,具體的會在下篇博文中講述。

這個屬性常用於設計移動端網頁。在用bootstrap,amazeui等框架時候都有用過viewport。

舉例(常用範例):

name="viewport"

content="width=device-width, initial-scale=1">

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

說明:robots用來告訴爬蟲哪些頁面需要索引,哪些頁面不需要索引。

content的引數有all,none,index,noindex,follow,nofollow。預設是all。

舉例:

name="robots"

content="none">

具體引數如下:

e. author(作者)

說明:用於標註網頁作者

舉例:

name="author"

content="lxxyx,[email protected]">

f. generator(網頁製作軟體)

說明:用於標明網頁是什麼軟體做的

舉例: (不知道能不能這樣寫):

name="generator"

content="sublime text3">

說明:用於標註版權資訊

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

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

舉例:

name="revisit-after"

content="7 days" >

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

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

舉例:

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

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

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

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

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

一開始看到這句話的時候,我是迷糊的。因為我看各類技術名詞,都會習慣性的去記住它的英文全稱。equiv的全稱是"equivalent",意思是相等,相當於。然後我腦子裡出現了大大的迷惑:「http相等?」

後來還準備去segmentfault提問來著。結果在寫問題的時候,突然反應出equivalent還有相當於的意思。意思就是相當於http的作用。至於檔案頭是哪兒出來的,估計是從其作用來分析的。我認為顧名思義並不能得出"相當於http的檔案頭作用"這個論斷。

這個我所認為的http-equiv意思的簡介。

相當於http的作用,比如說定義些http引數啥的。

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

http-equiv="引數"

content="具體的描述">

其中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" content="ie=edge,chrome=1"

/> //指定ie和chrome使用最新版本渲染當前頁面

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

用法1.

說明:指導瀏覽器如何快取某個響應以及快取多長時間。這一段內容我在網上找了很久,但都沒有找到滿意的。

最後終於在google developers中發現了我想要的答案。

舉例:

共有以下幾種用法:

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

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

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

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

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"> //具體範例

暫時總結的就這麼多了,meta標籤的自定義屬性實在太多了。所以只去找了常用的一些,還有像window-target這樣已經基本被廢棄的屬性,我也沒有新增。

一開始以為一兩個小時就能學習完畢,結果沒想到竟然花了五六個小時,各處查資料,推敲文字。敲擊文字的時候,也感覺自己學習了非常多。比如基本的seo,http協議的再次理解等。

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

常見的meta標籤屬性

常見的meta標籤屬性 一 name屬性 常見的值有以下幾種 1 viewport 定義瀏覽器視窗的視窗為自適應大小 viewport content width device width,initial scale 1.0 2 keywords 指定當前頁面對於搜尋引擎的關鍵字 keywords ...

meta標籤常用屬性

說明 告訴搜尋引擎你網頁的關鍵字 keywords 使用方法 robots 機械人嚮導 說明 robots用來告訴搜尋機械人頁面需要或者不需要索引。content的引數有all none index noindex follow nofollow。預設是all。使用方法 all 檔案將被檢索,且頁面...

關於頁面Meta屬性

meta標籤的組成 meta標籤共有兩個屬性,它們分別是http equiv屬性和name屬性,不同的屬性又有不同的引數值,這些不同的引數值就實現了不同的網頁功能。1 name屬性 name屬性主要用於描述網頁,與之對應的屬性值為content,content中的內容主要是便於搜尋引擎機械人查詢資訊...