Meta，Link標籤詳解

時間  2019-11-12
標籤 meta link 標籤 詳解 欄目 HTML5 简体版
原文   原文鏈接

META標籤是HTML語言HEAD區的一個輔助性標籤，它位於HTML文檔頭部的<HEAD>標記和<TITLE>標記之間，它提供用戶不可見的信息。下面介紹一些有關標記的例子及解釋。

　　META標籤分兩大部分：HTTP標題信息(HTTP-EQUIV)和頁面描述信息(NAME)。

　　★HTTP-EQUIV
　　HTTP-EQUIV相似於HTTP的頭部協議，它迴應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。經常使用的HTTP-EQUIV類型有：

　　一、Content-Type和Content-Language (顯示字符集的設定)
　　說明：設定頁面使用的字符集，用以說明主頁製做所使用的文字已經語言，瀏覽器會根據此來調用相應的字符集顯示page內容。
　　用法：<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
　　　　　　<Meta http-equiv="Content-Language" Content="zh-CN">

　 　注意：　該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(英文)、BIG五、UTF-八、SHIFT-Jis、Euc、Koi8-二、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等語言代碼。

　　二、Refresh (刷新)

　　　說明：讓網頁多長時間（秒）刷新本身，或在多長時間後讓網頁自動連接到其它網頁。
　　　用法：<Meta http-equiv="Refresh" Content="30">
　　　　　　<Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net">
　　　注意：其中的5是指停留5秒鐘後自動刷新到URL網址。

　　三、Expires (期限)

　　　說明：指定網頁在緩存中的過時時間，一旦網頁過時，必須到服務器上從新調閱。
　　　用法：<Meta http-equiv="Expires" Content="0">
　　　　　　<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT">
　　　注意：必須使用GMT的時間格式，或直接設爲0(數字表示多少時間後過時)。

　　四、Pragma (cach模式)

　　　說明：禁止瀏覽器從本地機的緩存中調閱頁面內容。
　　　用法：<Meta http-equiv="Pragma" Content="No-cach">
　　　注意：網頁不保存在緩存中，每次訪問都刷新頁面。這樣設定，訪問者將沒法脫機瀏覽。

　　五、Set-Cookie (cookie設定)

　 　說明：瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提升速度。當你但願訪問者每次都刷新你廣告的圖標，或每次都刷新你的 計數器，就要禁用緩存了。一般HTML文件沒有必要禁用緩存，對於ASP等頁面，就可使用禁用緩存，由於每次看到的頁面都是在服務器動態生成的，緩存就 失去意義。若是網頁過時，那麼存盤的cookie將被刪除。
　　　用法：<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,
　　　　　　 21-Oct-98 16:14:21 GMT; path=/">
　　　注意：必須使用GMT的時間格式。

　　六、Window-target (顯示窗口的設定)

　　　說明：強制頁面在當前窗口以獨立頁面顯示。
　　　用法：<Meta http-equiv="Widow-target" Content="_top">
　　　注意：這個屬性是用來防止別人在框架裏調用你的頁面。Content選項：_blank、_top、_self、_parent。

　　七、Pics-label (網頁RSAC等級評定)
　　　說明：在IE的Internet選項中有一項內容設置，能夠防止瀏覽一些受限制的網站，而網站的限制級
　　　　　　別就是經過該參數來設置的。
　　　用法：<META http-equiv="Pics-label" Contect=
　　　　　　　　　　　　　　　"(PICS－1.1'http://www.rsac.org/ratingsv01.html'
　　　　　　 I gen comment 'RSACi North America Sever' by 'inet@microsoft.com'
　　　　　　　for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))">

　 　　注意：不要將級別設置的過高。RSAC的評估系統提供了一種用來評價Web站點內容的標準。用戶能夠設置Microsoft Internet Explorer（IE3.0以上）來排除包含有色情和暴力內容的站點。上面這個例子中的HTML取自Microsoft的主頁。代碼中的（n 0 s 0 v 0 l 0）表示該站點不包含不健康內容。級別的評定是由RSAC，即美國娛樂委員會的評級機構評定的，若是你想進一步瞭解RSAC評估系統的等級內容，或者你需 要評價本身的網站，能夠訪問RSAC的站點：http://www.rsac.org/。

