1.15　HTML標記語言

標記語言可以分為通用標記語言（Generalized Markup Language）和特定標記語言（Specialized Markup Language）。通用標記語言為國際相關組織規劃設計，作為特定標記語言的參考，絕大多數軟件都應該能夠支持和解釋。特定標記語言是在通用標記語言的框架內，為某些應用軟件特別設計的，HTML語言就是基于SGML制定出來的一種為了方便地在Internet的Web網絡上開展應用而簡化出來的標記語言。

學習HTML語言是進入Web程序設計的第一步。HTML語言是一種簡潔的標記語言（Markup Language），它是由標記（Tags）代碼和相關的屬性數據組成，比如告訴瀏覽器在當前位置插入圖片的HTML語句：＜img src=“logo.jpg”alt=“the logo”＞。在這個例子中，img是標記，src=“logo.jpg”和alt=“the logo”是屬性數據。

像傳統程序設計語言一樣，用HTML標記語言編寫的內容屬于純文本，以網頁文件的形式存儲。其實在計算機中HTML類型的文件本質上也是文本文件，可用常用的文本編輯軟件對它們進行創建、修改和編輯。

與傳統程序設計語言不同的是，用HTML標記語言編寫的網頁文件由瀏覽器打開即可查看結果。HTML是一種描述性標記語言，嚴格來說不是一種編程語言，傳統語言編寫的程序文件需要相應的翻譯程序方可打開運行。

HTML文檔也是通過Web瀏覽器打開和解釋的，讀者可以選擇手機端的瀏覽器（因手機占無編寫網頁代碼的工具，這可能比較難做到）或個人計算機端的瀏覽器（如微軟公司的IE）。各種瀏覽器都可以直接打開運行HTML文檔。若HTML文檔在網上的服務器內，則也只需在瀏覽器地址欄中輸入文件的URL即可。

如果只使用HTML語言來編寫Web網頁，則該網頁的效果和功能將受到很大局限，通過結合CSS和Script，可以極大改進HTML不能很好解決動態和交互功能的局限性。例如，對Web網頁中一的系列圖形加以控制，讓圖片循環地輸出就可以實現動畫的效果，還可以實現對許多Web網頁外觀元素進行控制的功能。

1.15.1　了解HTML標記

HTML語言的多數標記都是成對出現的，開始標記若是＜tag＞，那么結束標記就是＜/tag＞。在開始和結束標記之間的內容就是這個＜tag＞標記修飾的內容或管理的范圍。用戶可以在＜tag＞和＜/tag＞之間增加很多內容和其他的標記。還有些標記僅僅有開始標記，沒有結束標記，一般這些標記用于插入和執行一個功能，不用于修飾文件中其他的內容。

下面可通過一個簡單的HTML文件了解標記的作用。

【示例1.15-1】

上面文件的第一個標記是＜html＞，這樣瀏覽器就知道這是HTML文件的開頭。文件的最后一個標記是＜/html＞，表示HTML文件到此結束。

在＜head＞和＜/head＞之間的內容，是頭部信息。頭部信息不會顯示出來，因此在網頁中看不見頭部信息。但是這些頭部信息有很多功能，例如，你可以在head信息里加上一些關鍵詞，有助于搜索引擎搜索到你的網頁，上例中頭部包含了設定瀏覽器標題的標記——＜title＞。

在＜title＞和＜/title＞之間的內容，設定了瀏覽器的標題?？梢栽跒g覽器最頂端的標題欄看到這個標題。

在＜body＞和＜/body＞之間的信息，第一行“This is my first homepage.”，這行內容將輸出在瀏覽器中。

在＜b＞和＜/b＞之間的文字——“This text is bold”將以粗體顯示。＜b＞標記的作用是將修飾的文件用粗體顯示。

1.15.2　創建你的第一個HTML文件

創建HTML文件的方法很多，利用網頁制作軟件或文字處理軟件都可以較容易實現。常見的網頁制作軟件有微軟的FrontPage或者Macromedia的Dreamweaver，這些軟件存盤產生的文件都是網頁文件。文字處理軟件有很多種，甚至可以使用最簡單的記事本來創建和修改網頁文件。在學習Web程序設計時，建議使用記事本來編寫HTML文件，這樣可以避免操作復雜軟件，簡化操作步驟。

