目录
1.列表
①作用：布局内容排列整齐的区域
②分类：
（1）无须列表：如一个产品的分类介绍。作用是布局排列整齐的不需要规定顺序的区域。【ul嵌套li，ul是父级，无序列表；li是子级，列表条目。】
square：把无序列表项的标记样式设置为正方形。
disc：默认值
circle：列表项标记为空心圆。
none：不显示任何列表项标记。
（2）有序列表：如一个教程。作用是布局排列整齐的需要规定顺序的区域。【ol嵌套li，ol是父级。有序列表；li是子级，列表条目。】
decimal：列表项标记为十进制数字（1, 2, 3...）。decimal-leading-zero：列表项标记为带前导零的十进制数字（01, 02, 03...）。lower-alpha：列表项标记为小写英文字母（a, b, c...）。upper-alpha：列表项标记为大写英文字母（A, B, C...）。lower-latin：与lower-alpha相同，列表项标记为小写英文字母（a, b, c...）。lower-roman：列表项标记为小写罗马数字（i, ii, iii...）。upper-roman：列表项标记为大写罗马数字（I, II, III...）。
（3）定义列表：如网页的帮助中心。【dl嵌套dt和dd，dl是定义列表，dt是定义列表标题，dd是定义列表的描述/详情。】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
</head>
<body>
<ul>无序列表
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul><hr>
<ol>有序列表
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
<li>步骤4</li>
<li>步骤5</li>
</ol><hr>
<dl>
<dt>定义列表</dt>
<dd>售后</dd>
<dd>政策</dd>
<dd>查询</dd>
<dd>消费</dd>
<dd>电话</dd>
</dl>
</body>
</html>效果图：
2.表格
| 标签名 | 作用说明 |
| table | 表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
table嵌套tr，tr嵌套td/th
在网页中，表格默认没有边框线！
caption双标签可以为表格加标题！！
border属性可以为表格添加边框线！！！
使用伪类选择器“tr:nth-child(2n)”,可以表示选中表格中的偶数行设置颜色等等属性！！！！
| 标签名 | 定义 | 特殊说明 |
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主体 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
<style>
tr:nth-child(2n)
{
background-color: #10a7d9;
}
</style>
</head>
<body>
<table border="1">
<caption>成绩单</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td>100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>100</td>
<td>198</td>
</tr>
<tr>
<td>王五</td>
<td>90</td>
<td>85</td>
<td>175</td>
</tr>
<tr>
<td>赵六</td>
<td>80</td>
<td>100</td>
<td>180</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>全市第一</td>
<td>全市第一</td>
<td>全市第一</td>
</tr>
</tfoot>
</table>
</body>
</html>效果图：
3.合并单元格
①分类：（1）跨行合并 （2）跨列合并
②步骤：
（1）明确合并目标
（2）保留最左最上单元格，添加属性（取值是数字，表示需要合并单元格数量）
——跨行合并，保留最上单元格，添加属性rowspan
——跨列合并，保留最左单元格，添加属性colspan
（3）删除其他单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
</tr>
</tfoot>
</table>
</body>
</html>效果图：
4.表单
①作用：收集用户信息
②使用场景：登录页面，注册页面，搜素页面
③input标签——登录页面，选择性别页面......
input标签type属性值不同，功能也不同<input type = "....">
（1）type属性值
| type属性值 | 说明 | 名字 | 作用 | 说明 |
| text | 文本框，输入单行文本 | / | / | / |
| password | 密码框 | / | / | / |
| radio | 单选框 | name | 控件名称 | 控件分组，同组织只能选一个（单选） |
| checked | 默认选中 | 属性名和属性值相同，简写一个字母 | ||
| checkbox | 多选框 | 属性：默认选中：checked | ||
| file | 上传文件 | 添加multiple属性，实现文件多选功能 | ||
（2）input标签占位文本（提示信息）
<input type = "..."placeholder = "提示信息">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
</head>
<body>
性别：<input type="radio"name="gender">男
<input type="radio"name="gender">女
<br><br>
最垃圾的国家：<input type="radio"name="gender">中国
<input type="radio"name="国家" checked>日本
<br><br>
文本框：<input type="text"placeholder="请输入用户名">
<br><br>
密码框：<input type="password" placeholder="请输入密码">
<br><br>
单选框：<input type="radio">
<br><br>
兴趣爱好（多选）：<input type="checkbox">前端工程师
<input type="checkbox" checked>后端工程师
<input type="checkbox" checked>算法工程师
<br><br>
上传文件：<input type="file" multiple>
<br><br>
</body>
</html>效果图：
5.下拉菜单
标签：select嵌套option，select是下拉菜单整体，option是每一项。默认功能在option标签上加上selected即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
</head>
<body>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
<option selected>西安</option>
<option>郑州</option>
<option>台湾</option>
<option>天津</option>
<option>成都</option>
<option>重庆</option>
</select>
</body>
</html>效果图：
6.文本域
①作用：多行输入文本的表单控件
②标签：textarea，双标签
③注意：右下角有可拖拽功能，一般会禁用！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
</head>
<body>
<textarea>请输入评论</textarea>
</body>
</html>效果图：
7.label标签
①作用：网页中，某个标签的说明文本
②经验：用此标签绑定文字和表单控件的关系，可增大表单控件的点击范围
③写法
（1）label标签只包裹内容，不包裹表单控件。设置此标签的for属性值和表单控件的id属性值相同
（2）使用此标签包裹文字和表单控件，不需要属性（常用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
</head>
<body>
<input type="radio" name="gender" id="mans"><label for="mans">男</label>
<input type="radio" name="gender" id="girls"><label for="girls">女</label>
<br><hr>
<input type="radio" name="genders" id="man"><label for="man">男</label>
<label><input type="radio" name="genders">女</label>
</body>
</html>
效果图：
8.按钮button
①写法：<button type = "属性">按钮|</button>
②属性：
| 属性值 | 说明 |
| submit | 提交按钮，点击后可提交的数据到后台（默认功能） |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没功能，一般配合JS使用 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网页</title>
</head>
<body>
<form action=""><!--form：表单区域 action是发送数据的地址 重置标签需要在form标签下使用！！！-->
用户名：<input type="text">
<br><br>
密码：<input type="password">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
</body>
</html>效果图：
9.无语义布局标签
①作用：布局网页，划分网页区域，摆放内容
②分类
（1）div——独占一行——<div>内容</div>
（2）span——不换行——<span>内容</span>
10.字符实体
| 显示结果 | 描述 | 实体名称 |
| 空格 |  ； | |
| < | 小于号 | <； |
| > | 大于号 | >； |
作用：在网页中显示预留字符
11.综合训练
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面</title>
</head>
<body>
<h1>注册信息</h1>
<form action="">
<h2>个人信息</h2>
<label>姓名：</label><input type="text" placeholder="请输入真实姓名">
<br><br>
<label>密码：</label><input type="password" placeholder="请输入密码">
<br><br>
<label>确认密码：</label><input type="password" placeholder="请输入密码">
<br><br>
<label>性别：</label>
<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender" checked>女</label>
<br><br>
<label>居住城市：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>西安</option>
<option>武汉</option>
<option>郑州</option>
<option>杭州</option>
</select>
<h2>教育经历：</h2>
<label>最高学历：</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>学士</option>
<option>高职</option>
<option>中职</option>
<option>高中</option>
</select>
<br><br>
<label>学校名称：</label><input type="text">
<br><br>
<label>所学专业：</label><input type="text">
<br><br>
<label>在校时间：</label>
<select>
<option>2025</option>
<option>2024</option>
<option>2023</option>
<option>2022</option>
<option>2021</option>
<option>2020</option>
<option>2019</option>
<option>2018</option>
<option>2017</option>
<option>2016</option>
</select>
<h2>工作经历</h2>
<label>公司名称：</label><input type="text">
<br><br>
<label>工作描述：</label>
<br>
<textarea></textarea>
<br><br>
<input type="checkbox"><label>已阅读并同意以下协议：</label>
<ul>
<li><a href="#">《用户服务协议》</a> </li>
<li><a href="#">《隐私政策》</a> </li>
</ul>
<br><br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>