　　八、Page-Enter、Page-Exit (進入與退出)

　　　說明：這個是頁面被載入和調出時的一些特效。
　　　用法：<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
　　　　　　<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
　　　注意：blendTrans是動態濾鏡的一種，產生漸隱效果。另外一種動態濾鏡RevealTrans也能夠用於頁面進入與退出效果:

　　　　　　<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)">
　　　　　　<Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">

　　　　　　　Duration　　表示濾鏡特效的持續時間(單位：秒)
　　　　　　　Transition　濾鏡類型。表示使用哪一種特效，取值爲0-23。

　　　　　　　0 矩形縮小
　　　　　　　1 矩形擴大
　　　　　　　2 圓形縮小
　　　　　　　3 圓形擴大
　　　　　　　4 下到上刷新
　　　　　　　5 上到下刷新
　　　　　　　6 左到右刷新
　　　　　　　7 右到左刷新
　　　　　　　8 豎百葉窗
　　　　　　　9 橫百葉窗
　　　　　　 10 錯位橫百葉窗
　　　　　　 11 錯位豎百葉窗
　　　　　　 12 點擴散
　　　　　　 13 左右到中間刷新
　　　　　　 14 中間到左右刷新
　　　　　　 15 中間到上下
　　　　　　 16 上下到中間
　　　　　　 17 右下到左上
　　　　　　 18 右上到左下
　　　　　　 19 左上到右下
　　　　　　 20 左下到右上
　　　　　　 21 橫條
　　　　　　 22 豎條
　　　　　　 23 以上22種隨機選擇一種

　　九、MSThemeCompatible (XP主題)
　　　說明：是否在IE中關閉 xp 的主題
　　　用法：<Meta http-equiv="MSThemeCompatible" Content="Yes">
　　　注意：關閉 xp 的藍色立體按鈕系統顯示樣式，從而和win2k 很象。

　　十、IE6 (頁面生成器)
　　　說明：頁面生成器generator，是ie6
　　　用法：<Meta http-equiv="IE6" Content="Generator">
　　　注意：用什麼東西作的，相似商品出廠廠商。

　　十一、Content-Script-Type (腳本相關)
　　　說明：這是近來W3C的規範，指明頁面中腳本的類型。
　　　用法：<Meta http-equiv="Content-Script-Type" Content="text/javascript">
　　　注意：

十二、MSSmartTagsPreventParsing()
說明：一句話哈，就是防止微軟頁面編輯軟件在頁面上自動添加標籤，保證代碼原汁原味
用法：<meta name="MSSmartTagsPreventParsing" content="TRUE">

　　★NAME變量

　　name是描述網頁的，對應於Content（網頁內容），以便於搜索引擎機器人查找、分類（目前幾乎全部的搜索引擎都使用網上機器人自動查找meta值來給網頁分類）。
　　name的value值（name=""）指定所提供信息的類型。有些值是已經定義好的。例如description(說明)、keyword(關鍵字)、refresh(刷新)等。還能夠指定其餘任意值，如：creationdate(建立日期) 、
document ID(文檔編號)和level(等級)等。
　　name的content指定實際內容。如：若是指定level(等級)爲value(值)，則Content多是beginner(初級)、intermediate(中級)、advanced(高級)。

　　一、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="你網頁的簡述">
　　　注意：

　　三、Robots (機器人嚮導)
　　　說明：Robots用來告訴搜索機器人哪些頁面須要索引，哪些頁面不須要索引。Content的參數有all、none、index、noindex、follow、nofollow。默認是all。
　　　用法：<Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow">
　　　注意：許多搜索引擎都經過放出robot/spider搜索來登陸網站，這些robot/spider就要用到meta元素的一些特性來決定怎樣登陸。

