「測(cè)試開(kāi)發(fā)基礎(chǔ)知識(shí)-HTML」表格標(biāo)簽，不得不說(shuō)的重點(diǎn)

續(xù)一周沒(méi)怎么更新了，今天我們繼續(xù)HTML的學(xué)習(xí)，表格標(biāo)簽。表格是實(shí)際開(kāi)發(fā)中常用的一種標(biāo)簽類(lèi)型，會(huì)說(shuō)到表格標(biāo)簽的主要作用和基本語(yǔ)法。

主要作用: 表格主要用于顯示、展示數(shù)據(jù)，因?yàn)樗梢宰寯?shù)據(jù)展示的非常規(guī)整，可讀性非常好，特別是后臺(tái)展示數(shù)據(jù)的時(shí)候，能夠熟練運(yùn)用表格非常重要。一個(gè)清爽簡(jiǎn)約的表格可以把復(fù)雜的數(shù)據(jù)表現(xiàn)的很簡(jiǎn)單。表格不是用來(lái)布局頁(yè)面的，而是用來(lái)展示數(shù)據(jù)的。

表格的基本語(yǔ)法: <table><tr><td></td></tr></table>

<table></table>用來(lái)定義表格標(biāo)簽

<tr></tr>用于定義表格中的行，嵌套在<table>標(biāo)簽中使用

<td></td>用于定義表格中的單元格，嵌套在<tr>標(biāo)簽中使用，字母td指表格數(shù)據(jù)(table data),即數(shù)據(jù)單元格的內(nèi)容。

我們來(lái)展示一個(gè)例子，比如數(shù)據(jù)庫(kù)中有三個(gè)字段，分別為姓名性別和年齡，如果想用前端將這三個(gè)字段的數(shù)據(jù)展示出來(lái)，應(yīng)該怎么操作呢？

先看效果:

然后我們看下代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

</table>

</body>

</html>

這次開(kāi)始使用vs code來(lái)編輯代碼了，感覺(jué)比sublime line高級(jí)一些，但是相對(duì)的也麻煩點(diǎn)。可以看到，在前端頁(yè)面展示了姓名、性別和年齡。然后我們添加一行數(shù)據(jù)，看效果:

民族英雄黃飛鴻如果還活著，應(yīng)該也是一位非常高壽的宗師了。多加幾個(gè)數(shù)據(jù)

讓我們看看代碼有什么不同

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

>

</table>

</body>

</html>

可以看到，就是將之前的數(shù)據(jù)進(jìn)行了復(fù)制而已。

接著我們說(shuō)下表頭單元格標(biāo)簽，一般表頭單元格位于表頭的第一行或第一列，表頭單元格里面的文本內(nèi)容，加粗居中表示。

<th>標(biāo)簽表示HTML表格的表頭部分，table head的縮寫(xiě)

我們先來(lái)看下效果:

再看下對(duì)應(yīng)的代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

>

>

</table>

</body>

</html>

就是將表格表頭那一行的<td>都換成了<th>，可以看到表頭每個(gè)字段都已經(jīng)居中并且加粗了。

最后我們說(shuō)下表格的屬性，其實(shí)表格標(biāo)簽屬性這部分用的不多，一般都是用css樣式來(lái)設(shè)置。例如表格的邊框、大小等。我們需要關(guān)注的表格屬性目的，有2點(diǎn):

記住英文顯示名稱(chēng)，之后使用css樣式會(huì)用到
直觀感受表格的外觀狀態(tài)

align 屬性值: left right center 對(duì)應(yīng)表格相對(duì)周?chē)氐膶?duì)齊方式

border 屬性值 1或"" (空) 規(guī)定表格單元是否有邊框，默認(rèn)為空，表示沒(méi)有邊框

cellpadding 像素值規(guī)定單元邊沿與其內(nèi)容之間的空白，默認(rèn)1像素

cellspacing 像素值規(guī)定單元格之間的空白，默認(rèn)1像素

width 像素值或百分比規(guī)定表格的寬度

我們來(lái)看下效果:

來(lái)看下代碼:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

>

>

</table>

</body>

</html>

記住，屬性都是在table處添加和修改的，因?yàn)槲覀兪菍?duì)整個(gè)table的設(shè)置值。

好的，今天就先到這里了，大家周末愉快

不改變代碼的情況下，通過(guò)CSS樣式表在手機(jī)上展示表格內(nèi)容

PC端

移動(dòng)端

HTML源碼

CSS處理的主要方法是：

將 table, tbody, tr 改為display: block。
將td轉(zhuǎn)換為 display: inline（和span一樣的效果）
這對(duì)特頂?shù)膖d，設(shè)置例如顏色、背景色、位置等來(lái)改變效果

假定table的class是 the-table，CSS示例代碼如下：

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類(lèi)型可分如下：

