一.列表
1.作用：
布局内容排列整齐的区域
2.列表分类：
无序列表，有序列表，定义列表
其中无序列表主要用于布局排列整齐的不需要规定区域的区域
标签为：
html
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
...
</ul>其中ul嵌套li，ul是无序列表，li是列表条目
有序列表的作用为布局排列整齐的需要规定顺序的区域
标签为：
html
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
...
</ol>定义列表的标签为：
html
<dl>
<dt>列表标题</dt>
<dd>列表描述/详情</dd>
...
</dl>二.表格
1.作用：
与Excel表格类似，用来展示数据
2.标签的使用方式：
table（表格）标签嵌套tr（行）标签，tr标签嵌套td（内容单元格）/th（表头单元格）标签
html
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>注意：在网页中表格默认没有边缘线，使用border属性才可以为表格添加边缘线
三.合并单元格
1.作用：
将多个单元格合并成一个单元格，以合并同类信息
2.合并单元格的步骤：
（1）.明确合并目标
（2）.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
跨行合并：保留最上单元格，添加属性rowspan
跨列合并：保留最左单元格，添加属性colspan
3.删除其他单元格
合并单元格前：
html
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>总结</td>
<td>全班第一</td>
<td>全班第一</td>
<td>全班第一</td>
</tr>
</table>
</body>跨行合并后：
跨列合并后：
html
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>100</td>
</tr>
<tr>
<td>李四</td>
<td>99</td>
<!-- <td>100</td> -->
<td>100</td>
</tr>
<tr>
<td>总结</td>
<td colspan="3">全班第一</td>
<!-- <td>全班第一</td>
<td>全班第一</td> -->
</tr>
</table>
</body>三.表单
1.作用：
收集用户信息
2.使用场景：
（1）.登陆页面，（2）.注册页面，（3）.搜索页面
3.input标签基本使用：
input标签基于type属性值不同，则功能不同
html
<input type="...">type属性值包括但不限于：
（1）.text：
文本框，用于输入单行文本
（2）.password：
密码框
（3）.radio：
单选框
（4）.checkbox：
多选框
（5）.file：
上传文件
input标签中的占位文本：
占位文本的作用：提示信息
使用占位文本之前是这样的：
使用占位文本之后则是这样的：
而要添加占位文本也很简单，只需要使用到placeholder属性即可：
由：
html
<input type="text">变为：
html
<input type="text" placeholder="文本框中的提示信息">4.单选框radio
（1）.常用属性：
name：控件名称
checked：默认选中
html
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女5.上传文件file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能
6.多选框checkbox
其中最常使用的属性就是checked默认选中了
html
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">排球
<input type="checkbox" checked>台球四.下拉菜单
1.标签：
select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项
其中的常用属性为selected，表现为默认的属性值
html
<select>
<option>篮球</option>
<option>足球</option>
<option>排球</option>
<option>网球</option>
<option selected>台球</option>
</select>五.文本域
1.作用：
多行输入文本的表单控件
2.标签：
textarea（双标签）
html
<textarea>提示文字</textarea>注意：在文本域的右下角有拖拽功能，本来都会禁用的，直到后面使用CSS设置尺寸
六.label标签
1.作用：
在网页中作为某个标签的说明文本存在，我们也可以用label标签绑定文字和表单控件的关系，增大表单控件的点击范围
2.label标签的两种写法：
（1）.label标签只包裹内容，不包裹表单控件，同时设置label标签的for属性值和表单控件的id属性值相同
（2）.使用label标签包裹文字和表单控件，不需要属性
html
<input type="radio" id="man">
<label for="man">男</label>
<label><input type="radio">女</label>七.按钮button标签
1.button标签的写法
html
<button type="">提示文字</button>2.type标签的属性值
submit：提交按钮，点击后将数据提交到后台
reset：重置按钮，点击后将表单控件恢复默认值
button：普通按钮，默认没有功能，会配合JavaScript使用
八.布局标签
1.作用：
对网页进行布局，便于划分网页区域，摆放内容
2.div：
独占一行
3.span：
不换行
注意：div和span都为双标签，内容只需要放到两个标签之间即可
4.字符实体
作用：在网页中显示预留字符（因为直接输入这些字符是不会显示的）
（1）. ：空格( )
（2）.<：小于符号(<)
（3）.>：大于符号(>)