HTML（3）HTML文檔頭部信息

本文轉載自查看原文 2012-07-25 23:41 6767 [04] HTML/ HTML

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <!--指定HTML文檔的標題，注意：不要忘記結束標簽里面的反斜杠“/”，否則整個頁面將不會顯示-->
 5     <title>博客園 - 程序員的網上家園</title>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <meta name="keywords" content="博客園,開發者,程序員,軟件開發,編程,代碼,極客,Developer,Programmer,Coder,Code,Coding,Greek,IT學習" />
 8     <meta name="description" content="博客園是面向程序員的高品質IT技術學習社區，是程序員學習成長的地方。博客園致力於為程序員打造一個優秀的互聯網平台，幫助程序員學好IT技術，更好地用技術改變世界。" />
 9     <link rel="shortcut icon" href="http://static.cnblogs.com/favicon.ico" type="image/x-icon" />
10     <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/css/reset.css" />
11     <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/blog/css/sitehome.css?id=20120616" />
12     <link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/rss" />
13     <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
14     <script src="http://common.cnblogs.com/blog/script/site.js?id=20120616" type="text/javascript"></script>
15 </head>
16 <body>
17 </body>
18 </html>

　　以上代碼定義了一個HTML文檔，其中<head></head>標簽對中間的部分為該HTML文檔的頭部信息，<head></head>標簽對之間的內容是不會在瀏覽器的“文檔”窗口中顯示出來的。根據 HTML 標准，僅有幾個標簽在 HTML 的頭部分是合法的，它們包括：<base>, <link>, <meta>, <title>, <style> 和 <script>。

　　1. <!DOCTYPE> 標簽：

　　以上示例代碼的第一行便是<!DOCTYPE>標簽。現在互聯網上所有的網頁都有<!DOCTYPE>標簽的定義。

　　DTD(Document Type Definition)—文檔類型定義，是一套關於標記符的語法規則。doctype 聲明不屬於 HTML 標簽（tag）; 它是一條指令，告訴瀏覽器編寫頁面所用的標記的版本。在所有 HTML 文檔中規定 doctype 是非常重要的，這樣瀏覽器就能了解預期的文檔類型。

　　HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

　　以下面這個 <!DOCTYPE> 標簽為例：　　

1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

　　在上面的聲明中，聲明了文檔的根元素是 html，它在公共標識符被定義為 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中進行了定義。瀏覽器將明白如何尋找匹配此公共標識符的 DTD。如果找不到，瀏覽器將使用公共標識符后面的 URL 作為尋找 DTD 的位置。

　　第一種：HTML Strict DTD，嚴格版本的文檔類型定義。如果您需要干凈的標記，免於表現層的混亂，請使用此類型。請與層疊樣式表（CSS）配合使用：

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
2 http://www.w3.org/TR/html4/strict.dtd">

　　第二種：HTML Transitional DTD，過度版本的文檔類型定義，Transitional DTD 可包含 W3C 所期望移入樣式表的呈現屬性和元素。如果您的讀者使用了不支持層疊樣式表（CSS）的瀏覽器以至於您不得不使用 HTML 的呈現特性時，請使用此類型：

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
2 http://www.w3.org/TR/html4/loose.dtd">

　　第三種：Frameset DTD ，基於框架的HTML文檔類型定義。Frameset DTD 應當被用於帶有框架的文檔。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同於 Transitional DTD：

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
2 http://www.w3.org/TR/html4/frameset.dtd">

參考地址：http://www.w3school.com.cn/tags/tag_doctype.asp

　　2.文檔標題：

　　在HTML文檔中，文檔標題用<title></title>標簽對來表示。<title>標簽中間的文本元素就是該頁面的標題，當用戶在瀏覽器中瀏覽時，該文本就會顯示在用戶瀏覽器的標題欄中了。對於標題的內容，如果是網站的主頁，則可以用網站的名稱來作為該頁面的標題。如果是普通的頁面，則多以表述該頁面功能的字詞作為頁面的標題內容。需要注意的是，在寫標題的結束標簽的時候，不要忘記反斜杠“/”，否則可能導致整個頁面無法顯示。這是我以前犯過的一個錯誤，當頁面寫完之后在瀏覽器中瀏覽，頁面是空白的，最后才發現是少了</title>中的反斜杠。

