會(huì)涉及關(guān)于表格单鹿、表單馏予、列表的講解
表格：顯示數(shù)據(jù)
表單：獲取用戶數(shù)據(jù)
列表：控制布局
一天梧、表格
主要用于數(shù)據(jù)展示
1.1 創(chuàng)建表格
<--! 定義一個(gè)1行2列的表格 -->
<table>
<tr>
<td>我是單元格1</td>
<td>我是單元格2</td>
</tr>
</table>
table、tr霞丧、td呢岗，他們是創(chuàng)建表格的最基本標(biāo)簽，具體地解釋：
- table用于定義一個(gè)表格蛹尝。
- tr 定義表格中的一行后豫，必須嵌套在 table標(biāo)簽中，在 table中包含幾對(duì) tr突那，就有幾行表格挫酿。
- td 定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中愕难，一對(duì) <tr> </tr>中包含幾對(duì)<td></td>饭豹，就表示該行中有多少列（或多少個(gè)單元格）。
注意:
- <tr></tr>中只能嵌套<td></td> 類的單元格
- <td></td>標(biāo)簽务漩，他就像一個(gè)容器拄衰，可以容納所有的元素
1.2常用屬性
| 屬性名稱 | 含義 | 值 |
|---|---|---|
| border | 表格邊框 | 像素 |
| cellspacing | 單元格之間的間隔 | 像素 |
| cellpadding | 單元格邊框與內(nèi)容的間隔 | 像素 |
| width | 表格寬度 | 像素 |
| height | 表格高度 | 像素 |
| align | 表格的水平居中方式 | left、center饵骨、right |
| rowspan | 跨行合并 | 單元格數(shù)量 |
| colspan | 跨列合并 | 單元格數(shù)量 |
1.3所有標(biāo)簽
<table> 定義表格
<caption> 定義表格標(biāo)題翘悉。
<th> 定義表格的表頭。
<tr> 定義表格的行居触。
<td> 定義表格單元妖混。
<thead> 定義表格的頁(yè)眉。
<tbody> 定義表格的主體轮洋。
<tfoot> 定義表格的頁(yè)腳制市。
<col> 定義用于表格列的屬性。
<colgroup> 定義表格列的組弊予。
1.4單元格合并
1. 確定目標(biāo)單元格位置
目標(biāo)單元格的位置祥楣，原則為上邊的單元格優(yōu)先級(jí)大于下邊的單元格優(yōu)先級(jí),左邊的單元格優(yōu)先級(jí)大于右邊的優(yōu)先級(jí)。
2. 確定合并方式
根據(jù)合并方向，在目標(biāo)單元格確定合并方式為跨行或者跨列误褪。
3. 刪除多余的單元個(gè)
刪除數(shù)量=合并數(shù)量-1
1.5 表格注意
- 表格一般用于數(shù)據(jù)展示责鳍，布局不是一個(gè)好的方案。
- 表格中沒有列元素,列的數(shù)量取決于單元格的數(shù)量兽间。
二历葛、列表
主要用于頁(yè)面布局，與表格類似但更加靈活嘀略，自由度更高恤溶。
2.1 無(wú)序列表ul
語(yǔ)法：
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
注意：
- <ul></ul>中只支持<li></li>
- <li>與</li>之間相當(dāng)于一個(gè)容器，可以容納所有元素
2.2 有序列表ol
語(yǔ)法：
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
......
</ol>
2.3自定義列表
語(yǔ)法：
<dl>
<dt>聯(lián)系我</dt>
<dd>手機(jī)</dd>
<dd>電話</dd>
</dl>
三帜羊、表單
HTML 表單用于搜集不同類型的用戶輸入宏娄。
3.1 表單的構(gòu)成
表單一般由三部分構(gòu)成：表單控件(input)、表單域(form)逮壁、提示信息孵坚。
3.2 表單控件
常用的表單控件包括4種，input系列窥淆、laber卖宠、textarea、select忧饭。
1)input系列控件
input標(biāo)簽中通過type屬性實(shí)現(xiàn)不同的控件扛伍。
控件如下：
| type屬性值 | 描述 |
|---|---|
| text | 單行文本框 |
| password | 密碼輸入框 |
| radio | 單選按鈕 |
| checkbox | 復(fù)選框 |
| button | 普通按鈕 |
| submit | 提交按鈕 |
| reset | 重置按鈕 |
| image | 圖片按鈕 |
| file | 文件域 |
注意：
- 如果想實(shí)現(xiàn)單選框效果,必須要設(shè)置名稱且相同。
2)textarea控件
用于留言的多行文本輸入词裤。
語(yǔ)法：
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
文本內(nèi)容
</textarea>
3)laber控件
用于綁定一個(gè)表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時(shí)候, 被綁定的表單元素就會(huì)獲得輸入焦點(diǎn)刺洒。
表現(xiàn)為：在一些輸入如：?jiǎn)芜x框、文本框等,點(diǎn)擊控件前的文本就可以獲得焦點(diǎn)吼砂。
- 用法一：全局使用
<!-- 點(diǎn)擊mele文本,其后的單選框就可以被選中 -->
<label> male <input type="radio" name="sex" value="male"> </label>
- 用法二：分開綁定
<label for="male">Male</label>
<input type="radio" name="sex" id="male">
4)select控件
多個(gè)選項(xiàng)讓用戶選擇逆航，為了節(jié)約空間，可以使用select控件定義下拉菜單.
<select>
<option>選項(xiàng)1</option>
<option>選項(xiàng)2</option>
<option>選項(xiàng)3</option>
</select>
選擇默認(rèn)屬性：
...
<option selected =" selected ">選項(xiàng)1</option>
...
3.3表單屬性
| 屬性名稱 | 屬性值 | 屬性描述 |
|---|---|---|
| type | 上表所示 | 選擇控件類型 |
| name | 自定義 | 控件名稱 |
| value | 自定義 | 默認(rèn)文本值 |
| size | 正整數(shù) | 控件的顯示寬度 |
| checked | checked | 控件的默認(rèn)選中項(xiàng)目 |
| maxlength | 正整數(shù) | 控件允許輸入的最大字?jǐn)?shù) |
1)type屬性
用戶名: <input type="text" />
密 碼：<input type="password“ />
2)value屬性
用戶名:<input type="text" name="username" value="請(qǐng)輸入用戶名">
3)name屬性
用戶名:<input type="text" name=“username” />
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
4)checked屬性
性 別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
3.4 表單域
在HTML中渔肩，form標(biāo)簽被用于定義表單域因俐，即創(chuàng)建一個(gè)表單，以實(shí)現(xiàn)用戶信息的收集和傳遞周偎，form中的所有內(nèi)容都會(huì)被提交給服務(wù)器抹剩。
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</for
常用屬性
- action：用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
- method：用于設(shè)置表單數(shù)據(jù)的提交方式蓉坎，其取值為get或post澳眷。
- name：用于指定表單的名稱，以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單蛉艾。
四钳踊、資料
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
<end>
