首頁 > web前端 > html教學 > html的Meta標籤

html的Meta標籤

高洛峰
發布: 2017-02-06 14:16:05
原創
1643 人瀏覽過

1 meta的定義和用法

元素可提供有關頁面的元資訊(meta-information),例如針對搜尋引擎和更新頻度的描述和關鍵字。

標籤位於文件的頭部,不包含任何內容。 標籤的屬性定義了與文件相關聯的名稱/值對。

標籤永遠位於 head 元素內部。

註記:元資料總是以名稱/值的形式被成對傳遞的。

這是一個簡單的meta標籤,用來定義這個html是用UTF-8解析的。


2 概述

這是W3C裡面介紹的最基本的內容

必需的屬性

html的Meta標籤

。詳解

在一篇部落格文章中,將標籤分為兩個部分,HTTP標題資訊(HTTP-EQUIV)和頁面描述資訊(NAME)

html的Meta標籤HTTP-EQUIV

HTTP-EQUIV類似於HTTP的頭部協議,類似於HTTP的頭部協議,它回應給瀏覽器一些有用的信息,以幫助正確和精確地顯示網頁內容。

1. Content-Type和Content-Language (顯示字元集的設定) 

用法:

注意:此META標籤定義了HTML頁面所使用的字元集為GB2132,就是國標漢字碼。如果將其中的“charset=GB2312”替換成“BIG5”,則該頁面所使用的字元集就是繁體中文Big5碼。當你瀏覽一些國外的網站時,IE瀏覽器會提示你要正確顯示該頁面需要下載xx語支援。這個功能就是透過讀取HTML頁面META標籤的Content-Type屬性而得知需要使用哪種字元集顯示該頁面的。如果系統裡沒有裝對應的字元集,則IE會提示下載。其他的語言也對應不同的charset,例如日文的字元集是“iso-2022-jp ”,韓文的是“ks_c_5601”。

Content-Type的Content也可以是:text/xml等文件類型;

Charset選項:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii , x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb2312, gb_2312-80 , x-euc-tw, x-cns11643-1,x-cns11643-2等字元集;Content-Language的Content還可以是:EN、FR等語言代碼。

2. 刷新 說明:讓網頁多久(秒)刷新自己,或在多久後讓網頁自動連結到其它網頁。

用法:


注意:其中的5是指停留5秒鐘後自動刷新到URL網址。

3. 期限 說明:指定網頁在快取中的過期時間,一旦網頁過期,必須到伺服器重新調閱。

用法:



必須使用GMT的時間格式,或直接設為0(數字表示多少時間後過期)。 

4. cach模式 規定瀏覽器能否從快取中調取頁面內容,規定後使用者無法在離線狀態閱讀網頁。  


5. cookie設定 說明:瀏覽器造訪某個頁面時會將它存在快取中,下次再次造訪時就可從快取中讀取,以提高速度。當你希望訪客每次都刷新你廣告的圖標,或每次都刷新你的計數器,就要禁用快取了。通常HTML檔案沒有必要停用緩存,對於ASP等頁面,就可以使用停用緩存,因為每次看到的頁面都是在伺服器動態產生的,快取就失去意義。如果網頁過期,那麼存檔的cookie將被刪除。

用法: 注意:必須使用GMT的時間格式。 


6. 顯示視窗的設定 說明:強制頁面在目前視窗以獨立頁面顯示。

用法:  注意:這個屬性是用來防止別人在框架裡呼叫你的頁面。 Content選項:_blank、_top、_self、_parent。 🎜

7. 網頁RSAC等級評定 說明:在IE的Internet選項中有一項內容設置,可以防止瀏覽一些受限制的網站,而網站的限制級別就是透過該參數來設定的。
用法:


8.Page-Enter、Page-Exit (進入與退出) 說明:這個是頁面被載入和調出時的一些特效。 用法:


注意:blendTrans是動態濾鏡的一種,產生漸隱效果。另一種動態濾鏡RevealTrans也可以用於頁面進入與退出效果:


Duration 表示濾鏡特效的持續時間(單位:秒)
transition 濾鏡類型。表示使用哪一種特效,取值為0-23。

0 長方形縮小

1 長方形擴大

2 圓形縮小

3 圓形擴大

4 下到上刷新

5 上到下刷新左

8 豎百葉窗

9 橫百葉窗

10 錯位橫百葉窗