　　3.<meta>標簽：

　　<meta> 元素可提供有關頁面的元信息（meta-information），比如網站頁面的編碼、關鍵詞和對網站的描述信息等內容。<meta> 標簽必須位於文檔的頭部（head標簽內），它是HTML文檔中head區的一個輔助性標簽，標簽內部不包含任何內容。<meta> 標簽的屬性定義了與文檔相關聯的“名稱/值”對。

　　<meta>標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。比如通過name屬性的keywords 和 description屬性就可以設置網站關鍵詞，對網站進行SEO優化。

　　<meta>標簽在HTML 與 XHTML 之間的差異：在 HTML 中，<meta> 標簽沒有結束標簽。在 XHTML 中，<meta> 標簽必須被正確地關閉。

　　<meta name=“名字” content=“值” /> --name屬性是關於網頁的描述信息。
　　<meta http-equiv="名字" content="值" /> --http-equiv屬性用於模擬http響應頭信息。　　

　　例如：

　　a.指定網頁編碼:

　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> --指定網頁使用utf-8編碼

　　或者

　　<meta content="text/html; charset=gb2312" http-equiv="Content-Type"/> --指定網頁使用gb2312編碼

　　b.刷新/重定向網頁：

　　<meta http-equiv="Refresh" content="3" /> 三秒鍾后刷新此網頁。

　　<meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com" /> 三秒鍾后重定向到content屬性的url從那時所指定的新網頁。

　　c.設置頁面緩存：

　　<meta http-equiv=“Cache-Control” content=“no-cache” /> 禁止瀏覽器緩存頁面。

　　d.網頁關鍵詞和頁面的描述信息：

　　<meta name=“keywords” content=“博客園,程序員,八卦”/> 網站關鍵詞

　　<meta name=“description” content=”博客園是最適合DotNet開發人員的技術家園”/> 描述信息

　　4.<link>標簽：

　　<link>元素用於將外部的CSS文件引入頁面，比如：

　　需要注意的是：<link>元素設置路徑是使用href屬性，這個需要和下面的<script>標記的src屬性區分開來，我在一次面試中被考到，但當時我忘記了。必須同　　　　　　　　　　要為<link>元素指定 type屬性和rel屬性。

　　5.<script>標簽：

　　位於<head>標簽中的<script>標簽，是用來引入外部的js文件。比如：

　　該標簽需要指定“src” 屬性和“type”屬性。

　　注意：在引入外部JS文件的時候，是通過上面這種方式實現的（使用</scipt>作為結束標記)，不能將它改為下面直接以反斜杠結束的形式：

　　這樣頁面就找不到所引用的JS文件了。

　　此外，我們還可以在<head>標簽中定義屬於某一個頁面自己的CSS和JS，但是現在已經為了做到標記結構和頁面的樣式相分離，更好的方式是將CSS和JS定義為單獨的文件，然后通過<link>標簽和<script>標簽來引入到HTML頁面。

　　6.<base>標簽　　

　　<base> 標簽用於為頁面上的所有鏈接規定默認地址（URL）或默認目標（target）。通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。使用 <base> 標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。

 1 <html>
 2 <head>
 3 <base href="http://www.w3school.com.cn/i/" />
 4 <base target="_blank" />
 5 </head>
 6 <body>
 7 <img src="eg_smile.gif" /><br />
 8 <p>請注意，我們已經為圖像規定了一個相對地址。由於我們已經在 head 部分規定了一個基准 URL，瀏覽器將在如下地址尋找圖片：</p>
 9 <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
10 <br /><br />
11 <p><a href="http://www.w3school.com.cn">W3School</a></p>
12 <p>請注意，鏈接會在新窗口中打開，即使鏈接中沒有 target="_blank" 屬性。這是因為 base 元素的 target 屬性已經被設置為 "_blank" 了。</p>
13 </body>
14 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML文檔頭部 Html5新特性之文檔聲明和頭部信息 sublime text 3快速生成html頭部信息 HTML5頭部標簽常用信息 sublime text3快速生成html頭部信息(轉) HTML頭部詳解 HTML 頭部標簽 HTML表格頭部、主體、頁腳 HTML系列（二）：頭部meta元素細說HTML頭部標簽