【HTML+CSS+JavaScript】網頁實戰開發筆記之一——HTML的頭部資訊裡你不知道的事

usher.yue發表於2012-04-18
HTMLCSSJavaScript網頁筆記

HTML中我們一般把head部分稱為網頁的頭部。頭部部分的內容雖然不會在頁面中顯示，但它能影響到搜尋引擎對網頁的收錄和排序，以及網頁的各種全域性設定，可以說是至關重要。




▲知識點一——頭部資訊裡設定網頁的基底網址


基底網址的實質是統一設定超級連結的屬性，基底網址標籤是</base>，它有兩個屬性，href和_target。href用於設定基底網址的路徑，_target用於設定超級連結的開啟方式。

通過基底網址的新增，頁面中所有的相對網站根目錄地址可轉換成絕對地址。當瀏覽器瀏覽頁面時，通過<base>標記將相對網站跟目錄地址附加在基底網址路徑的後面，從而轉化成絕對地址。我們首先建立一個base.htm，編寫HTML程式碼如下：

[html]
view plaincopyprint?
  1. <html>  
  2. <head>  
  3. <title>基底網址的設定</title>  
  4. <base href=“http://www.google.com” target=“_blank” />  
  5. </head>  
  6. <body>  
  7. </body>  
  8. </html>  

<html>
<head>
<title>基底網址的設定</title>
<base href=”http://www.google.com” target=”_blank” />
</head>
<body>
</body>
</html>

通過以上程式碼對基底網址的設定。Base.htm頁面中的任何超級連結的地址，都將在其前面加上”http://www.google.com”,即轉換為絕對地址。並且，頁面中的超級連結開啟方式都是開啟新視窗。





▲知識點二——頭部資訊的元資訊標籤


元資訊標籤是頭部資訊的基本標籤，專業網頁程式碼中都對元資訊有詳細設定。元資訊標籤為</meta>，為單標籤。Meta元素提供的資訊對於瀏覽使用者是不可見的，一般用於定義頁面資訊的名稱，關鍵字，作者等。在HTML頁面中，一個meta標籤內就是一個meta內容，而在一個HTML頭頁面中可以有多個meta元素。

meta標籤屬性分兩種：頁面描述屬性（name）和http標題資訊（http-equiv）。


name屬性

name屬性主要用於描述網頁的內容，用於對搜尋引擎的優化，必須重點掌握。正確地設定name屬性，以便搜尋引擎（比如google，baidu）的搜尋機器人查詢，分類，搜尋引擎一般都會自動查詢meta值來給網頁分類。name的取值如下：


<1>keywords。即關鍵字，用於說明網頁所包含的關鍵字等資訊，從而提高被搜尋引擎搜尋到的概率。編寫格式為<meta name=”keywords” content =“關鍵字”/>，content屬性的值為使用者所設定的具體關鍵字。（一般可設定多個關鍵字，他們之間用英文半形的逗號分開，搜尋引擎都限制關鍵字的數量，所以關鍵字內容要簡潔精練）


<2>description。中文意思為”描述”，用於描述網頁的主要內容、主題等，合理設定也可以提高被搜尋引擎搜尋到的概率。格式為<meta name=”description” content =“對頁面的描述”/>，content屬性值為使用者所設定的頁面具體描述的內容，最多容納1024個字元，但搜尋引擎一邊只顯示約前175個字元。


<3>author。作者，用於設定網站作者的名稱，比較專業的網站經常用到。格式為<meta name=”author” content =“作者名稱”/>


<4>generator。生成器，用於設定網站編輯工具的名稱，比較專業的網站頁面上經常用到。格式<meta name=”generator” content =“網站編輯工具名稱”/>


<5>robots。機器人，用於限制頁面搜尋方式。搜尋引擎的搜尋機器人，沿著網頁上的連結（如http和src連結），不斷地檢索資料建立自己的資料庫。通過這種meta標籤可以限制部分內容不被搜尋引擎檢測到，降低部分資訊公開性。編寫格式為<meta name=“robots” content=”指令組合”>。該屬性的值包含4個命令，分別是index、noindex、follow、nofollow，根據排列組合，有4種組合。Index和follow組合也可稱為all，noindex和nofollow也可稱為none。


http-equiv屬性

http-equiv屬性的取值具體如下：