11 錯位豎百葉窗

12 點。

16上下到中間

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 橫條

20 左下到右上

9. XP主題 用法: 注意:關閉xp 的藍色立體按鈕系統顯示樣式,從而和win2k 很像。

10. IE6 (頁產生器) 說明:頁產生器generator,是ie6

用法:  注意:用什麼東西做的,類似商品出廠廠商。

11. Content-Script-Type (腳本相關) 說明:這是近來W3C的規範,指明頁面中腳本的類型。

用法: 注意:不要將等級設定的太高。 RSAC的評估系統提供了一個用來評估Web網站內容的標準。使用者可以設定Microsoft Internet Explorer(IE3.0以上)來排除包含有色情和暴力內容的網站。上面這個範例中的HTML是取自Microsoft的首頁。

NAME變數

name是描述網頁的,對應於Content(網頁內容),以便於搜尋引擎機器人尋找、分類(目前幾乎所有的搜尋引擎都使用網路機器人自動找出meta值來給網頁分類)。

name的value值(name="")指定所提供資訊的類型。有些值是已經定義好的。例如description(說明)、keyword(關鍵字)、refresh(刷新)等。也可以指定其他任意值,如:creationdate(建立日期) 、document ID(文檔編號)和level(等級)等。

name的content指定實際內容。如:如果指定level(等級)為value(值),則Content可能是beginner(初級)、intermediate(中級)、advanced(高級)。


1. 搜尋引擎關鍵字 用法: 注意:各關鍵字間用英文逗號“ ,」隔開。 META的通常用處是指定搜尋引擎用來提高搜尋品質的關鍵字。當數個META元素提供文件語言從屬資訊時,搜尋引擎會使用lang特性來過濾並透過使用者的語言優先參考來顯示搜尋結果。例如:


2. 簡介 說明:Description用來告訴搜尋引擎你的網站主要內容。
用法: 3. 機器人精靈 說明:Robots用來告訴搜尋機器人哪些頁面需要索引,哪些頁面不需要索引。 Content的參數有all、none、index、noindex、follow、nofollow。預設是all。
用法: 注意:許多搜尋引擎都透過放出robot/spider搜尋來登入網站,這些robot/spider就要用到meta元素的一些特性來決定怎麼登入。

all:文件將被檢索,且頁面上的連結可以被查詢;

none:文件將不被檢索,且頁面上的連結不可以被查詢;(和"noindex, no follow" 起相同作用)

index:檔案將被檢索;(讓robot/spider登入)

follow:頁面上的連結可以被查詢;

noindex:檔案將不會被檢索,但頁面上的連結可以被查詢;(不讓robot/spider登入)

nofollow:檔案將不會被檢索,頁面上的連結可以被查詢。 (不讓robot/spider順著此頁的連接往下探找)4. 作者 用法: 注意:Content可以是:你或你的製作組的名字,或Email 5. 版權 用法: 6. 編輯器 用法: 注意:Content="你所用編輯器" 7. revisit-after (重訪) 用法:

其他用法

1. scheme (方案) 說明:scheme can be used when name is used to specify how the value of content should be interpreted.
用法: 注意: 2. 連結到文件 用法: 注意:很多網站如果你把她保存在收件夾中後,會發現它連帶著一個小圖標,如果再次點擊進入之後還會發現網址列中也有個小圖標。現在只要在你的頁頭加上這段話,就能輕鬆實現這項功能。 用來將目前文件與其它URL 作連結,但不會有連結按鈕,用於

標記間,格式如下:


3. 插入網頁基連結屬性 用法: 注意:你網頁上的所有相對路徑在連結時都將在前面加上http://www.cn8cn.com/。其中target="_blank"是連結檔案在新的視窗中打開,你可以做其他設定。將「_blank」改為「_parent」是連結檔案會在目前視窗的父級視窗中開啟;改為「_self」連結檔案在目前視窗(訊框)中開啟;改為「_top」連結檔案全螢幕顯示。

小結和補充

強調html的Meta標籤和Description的設定

以上是META標籤的一些基本用法,其中最重要的就是:html的Meta標籤和Description的設定。為什麼呢?道理很簡單,這兩個語句可以讓搜尋引擎能準確的發現你,吸引更多的人訪問你的站點!根據現在流行搜尋引擎(Google,Lycos,AltaVista等)的工作原理,搜尋引擎先派機器人自動在WWW上搜索,當發現新的網站時,便於檢索頁面中的html的Meta標籤和Description,並將其加入到自己的資料庫,然後再根據關鍵字的密度將網站排序。