　　　 all：文件將被檢索，且頁面上的連接能夠被查詢；
　　　 none：文件將不被檢索，且頁面上的連接不能夠被查詢；(和 "noindex, no follow" 起相同做用)
　　　 index：文件將被檢索；（讓robot/spider登陸）
　　　 follow：頁面上的連接能夠被查詢；
　　　 noindex：文件將不被檢索，但頁面上的連接能夠被查詢；(不讓robot/spider登陸)
　　　nofollow：文件將不被檢索，頁面上的連接能夠被查詢。(不讓robot/spider順着此頁的鏈接往下探找)

　　四、Author (做者)
　　　說明：標註網頁的做者或製做組
　　　用法：<Meta name="Author" Content="張三，abc@sina.com">
　　　注意：Content能夠是：你或你的製做組的名字,或Email

　　五、Copyright (版權)
　　　說明：標註版權
　　　用法：<Meta name="Copyright" Content="本頁版權歸Zerospace全部。All Rights Reserved">
　　　注意：

　　六、Generator (編輯器)
　　　說明：編輯器的說明
　　　用法：<Meta name="Generator" Content="PCDATA|FrontPage|">
　　　注意：Content="你所用編輯器"

　　七、revisit-after (重訪)
　　　說明：
　　　用法：<META name="revisit-after" CONTENT="7 days" >
　　　注意：


　　★Head中的其它一些用法

　　一、scheme (方案)
　　　說明：scheme can be used when name is used to specify how the value of content should
　　　　　　be interpreted.
　　　用法：<meta scheme="ISBN" name="identifier" content="0-14-043205-1" />
　　　注意：

　　二、Link (連接)
　　　說明：連接到文件
　　　用法：<Link href="soim.ico" rel="Shortcut Icon">
　 　　注意：不少網站若是你把她保存在收件夾中後，會發現它連帶着一個小圖標，若是再次點擊進入以後還會發現地址欄中也有個小圖標。如今只要在你的頁頭加上 這段話，就能輕鬆實現這一功能。<LINK> 用來將目前文件與其它 URL 做連結，但不會有連結按鈕，用於 <HEAD> 標記間， 格式以下：
　　　　　　　<link href="URL" rel="relationship">
　　　　　　　<link href="URL" rev="relationship">

　　三、Base (基連接)
　　　說明：插入網頁基連接屬性
　　　用法：<Base href="http://www.fl86.com/" target="_blank">
　 　　注意：你網頁上的全部相對路徑在連接時都將在前面加上「http://www.fl86.com/」。其中target="_blank"是連接文件 在新的窗口中打開，你能夠作其餘設置。將「_blank」改成「_parent」是連接文件將在當前窗口的父級窗口中打開；改成「_self」連接文件在 當前窗口（幀）中打開；改成「_top」連接文件全屏顯示。javascript

 

 

 

<meta name=」verify-v1″ content=」EjkoZwrUyHnlwjyUkbFXVJ2Ioms9m4NTUETFhrIyoNY=」 />php

其實這就是SEO管理的一種方式,Google有一個網站管理 工具：https://www.google.com/webmasters/tools，註冊登錄後，添加你的網站（能夠添加多個），它會提示讓你校驗 的一段代碼，若是你把這個放在了首頁的head區，說明網站是你的，否則就不是；校驗成功之後，你能夠利用google的網站管理的一系列服務了。css

所以,HTML中META標籤的」verify-v1″是在使用GOOGLE網站管理工具時用來驗證網站全部者身份的一種方式,是站長自主添加的一中META標籤屬性.html

 

 

 

實用實例java

 

1、自動跳轉頁面web

<meta http-equiv="refresh" content="時間;url=地址">瀏覽器

例：3秒鐘後自動跳轉到百度主頁緩存

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
<title>無標題文檔</title>
</head>服務器

<body>
3秒鐘後自動跳轉到百度主頁
</body>
</html>cookie

 

