HTML基本結構入門教程

在當今社會中，網絡已成為人們生活的一部分，網絡提供的服務主要是以網頁的形式展現出來。ＨＴＭＬ是創建網頁的基礎語言，如果不了解ＨＴＭＬ就談不上網頁設計。以下是關於ＨＴＭＬ基本結構入門知識的講解。

本節單詞記憶：

標簽　１．ｈｅａｄ　２．ｔｉｔｌｅ　３．ｂｏｄｙ　４．ｍｅｔａ　屬性　１．ｂｇｃｏｌｏｒ　２．ｂａｃｋｇｒｏｕｎｄ

網頁提示：ｈｔｍｌ語言非常簡單，不需要邏輯理解，而絕大部分朋友覺得它難以掌握，９０％的原因在於英語單詞不過關，所以每節記憶幾個單詞是非常有必要的。

１．１　ＨＴＭＬ的基本機構

完整的ＨＴＭＬ文件至少包括＜ＨＴＭＬ＞標簽、＜ＨＥＡＤ＞標簽、＜ＴＩＴＬＥ＞標簽和＜ＢＯＤＹ＞標簽，並且這些標簽都是成對出現的，開頭標簽為＜＞，結束標簽為＜／＞，在這兩個標簽之間添加內容。通過這些標簽中的相關屬性可以設置頁面的背景色、背景圖像等。

１．　ＨＴＭＬ文檔的結構

ＨＴＭＬ文檔主要由３部分組成。

●ＨＴＭＬ部分：ＨＴＭＬ部分以＜ＨＴＭＬ＞標簽開始，以＜／ＨＴＭＬ＞標簽結束。

＜ＨＴＭＬ＞
……
＜／ＨＴＭＬ＞

＜ＨＴＭＬ＞標簽告訴浏覽器這兩個標簽中間的內容是ＨＴＭＬ文檔。

●頭部：頭部以＜ＨＥＡＤ＞標簽開始，以＜／ＨＥＡＤ＞標簽結束。這部分包含顯示在網頁標題欄中的標題和其他在網頁中不顯示的信息。標題包含在＜ＴＩＴＬＥ＞和＜／ＴＩＴＬＥ＞標簽之間。

＜ＨＥＡＤ＞
＜ＴＩＴＬＥ＞……＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞

●主體部分：主體部分包含在網頁中顯示的文本、圖像和鏈接。主體部分以＜ＢＯＤＹ＞標簽開始，以＜／ＢＯＤＹ＞標簽結束。

＜ＢＯＤＹ＞
＜／ＢＯＤＹ＞

小經驗：標簽不區分大小寫，因此用戶可以使用＜ｈｔｍｌ＞來代替＜ＨＴＭＬ＞。

圖１　ＨＴＭＬ文檔結構

　２　使用記事本創建網頁

創建一個ＨＴＭＬ文檔，需要兩個工具：一個是文本編輯器（如記事本、ＵｌｔｒａＥｄｉｔ、Ｅｄｉｔｐｌｕｓ等），一個是用於查看ＨＴＭＬ文檔效果的Ｗｅｂ浏覽器（如Ｉｎｔｅｍｅｔ　Ｅｘｐｌｏｒｅｒ、Ｆｉｒｅｆｏｘ等）。下面網頁就使用Ｗｉｎｄｏｗｓ自帶的記事本來快速編寫第一個ＨＴＭＬ文件，然後使用Ｗｅｂ浏覽器查看ＨＴＭＬ文檔效果。

（１）　　單擊“開始”一“程序”一“附件”一“記事本”菜單或者右擊鼠標選擇“新建”一“文本文檔”命令，打開記事本程序。

（２）　　在記事本中輸入如圖２所示的ＨＴＭＬ代碼，輸入完代碼後的記事本如圖１．２所示。

圖２　在記事本裡編輯ＨＴＭＬ

（３）　　單擊記事本菜單欄中的“文件一保存”菜單，彈出“另存為”對話框，在對話框中選擇存盤的文件夾，然後在“保存類型”下拉列表框中選擇“所有文件”選項，在“編碼”下拉列表框中選擇“ＡＮＳＩ”選項，保存文件名為ｍｙ＿ｆｉｒｓｔＰａｇｅ．ｈｔｍｌ，如圖３所示，最後單擊“保存”按鈕。

（４）　回到存盤的文件夾，使用Ｗｅｂ浏覽器打開ｍｙ＿ｆｉｒｓｔＰａｇｅ．ｈｔｍｌ丈件，可以看到最終的頁面效果，如圖４所示。

圖４　“另存為”對話框　

圖５　浏覽效果

３　＜ＭＥＴＡ＞標簽

＜ＭＥＴＡ＞標簽出現在網頁的標題部分。這是一個特殊的ＨＴＭＬ標簽，提供有關網頁的信息。有時在網上沖浪時，發現有些網頁中的文字是亂碼，這是怎麼回事呢？其實就是＜ＭＥＴＡ＞標簽中ｃｈａｒｓｅｔ屬性沒有正確地設置編碼語系。如果我們正確地設置了網頁語言的編碼方式，浏覽器就會正確地顯示網頁中的內容，而不會出現亂碼。要將ｇｂ２３１２指定為默認字符集類型，則使用以下＜ＭＥＴＡ＞標簽：

＜ＨＥＡＤ＞
＜ＭＥＴＡ　ｈｔｔｐ－ｅｑｕｉｖ＝＂Ｃｏｎｔｅｎｔ－Ｔｙｐｅ＂　ｃｏｎｔｅｎｔ＝＂ｔｅｘｔ／ｈｔｍｌ；　ｃｈａｒｓｅｔ＝ｇｂ２３１２＂＞＜ＴＩＴＬＥ＞網頁標題＜／ＴＩＴＬＥ＞
＜／ＨＥＡＤ＞

其中，ｃｈａｒｓｅｔ用於設置網頁的編碼語系，簡體中文網頁使用ｃｈａｒｓｅｔ＝ｇｂ２３１２，繁體中文使用ｃｈａｒｓｅｔ＝ｂｉｇ５，純英文網頁建議使用ｉｓｏ－８８５９－１，或者不設編碼也可。根據自己