由此看來,我們必須記得加入html的Meta標籤和Description的META標籤,並且盡可能寫好關鍵字和簡介。否則, 後果就會是:

如果你的頁面中根本沒有html的Meta標籤和Description的META標籤,那麼機器人是無法將你的網站加入數 據庫,網友也就不可能搜尋到你的網站。

如果你的關鍵字選的不好,關鍵字的密度不高,被排列在幾十甚至幾百萬個網站的後面被點擊的可 能性也是非常小的。

寫好html的Meta標籤(關鍵字)要注意以下幾點:

不要用常見詞彙。例如www、homepage、net、web等。

不要用形容詞,副詞。例如最好的,最大的等。

不要用籠統的詞彙,要盡量精確。例如“愛立信手機”,改用“T28SC”會更好。

“三人之行,必有我師”,尋找合適關鍵字的技巧是:到Google、Lycos、Alta等著名搜尋引擎,搜尋與你的網站內容相仿的網站,查看排名前十位的網站的META關鍵字,將它們用在你的網站上,效果可想而知了。

提高搜尋點擊率小技巧

為了提高搜尋點擊率,這裡還有一些「捷徑」可以幫得到你:

為了增加關鍵字的密度,將關鍵字隱藏在頁面裡(將文字顏色定義成與背景顏色一樣)。

在影像的ALT註解語句中加入關鍵字。如:html的Meta標籤

利用HTML的註解語句,在頁面程式碼裡加入大量關鍵字。用法:

    文件頭,顯示在瀏覽器標題區       -Type" content="text/html; charset=gb2312">    /html; charset=gb2312">            Editor.Document~ name name="FrontPcument" content="FrontPcument. ="製作人" content="曾冠榮">      

4 行動端專題

在行動端中,又有新的meta標籤被使用。

viewport:能優化行動瀏覽器的顯示。如果不是響應式網站,不要使用initial-scale或停用縮放。大部分4.7-5吋設備的viewport寬設為360px;5.5吋設備設為400px;iphone6設為375px;ipone6 plus設為414px。


width:寬度(數值/ device-width)(範圍從200 到10,000,預設為980 像素)

height:高度(數值/ device-height)(範圍從223 到10,000)

initial-scale:初始的縮放比例(範圍從>0 到10)

minimum-scale:允許使用者縮放到的最小比例

minimum-scale:允許使用者縮放到的最小比例

:允許使用者縮放到的最大比例

user-scalable:使用者是否可以手動縮放(no,yes)

minimal-ui:可以在頁面載入時最小化上下狀態列。 (已棄用) 注意,很多人使用initial-scale=1到非響應式網站上,這會讓網站以100%寬度渲染,用戶需要手動移動頁面或縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1,則使用者將無法放大/縮小網頁來看到全部的內容。

WebApp全螢幕模式:偽裝app,離線應用。

隱藏狀態列/設定狀態列顏色:只有在開啟WebApp全螢幕模式時才生效。 content的值為default | black | black-translucent 。

加入主畫面後的標題 

忽略數字自動識別為電話號碼 

忽略識別郵箱 

html的Meta標籤新增智慧App 廣告條Smart App Banner:告訴瀏覽器這個網站對應的app,並在頁面上顯示下載banner。 

網頁相關

申明編碼 

優先使用IE 最新版本及Chrome


瀏覽器核心控制:國內瀏覽器很多都是雙核心(webkit和Trident),webkit核心高速瀏覽,IE核心相容網頁和舊版網站。而新增meta標籤的網站可以控制瀏覽器選擇何種核心渲染。  國內雙核心瀏覽器預設核心模式如下:

搜狗高速瀏覽器、QQ瀏覽器:IE核心(相容模式)

360極速瀏覽器、遨遊瀏覽器:Webkit核心(極速模式)

禁止瀏覽器從本機電腦的快取中存取頁面內容:這樣設定,訪客將無法離線瀏覽。

Windows 8


網站適配:主要用於PC-手機頁面的對應關係。


轉碼申明:用百度打開網頁可能會對其進行轉碼(例如貼廣告),避免轉碼可添加如下meta 

更多html的Meta標籤相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板