閱讀(5.2k) 書簽贊(8) 我要糾錯(cuò)

meta標(biāo)簽的理解

2018-06-19 18:29 更新

meta標(biāo)簽是HTML中的一個(gè)重要標(biāo)簽，它位于HTML文檔頭部的<HEAD>標(biāo)簽和<TITL>標(biāo)簽之間。使用meta，我們可以定義頁面編碼語言、搜索引擎優(yōu)化、自動(dòng)刷新并指向新的頁面、控制頁面緩沖、響應(yīng)式視窗等！

HTML5之前，meta標(biāo)簽只有兩個(gè)屬性，分別是 name 屬性和 http-equiv 屬性。

一、name屬性

name屬性主要用于描述網(wǎng)頁，對(duì)應(yīng)屬性是 content ，以便于搜索引擎機(jī)器人查找、分類（目前幾乎所有的搜索引擎都使用網(wǎng)上機(jī)器人自動(dòng)查找meta值來給網(wǎng)頁分類）。

語法：

<meta name="參數(shù)" content="參數(shù)值" />

下面是具體參數(shù)：

1.Keywords（關(guān)鍵字）

說明：為搜索引擎提供的關(guān)鍵字列表

語法：

<meta name="keywords" content="程序員,程序猿,攻城獅"/>

2.Description（簡(jiǎn)介）

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

語法：

<meta name="description" content="meta標(biāo)簽是HTML中的一個(gè)重要標(biāo)簽，它位于HTML文檔頭部的<HEAD>標(biāo)簽和<TITL>標(biāo)簽之間。"/>

3.robots（機(jī)器人向?qū)В?/b>

說明：robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。

語法：

<meta name="robots" content=""/>

content的參數(shù)值有all,none,index,noindex,follow,nofollow，默認(rèn)值是all。

參數(shù)說明：

參數(shù)為 all ：文件將被檢索，且頁面上的鏈接可以被查詢；參數(shù)為 none ：文件將不被檢索，且頁面上的鏈接不可以被查詢；參數(shù)為 index ：文件將被檢索；參數(shù)為 follow ：頁面上的鏈接可以被查詢；參數(shù)為 noindex ：文件將不被檢索，但頁面上的鏈接可以被查詢；參數(shù)為 nofollow ：文件將被檢索，但頁面上的鏈接不可以被查詢；

4.author（作者）

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

語法：

<meta name="author" content="TG,TG@qq.com"/>

5.copyright（版權(quán)）

說明：標(biāo)注版權(quán)

語法：

<meta name="copyright" content="本網(wǎng)站版權(quán)歸TG所有"/>

6.generator

說明：說明網(wǎng)站采用什么編輯器制作。

語法：

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

7.revisit-after（重訪）

說明：網(wǎng)站重訪

語法：

<meta name="revisit-after" content="7days"/>

7days表示7天

二、http-equiv屬性

http-equiv類似于HTTP的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。

語法：

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

參數(shù)說明：

1.Expires（期限）

說明：指定網(wǎng)頁在緩存中的過期時(shí)間，一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。

語法：

<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>

注意：必須使用GMT的時(shí)間格式，或者直接設(shè)為0（數(shù)字表示多久后過期）

2.Pragma（cache模式）

說明：禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。

語法：

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

注意：網(wǎng)頁不保存在緩存中，每次訪問都刷新頁面。這樣設(shè)定，訪問者將無法脫機(jī)瀏覽。

3.Refresh（刷新）

說明：自動(dòng)刷新并指向新頁面。

語法：

<meta http-equiv="Refresh" content="5,URL=http:://baidu.com"/>

其中的5表示5秒后自動(dòng)刷新并調(diào)整到URL新頁面。

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

說明：瀏覽器訪問某個(gè)頁面時(shí)會(huì)將它存在緩存中，下次再次訪問時(shí)就可從緩存中讀取，以提高速度。當(dāng)你希望訪問者每次都刷新你廣告的圖標(biāo)，或每次都刷新你的計(jì)數(shù)器，就要禁用緩存了。

如果網(wǎng)頁過期，那么存盤的cookie將被刪除。

語法：

<meta http-equiv="Set-Cookie"  content="cookievalue=xxx; expires=Wednesday,
　　　　　　 21-Oct-98 16:14:21 GMT; path=/">

注意：必須使用GMT的時(shí)間格式

5.Window-target（顯示窗口的設(shè)定）

說明：強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示

語法：

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

可以用來防止別人在框架里調(diào)用你的頁面。

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

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

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

其他參數(shù)值：

meta標(biāo)簽的charset的信息參數(shù)如GB2312時(shí)，代表說明網(wǎng)站是采用的編碼是簡(jiǎn)體中文；

