html书写表单laber,day02_HTML表格列表表单

会涉及关于表格、表单、列表的讲解

表格：显示数据

表单：获取用户数据

列表：控制布局

一、表格

主要用于数据展示

1.1 创建表格

我是单元格1

我是单元格2

table、tr、td，他们是创建表格的最基本标签，具体地解释：

table用于定义一个表格。

tr 定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

td 定义表格中的单元格，必须嵌套在

标签中，一对 中包含几对，就表示该行中有多少列(或多少个单元格)。

注意:

中只能嵌套 类的单元格标签，他就像一个容器，可以容纳所有的元素

1.2常用属性

属性名称

含义

值

border

表格边框

像素

cellspacing

单元格之间的间隔

像素

cellpadding

单元格边框与内容的间隔

像素

width

表格宽度

像素

height

表格高度

像素

align

表格的水平居中方式

left、center、right

rowspan

跨行合并

单元格数量

colspan

跨列合并

单元格数量

1.3所有标签

定义表格标题。 定义表格的表头。

定义表格单元。

1.4单元格合并

1. 确定目标单元格位置

目标单元格的位置，原则为上边的单元格优先级大于下边的单元格优先级,左边的单元格优先级大于右边的优先级。

2. 确定合并方式

根据合并方向，在目标单元格确定合并方式为跨行或者跨列。

3. 删除多余的单元个

删除数量=合并数量-1

1.5 表格注意

表格一般用于数据展示，布局不是一个好的方案。

表格中没有列元素,列的数量取决于单元格的数量。

二、列表

主要用于页面布局，与表格类似但更加灵活，自由度更高。

2.1 无序列表ul

语法：

• 列表项1
• 列表项2
• 列表项3

注意：

与之间相当于一个容器，可以容纳所有元素

2.2 有序列表ol

语法：

1. 列表项1
2. 列表项2
3. 列表项3

......

2.3自定义列表

语法：

联系我

手机

电话

三、表单

HTML 表单用于搜集不同类型的用户输入。

3.1 表单的构成

表单一般由三部分构成：表单控件(input)、表单域(form)、提示信息。

3.2 表单控件

常用的表單控件包括4種，input系列、laber、textarea、select。

1)input系列控件

input标签中通过type属性实现不同的控件。

控件如下：

type属性值

描述

text

单行文本框

password

密码输入框

radio

单选按钮

checkbox

复选框

button

普通按钮

submit

提交按钮

reset

重置按钮

image

图片按钮

file

文件域

注意：

如果想实现单选框效果,必须要设置名称且相同。

2)textarea控件

用于留言的多行文本输入。

语法：

文本内容

3)laber控件

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

表现为：在一些输入如：单选框、文本框等,点击控件前的文本就可以获得焦点。

用法一：全局使用

male

用法二：分开绑定

Male

4)select控件

多个选项让用户选择，为了节约空间，可以使用select控件定义下拉菜单.

选项1

选项2

选项3

选择默认属性：

...

选项1

...

3.3表单属性

属性名称

属性值

属性描述

type

上表所示

选择控件类型

name

自定义

控件名称

value

自定义

默认文本值

size

正整数

控件的显示宽度

checked

checked

控件的默认选中项目

maxlength

正整数

控件允许输入的最大字数

1)type属性

用户名:

密 码：

3)name属性

用户名:

男

女

4)checked属性

性 别:

男

女

3.4 表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

各种表单控件

常用属性

action：用于指定接收并处理表单数据的服务器程序的url地址。

method：用于设置表单数据的提交方式，其取值为get或post。

name：用于指定表单的名称，以区分同一个页面中的多个表单。

四、资料