輸入類(lèi)控件
菜單類(lèi)控件

輸入類(lèi)組件 —— input

此類(lèi)控件有很多種類(lèi)型，使用<input type="類(lèi)型">語(yǔ)法，常見(jiàn)類(lèi)型如下：

type 值	含義
text	文字字段
password	密碼域，用戶(hù)看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見(jiàn)的輸入框
file	文本域，用于上傳文件等非文本數(shù)據(jù)

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱(chēng)，用于和其它控件區(qū)別，不能包含特殊字符，也不可使用html 標(biāo)簽名稱(chēng)
maxlength —— 定義文本框可輸入字符最大長(zhǎng)度
size —— 定義文本框在頁(yè)面中顯示的長(zhǎng)度
vaule —— 定義文本框中默認(rèn)的值

如下是文本輸入框和密碼框制作一個(gè)登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶(hù)登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶(hù)名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類(lèi)型

除了以上幾種類(lèi)型，HTML5 還增加了多個(gè)新的輸入類(lèi)型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數(shù)字類(lèi)型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時(shí)間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時(shí)自動(dòng)對(duì)電子郵件地址進(jìn)行驗(yàn)證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話(huà)：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類(lèi)型。<br>
  url：
  <input type="url" name="url">
  提交時(shí)能夠自動(dòng)驗(yàn)證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個(gè) checked屬性定義默認(rèn)選擇的項(xiàng)，checked = “true”指選中那個(gè)選項(xiàng)，表單會(huì)將 checked = “true” 的選型值傳遞給后臺(tái)。

如下實(shí)例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋(píng)果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺(tái)的數(shù)據(jù)是不一樣的，如下會(huì)看到地址欄中的數(shù)據(jù)，多選會(huì)發(fā)送多個(gè)值，后臺(tái)將會(huì)獲取一個(gè)數(shù)組形式的數(shù)據(jù)。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語(yǔ)法如下：

<input type="button" name="名稱(chēng)" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁(yè)面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時(shí)所進(jìn)行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開(kāi)窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內(nèi)容，是一種特殊按鈕。

如剛才的登錄表單，提交后會(huì)返回結(jié)果：

重置按鈕：type="reset"，用于清除表單數(shù)據(jù)，也是一種特殊按鈕。

輸入數(shù)據(jù)

點(diǎn)擊重置按鈕后，表單數(shù)據(jù)清空

重置清空數(shù)據(jù)

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標(biāo)簽定義按鈕，button 使用語(yǔ)法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類(lèi)控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁(yè)面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會(huì)以非文本方式傳送到后臺(tái)的，常用來(lái)實(shí)現(xiàn)文件上傳功能。

文本域 —— textarea

除了input 類(lèi)型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區(qū)別就是可以輸入多行文字，input 文本輸入框是單行的無(wú)法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域?qū)挾日紟琢校热缟厦娑x了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類(lèi)似，只不過(guò)它更加節(jié)省空間，當(dāng)要選擇的選型很多時(shí)，就不適合使用radio空間，所以當(dāng)選項(xiàng)很多的時(shí)候，使用下拉菜單，語(yǔ)法如下：

<select name="名稱(chēng)">
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選列表和多選按鈕類(lèi)似，一樣為了節(jié)省空間，當(dāng)數(shù)據(jù)選項(xiàng)比較多時(shí)，使用多選列表，語(yǔ)法如下：

<select name="名稱(chēng)" size="可看見(jiàn)的列表項(xiàng)數(shù)" multiple>
<option value="選項(xiàng)值1" selected>選項(xiàng)1</option>
<option value="選項(xiàng)值2">選項(xiàng)3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個(gè)multiple屬性，定義多選的，且表現(xiàn)形式也不一樣，不是下拉而是一個(gè)列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時(shí)需要按住ctrl鍵同時(shí)鼠標(biāo)單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現(xiàn)在你可以使用他們制作自己的表單，表單通常在動(dòng)態(tài)網(wǎng)站中使用，這為以后制作動(dòng)態(tài)網(wǎng)站打下基礎(chǔ)。

還有許多屬性沒(méi)有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網(wǎng)站學(xué)習(xí)，感謝關(guān)注，學(xué)習(xí)愉快！

上篇：前端入門(mén)——html 表單

下篇：前端入門(mén) —— 網(wǎng)頁(yè)中使用窗口框架

在線(xiàn)咨詢(xún)

上一篇：利用Django實(shí)現(xiàn)一個(gè)博客（附全部源碼）
下一篇：html元素水平居中

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

「測(cè)試開(kāi)發(fā)基礎(chǔ)知識(shí)-HTML」表格標(biāo)簽，不得不說(shuō)的重點(diǎn)

輸入類(lèi)組件 —— input

文本域 —— textarea

下拉菜單和多選列表

您的項(xiàng)目需求