HTML的META標籤

這一篇文章要介紹的是HTML語法裡的一個標籤─META，< META> 標籤它是放在HEAD標籤裡面。< HEAD> < /HEAD> 標籤的內容，主要是在控制瀏灠器 (Browser)的行為模式；而< BODY> < /BODY> 標籤的內容，則是展現網頁 (webpage)的外貌。

為什麼要介紹META標籤??因為這個標籤經常被人忽略，反正要寫一個新的網頁時，無論是HTML、ASP、JSP、ASPX或PHP，就從網路上隨便開一網頁，然後呢，就直把以下這一段語法直接Copy-Paste：

< meta http-equiv="Content-Type" content="text/html">

但是....應該鮮少人知道這一段語法的含意是什麼 (除了網頁設計師之外)。

首先，META標籤有兩個屬性，一個是HTTP-EQUIV；另一個則是CONTENT。以下就大致介紹一下這兩個屬性有那些參數可以設定。

< meta http-equiv="Content-Type" content="text/html;charset=big5">

這一段語法是說：網頁內容的編碼方式是採用Big5 (繁體中文)字集。當使用者瀏灠到這一個網頁時，瀏灠器就會自動切換到Big5字集的顯示方式。

< meta http-equiv="Refresh" content="6;HTTP://WWW.GOOGLE.COM/">

這一段語法是說：在此一網頁上停留6秒後，會自動更新 (Refresh)到HTTP://WWW.GOOGLE.COM/。

< meta http-equiv="Expires" content="Sun, 22 Jun 2010 17:59:23 GMT">

這一段語法是說：當使用者瀏灠此一網頁的時間超過了「Sun, 22 Jun 2010 17:59:23 GMT」這個時間，就要重新再向Web Server要一次資料，而不是從瀏灠器的快取 (Cache)中讀取。所以，如果Content這個參數的時間填入的越早，例如：Tue, 01 Jan 1980 1:00:00 GMT，就可以確保使用者每次瀏灠此一頁面時，都會重新向Web Server要一次資料。

< meta http-equiv="Keywords" content="HTML, ASP, JSP, ASPX, PHP">

這一段語法是說：設定關鍵字 (Keyword)─HTML, ASP, JSP, ASPX, PHP等五個。設定關鍵字的目的，是要讓搜尋引擎 (例如：Google, Yahoo等等)能夠找到你的網頁。譬如當有使用者想要找ASPX (ASP .Net)的介紹時，在Google的搜尋引擎輸入"ASPX"，就會找到你的網頁。參數CONTENT的關鍵字最多可以設定100個，每個關鍵字之間以逗號 (,)隔開。

< meta http-equiv="Description" content="Webpage brief instruction....">

這一段語法是說：讓搜尋引擎直接讀取你的網頁描述 (Description)；而描述的內容則是CONTENT參數裡的那一段文字，文字內容的輸入上限約為100個字元左右。假如沒有設定此一標籤 (應該大部份的人都不會寫這個吧??)，搜尋引擎就會直接讀取該網頁的前面一部份文字來當做描述。

介紹完了這五個常用的META標籤的參數之後，自己覺得比較重要的是Refresh和Expires，就是向Web Server做Reload (重新載入)的動作。因為這跟網頁的動態設計有關─主要分為Server Push和Client Pull。

所謂的Server Push就是由Web Server端來控制網頁的更新或變換，這種作法就是伺服器在送出資料後，瀏灠器與伺服器的連線狀態不會中止，而當伺服器覺得有需要時，會送出一筆新的資料讓瀏灠器顯示；如此一直循環下去。由於是伺服器主動送出所要顯示的內容，所以才稱為Server Push。

Server Push這種作法的優點就是，Client端與Server端的連線狀態一直保持著，所以要傳新的資料時會比較有效率；但缺點就是會消耗掉較多的伺服器資源 (Resource)。

然而，Client Pull的做法則是瀏灠器在所收到的網頁內容中，就指示了有關自動更新的做法，譬如說一分鐘後自動重讀 (Reload)網頁，瀏灠器就依其指示每分鐘都會到網站伺服器上將最新的內容讀取回來。因為是由使用者端的瀏灠器自動去做Reload的行為，所以稱為Client Pull。

相對於Server Push必須在伺服器端自行寫程式做"Push"的動作；Client Pull就比較簡單，只要使用HTML語法裡的META標籤即可做到動態更新網頁的效果。

參考資料：http://chuiwenchiu.spaces.live.com/blog/cns!CA5D9227DF9E78E8!154.entry