當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例

發(fā)布時間：2024/1/1 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

表格標簽

表格主要用于展示數(shù)據(jù)

1.<table> </table> 是用于定義表格的標簽。

2.<tr> </tr> 標簽用于定義表格中的行，必須嵌套在 <table> </table>標簽中。

3.<td> </td> 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中。

4.字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。

?height? ? ? ? 像素值或百分比????????規(guī)定表格的高度

表頭標簽

表頭單元格內(nèi)的文本會加粗居中

<thead></thead>，<tbody></tbody>標簽

1. <thead></thead>：用于定義表格的頭部。<thead> 內(nèi)部必須擁有 <tr> 標簽

2. <tbody></tbody>：用于定義表格的主體，主要用于放數(shù)據(jù)本體

能夠讓表格的結構更加的清晰

今日小說排行榜案例

<!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="合并單元格的個數(shù)"，最上側單元格為目標單元格, 寫合并代碼

跨列合并：colspan="合并單元格的個數(shù)"，最左側單元格為目標單元格, 寫合并代碼

?列表標簽

列表是用來布局的，列表分為三大類：無序列表、有序列表和自定義列表。

無序列表

無序列表的各個列表項之間沒有順序級別之分，是并列的

?<ul></ul>中只能嵌套<li></li>，在<ul></ul>中輸入其他標簽或文字是不允許的

<li></li>相當于一個容器，可以容納所有元素

無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設置

有序列表

?<ol></ol>中只能嵌套<li></li>，在<ol></ol>中輸入其他標簽或文字是不允許的

<li></li>相當于一個容器，可以容納所有元素

有序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設置

自定義列表

<dl> 標簽用于定義描述列表（或定義列表），該標簽會與 <dt>（定義項目/名字）和 <dd>（描述每一個項目/名字）一起使用

??<dl></dl>中只能包含<dt></dt>和<dd></dd>?

<dt></dt>和<dd></dd>的個數(shù)沒有限制，通常是一個<dt></dt>對應多個<dd></dd>

?表單標簽

一個完整的表單通常由表單域、表單控件（也稱為表單元素）和提示信息3個部分構成

?表單域是一個包含表單元素的區(qū)域, <form></form>?標簽用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞，<form></form>會把它范圍內(nèi)的表單元素信息提交給服務器?

<form action="url地址" method="提交方式" name="表單域名稱">各種表單元素控件</form>

?表單控件

在表單域中可以定義各種表單元素，這些元素就是允許用戶在表單中輸入或選擇的內(nèi)容控件

?<input />輸入表單元素

根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式（可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等）

type屬性值

?<input />其他屬性值

?name和value是每個表單元素都有的屬性值，主要給后臺人員使用

name表單元素的名字，要求單選按鈕和復選框要有相同的name值

?<label></label>標簽

<label> 標簽用于綁定一個表單元素, 當點擊<label> 標簽內(nèi)的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗.

<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同

<select></select>下拉表單元素

在頁面中，如果有多個選項讓用戶選擇，并且想要節(jié)約頁面空間時，我們可以使用<select></select>標簽控件定義下拉列表

<select></select>中最少包含一對<option></option>

在<option></option>定義selected="selected"，表示即為默認選中項

<textarea></textarea>文本域元素

通過<textarea></textarea>可以創(chuàng)建多行文本輸入框

cols="每行的字符數(shù)"，rows="顯示的行數(shù)"，在實際開發(fā)中不使用，用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>所在地區(qū)</td><td><input type="text" name="where" value="請輸入所在地區(qū)" /></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>抱著嚴肅的態(tài)度</li><li>真誠尋找另一半</li></ul></td></tr></table></form> </body> </html>

總結

以上是生活随笔為你收集整理的表格标签，今日小说排行榜案例，合并单元格，无序列表，有序列表，自定义列表，表单标签，注册页面综合案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：关于RS485的DMA发送，以及EN使能
下一篇：爱普生K101 K201 K301 L1