HTML产品表单列表,HTML表格、列表、表单

1.表格

语法：

1.

：表示一个表格

2.

：表示表格中的一行

3.

：表行中的一列(单元格) ：行 / 列 标题(加粗，水平居中)

4.

：表格的标题  该元素必须添加在

5.

：按顺序设置表格每列宽度  该元素必须添加在

6.

：设置表格列分组的样式  属性：span(表示列数)  width

属性：

1. table

width

height

align  设置表格的对齐方式   left / center / right

border  边框宽度  单位：px

bgcolor  背景颜色

cellspacing  单元格外边距(单元格与单元格或单元格与表格之间的距离)

cellpadding  单元格内边距(单元格与内容之间的距离)

2. tr

align  水平对齐

valign  垂直对齐   top / middle / bottom

bgcolor

3. td / th

align

valign

width

height

colspan  跨行

rowspan  跨列

表格的复杂分组   (允许将若干行划分到一个组中，以便管理)

1.表头行分组

允许将第一行的内容单独分到表头行分组中  

2.表尾行分组

允许将最后一行的内容单独分到表尾行分组中  

3.表主体行分组

不规则表格创建(通过 td 的跨行和跨列来实现不规则的表格)

1.跨行 

从指定单元格位置处开始，横着向右，合并掉几个单元格(包括自己)，被合并掉的单元格要删除

2.跨列 

从指定单元格位置处开始，竖着向下，合并掉几个单元格(包括自己)，被合并掉的单元格要删除

2.列表

有序列表   

列表项 

无序列表 

列表项 

属性

1.ol

type

1  ：按数字方式排列，默认值

a  ：按小写英文方式排列

A  ：按大写英文方式排列

i  ：按小写罗马数字排列

I  ：按大写罗马数字排列

start  指定标识从几开始

2.ul

type

disc  实心圆，默认值

circle  空心圆

square  实心矩形

none  无标记

定义列表

1.作用：以一种特殊的结构来排列数据，通常用于对一类事物 / 名词的解释

2.语法：

  声明要解释的事物名称或名词  对上述名词或事物解释的内容

3.常用场合  ：图文混排

3.表单

表单元素 

(只有放在里的表单控件的值，才能提交给服务器)

属性

1.action  提交给服务器处理程序的地址(动作)

2.method 提交方式，以什么样的方式把数据交给服务器

get

以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上)

安全性低

提交数据最大限制为2KB

向服务器要数据时可以使用

post

以隐式的方式将数据传递给服务器

安全性很高

不限制提交数据的大小

要提交数据给服务器处理时使用

enctype

作用：指定表单数据进行编码的方式

取值：

1、application/x-www-form-urlencoded

默认值，允许将任意类型的文本提交给服务器

2、multipart/form-data

允许将文件提交给服务器

3、text/plain

不对任何数据进行编码和传输

input元素 (里边会包含若干个不同的表单控件)

1.属性：

1.type  根据不同的type属性值，可以创建不同的input元素

2.name  定义表单控件的名称，主要提交给服务器使用的(如果不声明name属性的话，元素无法提交给服务器)

3.value  定义当前控件的值，主要提交给服务器使用

2.disabled  禁用控件，无值的属性 

2.文本框与密码框

文本框 ：

密码框 ：

具备除以上四个属性外，还具备以下几个独立属性：

1、maxlength    限制输入的字符数，取值为数字

2、readonly    只读，无值属性

Q : readonly 和 disabled 的区别

1、readonly ，是只读的意思，是允许提交给服务器，不让用户改数据而已

2、disabled ， 是禁用的意思，不仅不让用户改数据，而且还不能提交给服务器

3、placeholder占位符，即默认显示在文本框用于给用户提示的文字

3.按钮

1.提交按钮   将表单提交给服务器

语法：

2.重置按钮  将表单恢复到初始化的状态

语法：

3.普通按钮  通过JS自定义功能

语法：

4.显示的文本

属性：type :  submit / reset / button

4.单选按钮 和 复选框

单选按钮 ：

复选框 ：

属性：

name  设置名称，并用于分组，一组单选按钮或复选框的名称必须相同

value  必须设置

checked  默认被选中，无值属性

5.隐藏域和文件选择框

隐藏域 

想要提交给服务器，但又不想给用户看的数据

文件选择框 

form的method属性值必须为post

form的enctype属性值必须为 multipart / form-data

textarea控件(多行文本域)

属性：

name ：定义名称，提交给服务器使用

cols ：指定文本与的宽

rows ：指定文本域的高

readonly ：只读

选项框

语法：

  表示下拉列表或滚动列表

  列表中的内容，允许出现多个

属性：

name：控件名称

size ：默认显示选项数量，默认为1，为下拉列表，如果取值>1,则为滚动列表

multiple：设置多选，无值的属性(仅滚动列表使用，如果加上就会默认为滚动列表)

value ：选项的值，提交给服务器用

select ：默认被选中(作用在下拉列表中)

其他标记

lable元素

语法： 文本

属性 ：for ：指定要关联的表单控件的ID值

浮动框架  (将其他页面导入到当前页面中来)

语法：

属性：

src ：要引入页面的url

frameborder ：指定浮动框架的边框，默认为1，则显示边框，不需要边框则指定为0

width

height

新input元素(支持HTML5)

电子邮件类型(提交时会验证数据是否符合Email的规范)  

搜索类型(在文本框的基础上，提供了快速清除操作)  

URL类型(提交时会验证数据是否符合web站点的URL规范 绝对路径)

电话号码类型(在移动端设备中，能展开 拨号键盘，在PC中无效)

数字类型(只能让用户输入或选择数字)

属性：min：最小值，max：最大值，step：微调数值(默认为1)

范围类型(提供一个滑块，让用户选择数字)

属性：min ：最小值，max ：最大值，value ：初始值

颜色类型(提供颜色拾取控件)

日期类型(提供一个日期输入控件)

周类型(提供一个日期控件，用于选取周)

月份类型(选取月份控件)