HTML <meta>標籤

admin發表於2018-09-03
HTML
此標籤是<head>標籤中最重要的輔助標籤之一。

幾乎任何一個線上網站的頁面都有meta標籤的使用，截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201809/03/094941dwewwemnwesjyjyi.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

<meta>標籤包含了大量的資訊，有的是提供給瀏覽器，有的則是提供給搜尋引擎。

<meta>標籤的良好使用，對於一個網站是非常重要，下面就介紹一下meta標籤的相關引數。

<meta>標籤常見屬性如下:

（1）.charset（HTML5新增）。

（2）.http-equiv。

（3）.name。

（4）.content。

前三個屬性規定<meta>標籤給誰傳遞資訊；content屬性用來說明name和http-equiv的具體內容。

一.charset屬性:

它用來定義當前文件的編碼方式，告訴瀏覽器如何解析當前頁面:

[HTML] 純文字檢視 複製程式碼
<meta charset=" utf-8">

規定當前頁面的編碼方式是"utf-8"。

二.name屬性:

此屬性主要用於描述網頁，與之對應的屬性為content。

content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的。

語法結構如下:

[HTML] 純文字檢視 複製程式碼
<meta name="引數" content="具體的引數值">

name屬性值分別如下:

（1）.keywords(關鍵字):

用來告訴搜尋引擎你網頁的關鍵字是什麼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta name="keywords"content="html教程,html程式碼例項,螞蟻部落">

（2）.description(網站內容描述):

description用來告訴搜尋引擎你的頁面主要內容。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta name="螞蟻部落是一個面向前端開發基礎知識分享平臺">

（3）.robots(機器人嚮導):

robots用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta name="robots"content="none">

具體引數如下:

<1>.all：檔案將被檢索，且頁面上的連結可以被查詢；

<2>none：檔案將不被檢索，且頁面上的連結不可以被查詢；

<3>index：檔案將被檢索；

<4>follow：頁面上的連結可以被查詢；

<5>noindex：檔案將不被檢索，但頁面上的連結可以被查詢；

<6>nofollow：檔案將被檢索，但頁面上的連結不可以被查詢；

（4）.author(作者):

標註網頁的作者

[HTML] 純文字檢視 複製程式碼
<meta name="author"content="螞蟻部落">

（5）.generator:

說明網站的採用的什麼軟體製作

[HTML] 純文字檢視 複製程式碼
<meta name="generator"content="資訊引數"/>

（6）.COPYRIGHT:

說明網站版權資訊。

[HTML] 純文字檢視 複製程式碼
<META NAME="COPYRIGHT"CONTENT="資訊引數">

三.http-equiv屬性:

相當於http檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容。

content中的內容其實就是各個引數的變數值。

語法結構如下:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="引數"content="引數變數值">

http-equiv屬性值分別如下:

（1）.Expires(期限):

可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新傳輸。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">

注意：必須使用GMT的時間格式。

（2）.Pragma(cache模式):

禁止瀏覽器從本地計算機的快取中訪問頁面內容。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="Pragma"content="no-cache">

注意:這樣設定，訪問者將無法離線瀏覽。

（3）.Refresh(重新整理):

自動重新整理並指向新頁面。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="Refresh" content="2;URL=http://www.softwhy.com"> 
//(注意後面的引號，分別在秒數的前面和網址的後面)

（4）.Set-Cookie(cookie設定):

如果網頁過期，那麼存檔的cookie將被刪除。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">

注意：必須使用GMT的時間格式。

（5）.window-target(顯示視窗的設定):

強制頁面在當前視窗以獨立頁面顯示。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="Window-target"content="_top">

注意：可以用來防止別人在框架裡呼叫自己的頁面。

（6）.content-Type(顯示字符集的設定):

設定頁面使用的字符集。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="content-Type"content="text/html;charset=gb2312">

具體如下:

meta標籤的charset的資訊引數如GB2312時，代表說明網站是採用的編碼是簡體中文；

meta標籤的charset的資訊引數如BIG5時，代表說明網站是採用的編碼是繁體中文；

meta標籤的charset的資訊引數如iso-2022-jp時，代表說明網站是採用的編碼是日文；

meta標籤的charset的資訊引數如ks_c_5601時，代表說明網站是採用的編碼是韓文；

meta標籤的charset的資訊引數如ISO-8859-1時，代表說明網站是採用的編碼是英文；

meta標籤的charset的資訊引數如UTF-8時，代表世界通用的語言編碼；

特別說明:現在直接使用HTML5的charset屬性替代即可。

（7）.Cache-Control指定請求和響應遵循的快取機制:

[HTML] 純文字檢視 複製程式碼
<meta http-equiv="Cache-Control"content="引數變數值"/>

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。

各個訊息中的指令含義如下:

<1>.Public指示響應可被任何快取區快取

<2>.Private指示對於單個使用者的整個或部分響應訊息，不能被共享快取處理。這允許伺服器僅僅描述當使用者的部分響應訊息，此響應訊息對於其他使用者的請求無效

<3>.no-cache指示請求或響應訊息不能快取

<4>.no-store用於防止重要的資訊被無意的釋出。在請求訊息中傳送將使得請求和響應訊息都不使用快取。

<5>.max-age指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應

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

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

相關文章