打開Windows下的記事本（Notepad）軟件，新建一個文本文件，然后輸入示例1.15-2中的代碼，注意輸入時確保所有標記都是在英文輸入模式下輸入，因為在漢字輸入狀態有可能誤把中文的符號、標點當作英文輸入，很難察覺。如果發生這樣的情況，則瀏覽器將拒絕該標記的執行。

【示例1.15-2】

最后將這個文件存盤，注意選擇“保存類型”為所有文件，為文件命名，如abc.html, HTML文件的后綴名是htm或者是html，如圖1.5所示。

找到剛編寫的abc.html文件，雙擊它，在缺省狀態下，計算機會用瀏覽器（如IE）把它打開，就可以看見該文件在瀏覽器中的效果。

當然也可以先打開瀏覽器，在文件菜單選擇打開，然后找到并選擇abc.html文件，也可以打開瀏覽這個網頁文件。

1.15.3　HTML文件編輯過程

學習編寫HTML文件不需要安裝特殊的軟件，Windows系統的IE和記事本就可以勝任這項工作。初學者要明確一點，IE可以打開本地磁盤和網上的HTML文件，僅僅能編輯存放在本地磁盤的HTML文件，但網上的這類文件是不可能直接編輯的。

新建HTML文件可以快速地新建“空”的HTML文件（也即文件內容為空），在要求新建較多文件時非常方便。

本操作要求打開【文件夾選項】，路徑為【我的電腦】→【工具】菜單→【文件夾選項】，如圖1.6所示，把【隱藏已知文件類型的擴展名】選項關閉。

1.文本文件更改擴展名

在本地磁盤上，利用鼠標右鍵快捷菜單【新建】→【文本文件】，將文件名的擴展名改為html或htm即可，如圖1.7所示。

2.進入源文件編輯模式

用瀏覽器（例如IE）打開HTML文件，選擇IE主菜單的【查看】→【源文件】，系統將直接用記事本打開該HTML文件，這樣就可以直接進行該HTML文件的代碼輸入編寫。

3.HTML文件存盤及刷新

利用記事本將修改完成的HTML文件存盤，然后選擇打開該HTML的瀏覽器，使用瀏覽器的刷新功能，即可觀看修改后的HTML文件的效果。

4.建立HTML文件

反復利用步驟2～4就可以建立許多HTML文件和編輯內容。

1.15.4　網頁的編輯軟件

記事本是一種簡潔的文本編輯軟件，在學習Web程序設計時可以方便地使用它，但它不能勝任管理Web站點的編輯大量網頁的工作?！肮び破涫?，必利其器”，在實際網站、網頁編寫工作中，使用專門的軟件工具可以為網頁編寫創造事半功倍的環境。Web程序的開發工具種類非常多，各有特色，下面簡單介紹幾種。

許多公司推出的商業化的網頁開發編輯工具，如Macromedia公司的Home Site、Dreamweaver是從事Web網頁開發工作人們常用的大型軟件工具，Microsoft公司的FrontPage也在網頁開發中比較普及。以上這些軟件工具在創建和管理網站的功能比較強大，使用起來“所見即所得”，但其操作比較繁雜，僅熟悉軟件便需要較長時間。但由于這些軟件入門無須了解本質的標記代碼，因此不適合Web程序編寫的初學者使用，讀者可以在網頁制作類課程中學習此類軟件。

W3C聯盟的Amaya是比較全面的Web瀏覽與開發軟件，該軟件也具備可視化風格的界面，利用Amaya創建HTML與CSS文件，讀者可以在www.w3.org/amaya/中免費下載該軟件。在互聯網上還免費提供許多精煉的Web編程工具軟件共享，例如，通用的程序代碼編寫器Edit Plus，可以在www.editplus.com中免費下載，試用30天。這是一個Windows平臺的32位編輯器，軟件很小，安裝使用方便，用來編寫HTML與CSS代碼功能比較全面，在學習Web程序編寫中可以完美地替代記事本。該軟件在編寫常見的Web程序設計中，如HTML、CSS、PHP、ASP、Per、JavaScript具備自動顯示不同代碼顏色，提醒編程者注意書寫錯誤或語法錯誤。

在編輯HTML文件時，一般采用純文本文檔編輯器，如記事本或者專門的程序編寫工具就屬此列，并在保存時將其存為后綴名為.htm或.html的文檔即可。不建議使用Word、WPS等專門的字處理軟件來編輯HTML文檔，因為這樣會導致出現難以察覺的字符及格式，致使程序出錯。