今天是HTML第二天,主要讲了表格、列表及表单的用法!
今日框架:
今日重点:
一、表格
1、表格标签基本使用
表格:以行、列的方式(表格)整齐地展示数据
三个基本的表格标签:
注:td 标签是用来存放单元格数据的
2、表头单元格标签(th):
相比较 td 标签,内容会被加粗并且居中显示
3、表格的常用属性:
注:cellpadding:内容与边框之间的距离,默认 1 像素;cellspacing:单元格之间的间距,默认 2 像素。
4、表格结构标签:thead 定义表格头部(标题行),必须拥有 tr 标签,一般位于第一行;tbody 定义表格的主体,通常包含标题行下方的表格数据区域。
5、合并单元格:1)跨行合并( rowspan ),把多个行的单元格合并 → 纵向合并;
2)跨列合并( colspan ),把多个列的单元格合并 → 横向合并
3)合并步骤:(1)明确合并方式(跨行 / 跨列);
(2)找到目标单元格 td 增加合并单元格属性;跨行 rowspan="x" (纵向);跨列 colspan="y" (横向);(跨行目标单元格在上方,跨列目标单元格在左方)
(3)删除多余的单元格。
二、列表:用来布局的,可以整齐、有序的展示数据
1)无序列表(ul):无序列表,只允许包含多个 li 标签
2)有序列表(ol):有序列表 ol 会在列表项前面自动增加数字排序,并且排序依次递增
3)自定义列表(dl):网站首页下方的网站导航通常可以使用自定义列表来实现。
三、表单
1、表单:可以使用表单收集用户信息,统一提交给后台处理
1)组成:(1)表单域:整个表单区域,统一汇总要收集的数据,统一提交给后台,例如包含姓名、性
别等完整的用户信息记录;
(2)表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,
(3) 提示信息:提示用户每一个表单控件是收集什么信息的
2、表单域(form):实现用户信息的收集与传递
3、文本框和密码框:用户通过表单控件能够输入或者选择内容,以达到通过表单收集信息的目的
表单控件可以分为:(1)input 输入(单标签) (2)select 选择 (3)textarea 文本域
注:type 属性是 input 标签的必须属性
4、提交和重置按钮:
(1)提交按钮:提交按钮(sumbit) 可以把表单域中的数据提交给后台。
(2)重置按钮:重置按钮(reset) 可以把表单域中的数据清空。
注:通过 value 属性可以指定提交按钮或重置按钮中的文字。
5、单选按钮和复选框:
(1)单选框:在多选一的时候,使用单选框(radio)
(2)复选框:在多选多的时候,使用复选框(checkbox)
6、name 和 value 属性:
(1)name 属性可以把表单控件区分开;将多个单选按钮设置相同的 name 属性,能够实现用户单选。
注::同一组单选按钮或复选框, name 属性的值应该一致
(2)value 属性可以记录用户在控件中输入的值或者选择结果。
7、checked 和 maxlength 属性:
(1)checked:如果用户要修改之前保存过的信息, checked 属性可以选中用户之前的选择;用 checked 属性可以帮助用户默认同意用户协议。
(2)maxlength:某写输入项有长度限制时,可以使用 maxlength 属性。
input标签属性:
8、input 标签属性要点总结,其中包括:
1)打开页面就有值(用户之前输入的信息 / 按钮的默认文字) —— value
2)区分控件 —— name
3)多个单选怎么做到多选一 —— 相同的 name
4)打开页面就选中 —— checked
5)input 标签的形态 —— type
9、普通按钮和文件域:
1)用 value 属性可以设置普通按钮的属性值
2)上传文件的 type 属性值是 file
10)label 标签:可以和表单中的元素绑定,增加点击范围,提高用户体验。
注:要绑定的 input 标签设置唯一的 id 属性值
11)select 下拉表单:选项太多,希望节约空间,提升用户体验时可以使用下拉列表
12)textarea 文本域标签:如果需要输入大量文字并且需要换行时,可以使用文本域,
13)表单元素几点总结:
1)三大组表单元素:(1)input 输入表单元素; (2)select 下拉表单元素; (3)textarea 文本域表单元素。
2)表单元素都应该包含在 form 表单域中;
3)表单元素应该有 name 属性以区别于其他的表单元素;
4)三个名字相似的标签:(1)form 表单域:汇总区域内表单元素的值并提交给服务器;
(2)file 文件域:是 input 标签 type 的属性值,上传文件时使用;
(3)textarea 文本域:输入多行文本时使用。
总结:
1、表格标签:
2、列表标签:
3、表单标签
4、input 标签的常用属性:
5、input 标签 type 的常用属性值:
今日重点单词: