1. 列表
列表總共有三種：無(wú)序列表、有序列表和定義列表。老師來(lái)給大家總結(jié)一下。
無(wú)序列表：無(wú)序列表中列表項(xiàng)和列表項(xiàng)之間不分先后順序。
<ul> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li> <li>列表項(xiàng)3</li> <li>列表項(xiàng)4</li> </ul>
瀏覽器默認(rèn)添加“·”作為先導(dǎo)符號(hào)。li不能單獨(dú)存在，必須包裹在ul里面，反過(guò)來(lái)說(shuō)，ul里面只能有l(wèi)i。而li是一個(gè)容器級(jí)標(biāo)簽，里面可以是任何標(biāo)簽。
有序列表：
<ol> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> </ol>
ol表示ordered list ，意思是有序列表。
定義列表：
<dl> <dt>定義標(biāo)題</dt> <dd>定義描述</dd> <dt>定義標(biāo)題</dt> <dd>定義描述</dd> <dt>定義標(biāo)題</dt> <dd>定義描述</dd> </dl>
dl表示definition list 定義列表 。
dt表示definition title 定義標(biāo)題。
dd表示definition description 定義表述詞兒。
dt、dd只能在dl里面；dl里面只能有dt、dd。
2. 表單
表單就是收集用戶信息的，就是讓用戶填寫(xiě)的、選擇的。
<div> <h3>歡迎注冊(cè)本網(wǎng)站</h3> <form> 所有的表單內(nèi)容，都要寫(xiě)在form標(biāo)簽里面 </form> </div>
div的語(yǔ)義是division“分割”，div標(biāo)簽是最最重要的布局標(biāo)簽，div中的所有元素是一個(gè)小區(qū)域。
form是英語(yǔ)表單的意思，form中間可以添加文本框、密碼框、單選按鈕、復(fù)選框、下拉列表、按鈕、文本域等內(nèi)容。
文本框：
<input type="text" value="默認(rèn)值" />
密碼框：
<input type="password"/>
單選按鈕：
<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女
radio是“收音機(jī)”的意思，input的type的值如果是radio就是單選按鈕。需要注意的是必須要有相同的name屬性，單選按鈕才能互斥。
復(fù)選框：
<input type="checkbox" name="aihao"/> 睡覺(jué) <input type="checkbox" name="aihao"/> 吃飯
下拉列表：
<select> <option>吃飯</option> <option>睡覺(jué)</option> <option>打豆豆</option> </select>
文本域：
<textarea cols="20" rows="10"></textarea>
普通按鈕：
<input type="button" value="我是一個(gè)普通按鈕" />
提交按鈕：
<input type="submit" />
3. 綜合演練
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>表單實(shí)戰(zhàn)演練</title> </head> <body> <div> <h2>表單</h2> <form> <p>請(qǐng)選擇您的性別： <input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" checked="checked" /> <label for="nv">女</label> </p> <p> 請(qǐng)選擇你的愛(ài)好： <input type="checkbox" name="aihao"/> 睡覺(jué) <input type="checkbox" name="aihao"/> 吃飯 <input type="checkbox" name="aihao"/> 足球 <input type="checkbox" name="aihao"/> 籃球 <input type="checkbox" name="aihao"/> 乒乓球 <input type="checkbox" name="aihao"/> 打豆豆 </p> <p>請(qǐng)選擇您的家鄉(xiāng)： <select> <option>北京</option> <option>河北</option> <option>河南</option> <option>山東</option> <option>山西</option> <option>湖北</option> <option>安徽</option> </select> </p> <p> <input type="submit" /> <input type="reset" /> </p> <p>請(qǐng)輸入您的賬戶名： <input type="text" value="" /> </p> <p>請(qǐng)輸入您的密碼： <input type="password" /> </p> <p> <input type="button" value="登錄" /> <input type="reset" /> </p> <p>請(qǐng)輸入您的建議和要求：</p> <textarea cols="30" rows="10"></textarea> </form> </div> </body> </html>
效果圖：
