HTML部分总结

1、form表单

form标签用于指定表单数据的提交方式和地址。它有以下几个属性：

• name：用于指定表单的名称，方便后续提交使用
• id：表单的唯一名称，一般用于提交或样式设置
• action：用于定义表单数据的提交地址
• method：用于指定表单数据的提交方式，有以下几个常用值
  • get：所提交的数据会在浏览器地址栏中显示，所提交的数据不能超过4K大小
  • post：这种提交方式会把数据放到请求头中，而不会在浏览器地址栏中显示，理论上这种方式提交没有大小的限制
• enctype：用于指定表单提交的数据类型，有以下两个值：
  • multipart/form-data：以二进制流的方式进行提交，一般用于文件上传
  • application/x-www-form-urlencoded：以文本的方式进行提交，常用方式，默认值

1.1、表单元素

 - 表单的元素由三种标签构成，input、 textarea、 select，它们都要包含在form标签中才有效。

1.1.1、input标签

input语法格式如下：

	<input type="元素类型" name="元素名称" value=”元素值”id="客户端唯一标识">

类型	作用
type=“text”	单行文本框
type=“password”	密码框
type=“radio”	单选按钮
type=“checkbox”	多选按钮
type=“submit”	提交按钮
type=“reset”	复位按钮
type=“button”	按钮
type=“image”	图像按钮
type=“hidden”	隐藏域
type=“file”	文本域

1.1.2、select标签

select元素主要是表单的下拉选择框

<p>
请选择你所在的城市：
	<select>
		<option value="北京">北京</option>
		<option value="重庆">重庆</option>
		<option value="上海">上海</option>
	</select>
</p>

属性名称	属性值	属性作用
option	子项	下拉框中的选项
value	字符串	选项的值
name	字符串	下拉框的名称
selected		默认被选中的选项
multiple	“multiple”	以列表形式显示

1.1.3、textarea标签

<p>
	<textarea cols="50" rows="5">这家伙很懒，什么也没有留下</textarea>
</p>

属性名称	属性值	属性作用
cols	数字	以字符个数设定的多行文本框的宽度
rows	数字	以字符个数设定的多行文本框的高度
name	字符串	多行文本框的名称

2、table表格

表格标签用于数据展示，包含table、hr、hd等子标签。

table标签有以下几种属性：

• width：用于指定表格的宽度，单位是像素

• border：用于定义表格的边框，值的类型是数字，而是一个正数，值越大边框越粗

• cellpadding：用于定义单元格的内边距，即单元格中的内容也单元格的边之间的距离

• cellspecing：用于定义单元格的外边距，即单元格与单元格之间的距离

• align：用于定义表格的对齐方式

   table还在以下几个子标签：
  

• caption：用于定义表格的标题

• thead：用于定义表头部分

• tbody：用于定义表体部分

• tfoot：用于定义表尾部分

• tr：用于定义表格的一行

• th：用于定义一个单元格，它的特点是内容加粗且居中显示

• td：用于定义一个单元格

   td 标签有几个属性需要说明：
  

• colspan：用于定义跨列操作，也就是合并多个列

<table width="300" border="1">
	<tr>
		<td colspan="2" align="center">1班平均成绩</td>
	</tr>
	<tr>
		<td align="center">笔试</td>
		<td align="center">面试</td>
	</tr>
	<tr>
		<td align="center">78</td>
		<td align="center">72</td>
	</tr>
</table>

• rowspan：用于定义跨行操作，也就是合并多个行

<table width="300" border="1">
	<tr>
		<td rowspan="2">&nbsp;</td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>