1.2 HTML基礎(chǔ)

HTML（Hypertext Markup Language）超文本標(biāo)記語言是一種網(wǎng)頁(yè)設(shè)計(jì)的描述語言，它是一種結(jié)構(gòu)化的文檔，包括標(biāo)題、正文、字體、對(duì)齊方式等信息。HTML定義了一系列的標(biāo)記符號(hào)，網(wǎng)頁(yè)設(shè)計(jì)者使用這些標(biāo)記即可創(chuàng)建效果豐富的頁(yè)面，本節(jié)將重點(diǎn)講解HTML語言的常用標(biāo)記的使用方法。

1.2.1 HTML標(biāo)記語言

網(wǎng)頁(yè)瀏覽者每天都在和HTML打交道，我們看到許多網(wǎng)站的頁(yè)面都以html后綴結(jié)尾，HTML頁(yè)面表示靜態(tài)頁(yè)面，它不和數(shù)據(jù)庫(kù)服務(wù)器交互，只是用于描述頁(yè)面的展現(xiàn)，后面我們講解的以php為后綴的頁(yè)面表示動(dòng)態(tài)頁(yè)面，主要用于處理程序的邏輯、存取數(shù)據(jù)的方法。

HTML文件都是以＜html＞標(biāo)記開頭，以＜/html＞標(biāo)記結(jié)束。＜head＞…＜/head＞用于描述文件的頭部信息，＜title＞…＜/title＞間的內(nèi)容描述HTML文檔的標(biāo)題，而且它的內(nèi)容將顯示在瀏覽器的標(biāo)題欄。＜body＞…＜/body＞之間代碼是HTML文檔的主體，它由許多標(biāo)記嵌套而成，這些標(biāo)記有不同的使用方法，表1-1列舉了一些常用的HTML標(biāo)記。

表1-1 HTML常用標(biāo)記的含義

下面通過一段簡(jiǎn)單的HTML語言的代碼，來說明HTML語言的基本結(jié)構(gòu)和各元素的功能。為了更直觀地表現(xiàn)HTML中各元素的功能，代碼中標(biāo)注的序號(hào)①②③④與圖1-8中序號(hào)相互對(duì)應(yīng)。

范例程序，HTML標(biāo)記的結(jié)構(gòu)：

圖1-7描述了上述HTML文檔的結(jié)構(gòu)關(guān)系。

圖1-7 HTML文檔結(jié)構(gòu)的解析樹

瀏覽器中的運(yùn)行效果如圖1-8所示。

圖1-8 HTML示例文檔效果圖

1.2.2 JavaScript語言基礎(chǔ)

在講解form表單前，需要對(duì)JavaScript有一定的了解，JavaScript是一種客戶端腳本語言，JavaScript可以被嵌入到HTML的頁(yè)面中，實(shí)現(xiàn)對(duì)用戶觸發(fā)事件的響應(yīng)，如form表單的驗(yàn)證。當(dāng)用戶提交數(shù)據(jù)后，JavaScript實(shí)現(xiàn)的響應(yīng)不會(huì)通過網(wǎng)絡(luò)傳輸數(shù)據(jù)，而直接由客戶端的應(yīng)用程序處理。運(yùn)行JavaScript腳本不需要額外環(huán)境，只要運(yùn)行瀏覽器即可。

JavaScript語法格式：

    ＜script language="JavaScript"＞
                  ……
            ＜/script＞

下面給出一個(gè)簡(jiǎn)單的例子，輸出字符串“Hello World!”，范例程序js.html：

            ＜html＞
            ＜body＞
              ＜script language="JavaScript"＞
              document.write("Hello World!")
              ＜/script＞
            ＜br＞
            ＜/body＞
            ＜/html＞

下面給出一個(gè)更復(fù)雜的例子，這個(gè)例子定義了一個(gè)腳本函數(shù)，用于輸出一個(gè)對(duì)話框。當(dāng)單擊頁(yè)面上的按鈕后將彈出一個(gè)對(duì)話框，通過這個(gè)例子讀者可以更清楚地認(rèn)識(shí)到JavaScript腳本的響應(yīng)過程，范例程序js2.html：

onBlur事件表示失去焦點(diǎn)事件,this.value表示當(dāng)前input對(duì)象的輸入值。js2.html效果如圖1-9所示。

圖1-9 JavaScript的事件響應(yīng)

JavaScript提供了豐富的事件處理事件,表1-2列出了常用事件的含義:

表1-2 JavaScript常用事件的含義

1.2.3 HTML Form表單

