無序列表用ul標(biāo)記表示，li表示其中的列表項(xiàng)；有序列表以ol標(biāo)記表示，li表示其中的列表項(xiàng)；定義列表以dl標(biāo)記表示，dt標(biāo)記用于定義列表?xiàng)l目，dd標(biāo)記用于對(duì)列表?xiàng)l目進(jìn)行說明。列表的基本結(jié)構(gòu)如清單1-12所示。代碼說明如下圖：以上代碼顯示了三種列表的基本結(jié)構(gòu)，值得注意的是CSS技術(shù)的“選擇器”項(xiàng)的說明?！斑x擇器”項(xiàng)的說明，它的結(jié)構(gòu)如下：<dd>選擇器</dd><dd> <ul> <li>優(yōu)先級(jí)</li> <li>繼承性</li> </ul></dd>這是一種標(biāo)記的嵌套使用，在定義列表的列表項(xiàng)說明標(biāo)記dd中嵌套使用了無序列表標(biāo)記ul。這里雖然只是在dd標(biāo)記中嵌套使用了ul，但需要說明的是，這種標(biāo)記嵌套在HTML中是一種普遍的現(xiàn)象。也就是說，HTML標(biāo)記絕大部分可以相互嵌套！1.7Form標(biāo)記

Form標(biāo)記在Web項(xiàng)目開發(fā)中占有重要的地位，是收集用戶信息的必要元素，并且在許多場(chǎng)合下，還會(huì)用Ajax更新某些元素的值，如根據(jù)用戶的選擇更新某個(gè)（些）下拉列表的值。HTML5增添了許多新的元素，并增加了許多實(shí)用的特性，可以比以前更靈活的使用這Form表單元素。1、表單

HTML表單以form標(biāo)記表示，用于收集用戶不同類型的信息。與以前的標(biāo)記相同，也是由開始標(biāo)記<form>和結(jié)束標(biāo)記</form>組成，其中可以包含/嵌套各種表單元素。表單元素稍后進(jìn)行講解。先來看一下幾個(gè)重要的form屬性。（1）action屬性

用于指定form表單提交時(shí)的URL地址，form提交的信息即由URL指定的服務(wù)器端腳本進(jìn)行處理，默認(rèn)為當(dāng)面頁面，如<formaction="action_handler.jsp">如果整個(gè)Web應(yīng)用請(qǐng)求全部采用Ajax請(qǐng)求的方式，則很少用到這個(gè)屬性。但在學(xué)習(xí)服務(wù)器端編程時(shí)，如JSP，PHP和ASP等，則特別重要。（2）method屬性

用于指定提交表單時(shí)使用的請(qǐng)求方式，有兩種：GET請(qǐng)求和POST請(qǐng)求，默認(rèn)情況下是GET請(qǐng)求，如下所示。<formaction="action_handler.jsp"method=”POST”>那么，什么時(shí)候使用GET請(qǐng)求，什么時(shí)候采用POST請(qǐng)求呢？一般來說，有如下規(guī)律。以下情況使用GET請(qǐng)求方式：◆提交的數(shù)據(jù)量??；

◆提交簡(jiǎn)單的字符數(shù)據(jù)；

◆提交的數(shù)據(jù)安全性不敏感（如不包含密碼等）。GET請(qǐng)求方式把表單數(shù)據(jù)連同URL地址一起顯示在地址欄中。以下情況使用POST請(qǐng)求：●提交的數(shù)據(jù)量大；

●提交諸如文件等復(fù)雜數(shù)據(jù)；

●提交安全性敏感的數(shù)據(jù)。POST請(qǐng)求方式不會(huì)將表單信息顯示在地址欄中。（3）enctype屬性

