4、HTML——表格标签、表单标签

目录

一、表格标签：table—tr—td/th

1、合并单元格 

1.1 合并同行不同列的单元格（列合并）

1.2  合并同列不同行的单元格（行合并） 

二、表单标签：form

1、form标签

2、input输入标签 

2.1  type属性值：text；password

2.2  type属性值：radio

2.3  type属性值：checkbox

2.4  type属性值：file

2.5  下拉列表标签：select—option 

2.6  文本域标签：textarea

2.7  type属性值：reset重置按钮

2.8  type属性值：submit 

2.9  type属性值：image图片提交按钮

2.10  type属性值：button普通按钮

---

一、表格标签：table—tr—td/th

tr标签：表示表格中的每一行；

td标签：表示表格中的每一列（可以理解为每一行中的单元格）

border属性：设置最外部的边框的粗细，一般设置为1px

width属性：设置表格宽度

height属性：设置表格高度

cellspacing属性：设置单元格与单元格之间、单元格与表格边框之间的距离，一般设置为0

cellpadding属性：设置单元格中的内容与单元格边框的距离

align属性：设置表格在浏览器中的水平对齐方式，默认为left左对齐，常用居中对齐center

	
		
		
	
	
		

			
			

				
1.1
				
1.2
				
1.3
				
1.4
			
			
			

				
2.1
				
2.2
				
2.3
				
2.4
			
			
			

				
3.1
				
3.2
				
3.3
				
3.4
			
			
			

				
4.1
				
4.2
				
4.3
				
4.4
			
		
	

标签：

align属性：设置表格中每行的单元格内容水平对齐方式 ；

标签：

align属性：设置表格中每个单元格中的内容对齐方式

标签：单元格标签，必须写在标签内，一般表格的第一行会使用标签，使用标签，单元格中的内容会加粗居中显示

	
		
		
	
	
		

			
			

				
居中显示
				
居中显示
				
居中显示
				
居中显示
			
			
			

				
居中显示
				
居中显示
				
居中显示
				
居中显示
			
			
			

				
居中显示
				
3.2
				
3.3
				
3.4
			
			
			

				
4.1
				
4.2
				
4.3
				
4.4
			
		
	

1、合并单元格 

合并后的单元格变成了一个，不必再声明合并前的单元格

1.1 合并同行不同列的单元格（列合并）

在当前的第一个单元格里面写一个列合并：colspan属性

	
		
		
	
	
		

			
			

				
1.1
				
				
1.3
				
1.4
			
			
			

				
2.1
				
				
2.4
			
			
			

				
3.1
				
			
			
			

				
4.1
				
4.2
				
4.3
				
4.4
			
		
	

1.2  合并同列不同行的单元格（行合并） 

在要合并的第一个单元格总写一个行合并：rowspan属性

二、表单标签：form

form标签：表单标签

常用属性：

--->action属性：设置表单内容提交后的处理程序，一般程序使用jsp/asp/php等语言编写

--->method属性：设置表单内容的提交方式，常用值有get和post，post提交方式比get更安全

input标签：输入标签，是一个单标签 

常用属性：

type属性：设置输入的类型,常用值有:

--->text：文本框；

--->password：密码框输入的内容加密显示；

--->radio：单选按钮，需要借助name属性实现单选操作

--->checkbox：复选框，可以选择0-n个选项

checked属性：属性值"checked":设置默认选择

--->file：文件选择

--->reset：重置按钮。点击重置按钮，表单内容会恢复到表单最开始的状态。

--->submit：提交按钮，点击提交按钮，会将表单中的内容提交到action属性设置的属性值的程序中

--->image：图片提交按钮，效果与submit按钮一样

--->button：普通按钮，一般会结合JavaScript一起使用

select标签：下拉列表

option标签：写在select标签内，表示下拉列表的选项

--->selected="selected"：设置下拉列表默认选项

textarea标签：文本域，常用属性值

--->cols：设置文本域的列数（宽度）

--->rows：设置文本与的行数（高度）

1、form标签

form标签：表单标签

常用属性：

--->action属性：设置表单内容提交后的处理程序，一般程序使用jsp/asp/php等语言编写

