目录
正文开始
1. 列表
1.1 无序列表
布局排列整齐的不需要规定顺序的区域
标签 | 作用 |
---|---|
ul | 代表无序列表 |
li | 列表条目 |
<ul>
<li>文本内容</li>
<li>文本内容</li>
...
</ul>
例如:
需要注意的是,ul内只能放li标签,但li标签里可以放置其他标签。
1.2 有序列表
布局排列整齐的需要规定顺序的区域。
标签 | 作用 |
---|---|
ol | 代表有序列表 |
li | 列表条目 |
<ol>
<li>文本内容</li>
<li>文本内容</li>
...
</ol>
例如:
同无序列表一样,ol内只能放li标签,但li标签里可以放置其他标签。
1.3 定义列表
一个标题对应多个內容的区域
标签 | 作用 |
---|---|
dl | 代表定义列表 |
dt | 列表标题 |
dd | 列表描述 |
<dl>
<dt>列表标题</dt>
<dd>列表描述</dd>
...
</dl>
例如:
其中,dl 内只能放 dt 、dd 标签,但 dt、dd 标签里可以放置其他标签。
2. 表格
2.1 表格基本标签
网页中的表格与 Excel 表格类似
标签 | 作用 |
---|---|
table | 表示表格 |
tr | 表示表格的一行 |
th | 表示表格表头內容,文本会加粗 |
td | 表示表格內容 |
border | 为表格添加边框线的属性 |
<table border="1">
<tr>
<th>表头內容</th>
<td>表格內容</td>
...
</tr>
</table>
例如:
2.2 表格结构标签
使用表格结构标签将內容划分区域,让表格结构更清晰。将内容划分区域只是让其结构更清晰,并不会在视觉上产生变化。
标签 | 作用 |
---|---|
thead | 表格头部 |
tbody | 主要內容 |
tfoot | 表格底部 |
例如:
2.3 合并单元格
将多个单元格个合并成一个单元格。需要将指定区域最左最上的单元格添加属性,同时将这个区域内的其他单元格删除。属性的取值就是合并单元格的数量。
属性 | 作用 |
---|---|
rowspan | 跨行合并 |
colspan | 跨列合并 |
例如:
需要注意的是,合并单元格只能在表格的同一结构中进行,不能跨结构合并单元格。
3. 表单
用来收集用户信息
<!-- 使用form标签将表单区域划分出来 -->
<form action="">
</form>
3.1 input 标签基本使用
input 标签用来收集用户信息
<input type=" ">
type 属性 | 说明 |
---|---|
text | 文本框,用于输入单行文本 |
password | 密码框 |
radio | 单选框 |
checkbox | 多选框 |
file | 上传文件 |
例如:
input 标签有占位文本属性
<input type="..." placeholder="提示信息">
例如:
3.1.1 单选框 radio
使用单选框时,可以添加属性来控制
属性 | 作用 |
---|---|
name | 将空间分组,同组中只能选一个 |
checked | 设置默认选项 |
例如:
3.1.2 上传文件 file
默认情况下,文件上传表单控件只能上传一个文件,我们可以使用multiple属性来实现上传多个文件。
<input type=“file” multiple>
3.1.3 多选框 checkbox
同单选框一样,多选框也有默认选择的功能,同样使用checked属性。
<input type=“checkbox” checked>
3.2 表单下拉菜单
可以将多个内容折叠节省空间。
标签 | 作用 |
---|---|
select | 代表下拉菜单整体 |
option | 嵌套在 select 中,代表下拉菜单中的一项 |
selected | 默认选项 |
例如:
3.3 表单文本域
用于多行输入文本的表单控件。
标签 | 作用 |
---|---|
textarea | 表单文本域 |
3.4 label 标签
在网页中,是某个标签的说明文本。
<!-- 可以将控件对应说明文本 -->
<input type="radio" id="控件id">
<label for="控件id">说明文本</label>
例如:
上述 label 标签将“男”和单选框想联系起来,可以实现点击“男”这一字进行选择。
上述代码可以简写成如下:
3.5 按钮 button
与用户交互。
<button type="">提示文本</button>
type 属性值 | 作用 |
---|---|
submit | 提交按钮,点击后可以提交数据到后台 |
reset | 重置按钮,点击后将表单控件区域恢复默认值 |
button | 普通按钮,默认没有功能,一般配合 JavaScript 使用 |
例如:
完