用于指定表單數(shù)據(jù)提交時(shí)采用的編碼方式，默認(rèn)為application/x-www-form-urlencoded，即提交表單前對(duì)所有字符進(jìn)行編碼，空格轉(zhuǎn)換為“+”號(hào)（不含雙引號(hào)），特殊字符轉(zhuǎn)換為ASC碼的十六進(jìn)制數(shù)。懂得了這些之后，你就再也不會(huì)為了看不懂地址欄中長(zhǎng)長(zhǎng)的字符串而發(fā)愁了！另一個(gè)值是multipart/form-data，即提交前不對(duì)字符進(jìn)行編碼，文件上傳時(shí)必須指定屬性值。還有一個(gè)屬性值為text/plain，提交前對(duì)字符進(jìn)行編碼，把空格轉(zhuǎn)換成“+”號(hào)，但不對(duì)特殊字符進(jìn)行轉(zhuǎn)換。Enctype屬性的用法如下：<formaction="action_handler.jsp"method=”POST”enctype=”multipart/form-data”>（4）name屬性指定用于識(shí)別表單的名字，可以通過這個(gè)名字訪問表單。在JavaScript操作form表單時(shí)十分有用。Form表單還有一些其他屬性，為了節(jié)約篇幅就不一一列舉了，這些屬性可以參見表1-7。2、表單元素表單元素有時(shí)也稱為表單控件。常用的表單元素有：input、select、textarea和button，以及HTML5新增的datalist、keygen和output。Form表單元素中有一個(gè)重要的name屬性，只有設(shè)置了name屬性的元素，才可以提交到服務(wù)器。這一點(diǎn)務(wù)必注意。keygen元素是HTML5新增的用于驗(yàn)證用戶的可靠方法，在表單提交時(shí)可以生成一對(duì)密鑰，公鑰提交到服務(wù)器端，用于后來驗(yàn)證客戶端存儲(chǔ)的私鑰。但這一元素目前僅有Chrome（3.0以上版本）和Opera（10.5以上版本）的瀏覽器才可以支持，所以雖然很美妙，但離實(shí)用還是比較遠(yuǎn)。（1）input標(biāo)記Input標(biāo)記也稱為input元素，其他的標(biāo)記也是一樣。它可以指定type屬性，生成各種控件，如表1-6和表1-7所示。對(duì)于input標(biāo)記和form標(biāo)記，HTML5還新增了若干屬性，可以對(duì)元素進(jìn)行某些方面的設(shè)定，如自動(dòng)獲得焦點(diǎn)，重寫某些默認(rèn)值等。新屬性的引入，大大增加了網(wǎng)頁制作和程序設(shè)計(jì)的靈活性。HTML5新增屬性如表1-8所示。不論是在Ajax編程還是其他Web腳本編程中，這里的屬性都十分有用，希望大家能仔細(xì)閱讀表1-8，掌握每個(gè)屬性的用法。（2）select下拉列表標(biāo)記

Select標(biāo)記表示下拉列表，可以單選也可以多選。其中列表項(xiàng)以option標(biāo)記表示。也可以通過optgroup將邏輯上相關(guān)的選項(xiàng)組合在一起，使選項(xiàng)更加清晰。下面通過一個(gè)例子來說明它的用法。我們列出各個(gè)專業(yè)供用戶選擇，代碼如下：<selectname="specialty"> <optgrouplabel="計(jì)算機(jī)系"> <optionvalue="">計(jì)算機(jī)科學(xué)與技術(shù)</option> <optionvalue="">軟件工程</option> <optionvalue="">軟件技術(shù)</option> <optionvalue="">計(jì)算機(jī)應(yīng)用</option> </optgroup><optgrouplabel="機(jī)械系"> <optionvalue="">機(jī)械設(shè)計(jì)與制造</option> <optionvalue="">工業(yè)設(shè)計(jì)</option> <optionvalue="">機(jī)電一體化</option> </optgroup></select>未展開時(shí)的下拉列表顯示效果如下：展開的下拉列表效果如下：需要說明的是，這個(gè)“計(jì)算機(jī)系”和“機(jī)械系”只是一個(gè)選項(xiàng)組的說明，不能作為選項(xiàng)使用，既不能選擇，也無法傳遞到后臺(tái)服務(wù)器。（3）textarea和button

Textarea標(biāo)記是一個(gè)多行文本框，可以輸入任意多的字符?？梢允褂胏ols和rows指定它的列數(shù)和行數(shù)，但推薦使用CSS的width和height屬性指定其大小。HTML5對(duì)其新增了wrap屬性，屬性值可以是soft或者h(yuǎn)ard。如果是hard，則必須與cols聯(lián)用。Wrap屬性規(guī)定了在表單提交時(shí)，textarea中的文本如何處理換行。其中，soft為默認(rèn)值，表示不提交換行符，即不換行。Hard表示提交換行符（如果包含換行符的話，或者超過了指定的列數(shù)）。例如：<textareacols="30"wrap="hard">

