Html5 meta 標籤詳解

HTML5 Meta 標籤

Meta 主要標籤

HTML5的meta標籤有三個主要屬性，分別是 name 屬性，charset 屬性和 http-equiv 屬性。

屬性	值	描述
charset	character encoding	定義文檔的字符編碼。
http-equiv	content-type, expires, refresh, set-cookie,window-target,pragma	把 content 屬性關聯到 HTTP 頭部。
name	author, description, generator, keywords,viewport,robots	把 content 屬性關聯到一個名稱。
content	some_text	定義與 http-equiv, charset 或 name 屬性相關的元信息。

Charset

聲明當前文檔的字符編碼：

<meta charset="UTF-8">

http-equiv

相似http的文件頭做用，它能夠向瀏覽器設置一些有用的信息，以幫助正確和精確地顯示網頁內容

1. content-Type

   頁面字符集的設定，後面charset與上面charset等效

   <meta http-equiv="content-Type" content="text/html;charset=utf-8"/>

2. expires

   設置網頁在緩存過時時間

   <meta http-equiv="expires" content="Wed, 12 Feb 2020 09:00:00 GMT"/>

   必須使用GMT的時間格式

3. refresh

   自動刷新並指向新頁面

   <meta http-equiv="refresh"content="5; url=http://www.xxxx.com/"/>

4. set-cookie

   設置cookie

   <meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wed, 12 Feb 2020 09:00:00 GMT; path=/">

   必須使用GMT的時間格式, 部分瀏覽器不支持mata設置cookie

5. window-target

   顯示窗口的設定

   <meta http-equiv="Window-target" content="_top">

6. pragma

   cache模式, 禁止瀏覽器從本地計算機的緩存中訪問頁面內容。

   <meta http-equiv="Pragma" content="no-cache">

Name

主要用來描述網頁的信息，以便於搜索引擎查找及分類

1. author

   聲明網頁的做者信息

   <meta name="author" content="小白,232323233@qq.com"/>

2. description

   給搜索引擎你的網站主要內容。

   <meta name="description" content="html5 meta 標籤說明"/>

3. generator

   說明網站採用什麼編輯器製做

   <meta name="generator" content="你所用的編輯器"/>

4. keywords

   給搜索引擎提供的關鍵字列表

   <meta name="keywords" content="小白,小黑,小紅"/>

5. viewport

   Html5 新增，優化移動瀏覽器的顯示（屏幕的縮放）

   <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
   
   參數：
   width viewport的寬度[device-width | pixel_value]width若是直接設置pixel_value數值，大部分的安卓手機不支持，可是ios支持；  
   height – viewport 的高度 （範圍從 223 到 10,000 ）  
   user-scalable [yes | no]是否容許縮放  
   initial-scale [數值] 初始化比例（範圍從 > 0 到 10）  
   minimum-scale [數值] 容許縮放的最小比例  
   maximum-scale [數值] 容許縮放的最大比例

6. robots

   告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。

   <meta name="robots" content=""/>
   
   參數：
   content的參數值有all,none,index,noindex,follow,nofollow，默認值是all。
   參數爲 all ：文件將被檢索，且頁面上的連接能夠被查詢； 參數爲 none ：文件將不被檢索，且頁面上的連接不能夠被查詢； 參數爲 index ：文件將被檢索； 參數爲 follow ：頁面上的連接能夠被查詢； 參數爲 noindex ：文件將不被檢索，但頁面上的連接能夠被查詢； 參數爲 nofollow ：文件將被檢索，但頁面上的連接不能夠被查詢；