meta 標(biāo)簽的定義

meta 標(biāo)簽是 head 部分的一個(gè)輔助性標(biāo)簽，提供關(guān)于 HTML 文檔的元數(shù)據(jù)。它并不會(huì)顯示在頁面上，但對(duì)于機(jī)器是可讀的?？捎糜跒g覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（SEO）或其他 web 服務(wù)。

使用

在 HTML 中，<meta> 標(biāo)簽沒有結(jié)束標(biāo)簽。

在 XHTML 中，<meta> 標(biāo)簽必須被正確地關(guān)閉。

---

<meta> 標(biāo)簽永遠(yuǎn)位于 head 元素內(nèi)部。

元數(shù)據(jù)總是以 名稱/值 的形式被成對(duì)傳遞的。

---

屬性

屬性	值	描述
charset	character_set	規(guī)定 HTML 文檔的字符編碼。
content	text	定義與 http-equiv 或 name 屬性相關(guān)的元信息。
http-equiv	content-security-policy content-type default-style refresh	把 content 屬性關(guān)聯(lián)到 HTTP 頭部。
name	application-name author description generator keywords viewport	把 content 屬性關(guān)聯(lián)到一個(gè)名稱。
scheme	some_text	定義用于翻譯 content 屬性值的格式。

---

name屬性

name 屬性主要用于描述網(wǎng)頁，與之對(duì)應(yīng)的屬性值為 content?，content 中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

name 屬性語法格式：

	<meta name="參數(shù)" content="具體的參數(shù)值">

---

keywords

"keywords" 是一個(gè)經(jīng)常被用到的名稱。它為文檔定義了一組關(guān)鍵字。某些搜索引擎在遇到這些關(guān)鍵字時(shí)，會(huì)用這些關(guān)鍵字對(duì)文檔進(jìn)行分類。

<meta name="keywords" content="HTML,ASP,PHP,SQL">

---

description

說明：description?用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

<meta name="description" content="主要包括web前端及周邊技術(shù)">

---

author

說明：author 標(biāo)注網(wǎng)頁的作者

<meta name="author" content="1111111111@qq.com">

---

viewport

說明：viewport 用于說明移動(dòng)端網(wǎng)站的寬高縮放比例等信息

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中 content 的距離參數(shù)如下：

1) width 寬度(數(shù)值/device-width)

2) height 高度(數(shù)值/device-height)

3) initial-scale 初始縮放比例

4) maximum-scale 最大縮放比例

5) minimum-scale 最小縮放比例

6) user-scalable 是否允許用戶縮放(yes / no)

---

http-equiv 屬性

http-equiv 屬性是?添加 http 頭部?jī)?nèi)容，對(duì)一些自定義的或者需要額外添加的發(fā)送到瀏覽器中的 http 頭部內(nèi)容，我們就可以是使用這個(gè)屬性。

http-equiv 屬性語法格式：

<meta http-equiv="參數(shù)" content="具體的參數(shù)值">

---

charset

說明：用以說明網(wǎng)頁制作所使用的文字以及語言。

<meta http-equiv="charset" content="iso-8859-1">

---

?expires

說明：設(shè)置網(wǎng)頁的過期時(shí)間，一旦過期則必須到服務(wù)器上重新獲取。需要注意的是必須使用 GMT時(shí)間格式

<meta http-equiv="expires" content="31 Dec 2023">

---

content-Type

說明：用于設(shè)定頁面使用的字符集。

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

---

http-equiv 屬性為 名稱/值對(duì) 提供了名稱。并指示服務(wù)器在發(fā)送實(shí)際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含 名稱/值對(duì)。

當(dāng)服務(wù)器向?yàn)g覽器發(fā)送文檔時(shí)，會(huì)先發(fā)送許多 名稱/值對(duì)。雖然有些服務(wù)器會(huì)發(fā)送許多這種 名稱/值對(duì)，但是所有服務(wù)器都至少要發(fā)送一個(gè)：content-type:text/html 。這將?告訴瀏覽器準(zhǔn)備接受一個(gè) HTML 文檔。

使用帶有 http-equiv 屬性的 <meta> 標(biāo)簽時(shí)，服務(wù)器將把 名稱/值對(duì) 添加到發(fā)送給瀏覽器的內(nèi)容頭部。

例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

---

?這樣發(fā)送到瀏覽器的頭部就應(yīng)該包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

?當(dāng)然，只有瀏覽器 可以接受這些附加的頭部字段，并能以適當(dāng)?shù)姆绞绞褂盟鼈儠r(shí)，這些字段才有意義。

---

content 屬性

content 屬性提供了名稱/值對(duì) 中的值。該值可以是任何有效的字符串。

content 屬性始終要和 name 屬性或 http-equiv 屬性一起使用。

---

常見用法

<!-- 設(shè)定字符集 ，以下兩種定義均可-->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- 頁面關(guān)鍵詞 keywords -->
<meta name="keywords" content="your keywords"><!-- 頁面描述內(nèi)容 description -->
<meta name="description" content="your description"><!-- 定義網(wǎng)頁作者 author -->
<meta name="author" content="author,email address"><!-- 定義網(wǎng)頁搜索引擎索引方式，robotterms 是一組使用英文逗號(hào)「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow"><!-- 優(yōu)先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" /><!-- 禁止自動(dòng)翻譯 -->
<meta name="google" value="notranslate"><!-- 禁止轉(zhuǎn)碼 -->
<meta http-equiv="Cache-Control" content="no-transform"><!-- 選擇使用的瀏覽器解析內(nèi)核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"><!-- 移動(dòng)端 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 刪除蘋果默認(rèn)的工具欄和菜單欄 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 設(shè)置蘋果工具欄顏色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁面中的數(shù)字識(shí)別為電話，忽略email識(shí)別 -->
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強(qiáng)制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強(qiáng)制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強(qiáng)制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強(qiáng)制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應(yīng)用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應(yīng)用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點(diǎn)擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- 適應(yīng)移動(dòng)端end -->