10-1 body標簽裏面相關的標簽（列表，表單，表格）
一 列表標簽<ul>,<ol>,<dl>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表標簽</title>
</head>
<body>
<!--ul無序列表-->
<ul>
<li>北京</li>
<li>上海</li>
<li>香港</li>
</ul>
<!--有序列表-->
<ol type="a">
<li>你</li>
<li>好</li>
<li>嗎</li>
</ol>
<!--定義列表-->
<!--dt、dd只能在dl裏面；dl裏面只能有dt、dd-->
<dl>
<dt>第一條規則</dt>
<dd>不準睡覺</dd>
<dd>不準吃飯</dd>
<dd>不準走神</dd>
</dl>
<dl>
<dt>北京</dt>
<dd>國家首都，政治文化中心</dd>
<dd>汙染很嚴重，有故宮，長城</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
</dl>
<dl>
<dt>廣州</dt>
<dd>中國南大門，有珠江、小蠻腰</dd>
</dl>
</body>
</html>
二 表格標簽<table>
!--表格標簽用<table>表示。-->
<!--一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。-->
<!--表格的<thead>標簽、<tbody>標簽、<tfoot>標簽-->
（1）<table>的屬性：
border：邊框。像素為單位。
style="border-collapse:collapse;"：單元格的線和表格的邊框線合並
width：寬度。像素為單位。
height：高度。像素為單位。
bordercolor：表格的邊框顏色。
align：表格的水平對齊方式。屬性值可以填：left right center。
註意：這裏不是設置表格裏內容的對齊方式，如果想設置內容的對齊方式，要對單元格標簽<td>進行設置）
cellpadding：單元格內容到邊的距離，像素為單位。默認情況下，文字是緊挨著左邊那條線的，即默認情況下的值為0。
註意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。如果設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。
cellspacing：單元格和單元格之間的距離（外邊距），像素為單位。默認情況下的值為0
bgcolor="#99cc66"：表格的背景顏色。
background="路徑src/..."：背景圖片。
背景圖片的優先級大於背景顏色。
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表格標簽</title> 6 </head> 7 <body> 8 <!--border邊框--> 9 <!--style="border-collapse:collapse細邊框--> 10 <table border="1" style="border-collapse:collapse;"View Code> 11 <caption>人物介紹</caption> 12 <tbody> 13 <tr> 14 <td>孫悟空</td> 15 <td>500</td> 16 <td>男</td> 17 <td rowspan="3">中國</td> 18 </tr> 19 </tbody> 20 <tfoot> 21 <tr> 22 <td>小月月</td> 23 <td>45</td> 24 <td>男</td> 25 26 </tr> 27 </tfoot> 28 <thead> 29 <tr> 30 <td>鄧紫棋</td> 31 <td>23</td> 32 <td>女</td> 33 34 </tr> 35 </thead> 36 </table> 37 38 39 </body> 40 </html> 41 ? 2018 GitHub, Inc.
（2）表格的<thead>標簽、<tbody>標簽、<tfoot>標簽
這三個標簽有與沒有的區別：
- 1、如果寫了，那麽這三個部分的代碼順序可以任意，瀏覽器顯示的時候還是按照thead、tbody、tfoot的順序依次來顯示內容。如果不寫thead、tbody、tfoot，那麽瀏覽器解析並顯示表格內容的時候是從按照代碼的從上到下的順序來顯示。
- 2、當表格非常大內容非常多的時候，如果用thead、tbody、tfoot標簽的話，那麽數據可以邊獲取邊顯示。如果不寫，則必須等表格的內容全部從服務器獲取完成才能顯示出來。
三 表單標簽<form>
表單標簽用<form>表示，用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
屬性：
name：表單的名稱，用於JS來操作或控制表單時使用；id：表單的名稱，用於JS來操作或控制表單時使用；action：指定表單數據的處理程序，一般是PHP，如：action=“login.php”method：表單數據的提交方式，一般取值：get(默認)和post
1， input 輸入標簽
屬性：
type="屬性值"：文本類型。屬性值可以是：text（默認）password：密碼類型radio：單選按鈕，名字相同的按鈕作為一組進行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。
）。非常像以前的收音機，按下去一個按鈕，其他的就擡起來了。所以叫做radio。checkbox：多選按鈕，名字相同的按鈕作為一組進行選擇。checked：將單選按鈕或多選按鈕默認處於選中狀態。當<input>標簽的type="radio"時，可以用這個屬性。屬性值也是checked，可以省略。hidden：隱藏框，在表單中包含不希望用戶看見的信息button：普通按鈕，結合js代碼進行使用。submit：提交按鈕，傳送當前表單的數據給服務器或其他程序處理。這個按鈕不需要寫value自動就會有“提交”文字。這個按鈕真的有提交功能。點擊按鈕後，這個表單就會被提交到form標簽的action屬性中指定的那個頁面中去。reset：重置按鈕，清空當前表單的內容，並設置為最初的默認值image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片。file：文件選擇框。
提示：如果要限制上傳文件的類型，需要配合JS來實現驗證。對上傳文件的安全檢查：一是擴展名的檢查，二是文件數據內容的檢查。
value="內容"：文本框裏的默認內容（已經被填好了的）size="50"：表示文本框內可以顯示五十個字符。一個英文或一個中文都算一個字符。
註意size屬性值的單位不是像素哦。readonly：文本框只讀，不能編輯。因為它的屬性值也是readonly，所以屬性值可以不寫。
用了這個屬性之後，在google瀏覽器中，光標點不進去；在IE瀏覽器中，光標可以點進去，但是文字不能編輯。disabled：文本框只讀，不能編輯，光標點不進去。屬性值可以不寫。
例子：
1 <form> 2 姓名：<input value="呵呵" >逗比<br> 3 昵稱：<input value="哈哈" readonly=""><br> 4 名字：<input type="text" value="name" disabled=""><br> 5 密碼：<input type="password" value="pwd" size="50"><br> 6 性別：<input type="radio" name="gender" value="male" checked="">男 7 <input type="radio" name="gender" value="female" >女<br> 8 愛好：<input type="checkbox" name="love" value="eat">吃飯 9 <input type="checkbox" name="love" value="sleep">睡覺 10 <input type="checkbox" name="love" value="bat">打豆豆 11 </form>
2 ，按鈕標簽
1 <form> 2 <input type="button" value="普通按鈕"><br> 3 <input type="submit" value="提交按鈕"><br> 4 <input type="reset" value="重置按鈕"><br> 5 <input type="image" src="images/bojie.jpeg" width="400" value="圖片按鈕2"><br> 6 <input type="file" value="文件選擇框"> 7 </form>
3 下拉標簽<select>
<select>標簽裏面的每一項用<option>表示。select就是“選擇”，option“選項”。
select標簽和ul、ol、dl一樣，都是組標簽。
<select>標簽的屬性：
multiple：可以對下拉列表中的選項進行多選。沒有屬性值。size="3"：如果屬性值大於1，則列表為滾動視圖。默認屬性值為1，即下拉視圖。
<option>標簽的屬性：
selected：預選中。沒有屬性值
例子：
<form> <!--下拉標簽--> <!--selected：預選中。沒有屬性值。--> <select> <option value="a">小學</option> <option value="">初中</option> <option value="">高中</option> <option value="">大學</option> <option selected="">研究生</option> </select><br> <!--如果屬性值大於1，則列表為滾動視圖。默認屬性值為1，即下拉視圖--> <select size="3"> <option>小學</option> <option>初中</option> <option>高中</option> <option>大學</option> <option>研究生</option> </select><br> <!--multiple：可以對下拉列表中的選項進行多選。沒有屬性值。--> <select multiple=""> <option>小學</option> <option>初中</option> <option selected="">高中</option> <option selected="">大學</option> <option>研究生</option> </select> </form>
4 lable標簽
1 <input type="radio" name="sex" /> 男 2 <input type="radio" name="sex" /> 女
對於上面這樣的單選框，我們只有點擊那個單選框（小圓圈）才可以選中，點擊“男”、“女”這兩個文字時是無法選中的；於是，label標簽派上了用場。
本質上來講，“男”、“女”這兩個文字和input標簽時沒有關系的，而label就是解決這個問題的。我們可以通過label把input和漢字包裹起來作為整體。
解決方法如下：
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
上方代碼中，input元素要有一個id，然後label標簽有一個for屬性，和id相同，那麽這個label和input就有綁定關系了
10-1 body標簽裏面相關的標簽（列表，表單，表格）