文章目錄

• 表格標(biāo)簽
• • 表頭單元格
  • 表格屬性
  • 表格案例
  • 表格結(jié)構(gòu)標(biāo)簽
  • 合并單元格
• 列表標(biāo)簽
• • 無序列表
  • 有序列表
  • 自定義列表
  • 列表總結(jié)
• 表單標(biāo)簽
• • input表單元素
  • label標(biāo)簽
  • select下拉表單
  • textarea文本域
  • 綜合案例

表格標(biāo)簽

表格是用來展示數(shù)據(jù)的

1.<table> </table> 是用于定義表格的標(biāo)簽。 2.<tr> </tr> 標(biāo)簽用于定義表格中的行，必須嵌套在 <table> </table>標(biāo)簽中。 3.<td> </td> 用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中。 4.字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。

代碼如下

<table><tr><td></td></tr> </table>

表頭單元格

1.一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內(nèi)容加粗居中顯示.<th> 標(biāo)簽表示 HTML 表格的表頭部分(table head 的縮寫) 2.表頭單元格也是單元格，常用于表格第一行突出重要性，表頭單元格里面的文字會(huì)加粗居中

代碼如下

<table><tr><th>姓名</th><th>性別</th><th>年齡</th></tr><tr><td>小紅</td><td>女</td><td>10</td></tr><tr><td>小強(qiáng)</td><td>男</td><td>11</td></tr><tr><td>小蘭</td><td>女</td><td>9</td></tr> </table>

表格屬性

這些屬性要寫在表格標(biāo)簽table里面去

代碼如下

<table align="center" border="1" cellpadding="20"cellspacing="0" width="500"height="250"><tr><th>姓名</th><th>性別</th><th>年齡</th></tr><tr><td>小紅</td><td>女</td><td>10</td></tr><tr><td>小強(qiáng)</td><td>男</td><td>11</td></tr><tr><td>小蘭</td><td>女</td><td>9</td></tr> </table>

表格案例

代碼如下

<table border="1" align="center"cellpadding="20"cellspacing="0"width="500"height="250"><tr><th>排名</th><th>關(guān)鍵詞</th><th>趨勢(shì)</th><th>今日搜索</th><th>最近七日</th><th>相關(guān)鏈接</th></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="down.jpg"></td><td>345</td><td>134</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr><tr><td>2</td><td>盜墓筆記</td><td><img src="down.jpg"></td><td>124</td><td>7588</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr><tr><td>3</td><td>西游記</td><td><img src="up.jpg"></td><td>3452</td><td>1324</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr><tr><td>4</td><td>甄嬛傳</td><td><img src="down.jpg"></td><td>345334</td><td>13444</td><td><a href="#">貼吧</a> <a href="#">圖片</a> <a href="#">百科</a></td></tr> </table>

表格結(jié)構(gòu)標(biāo)簽

因?yàn)楸砀窨赡芎荛L(zhǎng),為了更好的表示表格的語(yǔ)義，可以將表格分割成 表格頭部和表格主體兩大部分. 在表格標(biāo)簽中，分別用：<thead>標(biāo)簽 表格的頭部區(qū)域、<tbody>標(biāo)簽 表格的主體區(qū)域. 這樣可以更好的分清表格結(jié)構(gòu)。

代碼如下

<table><thead><tr><th>姓名</th></tr></thead><tbody><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr></tbody> </table>

合并單元格

跨行合并：rowspan=“合并單元格的個(gè)數(shù)” 最上側(cè)單元格為目標(biāo)單元格, 寫合并代碼

跨列合并：colspan=“合并單元格的個(gè)數(shù)” 最左側(cè)單元格為目標(biāo)單元格, 寫合并代碼

代碼如下

<table align="center" border="1" cellpadding="20"cellspacing="0" width="500"height="250"><tr><td colspan="3" >00</td></tr><tr><td rowspan="2">10</td><td>11</td><td>12</td></tr><tr><td>21</td><td>22</td></tr> </table>

列表標(biāo)簽

表格是用來顯示數(shù)據(jù)的，那么列表就是用來布局的。 列表最大的特點(diǎn)就是整齊、整潔、有序，它作為布局會(huì)更加自由和方便。 根據(jù)使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。

無序列表

1. 無序列表的各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，是并列的。 2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。 3. <li> 與 </li> 之間相當(dāng)于一個(gè)容器，可以容納所有元素。 4. 無序列表會(huì)帶有自己的樣式屬性，但在實(shí)際使用時(shí)，我們會(huì)使用 CSS 來設(shè)置。

代碼如下

<ul><li>蘋果</li><li>梨子</li><li>桃子</li><li>葡萄</li> </ul>

有序列表

1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的。 2. <li> 與 </li>之間相當(dāng)于一個(gè)容器，可以容納所有元素。 3. 有序列表會(huì)帶有自己樣式屬性，但在實(shí)際使用時(shí)，我們會(huì)使用 CSS 來設(shè)置。

代碼如下

<ol><li>小紅</li><li>小強(qiáng)</li><li>小蘭</li> </ol>

自定義列表

自定義列表常用于對(duì)術(shù)語(yǔ)或名詞進(jìn)行解釋和描述，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號(hào)

代碼如下

<dl><dt>關(guān)注我們</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>聯(lián)系我們</dd> </dl>

列表總結(jié)

表單標(biāo)簽

為什么需要表單？
使用表單目的是為了收集用戶信息。
在我們網(wǎng)頁(yè)中， 我們也需要跟用戶進(jìn)行交互，收集用戶資料，此時(shí)就需要表單。