表單（form）是實(shí)現(xiàn)靜態(tài)頁(yè)面和服務(wù)器腳本進(jìn)行交互的一個(gè)標(biāo)簽，它主要用于獲得用戶輸入的信息，并將用戶輸入的數(shù)據(jù)送到服務(wù)器端的程序 (比如PHP)，服務(wù)器端程序可以根據(jù)表單傳過來的數(shù)據(jù)，把相應(yīng)的處理結(jié)果反饋給用戶瀏覽器。

通過HTML表單對(duì)象，用戶可以輸入文字、密碼，還可以在下拉框中進(jìn)行選擇，常用的HTML表單對(duì)象如表1-3所示。

表1-3 常見的表單對(duì)象

下面這段代碼實(shí)現(xiàn)了用戶名和密碼表單樣式的展現(xiàn)，范例程序form.html：

下面這個(gè)例子結(jié)合JavaScript腳本講解checkbox標(biāo)簽的使用。如果復(fù)選框選中，單擊按鈕后，復(fù)選框的狀態(tài)為未選中；如果復(fù)選框未選中，則單擊按鈕后，復(fù)選框的狀態(tài)為選中。范例程序checkbox.html：

下面這個(gè)例子實(shí)現(xiàn)了下拉框的添加刪除操作，范例程序select.html：

                  ＜o(jì)ption value=3＞orange＜/option＞
                ＜/select＞
                ＜form id="form1" name="form1" method=""＞
                  ＜input type="button" value="add" onclick="addOption('fruit',4)"＞
                  ＜input type="button" value="del" onclick="delOption(0);"＞
                ＜/form＞
              ＜/body＞
              ＜/html＞

當(dāng)單擊“add”按鈕后，下拉框中將添加一個(gè)項(xiàng)目“fruit”，該項(xiàng)目的實(shí)際值為4。當(dāng)單擊“del”按鈕后，下拉框中的第一個(gè)值將被刪除。

1.2.4 CSS樣式表

CSS是Cascading Style Sheets的簡(jiǎn)稱，譯成中文是“層疊樣式表”，它是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。CSS可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景等進(jìn)行控制，借助它的強(qiáng)大功能可以設(shè)計(jì)出精美的網(wǎng)頁(yè)。

在網(wǎng)頁(yè)中應(yīng)用CSS樣式表有三種方法。

1 直接將樣式寫在HTML的標(biāo)記中，該樣式只對(duì)所在的標(biāo)記起作用；

2 采用內(nèi)聯(lián)的方式，把網(wǎng)頁(yè)的樣式嵌套到HTML頁(yè)面的＜head＞標(biāo)簽中，樣式表使用＜style＞標(biāo)簽，該樣式表只對(duì)樣式所在的網(wǎng)頁(yè)有效；

3 采用外聯(lián)的方式，將樣式寫在一個(gè)以.css為后綴的文件中，在需要用到這些樣式的網(wǎng)頁(yè)里引用這個(gè)CSS文件。如果要改變樣式，只要對(duì)一處CSS規(guī)則進(jìn)行更新，這樣所有的網(wǎng)頁(yè)都可以共享這個(gè)CSS文件。

層疊樣式表的基本語法：

HTML標(biāo)志 { 標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；標(biāo)志屬性：屬性值；…… }

下面給出三段代碼，分別采用上述三種調(diào)用CSS文件的方式，讀者可以比較出它們之間的異同。

采用直接嵌入HTML頁(yè)面的方式編寫樣式表，范例程序css1.html：

          ＜tr＞
            ＜td＞＜h2 align="center"＞CSS＜/h2＞＜/td＞
            ＜td＞＜h2 align="center"＞HTML＜/h2＞＜/td＞
            ＜td＞＜h2 align="center"＞PHP＜/h2＞＜/td＞
          ＜/tr＞
          ＜/table＞
          ＜/body＞
          ＜/html＞

采用內(nèi)聯(lián)方式編寫樣式表，范例程序css2.html：

                  ＜td＞＜h2 class="style2"＞CSS＜/h2＞＜/td＞
                  ＜td＞＜h2 class="style2"＞HTML＜/h2＞＜/td＞
                  ＜td＞＜h2 class="style2"＞PHP＜/h2＞＜/td＞
                ＜/tr＞
                ＜/table＞
                ＜/body＞
                ＜/html＞

css3.html頁(yè)面對(duì)應(yīng)的樣式表文件css3.css如下所示：

    table.style1{border-width:thin;border:dashed;color:red;font-size:10pt;}
    h2.style2{text-align:center;}

上面三種調(diào)用CSS樣式文件的方式將產(chǎn)生同樣的效果，如圖1-10所示。

圖1-10 調(diào)用CSS樣式表的效果圖

第三種調(diào)用方式是我們開發(fā)中常用的方式，把CSS樣式單獨(dú)放在一個(gè)文件中便于代碼的維護(hù)，同時(shí)使HTML頁(yè)面更加清晰。