引言
HTML 学习一 - 基础: https://blog.yexca.net/archives/146
HTML 学习二 - 列表、表格与表单: https://blog.yexca.net/archives/150
HTML 学习三 - 网页布局: https://blog.yexca.net/archives/195
列表
列表分为无序、有序列表和定义列表
无序列表
unordered list -> list
1
2
3
4
5
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
效果如下
- 第一项
- 第二项
- 第三项
有序列表
ordered list -> list
1
2
3
4
5
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
效果如下
- 第一项
- 第二项
- 第三项
定义列表
个人记忆: define list -> define title -> define describe
1
2
3
4
5
6
7
8
<dl>
<dt>第一标题</dt>
<dd>1.1 描述</dd>
<dd>1.2 描述</dd>
<dt>第二标题</dt>
<dd>2.1 描述</dd>
<dd>2.2 描述</dd>
</dl>
效果如下
- 第一标题
- 1.1 描述
- 1.2 描述
- 第二标题
- 2.1 描述
- 2.2 描述
dl 标签里只能包含 dt 和 dd 标签，而 dt 和 dd 标签里可以包含任何内容
表格
| 标签 | 说明 | 个人记忆 |
|---|---|---|
| table | 定义表格 | |
| tr | 表格的行 | table row |
| th | 表头单元格 | table head |
| td | 内容单元格 | table data |
以下结构标签可以省略，主要是面向浏览器
| 标签 | 说明 |
|---|---|
| thead | 定义头部内容 |
| tbody | 定义表格主体 |
| tfoot | 定义表格底部，汇总信息 |
表格示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table>
<thead>
<tr>
<th>\</th>
<th>x</th>
<th>y</th>
<th>total</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>50</td>
<td>50</td>
<td>100</td>
</tr>
<tr>
<td>b</td>
<td>50</td>
<td>50</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tfoot>
</table>
效果如下
| \ | x | y | total |
|---|---|---|---|
| a | 50 | 50 | 100 |
| b | 50 | 50 | 100 |
| total | 100 | 100 | 100 |
单元格合并
表格合并分为跨行合并与跨列合并，合并后应该删除被合并的单元格
| 属性 | 说明 |
|---|---|
| rowspan | 跨行合并，值为合并的行数 |
| colspan | 跨列合并，值为合并的列数 |
例如将以上表格第二行第二列与第三行第二列跨行合并，最后一行最后三列跨列合并
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<table>
<thead>
<tr>
<th>\</th>
<th>x</th>
<th>y</th>
<th>total</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<!-- 此处增加跨行合并属性 -->
<td rowspan="2">50</td>
<td>50</td>
<td>100</td>
</tr>
<tr>
<td>b</td>
<!-- 此内容可以删除，此处注释 -->
<!--<td>50</td>-->
<td>50</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total</td>
<!-- 此处增加跨列合并属性 -->
<td colspan="3">100</td>
<!-- 此内容可以删除，此处注释 -->
<!--<td>100</td>
<td>100</td>-->
</tr>
</tfoot>
</table>
效果如下
| \ | x | y | total |
|---|---|---|---|
| a | 50 | 50 | 100 |
| b | 50 | 100 | |
| total | 100 | ||
如果使用了结构标签 (thead, tbody, tfoot) 则不能跨结构合并，例如以上表格第三行不能和最后一行合并
表单
form 标签
一张表单需要使用 form 标签确定表单的区域，以下所述标签需要放在 form 标签内
input 标签
多数表单使用 input 标签实现，根据 type 属性值的不同，实现不同功能
| type 属性值 | 说明 |
|---|---|
| text | 文本框 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
占位文本
占位文本即提示信息，文本框和密码框可以使用
1
<input type="text" placeholder="提示信息" />
效果如下
单选框 radio
| 属性 | 作用 |
|---|---|
| name | 控件名称 |
| checked | 默认选中 |
以下代码实现选择性别
1
2
3
性别：
<input type="radio" name="gender" checked />男
<input type="radio" name="gender" />女
效果如下
性别： 男 女
文件上传
默认情况下 file 类型只能上传一个文件，若要上传多个文件，可以添加 multiple 属性
1
<input type="file" multiple />
多选框 checkbox
又称复选框，默认选择可以使用属性 checked
1
2
3
4
<input type="checkbox" checked /> a
<input type="checkbox" /> b
<input type="checkbox" /> c
<input type="checkbox" /> d
下拉菜单
1
2
3
4
5
6
7
<select>
<option>CN</option>
<option>USA</option>
<option>UK</option>
<!-- selected 指定默认选中 -->
<option selected>JP</option>
</select>
文本域
实现多行输入文本的表单控件，一般为个人简介
1
<textarea>提示信息</textarea>
label 标签
用于网页中某个标签的说明文本，还可以用于绑定文字和表单控件的关系，增大表单控件的点击范围
例如上述性别单选框只有选中圆圈才可选择单选框，而使用此标签后可以实现选择文字也可选中单选框
方法一
input 标签添加 id 属性，label 标签添加 for 属性，俩属性值相同
1
2
3
4
<input type="radio" name="gender" id="male"/>
<label for="male">男</label>
<input type="radio" name="gender" id="female"/>
<label for="female">女</label>
方法二
直接使用 label 标签包裹文字和表单控件
1
2
<label><input type="radio" name="gender" />男</label>
<label><input type="radio" name="gender" />女</label>
支持 label 标签增大点击范围的控件包括：文本框、密码框、上传文件、单选框、复选框、下拉菜单、文本域等
按钮
button 标签根据 type 属性值的不同，功能不同
| type 属性值 | 说明 |
|---|---|
| submit | 默认功能，提交数据到后台 |
| reset | 重置按钮，将表单控件恢复默认值 |
| button | 普通按钮，需配合 JavaScript 使用 |
1
<button type="">按钮</button>