表單的組成：
在 HTML 中，一個(gè)完整的表單通常由表單域、表單控件（也稱為表單元素）和 提示信息3個(gè)部分構(gòu)成。

表單域是一個(gè)包含表單元素的區(qū)域。 在 HTML 標(biāo)簽中， <form> 標(biāo)簽用于定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞。 <form> 會(huì)把它范圍內(nèi)的表單元素信息提交給服務(wù)器. 

代碼如下

<form action="demo.php" method="post"name="name1"></form>

input表單元素

在英文單詞中，input 是輸入的意思，而在表單元素中 <input> 標(biāo)簽用于收集用戶信息。 在 <input> 標(biāo)簽中，包含一個(gè) type 屬性，根據(jù)不同的 type 屬性值， 輸入字段擁有很多種形式 （可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等）。

常用屬性其他屬性

代碼如下

<form action="xxx.php" method="get"><!-- text 文本框 用戶可以在這里輸入 -->用戶名：<input type="text" name="username" value="請(qǐng)輸入用戶名" maxlength="6"><br><!--password 密碼框 用戶看不見輸入的密碼 -->密碼：<input type="password" name="pwd" maxlength="6"><br><!-- radio 單選按鈕 可以實(shí)現(xiàn)多選一 -->性別：男<input type="radio" name="sex" value="男" checked="checked">女<input type="radio" name="sex" value="女"><br><!-- checkbox 多選框 可以實(shí)現(xiàn)多選 -->愛好：吃飯<input type="checkbox"name="hobby" value="吃飯" checked="checked">睡覺<input type="checkbox" name="hobby" checked="checked" value="睡覺">打豆豆<input type="checkbox" name="hobby"><br><!-- submit 提交 可以把表單元素里面的值提交給后臺(tái)服務(wù)器 --><input type="submit" value="免費(fèi)注冊(cè)"><!-- reset 重置按鈕可以還原表單元素初始的默認(rèn)狀態(tài) --><input type="reset" value="重新填寫"><!-- button 可以點(diǎn)擊按鈕 后期結(jié)合JS搭配使用 --><input type="button" value="獲取短信驗(yàn)證碼"><br><!-- file 文件域 上傳文件使用-->上傳頭像<input type="file" > </form>

label標(biāo)簽

標(biāo)簽用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊<label> 標(biāo)簽內(nèi)的文本時(shí)， 瀏覽器就會(huì)自動(dòng)將焦點(diǎn)(光標(biāo))轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上,用來增加用戶體驗(yàn).

代碼如下

<label for="text">用戶名：</label> <input type="text" id="text"> <label for="nan">男</label><input type="radio"name="sex" id="nan"> <label for="nv">女</label><input type="radio" name="sex" id="nv">

select下拉表單

在頁(yè)面中，如果有多個(gè)選項(xiàng)讓用戶選擇，并且想要節(jié)約頁(yè)面空間時(shí)， 我們可以使用<select>標(biāo)簽控件定義下拉列表。

代碼如下

籍貫：<select ><option>山東</option><option selected="selected">北京</option><option>天津</option><option>火星</option></select>

textarea文本域

1. 使用場(chǎng)景: 當(dāng)用戶輸入內(nèi)容較多的情況下，我們就不能使用文本框表單了，此時(shí)我們可以使用 <textarea> 標(biāo)簽。 2. 在表單元素中，<textarea> 標(biāo)簽是用于定義多行文本輸入的控件。 3. 使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板，評(píng)論。 4. cols=“每行中的字符數(shù)” ，rows=“顯示的行數(shù)”

代碼如下

今日反饋：<textarea rows="3" cols="50" >今天很開心</textarea>

綜合案例

代碼如下

<h4>學(xué)不會(huì)，沒關(guān)系</h4><table width="600"><tr><td>性別</td><td><input type="radio" name="sex" id="nan" checked="checked"> <label for="nan"><img src="images/man.jpg"> 男</label><input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg"> 女</label></td></tr><tr><td>生日</td><td><select><option>--請(qǐng)選擇年份--</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option></select><select><option>--請(qǐng)選擇月份--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select><select><option>--請(qǐng)選擇日--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option></select></td></tr><tr><td>所在地區(qū)</td><td><input type="text" value="北京"></td></tr><tr><td>婚姻狀況</td><td><input type="radio" name="hy" id="wh"> <label for="wh">未婚</label><input type="radio" name="hy" id="yh"> <label for="yh">已婚</label><input type="radio" name="hy" id="lh"> <label for="lh">離婚</label></td></tr><tr><td>學(xué)歷</td><td><input type="text" value="幼兒園"></td></tr><tr><td>喜歡的類型</td><td><input type="checkbox" name="xh" id="ka"> <label for="ka">可愛的</label><input type="checkbox" name="xh" id="ml"> <label for="ml">美麗的</label><input type="checkbox" name="xh" id="sl"> <label for="sl">善良的</label></td></tr><tr><td>自我介紹</td><td><textarea id="" cols="30" rows="10">自我介紹</textarea></td></tr><tr><td></td><td><input type="submit" value="免費(fèi)注冊(cè)"></td></tr><tr><td></td><td><input type="checkbox" checked="checked">我同意注冊(cè)</td></tr><tr><td></td><td><a href="#">我是會(huì)員，立即注冊(cè)</a></td></tr><tr><td></td><td><h5>我承諾</h5><ul><li>認(rèn)真</li><li>努力</li><li>不退縮</li></ul></td></tr> </table>

總結(jié)

以上是生活随笔為你收集整理的html常用标签（下）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。