1. 程式人生 > >常見<meta>的基本用法詳解

常見<meta>的基本用法詳解

代碼 簡介 clas 元素 word spa wid min mpat

<meta charset="utf-8">

定義與name 屬性相關的信息,使用 utf-8編碼方式編譯字符

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

X-UA-Compatible 是IE8一個專有的<meta>屬性,它告訴IE8采用何種IE版本去渲染網頁,在html的<head>標簽中使用。可以在微軟官方文檔獲取更多介紹。

在IE8剛推出的時候,很多網頁由於重構的問題,無法適應較高級的瀏覽器,所以使用X-UA-Compatible標簽強制IE8采用低版本方式渲染。
使用下面這段代碼後,開發者無需考慮網頁是否兼容IE8瀏覽器,只要確保網頁在IE6、IE7下的表現就可以了。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
//emulate 仿真

給網站添加X-UA-Compatible標簽

建議使用下面的X-UA-Compatible標簽:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

IE=edge告訴IE使用最新的引擎渲染網頁,chrome=1則可以激活Chrome Frame

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

網頁手機wap2.0網頁的head裏加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。

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

width:可視區域的寬度,值可為數字或關鍵詞device-width
width - viewport的寬度 height - viewport的高度
intial-scale:頁面首次被顯示是可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別,maximum-scale用戶可將頁面放大的程序,1.0將禁止用戶放大到實際尺寸之上。
user-scalable - 用戶是否可以手動縮放

<meta name="keywords" content="">

①Keywords (關鍵字)

說明:為搜索引擎提供的關鍵字列表
用法:<Meta name="Keywords" Content="關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4,……">
註意:各關鍵詞間用英文逗號“,”隔開。META的通常用處是指定搜索引擎用來提高搜索質量的關鍵詞。當數個META元素提供文檔語言從屬信息時,搜索引擎會使用lang特性來過濾並通過用戶的語言優先參照來顯示搜索結果。例如:

<Meta name="Kyewords" Lang="EN" Content="vacation,greece,sunshine">
<Meta name="Kyewords" Lang="FR" Content="vacances,grè:ce,soleil">

②Description (簡介)
說明:Description用來告訴搜索引擎你的網站主要內容。
用法:

<meta name="description" Content="你網頁的簡述">

常見<meta>的基本用法詳解