一：表格常用标签及属性

表格标签基本使用 ：

1：表格的主要作用是什么？

以行、列的方式（表格）整齐地展示数据，例如：股票价格。

提示：非常老的前端人员会用表格布局页面（后续讲到布局会给大家扩展）。

2：表格的基本语法是什么？

 3：常用的表格标签有几个？分别代表什么含义？

4：表格内容是写在哪个标签中的？

td 标签是用来存放单元格数据的；

table 和 tr 是用来搭建表格结构的，不能存放实际内容。

表头单元格标签 

1：表头标签的作用是什么？标签是什么？

在大多数表格中，第一行通常用来显示标题而不是实际的数据，这样可以方便用户阅读

和理解下方表格数据的含义；

表头单元格的标签是 th 。

 2：表头单元格能存放内容吗？与 td 的显示有什么区别？

th 标签同样可以存放内容；

相比较 td 标签，内容会被加粗并且居中显示。

表格相关属性(了解)

1：表格属性应该写在哪一个标签中？为什么？

属性是用来描述标签的特征（显示效果）的，因此属性应该写在 table 标签中；

属性语法复习：

属性名不需要引号；

属性值必须要用引号，通常使用双引号；

属性="值" 这种定义方式又被称为键值对 —— 属性名（键）和属性值（值）成对出现；

每一个键值对之间使用空格分隔

2.表格中常用的属性

3.cellpadding 是谁和谁之间的距离？

内容与边框之间的距离，默认 1 像素。

 4： cellspacing 是谁和谁之间的距离？

单元格之间的间距，默认 2 像素。

表格结构标签

1：就语义而言，表格可以被划分成哪两个区域？分别对应什么标签？

thead 定义表格头部（标题行），必须拥有 tr 标签，一般位于第一行；

tbody 定义表格的主体，通常包含标题行下方的表格数据区域。

2：结构标签能够存放单元格的内容吗？为什么？

不能；

thead 和 tbody 只是用来划分表格结构的，用来区分标题行和数据区域。

注意： thead 和 tbody 只是用来划分表格结构的，不能替代 tr 、 th 、 td 标签的 作用。 表格中实际要显示的内容，需要放在 th 或 td 标签中，其他标签仅是用来搭建 表格结构或者增强表格结构的语义的。  

合并单元格 

在开发中，有时候需要：

1. 把一行中的多个单元格合并，在横向上显示更多的内容；

2. 把一列中的多个单元格合并，在纵向上显示更多的内容。

 1：合并单元格有哪两种方式？

①跨行合并（ rowspan ），把多个行的单元格合并 → 纵向合并；

2. ②并。

 2：合并单元格的步骤是什么？

①明确合并方式（跨行 / 跨列）；

② 找到目标单元格 td 增加合并单元格属性；

       1. 跨行 rowspan="x" （纵向）；

        2. 跨列 colspan="y" （横向）；

           3. 删除多余的单元格。

3：合并单元格的属性写在哪一个标签上？

目标单元格。

表格标签

表格属性

合并单元格

1. 明确合并方式（跨行 / 跨列）；

2. 找到目标单元格 td 增加合并单元格属性；

1. 跨行 rowspan="x" （纵向）；

2. 跨列 colspan="y" （横向）；

3. 删除多余的单元格

二、 三种列表

无序列表

1：列表的主要是用来做什么的？

列表就是用来布局的，可以整齐、有序的展示数据，用列表做布局会更加自由和方便。

2：我们一共要学习几种列表？

1. 无序列表： ul ； 2. 有序列表： ol ； 3. 自定义列表： dl 。 

3：无序列表一共有几个标签？分别是什么，作用是什么？有什么注意事项？

有序列表

1：有序列表和无序列表有什么区别？

有序列表 ol 会在列表项前面自动增加数字排序，并且排序依次递增；

2：有序列表除了序号之外，与无序列表的使用及注意事项有区别吗？

<ul>

      <li>列表项内容</li>

        <li>列表项内容</li>

        <li>列表项内容</li>

          ...

</ul>

有序列表的的基本语法与无序列表基本一致，只需要把 ul 替换成 ol 即可：

有序列表除了序号之外，与无序列表的使用及注意事项没有区别；

自定义列表

1：自定义列表的应用场景是什么？

网站首页下方的网站导航通常可以使用自定义列表来实现。

2：自定义列表的标签有几个？分别代表什么含义？

3：自定义列表的内容是写在哪个标签中的？

dt 存放关键词（term）的内容；

dd 存放前面 dt 关键词对应的列表项内容。

列表总结

三、表单

表单使用场景以及分类

1：表单的应用场景是什么？

在开发网站时，可以使用表单收集用户信息，统一提交给后台处理。

2. 问题 2：表单由那几部分组成？

