今天是HTML第二天,主要讲了表格、列表及表单的用法!

今日框架:

html5纵向表格 html表格横向排列_数据


今日重点:

一、表格

1、表格标签基本使用

表格:以行、列的方式(表格)整齐地展示数据

三个基本的表格标签:

html5纵向表格 html表格横向排列_控件_02


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

2、表头单元格标签(th):

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

3、表格的常用属性:

html5纵向表格 html表格横向排列_控件_03


注: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):网站首页下方的网站导航通常可以使用自定义列表来实现。

html5纵向表格 html表格横向排列_html5纵向表格_04


html5纵向表格 html表格横向排列_控件_05


三、表单

1、表单:可以使用表单收集用户信息,统一提交给后台处理

1)组成:(1)表单域:整个表单区域,统一汇总要收集的数据,统一提交给后台,例如包含姓名、性

别等完整的用户信息记录;

(2)表单控件(表单元素):与用户交互,允许用户输入或者选择单个具体的信息,

(3) 提示信息:提示用户每一个表单控件是收集什么信息的

2、表单域(form):实现用户信息的收集与传递

3、文本框和密码框:用户通过表单控件能够输入或者选择内容,以达到通过表单收集信息的目的

表单控件可以分为:(1)input 输入(单标签) (2)select 选择 (3)textarea 文本域

注:type 属性是 input 标签的必须属性

html5纵向表格 html表格横向排列_html5纵向表格_06


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标签属性:

html5纵向表格 html表格横向排列_html5纵向表格_07


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 下拉表单:选项太多,希望节约空间,提升用户体验时可以使用下拉列表

html5纵向表格 html表格横向排列_html5纵向表格_08


12)textarea 文本域标签:如果需要输入大量文字并且需要换行时,可以使用文本域,

13)表单元素几点总结:

1)三大组表单元素:(1)input 输入表单元素; (2)select 下拉表单元素; (3)textarea 文本域表单元素。

2)表单元素都应该包含在 form 表单域中;

3)表单元素应该有 name 属性以区别于其他的表单元素;

4)三个名字相似的标签:(1)form 表单域:汇总区域内表单元素的值并提交给服务器;

(2)file 文件域:是 input 标签 type 的属性值,上传文件时使用;

(3)textarea 文本域:输入多行文本时使用。

总结:

1、表格标签:

html5纵向表格 html表格横向排列_数据_09


2、列表标签:

html5纵向表格 html表格横向排列_html5纵向表格_10


3、表单标签

html5纵向表格 html表格横向排列_html5纵向表格_11


4、input 标签的常用属性:

html5纵向表格 html表格横向排列_表单_12


5、input 标签 type 的常用属性值:

html5纵向表格 html表格横向排列_html5纵向表格_13


今日重点单词:

html5纵向表格 html表格横向排列_表单_14


html5纵向表格 html表格横向排列_html5纵向表格_15