</textarea>效果如下：即超過30列的字符自動(dòng)換到下一行顯示，而且在提交到服務(wù)器時(shí)也自動(dòng)帶有換行符。Button標(biāo)記Button標(biāo)記表示一個(gè)按鈕，它與<inputtype=”button”/>的主要區(qū)別：開始<button>和結(jié)束</button>標(biāo)記之間可以放置任何內(nèi)容，包括圖像與文本等，可以制作多種效果的按鈕。使用該標(biāo)記時(shí)，必須指定type=”button”，否則各瀏覽器對(duì)它的解釋不盡相同。IE中默認(rèn)為“button”，而其他瀏覽器，甚至W3C規(guī)范默認(rèn)都是“submit”。實(shí)際應(yīng)用時(shí)在表單中創(chuàng)建按鈕，請(qǐng)使用<inputtype=”button”/>。如下面的代碼制作了一個(gè)帶有刪除圖標(biāo)的刪除按鈕：<buttontype="button"> <imgsrc="../images/button-remove.png"/>刪除</button>顯示效果如圖所示：（4）datalist和output。

Datalist標(biāo)記用于指定選項(xiàng)列表，與input標(biāo)記配合使用，指定input元素的可能值。使用list屬性指定datalist的id值，將input標(biāo)記與datalist定義的列表聯(lián)系起來。實(shí)例如下：<inputtype="text"name="tech"list="techs"/><datalistid="techs"> <optionvalue="html"/> <optionvalue="CSS"/> <optionvalue="JavaScript"/></datalist>顯示效果如圖1-7所示。圖1-7datalist創(chuàng)建的選項(xiàng)列表觀察圖1-7可以得出如下結(jié)論：★包含datalist的input默認(rèn)情況下與普通的input沒有任何區(qū)別。

★獲得焦點(diǎn)時(shí)出現(xiàn)下拉列表，并可從下拉列表中選擇，也可以直接輸入。

★輸入列表項(xiàng)中包含的文字可出現(xiàn)智能提示，并可選擇提示的內(nèi)容。

★點(diǎn)擊右側(cè)的下拉箭頭顯示列表選項(xiàng)，可以選擇進(jìn)行輸入。Out標(biāo)記Out標(biāo)記用于定義某些元素的輸出，通過引用out標(biāo)記的id屬性指定它要顯示的值，實(shí)例如下：<inputid="age"type="range"min="18"max="65"

onchange="ageDis.value=value"/><outputid="ageDis"/>其中，min和max為HTML新的屬性，見表1-8的說明，分別指定age的最小值和最大值。Onchange屬性是注冊(cè)change事件的一種方式，在range元素的值發(fā)生變化時(shí)，觸發(fā)其后面的代碼ageDis.value=value，其中ageDis.value指的是output的value，也就是要顯示的值，而等號(hào)后的value為id=”age”的range元素的值。顯示效果如圖1-8所示。圖1-8out顯示range元素的值以上的例子代碼見源代碼的Listing1-13.html。大家可以下載運(yùn)行觀察效果，并可以網(wǎng)頁中進(jìn)行描述的操作，觀察實(shí)際效果。真是一次漫長(zhǎng)的學(xué)習(xí)之旅，html的內(nèi)容就到這里吧。最后，需要說明的是：凡是涉及HTML5的標(biāo)記和屬性，不同的瀏覽器對(duì)它的支持是不盡相同的，有的瀏覽器甚至不支持，在觀察效果時(shí)，如果一個(gè)瀏覽器不能正常顯示或看不到應(yīng)該的效果，可能是瀏覽器問題，可以換個(gè)瀏覽器試試。常用的瀏覽器有Google的Chrome瀏覽器、Firefox瀏覽器和IE瀏覽器，它們代表三種不同內(nèi)核的瀏覽器，具有一定的代碼性，練習(xí)時(shí)可同時(shí)使用這種個(gè)瀏覽器觀察顯示效果。1.8總結(jié)

本章主要介紹了HTML基本知識(shí)，什么是HTML，HTML的結(jié)構(gòu)，HTML的頭元素以及頭元素在實(shí)際項(xiàng)目的運(yùn)用。如何編輯HTML文件，如何運(yùn)行HTML文件等。還介紹了以下內(nèi)容：◆資源路徑——它是十分重要的，所有網(wǎng)頁中使用的資源必須保證路徑的正確性，才能正常顯示和訪問。◆超鏈接標(biāo)記——它是HTML中最重要的標(biāo)記，各網(wǎng)頁之間主要靠超鏈接相互連接起來。而且還介紹了各種超級(jí)鏈接的制作技術(shù)。

◆圖像