首頁  >  文章  >  web前端  >  HTML頁面Meta介紹(一)

HTML頁面Meta介紹(一)

巴扎黑
巴扎黑原創
2017-04-05 09:56:221478瀏覽

您的個人網站即使做得再精彩,在浩瀚如海的網絡空間中,也如一葉扁舟不易為人發現,如何推廣個人網站,人們首先想到的方法無外乎以下幾種:

● 在搜尋引擎中登入自己的個人網站

● 在知名網站加入你個人網站的連結

● 在論壇中發貼文宣傳你的個人網站

很多人卻忽略了HTML標籤META的強大功效,一個好的META標籤設計可以大大提高你的個人網站被搜尋到的可能性,有興趣嗎,誰我來重新認識META標籤吧! META標籤是HTML語言HEAD區的一個輔助性標籤,它位於HTML文檔頭部的標記和標記之間,它提供用戶不可見的資訊。 meta標籤通常用來為搜尋引擎robots定義頁面主題,或定義使用者瀏覽器上的cookie;它可以用於鑑別作者,設定頁面格式,標註內容提要和關鍵字;也可以設定頁面使其可以根據你定義的時間間隔刷新自己,以及設定RASC內容等級,等等。 </p> <p> META標籤分為兩大部分:HTTP標題資訊(HTTP-EQUIV)和頁面描述資訊(NAME)。 </p> <h2> <span style="color: #b22222">★HTTP-EQUIV</span> </h2> <p> HTTP-EQUIV類似於HTTP的頭部協議,它回應給瀏覽器一些有用的信息,以幫助正確和精確地顯示網頁內容。常用的HTTP-EQUIV型別有:</p> <p> <span style="color: #b22222">1、Content-Type和Content-Language (顯示字元集的設定)</span></p> <p># 說明:設定頁面使用的字元集,用以說明主頁製作所使用的文字已經語言,瀏覽器會根據此來呼叫對應的字元集顯示page內容。 </p> <p> 用法:<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312"></p> <p>    <Meta http-equiv="Content-Language" Content="zh-CN"></p> <p> 注意:此META標籤定義了HTML頁面所使用的字元集為GB2132,就是國標漢字碼。如果將其中的“charset=GB2312”替換成“BIG5”,則該頁面所使用的字元集就是繁體中文Big5碼。當你瀏覽一些國外的網站時,IE瀏覽器會提示你要正確顯示該頁面需要下載xx語支援。這個功能就是透過讀取HTML頁面META標籤的Content-Type屬性而得知需要使用哪種字元集顯示該頁面的。如果系統裡沒有裝對應的字元集,則IE會提示下載。其它的語言也對應不同的charset,例如日文的字元集是“iso-2022-jp ”,韓文的是“ks_c_5601”。 <br> Content-Type的Content也可以是:text/xml等文件類型;</p> <p># 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等語言代碼。 </p> <p> <span style="color: #b22222">2、Refresh (刷新)</span></p> <p> 說明:讓網頁多久(秒)刷新自己,或在多久後讓網頁自動連結到其它網頁。 <br> 用法:<Meta http-equiv="Refresh" Content="30"><br> <Meta http-equiv="Refresh" Content="5; Url=http://www.xia8.net"><br> 注意:其中的5是指停留5秒鐘後自動刷新到URL網址。 </p> <p> <span style="color: #b22222">3、Expires (期限)</span></p> <p> 說明:指定網頁在快取中的過期時間,一旦網頁過期,必須到伺服器重新調閱。 </p> <p> 用法:<Meta http-equiv="Expires" Content="0"></p> <p>#     <Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT"></p> <p> 注意:必須使用GMT的時間格式,或直接設為0(數字表示多少時間後過期)。 </p> <p> <span style="color: #b22222">4、Pragma (cach模式)</span></p> <p># 說明:禁止瀏覽器從本機的快取中調閱頁面內容。 </p> <p> 用法:<Meta http-equiv="Pragma" Content="No-cach"></p> <p> 注意:網頁不保存在快取中,每次造訪都會重新整理頁面。這樣設定,訪客將無法離線瀏覽。 </p> <p> <span style="color: #b22222">5、Set-Cookie (cookie設定)</span></p> <p># 說明:瀏覽器造訪某個頁面時會將它存在快取中,下次再次造訪時就可從快取中讀取,以提高速度。當你希望訪客每次都刷新你廣告的圖標,或每次都刷新你的計數器,就要禁用快取了。通常HTML檔案沒有必要停用緩存,對於ASP等頁面,就可以使用停用緩存,因為每次看到的頁面都是在伺服器動態產生的,快取就失去意義。如果網頁過期,那麼存檔的cookie將被刪除。 </p> <p> 用法:<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/"></p> <p> 注意:必須使用GMT的時間格式。 </p> <p> <span style="color: #b22222">6、Window-target (顯示視窗的設定)</span></p> <p># 說明:強制頁面在目前視窗以獨立頁面顯示。 </p> <p> 用法:<Meta http-equiv="Widow-target" Content="_top"></p> <p> 注意:這個屬性是用來防止別人在框架裡呼叫你的頁面。 Content選項:_blank、_top、_self、_parent。 </p> <p> <span style="color: #b22222">7、Pics-label (網頁RSAC等級評定)</span></p> <p> 說明:在IE的Internet選項中有一項內容設置,可以防止瀏覽一些受限制的網站,而網站的限制級別就是透過該參數來設定的。 </p> <p> 用法:<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))"></p> <p> 注意:不要將等級設定的太高。 RSAC的評估系統提供了一個用來評估Web網站內容的標準。使用者可以設定Microsoft Internet Explorer(IE3.0以上)來排除包含有色情和暴力內容的網站。上面這個範例中的HTML是取自Microsoft的首頁。程式碼中的(n 0 s 0 v 0 l 0)表示該網站不包含不健康內容。等級的評定是由RSAC,即美國娛樂委員會的評級機構評定的,如果你想進一步了解RSAC評估系統的等級內容,或者你需要評價自己的網站,可以訪問RSAC的站點:http://www.rsac .org/。 </p> <p> <span style="color: #b22222">8、Page-Enter、Page-Exit (進入與退出)</span></p> <p># 說明:這個是頁面被載入和調出時的一些特效。 </p> <p> 用法:<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)"><br>    <Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)"><br> 注意:blendTrans是動態濾鏡的一種,產生漸隱效果。另一種動態濾鏡RevealTrans也可以用於頁面進入與退出效果:</p> <p># <Meta http-equiv="Page-Enter" Content="revealTrans(duration=x, transition=y)"></p> <p> <Meta http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)"></p> <p> Duration  表示濾鏡特效的持續時間(單位:秒)</p> <p> Transition 濾鏡類型。表示使用哪一種特效,取值為0-23。 </p> <p> 0 矩形縮小</p> <p> 1 矩形擴大</p> <p> 2 圓形縮小</p> <p> 3 圓形擴大</p> <p> 4 下到上刷新</p> <p> 5 上到下刷新</p> <p> 6 左至右刷新</p> <p> 7 右到左刷新</p> <p> 8 豎百葉窗</p> <p> 9 橫百葉窗</p> <p> 10 錯位橫百葉窗</p> <p># 11 錯位豎百葉窗</p> <p># 12 點擴散</p> <p> 13 左右到中間刷新</p> <p> 14 中間到左右刷新</p> <p> 15 中間到上下</p> <p> 16 上下到中間</p> <p> 17 右下到左上</p> <p># 18 右上到左下</p> <p># 19 左上到右下</p> <p># 20 左下到右上</p> <p># 21 橫條</p> <p> 22 豎條</p> <p> 23 以上22種隨機選擇一種</p> <p># <span style="color: #b22222">9、MSThemeCompatible (XP主題)</span></p> <p># 說明:是否在IE中關閉 xp 的主題</p> <p> 用法:<Meta http-equiv="MSThemeCompatible" Content="Yes"></p> <p> 注意:關閉 xp 的藍色立體按鈕系統顯示樣式,因此和win2k 很相似。 </p> <p> <span style="color: #b22222">10、IE6 (頁面產生器)</span></p> <p># 說明:頁面產生器generator,是ie6</p> <p> 用法:<Meta http-equiv="IE6" Content="Generator"></p> <p> 注意:用什麼東西做的,類似商品出廠廠商。 </p> <p> <span style="color: #b22222">11、Content-Script-Type (腳本相關)</span></p> <p># 說明:這是近來W3C的規範,指明頁面中腳本的類型。 </p> <p> 用法:<Meta http-equiv="Content-Script-Type" Content="text/javascript"><br><br></p> <p>  </p><p>以上是HTML頁面Meta介紹(一)的詳細內容。更多資訊請關注PHP中文網其他相關文章!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>陳述:</span><div>本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn</div></div></div><div class="nphpSytBox"><span>上一篇:<a class="dBlack" title="HTML中ID與NAME的差別" href="http://m.php.cn/zh-tw/faq/360072.html">HTML中ID與NAME的差別</a></span><span>下一篇:<a class="dBlack" title="HTML中ID與NAME的差別" href="http://m.php.cn/zh-tw/faq/360077.html">HTML中ID與NAME的差別</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>相關文章</h2><em><a href="http://m.php.cn/zh-tw/article.html" class="bBlack"><i>看更多</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/zh-tw/faq/348757.html" title="Html小知識總結" class="aBlack">Html小知識總結</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348804.html" title="如何快速學習HTML" class="aBlack">如何快速學習HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348873.html" title="html xhtml xml的區別" class="aBlack">html xhtml xml的區別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348884.html" title="src與href屬性的差別" class="aBlack">src與href屬性的差別</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/zh-tw/faq/348902.html" title="關於HTML5和CSS替換使用" class="aBlack">關於HTML5和CSS替換使用</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><p>首頁</p></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><p>課程</p></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><p>問答</p></a></li><li><a href="http://m.php.cn/zh-tw/login"><b class="icon5"></b><p>我的</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/zh-tw/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/zh-tw/"><b class="icon1"></b><span>首頁</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course.html"><b class="icon2"></b><span>課程</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/article.html"><b class="icon3"></b><span>文章</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/wenda.html"><b class="icon4"></b><span>問答</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/dic.html"><b class="icon6"></b><span>詞典</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/course/type/99.html"><b class="icon7"></b><span>手册</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/xiazai/"><b class="icon8"></b><span>下載</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/zh-tw/faq/zt" title="專題"><b class="icon12"></b><span>專題</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/zh-tw/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/" >首頁</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/article.html" class="hover">文章</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/wenda.html" >問答</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/course.html" >課程</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/faq/zt" >專題</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/xiazai" >下載</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/game" >遊戲</a></div><div class="swiper-slide"><a href="http://m.php.cn/zh-tw/dic.html" >詞典</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>(ZH-CN)</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>(EN)</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>繁体中文</span><span>(ZH-TW)</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>(JA)</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>(KO)</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>(MS)</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>(FR)</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>(DE)</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时,自动初始化swiper observeParents: true,//修改swiper的父元素时,自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>