html常用标签（下）
生活随笔
收集整理的這篇文章主要介紹了
html常用标签（下）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 表格標簽
- 表頭單元格
- 表格屬性
- 表格案例
- 表格結構標簽
- 合并單元格
- 列表標簽
- 無序列表
- 有序列表
- 自定義列表
- 列表總結
- 表單標簽
- input表單元素
- label標簽
- select下拉表單
- textarea文本域
- 綜合案例
表格標簽
表格是用來展示數據的
1.<table> </table> 是用于定義表格的標簽。 2.<tr> </tr> 標簽用于定義表格中的行，必須嵌套在 <table> </table>標簽中。 3.<td> </td> 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。 4.字母 td 指表格數據（table data），即數據單元格的內容。代碼如下
<table><tr><td></td></tr> </table>表頭單元格
1.一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內容加粗居中顯示.<th> 標簽表示 HTML 表格的表頭部分(table head 的縮寫) 2.表頭單元格也是單元格，常用于表格第一行突出重要性，表頭單元格里面的文字會加粗居中代碼如下
<table><tr><th>姓名</th><th>性別</th><th>年齡</th></tr><tr><td>小紅</td><td>女</td><td>10</td></tr><tr><td>小強</td><td>男</td><td>11</td></tr><tr><td>小蘭</td><td>女</td><td>9</td></tr> </table>表格屬性
這些屬性要寫在表格標簽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>小強</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>關鍵詞</th><th>趨勢</th><th>今日搜索</th><th>最近七日</th><th>相關鏈接</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>表格結構標簽
因為表格可能很長,為了更好的表示表格的語義，可以將表格分割成 表格頭部和表格主體兩大部分. 在表格標簽中，分別用：<thead>標簽 表格的頭部區域、<tbody>標簽 表格的主體區域. 這樣可以更好的分清表格結構。代碼如下
<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=“合并單元格的個數” 最上側單元格為目標單元格, 寫合并代碼
跨列合并：colspan=“合并單元格的個數” 最左側單元格為目標單元格, 寫合并代碼
代碼如下
<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>列表標簽
表格是用來顯示數據的，那么列表就是用來布局的。 列表最大的特點就是整齊、整潔、有序，它作為布局會更加自由和方便。 根據使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。無序列表
1. 無序列表的各個列表項之間沒有順序級別之分，是并列的。 2. <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 標簽中輸入其他標簽或者文字的做法是不被允許的。 3. <li> 與 </li> 之間相當于一個容器，可以容納所有元素。 4. 無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設置。代碼如下
<ul><li>蘋果</li><li>梨子</li><li>桃子</li><li>葡萄</li> </ul>有序列表
1. <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標簽中輸入其他標簽或者文字的做法是不被允許的。 2. <li> 與 </li>之間相當于一個容器，可以容納所有元素。 3. 有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設置。代碼如下
<ol><li>小紅</li><li>小強</li><li>小蘭</li> </ol>自定義列表
自定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號代碼如下
<dl><dt>關注我們</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>聯系我們</dd> </dl>列表總結
表單標簽
為什么需要表單？
使用表單目的是為了收集用戶信息。
在我們網頁中， 我們也需要跟用戶進行交互，收集用戶資料，此時就需要表單。
表單的組成：
在 HTML 中，一個完整的表單通常由表單域、表單控件（也稱為表單元素）和 提示信息3個部分構成。
代碼如下
<form action="demo.php" method="post"name="name1"></form>input表單元素
在英文單詞中，input 是輸入的意思，而在表單元素中 <input> 標簽用于收集用戶信息。 在 <input> 標簽中，包含一個 type 屬性，根據不同的 type 屬性值， 輸入字段擁有很多種形式 （可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等）。常用屬性其他屬性
代碼如下
label標簽
標簽用于綁定一個表單元素, 當點擊<label> 標簽內的文本時， 瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗.代碼如下
<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下拉表單
在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時， 我們可以使用<select>標簽控件定義下拉列表。代碼如下
籍貫：<select ><option>山東</option><option selected="selected">北京</option><option>天津</option><option>火星</option></select>textarea文本域
1. 使用場景: 當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用 <textarea> 標簽。 2. 在表單元素中，<textarea> 標簽是用于定義多行文本輸入的控件。 3. 使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板，評論。 4. cols=“每行中的字符數” ，rows=“顯示的行數”代碼如下
今日反饋：<textarea rows="3" cols="50" >今天很開心</textarea>綜合案例
代碼如下
<h4>學不會，沒關系</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>--請選擇年份--</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>--請選擇月份--</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>--請選擇日--</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>所在地區</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>學歷</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="免費注冊"></td></tr><tr><td></td><td><input type="checkbox" checked="checked">我同意注冊</td></tr><tr><td></td><td><a href="#">我是會員，立即注冊</a></td></tr><tr><td></td><td><h5>我承諾</h5><ul><li>認真</li><li>努力</li><li>不退縮</li></ul></td></tr> </table>總結
以上是生活随笔為你收集整理的html常用标签（下）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL数据库8（一）SQL简介
- 下一篇： 生命中不能拥有的