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)頁，對應(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（簡介）
說明：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)容。與之對應(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í)會將它存在緩存中，下次再次訪問時(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)站是采用的編碼是簡體中文； 


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（忽略電話號碼和郵箱）

說明：忽略電話號碼和郵箱

語法：

//忽略頁面中的數(shù)字識別為電話號碼
<meta name="format-detection" content="telephone=no">
//忽略頁面中的郵箱格式識別為郵箱
<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" />

不同瀏覽器

<!-- 針對手持設(shè)備優(yōu)化，主要是針對一些老的不識別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)核控制：國內(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)頁可能會對其進(jìn)行轉(zhuǎn)碼（比如貼廣告），避免轉(zhuǎn)碼可添加如下meta

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


相關(guān)文章：

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


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號