--->method属性：设置表单内容的提交方式，常用值有get和post，post提交方式比get更安全

2、input输入标签 

input标签：输入标签，是一个单标签 

常用属性：

type属性：设置输入的类型,常用值有:

--->text：文本框；

--->password：密码框输入的内容加密显示；

--->radio：单选按钮，需要借助name属性实现单选操作

--->checkbox：复选框，可以选择0-n个选项

--->checked="checked":设置默认选择

--->file：文件选择

--->reset：重置按钮。点击重置按钮，表单内容会恢复到表单最开始的状态。

--->submit：提交按钮，点击提交按钮，会将表单中的内容提交到action属性设置的属性值的程序中

--->image：图片提交按钮，效果与submit按钮一样

--->button：普通按钮，一般会结合JavaScript一起使用

2.1  type属性值：text；password

	
		
		
	
	
		

			账号：

			密码：

		
	

2.2  type属性值：radio

radio：单选按钮，需要借助name属性实现单选操作（name属性值相同的只能选中一个）

checked属性：属性值"checked":设置默认选择

	
		
		
	
	
		

			账号：

			密码：

			性别：男
			女

		
	

2.3  type属性值：checkbox

 checkbox：复选框，可以选择0-n个选项

	
		
		
	
	
		

			账号：

			密码：

			性别：男
			女

			爱好：篮球
			乒乓球
			足球
			羽毛球
		
	

2.4  type属性值：file

file：文件选择

	
		
		
	
	
		

			账号：

			密码：

			性别：男
			女

			爱好：篮球
			乒乓球
			足球
			羽毛球

			照片：

		
	

2.5  下拉列表标签：select—option 

select标签：下拉列表

option标签：写在select标签内，表示下拉列表的选项

--->selected="selected"：设置下拉列表默认选项

	
		
		
	
	
		

			账号：

			密码：

			性别：男
			女

			爱好：篮球
			乒乓球
			足球
			羽毛球

			照片：

			生日：
				2000
				2001
				2002
				2003
				2004
				2005
				2006
				2007
				2008
				2009
				2010
			年
			
				1
				2
				3
				4
				5
				6
				7
				8
				9
				10
				11
				12
			月
			
				1
				2
				3
				4
				5
				6
				7
				8
				9
				10
			日
		
	

2.6  文本域标签：textarea

创建一个可变大小的文本域，内容可写可不写;

cols属性：设置文本域的列数（宽度）

rows属性：设置文本域的行数（高度）

	
		
		
	
	
		

			账号：

			密码：

			性别：男
			女

			爱好：篮球
			乒乓球
			足球
			羽毛球

			照片：

			生日：
				2000
				2001
				2002
				2003
				2004
				2005
				2006
				2007
				2008
				2009
				2010
			年
			
				1
				2
				3
				4
				5
				6
				7
				8
				9
				10
				11
				12
			月
			
				1
				2
				3
				4
				5
				6
				7
				8
				9
				10
			日

			自我介绍：请介绍一下你自己.......

		
	

2.7  type属性值：reset重置按钮

 点击重置按钮，表单内容会恢复到表单最开始的状态。

可通过value属性修改“重置”

	
		
		
	
	
		

			账号：

			密码：

			性别：男
			女

			爱好：篮球
			乒乓球
			足球
			羽毛球

			照片：

			生日：
				2000
				2001
				2002
				2003
				2004
				2005
				2006
				2007
				2008
				2009
				2010
			年
			
				1
				2
				3
				4
				5
				6
				7
				8
				9
				10
				11
				12
			月
			
				1
				2
				3
				4
				5
				6
				7
				8
				9
				10
			日

			自我介绍：请介绍一下你自己.......

			
		
	

2.8  type属性值：submit 

点击提交按钮，会将表单中的内容提交到action属性设置的属性值的程序中 

可通过value属性修改submit属性值“提交”

2.9  type属性值：image图片提交按钮

图片提交按钮，效果与submit按钮一样

src属性设置图片路径

2.10  type属性值：button普通按钮

暂时点了没什么用，一般会结合JavaScript一起使用

onclick属性：点击属性