今天主要學習了表格，列表和表單。
主要作用：用於顯示，展示資料，不是用來佈局頁面的。
1.基本語法：
表格標籤：<table> <.table>用於定義表格的標籤
行標籤：<tr> </tr>定義表格中的行
單元格標籤：<td> </td>定義 表格中的單元格
表頭單元格標籤：<th> </th>
注：<tr>巢狀在<table>裡 <td>巢狀在<tr>裡
表頭單元格也是單元格文字，加粗，居中顯示，在一行，突出重要性。
2.表格的相關屬性：（不常用，通過css來設定，寫在table裡）
align= left左，right右，center居中。（對齊方式）
border=」1「 ：邊框
cellpadding=」數值「：文字和單元格之間的距離
cellspacing=」數值「：單元格和單元格之間的距離
width=」數值「：表格寬度
height=」數值「：表格高度
3. 表結構標籤：
頭部區域：<thead> 一個大的區域，裡邊一定有<tr>
主體區域：<tbody>
4.合併單元格：
①合併單元格方式：
跨行合併：rowspan=」合併單元格個數「
跨列合併：colspan=」合併單元格個數「
②目標單元格：
跨行：最上側為目標單元格，寫合併程式碼
跨列：最左側為目標單元格，寫合併程式碼
刪除多餘單元格
5.表格上方的標題：<caotion> </caption>寫在table開頭
6.案例：
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table align="center" border="1" cellpanding="0" cellspacing="0" width="800" height="800">
<thead>
<tr>
<th colspan="5">簡介</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>姓名</td>
<td>德萊厄斯</td>
<td>專業</td>
<td>嘉裡敦屋裡系</td>
<td rowspan="3"></td>
</tr>
<tr>
<td>性別</td>
<td>男</td>
<td>畢業院校</td>
<td>瓦羅蘭大陸諾克薩斯戰爭學院</td>
</tr>
<tr>
<td>民族</td>
<td>平民</td>
<td>住址</td>
<td>諾克薩斯市政街西蘭花公寓六棟六樓六號</td>
</tr>
<tr>
<td>學歷</td>
<td>小學二年級</td>
<td>郵箱</td>
<td>dles@163.com</td>
<td>聯絡方式：29392132904</td>
</tr>
<tr>
<td>出生日期</td>
<td>瓦羅蘭歷三五八年獨立日</td>
<td>電話</td>
<td>4008823823</td>
<td>郵編：710121</td>
</tr>
<tr>
<td colspan="2">實習經歷</td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
1.無序列表：<ul> </ul>列表項：<li> </li>
沒有順序之分，是並列的。
ul標籤中只能放li標籤，li標籤裡放什麼都可以。
2.有序列表：<ol> </ol>列表項：<li></li>
有順序
ul標籤中只能放li標籤，li標籤裡放什麼都可以。
**3.自定義列表：**用於對術語或名詞進行描述
自定義列表：<dl>
定義專案或名字：<dt>
解釋專案或名字：<dd>
dl標籤只能放dt和dd標籤
4.案例：
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>去超市要買的東西</h3>
<ul>
<li>吃的</li>
<li>
<ul>
<li>餅乾</li>
<li>麵包</li>
<li>巧克力
<ul>
<li>德芙</li>
<li>費列羅</li>
</ul>
</li>
</ul>
</li>
<li>用的</li>
<li>喝的</li>
</ul>
</body>
</html>
為了收集使用者資訊
組成：表單域，表單控制元件（表單，元素），提示資訊
表單域：包含表單元素的區域<form>
form會把它範圍內的表單元素資訊提交給伺服器
三種常見的屬性：action=」提交到的地址「；method=」「提交方式；name=」「表單名字
1.input：輸入表單元素input type=」屬性值「
文字方塊：text
密碼框：password
提交按鈕：submit ，value=「字」提交按鈕中顯示的字
重置按鈕：清空表單或回鶻預設值，reset
無線電鈕：radio，可以實現多選一，但是要實現多選一，要加上name，name 是表單元素的名字，單選的選項name必須一樣。
核取方塊：checkbox，實現多選一，核取按鈕名字也要一樣。value：表單中元素的值。
checked=「checked」，簡寫成checked：預設的選中，可以單，復。
普通按鈕：button，獲取簡訊驗證碼。
lable標籤：將焦點（遊標）轉到或者選擇對應的表單元素上
<lable for="text">使用者名稱：</lable><input type="text" id="text">
for屬性值對相應id屬性值，應當相同。
2.select：下拉表單元素，多個選項讓使用者選擇，節約空間
<select>
<option> </option>
</select>
selected=「selected」,簡寫成selected：預設選中
3.textarea：文字域標籤，內容較多，用於定義多行文字輸入的控制元件。
4.案例：
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table align="center">
<!-- 第一行 -->
<tr>
<td>暱稱</td>
<td><input type="text"></td>
</tr>
<!-- 第二行 -->
<tr>
<td>密碼</td>
<td><input type="password"></td>
</tr>
<!-- 第三行 -->
<tr>
<td>郵箱</td>
<td><input type="text"><select name="" id="">
<option value="">qq.com</option>
</select></td>
</tr>
<!-- 第四行 -->
<tr>
<td>性別</td>
<td><input type="radio" name="xingbie" id="1" checked><label for="1">男</label>
<input type="radio" name="xingbie" id="2"><label for="2">女</label>
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>興趣</td>
<td><input type="checkbox" name="xingqu" id="3"><label for="3">旅遊</label>
<input type="checkbox" name="xingqu" id="4"><label for="4">攝影</label>
<input type="checkbox" name="xingqu" id="5"><label for="5">運動</label>
</td>
</tr>
<!-- 第六行 -->
<tr>
<td>個人介紹</td>
<td></td>
</tr>
<!-- 第七行 -->
<tr>
<td colspan="2">
<textarea name="" id="" cols="45" rows="5"></textarea>
</td>
</tr>
<!-- 第八行 -->
<tr align="center">
<td colspan="2">
<input type="submit" value="註冊">
</td>
</tr>
<!-- 第九行 -->
<tr>
<td>上傳個人照片：</td>
<td></td>
</tr>
<!-- 第十行 -->
<tr>
<td colspan="2">
<input type="file" name="" id="">
</td>
</tr>
</table>
</form>
</body>
</html>
今天學習的內容較多，單詞也很多，需要多記多背多鞏固。