表格使用小技巧：因?yàn)闃?biāo)記是可以嵌套的，所以靈活嵌套會(huì)實(shí)現(xiàn)很多不同的結(jié)構(gòu)。表格也可以用來(lái)設(shè)計(jì)頁(yè)面。在頁(yè)面中創(chuàng)建一個(gè)表格，并設(shè)置沒(méi)有邊框，之后通過(guò)該表格將頁(yè)面劃分成幾個(gè)區(qū)域，分別對(duì)幾個(gè)區(qū)域進(jìn)行設(shè)計(jì)。

表格標(biāo)簽演示代碼如下：

瀏覽器打開文件截圖如下：

8)

表單是用戶與網(wǎng)頁(yè)交換數(shù)據(jù)的重要手段，如下面截圖，就是一個(gè)表單(雖然格式不是很美觀)，表單中有各種表單元素，比如文本輸入框，單選框(radix)，復(fù)選框(CheckBox)等。

使用表單標(biāo)記的基本語(yǔ)法如下：

action：指定處理表單數(shù)據(jù)程序的URL地址。比如將更新后的密碼從網(wǎng)頁(yè)保存到服務(wù)器上，就需要指定保存密碼的業(yè)務(wù)邏輯程序，URL就是這段程序在服務(wù)器上的地址。

method：指定數(shù)據(jù)傳送到服務(wù)器的方式。get表示將輸入的數(shù)據(jù)追加在action指定的地址后面，并傳送到服務(wù)器。post表示會(huì)將輸入的數(shù)據(jù)按照HTTP協(xié)議中post傳輸方式傳送到服務(wù)器。

name：指定表單的名稱，可自定義。

onSubmit：當(dāng)用戶點(diǎn)擊提交按鈕是觸發(fā)的事件。

target：指定輸入數(shù)據(jù)結(jié)果顯示在哪個(gè)窗口中。

9)表單輸入標(biāo)記

標(biāo)記不成對(duì)出現(xiàn)，即不需要結(jié)束。表單中的賬戶輸入框，密碼輸入框，復(fù)選框等都是一個(gè)標(biāo)記，具體的種類由的type屬性指定。比如type="radio"表示單選按鈕，type="text"表示文本框。

type屬性的值如下：

text(文本框)，password(密碼域)， file(文件域)， radio(單選按鈕)， checkbox(復(fù)選按鈕)， submit(提交按鈕)， reset(重置按鈕)， button(不同按鈕)， hidden(隱藏域)， image(圖片域)

使用語(yǔ)法如下：

height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri"

alt="" value="checkbox">

各屬性值的含義：

type，name，id分別是輸入字段的類別，輸入字段的名稱和輸入字段的標(biāo)識(shí)id。

disabled：表示輸入字段不可用，顯示為灰色。其值可以是disabled，也可以是空，即不指定

checked：當(dāng)類型是radio或者checkbox時(shí)，表示輸入字段是否處于選中狀態(tài)。值可為空，也可是checked

width和height：當(dāng)輸入是圖片時(shí)，指定寬和高。

size：指定輸入字段的寬度。當(dāng)type是text和password時(shí)，以文字個(gè)數(shù)為單位。其他類型則以像素為單位。

maxlength：當(dāng)type是text和password時(shí)指定可輸入文字個(gè)數(shù)，默認(rèn)下沒(méi)有限制。

readonly：輸入字段是否為只讀。屬性值可以是readonly，也可以為空。

src：用于指定圖片來(lái)源。

usemap：

alt：當(dāng)圖片無(wú)法顯示時(shí)顯示的文字。

value：指定按鈕上顯示的文字。當(dāng)類型為radio和checkbox時(shí)，指定數(shù)據(jù)項(xiàng)選中時(shí)的值(輸入字段默認(rèn)數(shù)據(jù)值)。

演示

用 戶 名:

密 碼:

確認(rèn)密碼:

性 別:

男?

女

愛 好:

體育

旅游

聽音樂(lè)

看書

E-mail:

瀏覽器中打開文本截圖如下：

10)下拉菜單標(biāo)記與

在頁(yè)面中創(chuàng)建下拉菜單。通過(guò)標(biāo)記添加菜單項(xiàng)。

標(biāo)記的屬性如下：

name：下拉菜單的名稱

size：指定列表框中顯示的選項(xiàng)數(shù)量，超出該數(shù)量的選項(xiàng)通過(guò)拖動(dòng)滾動(dòng)條查看。

disabled：用于指定當(dāng)前列表框不可用(灰色)

multiple：用于讓多行列表框支持多選

演示的代碼：

下拉菜單：

數(shù)碼相機(jī)區(qū)

攝影器材

MP3/MP4/MP5

U盤/移動(dòng)硬盤

?多行列表框(不可多選)：

數(shù)碼相機(jī)區(qū)

攝影器材

MP3/MP4/MP5

U盤/移動(dòng)硬盤

?多行列表框(可多選)：

數(shù)碼相機(jī)區(qū)

攝影器材

MP3/MP4/MP5

U盤/移動(dòng)硬盤

瀏覽器打開文件效果：

11)多行文本標(biāo)記

一般用于

name：用于指定多行文本框的名稱，檔表單提交之后，在服務(wù)器端獲取表單數(shù)據(jù)時(shí)引用。將表單標(biāo)記和后臺(tái)數(shù)據(jù)庫(kù)聯(lián)系起來(lái)。當(dāng)表單很大，內(nèi)容復(fù)雜時(shí)，必須要考慮數(shù)據(jù)庫(kù)的問(wèn)題。

cols：顯示的列數(shù)(寬度)

rows：顯示的行數(shù)(高度)

disabled：用于指定多行文本框不可用(變成灰色)

readonly：用于指定當(dāng)前多行文本框?yàn)橹蛔x

wrap：用于指定多行文本中的文字是否自動(dòng)換行。

演示代碼如下：

人之初 性本善 性相近 習(xí)相遠(yuǎn)

茍不教 性乃遷 教之道 貴以專

昔孟母 擇鄰處 子不學(xué) 斷機(jī)杼

人生若只如初見，何事秋風(fēng)悲畫扇。

用我三生煙火，換你一世迷離。

人生那么長(zhǎng)，等你幾年又何妨。

瀏覽器中打開文件截圖：

12)超鏈接與圖片

超鏈接實(shí)現(xiàn)由一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面。實(shí)現(xiàn)添加圖片。

的屬性：

src：用于指定圖片的來(lái)源

width和height：用于指定圖片的高和寬

border：指定圖片外邊框的寬度，默認(rèn)為0

alt：指定圖片無(wú)法顯示時(shí)顯示的文字。

演示和的代碼如下：

瀏覽器打開效果：

超鏈接顯示的頁(yè)面：