1. 表格常用标签及属性
1.1 表格标签基本使用
表格的主要作用是什么？
以行、列的方式（表格）整齐地展示数据，例如：股票价格用表格布局页面
表格的基本语法：
| 单元格内容 |
常用的表格标签有几个？分别代表什么含义？
三个基本的表格标签：
序号标签名说明1table表格标签，用于包含多个 tr2tr定义表格中的行，用于包含多个 td3td定义表格中的单元格，用于存放单元格内容注意:
table 和 tr 是用来搭建表格结构的，不能存放实际内容；td 是用来存放单元格数据的。
| 序号 | 姓名 | 性别 |
| 1 | 张三 | 男 |
| 2 | 李四 | 男 |
| 3 | 王五 | 女 |
1.2 表头单元格标签
表头标签的作用是什么？
第一行通常用来显示标题而不是实际的数据，这样可以方便用户阅读和理解下放表格数据的含义
标签是什么？
th同样可以存放内容，但是默认会被加粗并且居中显示。
| 序号 | 姓名 | 性别 | |
| 1 | 张三 | 男 | |
| 2 | 李四 | 男 | |
| 3 | 王五 | 女 |
1.3 表格相关属性
表格属性应该写在哪一个标签中？为什么？
属性是用来描述标签的特征（显示效果）的，因此属性都应该写在 table 标签中
属性语法复习：
注意：
属性名不需要引号属性值必须要用引号，通常使用双引号属性="值" 这种定义方式又被称为键值对 —— 属性名：键 / 属性值：值 / 成对出现每一个键值对之间使用空格分隔
表格的常用属性：
属性名属性值描述alignleft、center、right对齐方式border宽度像素值或 “”表格边框，默认 “” 无边框width像素值宽度height像素值高度cellspacing像素值单元格之间的间距，默认 2 像素cellpadding像素值内容与边框之间的距离，默认 1 像素表格居中显示，设置表格边框、宽度、高度、内容间距和单元格间距。
| 序号 | 姓名 | 性别 | |
| 1 | 张三 | 男 | 2 | 李四 | 男 | 3 | 王五 | 女 |
2. 表格结构和常用列表
2.1 表格结构标签
就语义而言，表格可以被划分成哪两个区域？分别对应什么标签？
就语义而言，表格可以被划分成以下两个区域：
thead 定义表格头部（标题行），必须拥有 tr 标签，一般位于第一行tbody 定义表格的主体，通常包含标题行下方的表格数据区域
注意：thead 和 tbody 只是用来划分表格结构的，区分标题行和数据区域，不能替代原有的 tr、th、td 标签的作用。
2.2 合并单元格
合并单元格有那两种方式？
合并单元格的方式：
跨行合并（rowspan），把多个行的单元格合并 → 纵向合并跨列合并（colspan），把多个列的单元格合并 → 横向合并
合并单元格的步骤是什么？
明确合并方式（跨行 / 跨列）找到目标单元格 td，增加合并单元格属性
跨行 rowspan="x"（纵向）跨列 colspan="y"（横向）
| 学生信息 | |||
|---|---|---|---|
| 姓名： | 巨小帅 | 班级： | 合肥10期 |
| 出生日期： | 2000-02-14 | 性别： | 小帅 |
| 手机号： | 110 | 微信号： | 119 |
删除多余的单元格
2.3 无序列表
列表的主要是用来做什么的？
列表就是用来布局的，可以整齐、有序的展示数据，用列表做布局会更加自由和方便；
我们一共要学习几种列表？
无序列表（ul）有序列表（ol）自定义列表（dl）
无序列表一共有几个标签？分别是什么，作用是什么？有什么注意事项？
无序列表的的基本语法：
- 列表项
- 列表项
- 列表项
...
两个无序列表标签：
ul无序列表，只允许包含多个 li 标签li用于存放列表项内容
注意：ul 是用来搭建结构的，不能存放实际内容；ul 只允许包含多个 li 标签；li 是用来存放列表项数据的
2.4 有序列表
有序列表和无序列表有什么区别？
有序列表 ol 会在列表项前面自动增加数字排序，并且排序依次递增；
有序列表的的基本语法与无序列表基本一直，只需要把 ul 替换成 ol 即可：
- 列表项
- 列表项
- 列表项
...
有序列表除了序号之外，与无序列表的使用及注意事项有区别吗？
有序列表除了序号之外，与无序列表的使用及注意事项没有区别。
3. 自定义列表和表单
3.1 自定义列表
自定义列表的应用场景是什么？
网站首页下方的网站导航通常可以使用自定义列表来实现
自定义列表的基本语法：
-
...
-
...
注意：虽然一个 dl 中可以包含多个 dt，但是在实际开发中通常只包含一个 dt，因为这样更方便布局
自定义列表的标签有几个？分别代表什么含义？
三个自定义列表标签：
序号标签名说明1dl自定义列表，只允许包含 dt 和 dd 标签2dt用于存放关键词(term)内容，与 dd 是兄弟关系，不过后续的 dd 都跟随前面的 dt3dd用于存放前面 dt 关键词的列表项内容3.3 表单使用场景以及分类
表单的应用场景是什么？
在开发网站时，可以使用表单收集用户信息，统一提交给后台处理；
表单由那几部分组成？
表单通常包含 3 个部分：
表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性别等完整的用户信息记录；表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓名；提示信息：提示用户每一个表单控件是收集什么信息的。
3.4 表单域
表单域的作用是什么？
实现用户信息的收集与传递，例如收集用户的完整信息，然后统一传递给后台；表单的基本语法：
3.5 input 之 type 属性文本框和密码框
表单控件的作用是什么？
用户通过表单控件能够输入或者选择内容，以达到通过表单收集信息的目的。
表单控件可以分为几大类？
表单控件包含以下三大类：
input 输入select 选择textarea 文本域
input 标签的基本语法：
type 的常用属性值：
类型属性值描述输入text输入文字输入password密码选择radio单选按钮，多选一选择checkbox复选框（打勾）点击选择文件file文件上传使用点击button按钮点击image按钮表单操作submit提交，会把数据发送给服务器表单操作reset重置，会清空表单所有数据4. 表单输入
4.1☆ input 之 type 属性提交和重置按钮
提交按钮的作用是什么？
提交按钮（sumbit) 可以把表单域中的数据提交给后台
重置按钮的作用是什么？
重置按钮（reset) 可以把表单域中的数据清空
value 属性有什么用处？
通过 value 属性可以指定提交按钮或重置按钮中的文字
4.2 input 之 type 属性单选按钮和复选框
单选框的应用场景是什么？
在多选一的时候，使用单选框（radio），例如：性别；
复选框的应用场景是什么？
在多选多的时候，使用复选框（checkbox)，例如：爱好。
注意：在开发时，无论是单选还是复选，都不适合提供太多选项
4.3 input 之 name 和 value 属性
哪一个属性能够把表单控件区分开？（不同的控件负责收集不同的信息）
name 属性可以把表单控件区分开value 属性可以记录用户在控件中输入的值或者选择结果
怎样能够在多个单选按钮中，只允许用户选择一项？
同一组单选框或复选框，name 属性的值应该一致
5. 表单输入
5.1 input 之 checked 和 maxlength 属性
checked 属性的应用场景是什么？
如果用户要修改之前保存过的信息，checked 属性可以选中用户之前的选择，例如：修改个人信息用 checked 属性可以帮助用户默认同意用户协议；
maxlength 属性的应用场景是什么？
输入框输入项有长度限制时，可以使用 maxlength 属性；
input 标签的常用属性：
属性描述type类型name名称，用于区分控件value值，用于记录或设置控件的值checked默认选中某个单选或复选框maxlength输入框最大输入长度注意：在 H5 中 checked="checked" 可以简写为 checked。
5.2 input 之 type 属性普通按钮和文件域
哪一个属性可以设置普通按钮的显示文字？
用 value 属性可以设置普通按钮的属性值
上传文件的 type 属性值是什么？
上传文件的 type 属性值是 file；
点击普通按钮能提交表单吗？
点击普通按钮不能提交表单，后续学习了 JavaScript 之后普通按钮就非常有用了。
5.3 label 标签
label 标签的作用是什么？
label 可以和表单中的元素绑定，增加点击范围，提高用户体验
label 标签的使用步骤是什么？
步骤：
给要绑定的 input 标签设置唯一的 id 属性值；使用 让 label 标签与对应控件绑定。
5.4 select 下拉表单
下拉列表的应用场景是什么？
选项太多，希望节约空间，提升用户体验时可以使用下拉列表
下拉列表的基本语法：
...
下拉列表的标签有几个？分别代表什么含义？
三个下拉列表的标签：
序号标签名说明1select下拉列表2option下拉列表选项，用于存放选项内容3selected属性能够默认选中某一项。在 H5 中 selected=“selected” 可以简写为 selected。
选项列表
附录
1. 标签
表格标签
序号标签名说明1table表格标签，用于包含多个 tr2tr定义表格中的行，用于包含多个 td3td定义表格中的单元格，用于存放单元格内容4th定义表头中的单元格，用于存放单元格内容，默认会加粗并居中显示5thead定义表格头部（标题行），必须拥有 tr 标签6tbody定义表格的主体，通常包含标题行下方的表格数据区域列表标签
序号标签名说明1ul无序列表，只允许包含多个 li 标签2ol有序列表，只允许包含多个 li 标签3li用于存放列表项内容4dl自定义列表，只允许包含 dt 和 dd 标签5dt用于存放关键词内容，与 dd 是兄弟关系，不过后续的 dd 都跟随前面的 dt6dd用于存放前面 dt 关键词的列表项内容表单标签
序号标签名说明1form定义表单域，统一收集传递数据2input输入控件，可以是文本框、单选、复选、选择文件、按钮等3select下拉列表4option下拉列表选项，用于存放选项内容input 标签的常用属性：
属性描述type类型name名称，用于区分控件value值，用于记录或设置控件的值checked默认选中某个单选或复选框id控件标识，与 label 标签联用maxlength输入框最大输入长度input 标签 type 的常用属性值：
类型属性值描述输入text输入文字输入password密码选择radio单选按钮，多选一选择checkbox复选框（打勾）点击选择文件file文件上传使用点击button按钮点击image按钮表单操作submit提交，会把数据发送给服务器表单操作reset重置，会清空表单所有数据2. 快捷键
VSCode 快捷键
快捷键作用ctrl + n新建文件ctrl + s保存文件ctrl + z撤销ctrl + shift + z恢复撤销ctrl + 加号 / 减号放大 / 缩小ctrl + c / v复制粘贴一行（不能选中文字）ctrl + x删除一行alt + ↑ / ↓上下移动代码alt + shift + ↑ / ↓上下复制一行代码ctrl + /注释ctrl + d向后多选相同的内容alt + z自动换行Emmet 语法
ul>li*6{h$}
dl>dt+dd*3
重点单词
序号英语中文1table表格2row行3data数据4align对齐5left左6center中7right右8cell单元格9spacing外部彼此间的间距10padding内边距（填充物）内容距离边框的距离11row行12col / column列13term术语14input输入15select选择16selected已选中17area区域18type类型19submit提交20reset重置21name姓名、名称22value值23radio单选框24checkbox多选框25option选项