2、禁止IE6的圖像工具欄
第一種方法：
<img src="demo.gif" gallerying="no">
第二種方法：
<meta http-equiv="imagetoolbar"  content="no">

例： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="imagetoolbar"  content="no">
<title>無標題文檔</title>
<style type="text/css">
<!--
.style1 {
 font-family: "方正舒體";
 font-size: 36px;
 color: #0000FF;
}
-->
</style>
</head>

<body>
<p class="style1">蜘蛛俠</p>
<p><img src="image/spiderman_0.jpg" width="1024" height="768"></p>
</body>
</html>

 


3、設置頁面關鍵字和頁面描述（搜索引擎）
讓搜索引擎服務商找到頁面的關鍵字和頁面的描述
<META NAME=」keywords」 CONTENT=」頁面關鍵字」」>
<META NAME=」description」 CONTENT=」頁面描述」>
例：
<meta name=roblots content=」noarchive,noindex,nofollow,noimageindex,noimageclick」>

 

4、添加自定義小圖標
準備16×16大小的圖標文件
在該頁的<head>部分加入如下代碼（注意圖標與該頁的路徑關係）
<link rel=」shortcut icon」 href=」cunstom_ico」>

 

5、禁止網頁的主題支持
把下面的代碼加到網頁中的head部分
<meta http-equiv=」msthemecompatible」 content=」no」>

 

6、禁止瀏覽器對網頁進行緩存
在HEAD部分出入以下代碼
<meta http-equiv=Pragma content=no-cache>
<meta http-equiv=expires content=0>
<meta http-equiv="cache-control" content="no-store">


例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv=Pragma content=no-cache>
<meta http-equiv=expires content=0>
<meta http-equiv="cache-control" content="no-store">
<title>無標題文檔</title>
</head>
<body>
禁止瀏覽器對網頁進行緩存
</body>
</html>

 

 

 

html裏各類link標籤的做用

 

 

在打開wordpress頁面的html源代碼之後，能看到head標籤裏面有各式各樣的link標籤，想找到它們的確切做用以及出處，一直沒有找到明確的說法，非常鬱悶。

下面作個記錄先：

PLAIN TEXT
CODE:
  1. <link rel= "alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.com/ooso" />
  2. <link rel= "alternate" type="text/xml" title="RSS .92" href="http://www.ooso.net/index.php/feed/rss" />
  3. <link rel= "alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.ooso.net/index.php/feed/atom" />

 

是告訴支持訂閱rss的瀏覽器該網站的rss地址是什麼，若是用feedsky的話，徹底能夠替換。

 

 

PLAIN TEXT
CODE:
  1. <link rel= "shortcut icon" type="image/ico" href="/favicon.ico" />

地址欄最前面的小圖標...你們好像都認識的說

 

 

PLAIN TEXT
CODE:
  1. <link rel= 'archives' title='2007年7月' href='http://www.ooso.net/index.php/archives/date/2007/07' />
  2. ........
  3. <link rel= 'archives' title='2000年1月' href='http://www.ooso.net/index.php/archives/date/2000/01' />

blog的歸檔url，估計是供Search Engine爬行用的，把這段東東刪掉...嘿嘿。

歸檔url也徹底能夠捨去，由於blog的精華是單篇文章，歸檔頁面並不重要，寫了，反倒可能浪費搜索引擎爬蟲的抓取時間。

 

 

PLAIN TEXT
CODE:
  1. <link rel= "EditURI" type="application/rsd+xml" title="RSD" href="http://www.ooso.net/xmlrpc.php?rsd" />

供livewriter之類的離線編輯器使用的？

 

PLAIN TEXT
CODE:
  1. <link rel= "stylesheet" href="http://www.ooso.net/wp-content/plugins/ig_syntax_hilite/css/syntax_hilite_css.css" type="text/css" media="all" />

樣式表，不用說了。

以上標記俺目前都只是憑揣測來解釋它的做用，若有路過的達人給出具體含義，感激涕零。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程