東莞建筑設(shè)計(jì)公司排名怎么做網(wǎng)站優(yōu)化
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 屬性關(guān)聯(lián)到 HTTP 頭部。 |
name |
| 把 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 -->