表格使用小技巧：因為標記是可以嵌套的，所以靈活嵌套會實現(xiàn)很多不同的結構。表格也可以用來設計頁面。在頁面中創(chuàng)建一個表格，并設置沒有邊框，之后通過該表格將頁面劃分成幾個區(qū)域，分別對幾個區(qū)域進行設計。

表格標簽演示代碼如下：

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

8)

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

使用表單標記的基本語法如下：

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

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

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

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

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

9)表單輸入標記

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

type屬性的值如下：

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

使用語法如下：

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

alt="" value="checkbox">

各屬性值的含義：

type，name，id分別是輸入字段的類別，輸入字段的名稱和輸入字段的標識id。

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

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

width和height：當輸入是圖片時，指定寬和高。

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

maxlength：當type是text和password時指定可輸入文字個數(shù)，默認下沒有限制。

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

src：用于指定圖片來源。

usemap：

alt：當圖片無法顯示時顯示的文字。

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

演示

用 戶 名:

密 碼:

確認密碼:

性 別:

男?

女

愛 好:

體育

旅游

聽音樂

看書

E-mail:

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

10)下拉菜單標記與

在頁面中創(chuàng)建下拉菜單。通過標記添加菜單項。

標記的屬性如下：

name：下拉菜單的名稱

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

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

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

演示的代碼：

下拉菜單：

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

攝影器材

MP3/MP4/MP5

U盤/移動硬盤

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

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

攝影器材

MP3/MP4/MP5

U盤/移動硬盤

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

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

攝影器材

MP3/MP4/MP5

U盤/移動硬盤

瀏覽器打開文件效果：

11)多行文本標記

一般用于

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

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

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

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

readonly：用于指定當前多行文本框為只讀

wrap：用于指定多行文本中的文字是否自動換行。

演示代碼如下：

人之初 性本善 性相近 習相遠

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

昔孟母 擇鄰處 子不學 斷機杼

人生若只如初見，何事秋風悲畫扇。

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

人生那么長，等你幾年又何妨。

瀏覽器中打開文件截圖：

12)超鏈接與圖片

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

的屬性：

src：用于指定圖片的來源

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

border：指定圖片外邊框的寬度，默認為0

alt：指定圖片無法顯示時顯示的文字。

演示和的代碼如下：

瀏覽器打開效果：

超鏈接顯示的頁面：