1、列表
作用：布局内容排列整齐的区域
列表分类：无序列表、有序列表、定义列表
1.1 无序列表
作用：布局排列整齐的不需要规定顺序的区域
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目
注意事项：ul标签里面只能包裹li标签
1.2 有序列表
作用：布局排列整齐的需要规定顺序的区域
标签：ol 嵌套，ol 是有序列表，li 是列表条目
注意事项：
- ol标签里面只能包裹li标签
- li标签里面可以包裹任何内容
1.3 定义列表
标签：dl 嵌套 dt 和 dd，dl是定义列表，dt是定义列表的标题，dd是是定义列表的描述 / 详情
注意事项：
- dl 里面只能包含 dt 和 dd
- dt 和 dd 里面可以包含任何内容
2、表格
网页中的表格与Excel表格类似，用来展示数据
标签：table 嵌套 tr，tr嵌套 td / th。
| 标签名 | 说明 |
| table | 表格 |
| tr | 行 |
| th | 表头单元格 |
| td | 内容单元格 |
提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线
2.1 表格结构标签-了解
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰
| 标签名 | 含义 | 特殊说明 |
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主体 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
<!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"> <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>90</td> <td>100</td> <td>190</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>全市第一</td> <td>全市第一</td> <td>全市第一</td> </tr> </tfoot> </table> </body> </html>
2.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.0"> <title>Document</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>100</td> --> <td>198</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="3">全市第一</td> <!-- <td>全市第一</td> <td>全市第一</td> --> </tr> </tfoot> </table> </body> </html>
3、表单
作用：手机用户信息
使用场景：
- 登录页面
- 注册页面
- 搜索区域
4、input标签基本使用
input 标签 type 属性值不同，则功能不同。
| type属性值 | 说明 |
| text | 文本框，用于输入单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
5、input标签占位文本
占位文本：提示信息
注意：
- 占位符：placeholder
- 如果需要实现单选效果，需要设置相同的name属性值
- 单选框和多选框的默认选中：checked
6、单选框 radio
| 属性名 | 作用 | 特殊说明 |
| name | 控件名称 | 控件分组，同组只能选中一个（单选功能） |
| checked | 默认选中 | 属性名和属性值相同，简写为一个单词 |
7、上传文件- file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能
8、多选框-checkbox
多选框也叫复选框。
默认选中：checked
9、下拉菜单
标签：select 嵌套 option，select是下拉菜单整体，option是下拉菜单的每一项
常见属性：selected：下拉菜单的默认选中
10、文本域
作用：多行输入文本的表单控件
标签： textarea ，双标签
常见属性：
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
11、label标签
经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。
之前是只能在小圆圈里面点击才能选中，使用label使它点击男或女也可以选中
11.1 label标签-增大点击范围
写法一：
- label标签只包裹内容，不包裹表单控件
- 设置label标签的for属性值和表单控件的id属性相同
写法二：
- 使用label标签包裹文字和表单控件，不需要属性
提示：支持label标签增大点击范围的表单控件：文本框、上传文件、单选框、多选框、下拉菜单、文本域等等。
12、按钮-button
| type属性值 | 说明 |
| submit | 提交按钮，点击后可以提交数据到后台（默认功能） |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合JavaScript使用 |
注意：
如果需要实现以上按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
13、无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
- div：独占一行
- span：不换行
14、字符实体
作用：在网页中显示预留字符
15、综合案例一
<!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> <ul> <li> <img src="../photo/1.jpg" alt=""> <h3>吃泡面咋了，不让吃</h3> </li> <li> <img src="../photo/2.jpg" alt=""> <h3>柠檬头，我好爱，你爱嘛</h3> </li> <li> <img src="../photo/3.jpg" alt=""> <h3>冬天了，冬天了，降温了</h3> </li> </ul> </body> </html>
16、综合案例二-注册信息
<!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> <h1>注册信息</h1> <form action=""> <!-- 表单控件 --> <!-- 个人信息 --> <h2>个人信息</h2> <label for="">姓名：</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" checked> 男</label> <label><input type="radio" name="gender"> 女</label> <br><br> <label>居住城市：</label> <select> <option>北京</option> <option>上海</option> <option>武汉</option> <option>广州</option> <option>深圳</option> </select> <!-- 教育经历 --> <h2>教育经历</h2> <label>最高学历：</label> <select> <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>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> -- <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</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>
