1. 列表
- 布局内容排列整齐的区域
- 分类:无序列表、有序列表、定义列表
1.1 无序列表
1.2 有序列表
- 动手实践
1.3 定义列表
- 动手实践
2.表格
- 动手实践
2.1 表格结构标签 thead tbody tfoot
- 加这个标签看不出效果的,了解一下就行
2.2 合并单元格
- 不能跨结构标签合并
<!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 border = "1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
<td>88</td>
</tr>
<tr>
<td>小红</td>
<td>85</td>
<td>100</td>
<td>91</td>
</tr>
<tr>
<td>小刚</td>
<td>78</td>
<td>100</td>
<td>86</td>
</tr>
<tr>
<td>总结</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
</table>
<!-- 跨行合并 -->
<table border = "1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
<td>88</td>
</tr>
<tr>
<td>小红</td>
<td>85</td>
<td rowspan="2">100</td>
<td>91</td>
</tr>
<tr>
<td>小刚</td>
<td>78</td>
<td>86</td>
</tr>
<tr>
<td>总结</td>
<td>优秀</td>
<td>优秀</td>
<td>优秀</td>
</tr>
</table>
<!-- 跨列合并 -->
<table border = "1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
<td>88</td>
</tr>
<tr>
<td>小红</td>
<td>85</td>
<td>100</td>
<td>91</td>
</tr>
<tr>
<td>小刚</td>
<td>78</td>
<td>100</td>
<td>86</td>
</tr>
<tr>
<td>总结</td>
<td colspan="3">优秀</td>
</tr>
</table>
</body>
</html>
3.表单
- 作用:收集用户信息,如登录界面,注册界面,搜索区域
3.1input标签
- 单标签
- 动手实践
3.1.1 input标签占位文本
- placeholder添加提示内容就可以了
3.1.2 单选框radio、
- name相同的radio是一组
- checked属性可以让单选框直接选中
3.1.3 上传文件
3.1.4 多选框
3.2 下拉菜单
3.3 文本域标签
- 作用:多行输入文本的表单控件
3.4 label标签
- 两种增大点击范围的写法:可用于文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域
3.5 按钮标签
3.6 布局标签div和span
3.7 字符实体
- 作用:在网页中显示预留字符
1