meta標(biāo)簽的charset的信息參數(shù)如BIG5時(shí)，代表說明網(wǎng)站是采用的編碼是繁體中文；

meta標(biāo)簽的charset的信息參數(shù)如iso-2022-jp時(shí)，代表說明網(wǎng)站是采用的編碼是日文；

meta標(biāo)簽的charset的信息參數(shù)如ks_c_5601時(shí)，代表說明網(wǎng)站是采用的編碼是韓文；

meta標(biāo)簽的charset的信息參數(shù)如ISO-8859-1時(shí)，代表說明網(wǎng)站是采用的編碼是英文；

meta標(biāo)簽的charset的信息參數(shù)如UTF-8時(shí)，代表世界通用的語言編碼；

在HTML5中，我們一般都是：

<meta charset="utf-8"/>

7.content-Language（顯示語言的設(shè)定）

說明：顯示語言

語法：

<meta http-equiv="Content-Language" content="zh-cn"/>

8.http-equiv="imagetoolbar"

<meta http-equiv="imagetoolbar" content="false"/>

指定是否顯示圖片工具欄，當(dāng)為false代表不顯示，當(dāng)為true代表顯示。

HTML5

在HTML5中，name的屬性新增了viewport、format-detection等

1.viewport

說明：能優(yōu)化移動(dòng)瀏覽器的顯示（屏幕的縮放）

語法：

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>

參數(shù)值：

width viewport的寬度[device-width | pixel_value]width如果直接設(shè)置pixel_value數(shù)值，大部分的安卓手機(jī)不支持，但是ios支持；

height – viewport 的高度（范圍從 223 到 10,000 ）

user-scalable [yes | no]是否允許縮放

initial-scale [數(shù)值] 初始化比例（范圍從 > 0 到 10）

minimum-scale [數(shù)值] 允許縮放的最小比例

maximum-scale [數(shù)值] 允許縮放的最大比例

target-densitydpi 值有以下（一般推薦設(shè)置中等響度密度或者低像素密度，后者設(shè)置具體的值dpi_value，另外webkit內(nèi)核已不準(zhǔn)備再支持此屬性）

-- dpi_value 一般是70-400//沒英寸像素點(diǎn)的個(gè)數(shù)

-- device-dpi設(shè)備默認(rèn)像素密度

-- high-dpi 高像素密度

-- medium-dpi 中等像素密度

-- low-dpi 低像素密度

2.format-detection（忽略電話號(hào)碼和郵箱）

說明：忽略電話號(hào)碼和郵箱

語法：

//忽略頁面中的數(shù)字識(shí)別為電話號(hào)碼
<meta name="format-detection" content="telephone=no">
//忽略頁面中的郵箱格式識(shí)別為郵箱
<meta name="format-detection" content="email=no"/>

也可以寫成：

<meta name="format-detection" content="telphone=no, email=no"/>

其他

添加favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>

WebApp全屏模式

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 啟用 WebApp 全屏模式 -->

隱藏狀態(tài)欄/設(shè)置狀態(tài)欄顏色：只有在開啟WebApp全屏模式時(shí)才生效。content的值為default | black | black-translucent 。

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

不同瀏覽器

<!-- 針對(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ōu)先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  
<!-- 關(guān)于X-UA-Compatible -->  
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->  
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->  
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

瀏覽器內(nèi)核控制：國(guó)內(nèi)瀏覽器很多都是雙內(nèi)核（webkit和Trident），webkit內(nèi)核高速瀏覽，IE內(nèi)核兼容網(wǎng)頁和舊版網(wǎng)站。而添加meta標(biāo)簽的網(wǎng)站可以控制瀏覽器選擇何種內(nèi)核渲染。

 <meta name="renderer" content="webkit|ie-comp|ie-stand">

轉(zhuǎn)碼申明：用百度打開網(wǎng)頁可能會(huì)對(duì)其進(jìn)行轉(zhuǎn)碼（比如貼廣告），避免轉(zhuǎn)碼可添加如下meta

<meta http-equiv="Cache-Control" content="no-siteapp" />

相關(guān)文章：

移動(dòng)前端不得不了解的Meta標(biāo)簽

以上內(nèi)容是否對(duì)您有幫助：

在文檔使用的過程中是否遇到以下問題：

內(nèi)容錯(cuò)誤

更新不及時(shí)

鏈接錯(cuò)誤

缺少代碼/圖片示列

太簡(jiǎn)單/步驟待完善

其他

更多建議：

提交建議

← CSS3的貝塞爾曲線（cubic

純css3開發(fā)的checkbox、radio和switch →

寫筆記

我要補(bǔ)充

精選筆記