一:表格常用标签及属性
表格标签基本使用 :
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 替换成 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 的常用属性值:
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 标签与对应控件绑定。
3: label 标签和 input 标签是父子关系还是兄弟关系?
兄弟关系,通过 label 标签的 for 属性和对应 id 的 input 标签建立联系。
select 下拉表单
1:下拉列表的应用场景是什么?
选项太多,希望节约空间,提升用户体验时可以使用下拉列表。
2:下拉列表的标签有几个?分别代表什么含义?
下拉列表的基本语法:
...
3.要默认选中某一个选项,使用哪一个属性?能优化吗?
使用 selected 属性能够默认选中某一项;
与 checked 类似,在 H5 中 selected="selected" 可以简写为 selected 。
textarea 文本域标签
1:文本域的应用场景是什么?
如果需要输入大量文字并且需要换行时,可以使用文本域,例如:个人简介、留言板、 评论。
2. 问题 2:如何设置文本域的默认值? 写在双标签内部的文字就是文本域的默认值,一般默认值从后台加载,开发时无需指定 初始值。 文本域的基本语法: �A��F�KA��A��