表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例
表格標簽
表格主要用于展示數據
<table><tr><td>單元格內的文字</td>...</tr>... </table>1.<table> </table> 是用于定義表格的標簽。
2.<tr> </tr> 標簽用于定義表格中的行，必須嵌套在 <table> </table>標簽中。
3.<td> </td> 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。
4.字母 td 指表格數據（table data），即數據單元格的內容。
?
?height? ? ? ? 像素值或百分比????????規定表格的高度
表頭標簽
<table><tr><th>單元格內的文字</th>...</tr>... </table>表頭單元格內的文本會加粗居中
<thead></thead>，<tbody></tbody>標簽
1. <thead></thead>：用于定義表格的頭部。<thead> 內部必須擁有 <tr> 標簽
2. <tbody></tbody>：用于定義表格的主體，主要用于放數據本體
能夠讓表格的結構更加的清晰
<table> <thead><tr><th>單元格內的文字</th>... </thead> <tbody></tr>... </tbody> </table>今日小說排行榜案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><table align="center" cellpadding="0" cellspacing="0" border="1"><tr><th>排名</th><th>關鍵詞</th><th>趨勢</th><th>今日搜索</th><th>最近七日</th><th>相關鏈接</th></tr><tr><td>1</td><td>鬼吹燈</td><td><img src="https://img2.baidu.com/it/u=1267784173,803507452&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260" /></td><td>666</td><td>66666</td><td><a href="http://www.baidu.com">百度搜索</a></td></tr></table> </body> </html>?合并單元格
跨行合并：rowspan="合并單元格的個數"，最上側單元格為目標單元格, 寫合并代碼
跨列合并：colspan="合并單元格的個數"，最左側單元格為目標單元格, 寫合并代碼
<table border="1" cellpadding="0" cellspacing="0" width="600" height="300" align="center"><tr><td>1</td><td colspan="2">23</td></tr><tr><td rowspan="2">4</td><td>5</td><td>6</td></tr><tr><td>8</td><td>9</td></tr></table>?列表標簽
列表是用來布局的，列表分為三大類：無序列表、有序列表和自定義列表。
無序列表
<ul><li>列表項1</li><li>列表項2</li>... </ul>無序列表的各個列表項之間沒有順序級別之分，是并列的
?<ul></ul>中只能嵌套<li></li>，在<ul></ul>中輸入其他標簽或文字是不允許的
<li></li>相當于一個容器，可以容納所有元素
無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設置
有序列表
<ol><li>列表項1</li><li>列表項2</li>... </ol>?<ol></ol>中只能嵌套<li></li>，在<ol></ol>中輸入其他標簽或文字是不允許的
<li></li>相當于一個容器，可以容納所有元素
有序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設置
自定義列表
<dl> 標簽用于定義描述列表（或定義列表），該標簽會與 <dt>（定義項目/名字）和 <dd>（描述每一個項目/名字）一起使用
<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>... </dl>??<dl></dl>中只能包含<dt></dt>和<dd></dd>?
<dt></dt>和<dd></dd>的個數沒有限制，通常是一個<dt></dt>對應多個<dd></dd>
?表單標簽
一個完整的表單通常由表單域、表單控件（也稱為表單元素）和 提示信息3個部分構成
?表單域是一個包含表單元素的區域, <form></form>?標簽用于定義表單域，以實現用戶信息的收集和傳遞，<form></form>會把它范圍內的表單元素信息提交給服務器?
<form action="url地址" method="提交方式" name="表單域名稱">各種表單元素控件</form>?表單控件
在表單域中可以定義各種表單元素，這些元素就是允許用戶在表單中輸入或選擇的內容控件
?<input />輸入表單元素
根據不同的 type 屬性值，輸入字段擁有很多種形式（可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等）
<input type="屬性值" />type屬性值
?<input />其他屬性值
?name和value是每個表單元素都有的屬性值，主要給后臺人員使用
name表單元素的名字，要求單選按鈕和復選框要有相同的name值
<form method="post" name="one">用戶名：<input type="text" name="user" value="請輸入用戶名" /><br>密碼：<input type="password" name="pwd" /><br>性別：男<input type="radio" name="sex" value="男" checked="checked" />女<input type="radio" name="sex" value="女" /><br>愛好：吃飯<input type="checkbox" name="like" value="吃飯" />睡覺<input type="checkbox" name="like" value="睡覺" checked="checked" />打豆豆<input type="checkbox" name="like" value="打豆豆" /><br> </form>?<label></label>標簽
<label> 標簽用于綁定一個表單元素, 當點擊<label> 標簽內的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗.
<label for="sex">男</label> <input type="radio" name="sex" id="sex" /><label> 標簽的 for 屬性應當與相關元素的 id 屬性相同
<select></select>下拉表單元素
在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用<select></select>標簽控件定義下拉列表
<select><option>選項一</option><option>選項二</option>... </select><select></select>中最少包含一對<option></option>
在<option></option>定義selected="selected"，表示即為默認選中項
<textarea></textarea>文本域元素
<textarea rows="5" cols="20">文本內容 </textarea>通過<textarea></textarea>可以創建多行文本輸入框
cols="每行的字符數"，rows="顯示的行數"，在實際開發中不使用，用CSS改變大小
?注冊頁面綜合案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>世紀佳緣</title> </head> <body><h3>青春不常在，抓緊談戀愛</h3><form action="xxx.php" method="post" name="regist"><table cellpadding="0" cellspacing="10" border="0"><tr><td>性別</td><td><input type="radio" id="男" name="sex" /><label for="男" value="sex">男</label><input type="radio" id="女" name="sex" /><label for="女" value="sex">女</label></td></tr><tr><td>生日</td><td><select name="yyyy" value="year"><option selected="selected">請選擇年</option><option>2000年</option><option>2001年</option><option>2002年</option><option>2003年</option><option>2004年</option></select><select name="mm" value="month"><option selected="selected">請選擇月</option><option>1月</option><option>2月</option><option>3月</option><option>4月</option><option>5月</option></select><select name="dd" value="day"><option selected="selected">請選擇日</option><option>1日</option><option>2日</option><option>3日</option><option>4日</option><option>5日</option></select></td></tr><tr><td>所在地區</td><td><input type="text" name="where" value="請輸入所在地區" /></td></tr><tr><td>婚姻狀況</td><td><input type="radio" id="未婚" name="marry" /><label for="未婚" value="marry">未婚</label><input type="radio" id="已婚" name="marry" /><label for="已婚" value="marry">已婚</label><input type="radio" id="離婚" name="marry" /><label for="離婚" value="marry">離婚</label></td></tr><tr><td>學歷</td><td><input type="text" name="school" value="請輸入您的學歷" /></td></tr><tr><td>喜歡的類型</td><td><input type="checkbox" id="嫵媚的" name="like" /><label for="嫵媚的" value="like">嫵媚的</label><input type="checkbox" id="可愛的" name="like" /><label for="可愛的" value="like">可愛的</label><input type="checkbox" id="小鮮肉" name="like" /><label for="小鮮肉" value="like">小鮮肉</label><input type="checkbox" id="老臘肉" name="like" /><label for="老臘肉" value="like">老臘肉</label><input type="checkbox" id="都喜歡" name="like" checked="checked" /><label for="都喜歡" value="like">都喜歡</label></td></tr><tr><td>自我介紹</td><td><textarea rows="3" cols="20" name="introduce" value="introduce">請輸入自我介紹</textarea></td></tr><tr><td rowspan="4"></td><td><input type="submit" value="免費注冊" /></td></tr><tr><td><input type="checkbox" name="yes" value="yes" checked="checked" />我同意注冊條款和會員加入標準</td></tr><tr><td><a href="http://www.baidu.com">我是會員，立即登錄</a></td></tr><tr><td><h4>我承諾</h4><ul><li>年滿十八歲、單身</li><li>抱著嚴肅的態度</li><li>真誠尋找另一半</li></ul></td></tr></table></form> </body> </html>總結
以上是生活随笔為你收集整理的表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于RS485的DMA发送，以及EN使能
- 下一篇： 爱普生K101 K201 K301 L1