1. 表单域：整个表单区域，统一汇总要收集的数据，统一提交给后台，例如包含姓名、性 别等完整的用户信息记录；

2. 表单控件（表单元素）：与用户交互，允许用户输入或者选择单个具体的信息，例如姓 名；

3. 提示信息：提示用户每一个表单控件是收集什么信息的。

表单域

1：表单域的作用是什么？

实现用户信息的收集与传递，例如收集用户的完整信息，然后统一传递给后台。

 2：表单域的标签是什么？

form

文本框和密码框 

1：表单控件的作用是什么？

用户通过表单控件能够输入或者选择内容，以达到通过表单收集信息的目的。

 2：表单控件可以分为几大类？

①input 输入

②select 选择

③textarea 文本域

 3：input 标签的必须属性是什么？有什么作用？

type 属性是 input 标签的必须属性，用来指定 input 控价的类型；

input 标签的基本语法：<input type="属性值" />

input 标签 type 的常用属性值：

4：input 标签是单标签还是双标签？为什么？

单标签

因为 input 标签的类型、内容都是通过属性设置的。

提交和重置按钮

1：提交按钮的作用是什么？

提交按钮（sumbit) 可以把表单域中的数据提交给后台。

2：重置按钮的作用是什么？

重置按钮（reset) 可以把表单域中的数据清空。

 3：视频中的 value 属性有什么用处？

通过 value 属性可以指定提交按钮或重置按钮中的文字。

单选按钮和复选框

单选按钮和复选框

1：单选框的应用场景是什么？

在多选一的时候，使用单选框（radio），例如：性别；

2：复选框的应用场景是什么？

在多选多的时候，使用复选框（checkbox)，例如：爱好。 

name 和 value 属性

1：哪一个属性能够把表单控件区分开？（不同的控件负责收集不同的信息）

name 属性可以把表单控件区分开。

2：怎样能够在多个单选按钮中，只允许用户选择一项？

将多个单选按钮设置相同的 name 属性，能够实现用户单选；

提示：同一组单选按钮或复选框， name 属性的值应该一致。

 3：哪一个属性可以记录用户在表单中输入的值？

value 属性可以记录用户在控件中输入的值或者选择结果。

checked 和 maxlength 属性

1： checked 属性的应用场景是什么？

如果用户要修改之前保存过的信息， checked 属性可以选中用户之前的选择，例如：

修改个人信息；

用 checked 属性可以帮助用户默认同意用户协议。

 2： maxlength 属性的应用场景是什么？

某写输入项有长度限制时，可以使用 maxlength 属性。

input 标签的属性有哪些？作用是什么？

input 表单元素四个属性使用场景课堂问答 

1. 打开页面就有值（用户之前输入的信息 / 按钮的默认文字） —— value

2. 区分控件 —— name

3. 多个单选怎么做到多选一 —— 相同的 name

4. 打开页面就选中 —— checked

5. input 标签的形态 —— type

普通按钮和文件域

1：哪一个属性可以设置普通按钮的显示文字？

用 value 属性可以设置普通按钮的属性值。

2：上传文件的 type 属性值是什么？

上传文件的 type 属性值是 file 。

 3：点击普通按钮能提交表单吗？

点击普通按钮不能提交表单，后续学习了 JavaScript 之后普通按钮就非常有用了。

label 标签

1： label 标签的作用是什么？

label 可以和表单中的元素绑定，增加点击范围，提高用户体验。

 2： label 标签的使用步骤是什么？

①给要绑定的 input 标签设置唯一的 id 属性值；

②使用 <label for="控件id">标签文字</label> 让 label 标签与对应控件绑定。

 3： label 标签和 input 标签是父子关系还是兄弟关系？

兄弟关系，通过 label 标签的 for 属性和对应 id 的 input 标签建立联系。

select 下拉表单

1：下拉列表的应用场景是什么？

选项太多，希望节约空间，提升用户体验时可以使用下拉列表。

2：下拉列表的标签有几个？分别代表什么含义？

下拉列表的基本语法：

<select>

     <option>选项 1</option>

      <option>选项 2</option>

      <option>选项 3</option>

       ...

</select>

3.要默认选中某一个选项，使用哪一个属性？能优化吗？

使用 selected 属性能够默认选中某一项；

与 checked 类似，在 H5 中 selected="selected" 可以简写为 selected 。

textarea 文本域标签

1：文本域的应用场景是什么？

如果需要输入大量文字并且需要换行时，可以使用文本域，例如：个人简介、留言板、 评论。

2. 问题 2：如何设置文本域的默认值？ 写在双标签内部的文字就是文本域的默认值，一般默认值从后台加载，开发时无需指定 初始值。 文本域的基本语法： �A��F�KA��A��