<1>content-type，內容類別，用於設定頁面的類別和語言字符集。編寫格式<meta http-equiv=“content-type” context=“text/html”；charset=“gb2312”/>，content屬性的值代表頁面採用HTML程式碼輸出，字符集為gb2312（簡體中文），國際化網站開發的話，為了字元統一，建議charset採用utf-8.


<2>refresh。重新整理，用於設定多長時間內網頁自己重新整理一次，或者用一段時間自動跳轉到其他頁面，第一種編寫格式<meta http-equiv=“refresh” context=“30”/>表示隔30秒重新整理一次，第二種編寫格式<meta http-equiv=“refresh” context=“30；url=www.google.com”/>，表示30秒後頁面自動跳轉到www.google.com網站


<3>expires，中文意思為“到期”，用於設定頁面到期時間。一旦網頁過期，必須到伺服器上重新呼叫網頁。第一種編寫格式為<meta http-equiv=“expires” context=“Wed,10 Mar 2011 12：00：00 GMT”/>，content值代表網頁過期的時間，必須使用GMT時間格式。第二種編寫格式為<meta http-equiv=“expires” context=“30”/>，表示多少秒後過期。


<4>cache-control，快取控制。用於禁止在快取中呼叫網頁，編寫格式為<meta http-equiv=“cache-control” context=“no-cache”/>，no-cache代表不允許快取。


<5>set-cookie，設定cookie，用於設定本頁面cookie多久過期，編寫格式為<meta http-equiv=“set-cookie” context=“Wed,10 Mar 2011 12：00：00 GMT”/>，代表到這個時間，cookie將被刪除。






▲知識點三——頭部資訊實現與CSS及JavaScript混編


CSS負責HTML網頁的樣式，JaveScript負責HTML網頁的動態行為。CSS和JaveScript最常用的融合方式是寫入頭部資訊部分。

<1>加入CSS只需在頭部資訊中加入<style type=“text/css”></style>標籤對。範例程式碼如下：

[html]
view plaincopyprint?
  1. <html>  
  2. <head>  
  3. <title>CSS的設定</title>  
  4. <style type=“text/css”>  
  5. CSS具體內容  
  6. </style>  
  7. </head>  
  8. <body>  
  9. </body>  
  10. </html>  

<html>
<head>
<title>CSS的設定</title>
<style type=“text/css”>
CSS具體內容
</style>
</head>
<body>
</body>
</html>


<2>加入JavaScript只需要在頭部資訊中加入<script type=“text/javascript”></script>標籤對。範例程式碼如下：

[html]
view plaincopyprint?
  1. <html>  
  2. <head>  
  3. <title>CSS的設定</title>  
  4. <style type=“text/css”>  
  5. CSS具體內容  
  6. </style>  
  7. <script type=“text/javascript”>  
  8. JavaScript具體內容  
  9. </script>  
  10. </head>  
  11. <body>  
  12. </body>  
  13. </html>  

<html>
<head>
<title>CSS的設定</title>
<style type=“text/css”>
CSS具體內容
</style>
<script type=“text/javascript”>
JavaScript具體內容
</script>
</head>
<body>
</body>
</html>


▲知識點四——常用頭部資訊功能推薦


<1>頁面切換特效，其中一種特效的編寫格式如下：

<meta http-equiv=“page-enter” content=“blendtrans（duration=0.5）”/>

http-equiv屬性的值為page-enter時表進入該頁面時啟用特效，http-equiv屬性的值為page-exit時代表退出（離開）該頁面時啟用特效。

Content屬性的值代表特效的種類，這種特效也叫動態濾鏡。濾鏡種類很多，比如blendtrans就是很常見得一種，效果為淡入淡出，duration值表示效果持續的時間（單位為秒）。

另一種濾鏡特效編寫格式如下：

<meta http-equiv=“page-enter” content=“revealTrans（duration=6）”/>

動態濾鏡revealTrans也可用於頁面進入與退出效果。Duration表示濾鏡特效持續時間（單位為秒），Transition是濾鏡型別，表示想使用哪種特效，取值為0~23。


<2>強制頁面在當前視窗以獨立頁面顯示，可以防止網頁被其他網站框架，編寫格式如下：
<meta http-equiv=”window-target” content=“_top”>


<3>頁面圖示設定，編寫格式如下：

<link rel=”Shortcut Icon” href=”/myicon.ico”>

href屬性的值是ico圖示檔案的路徑，這裡採用的是相對根目錄路徑。


相關文章