表格

<table>定义表格

<caption>定义表格标题，必须紧跟<table>之后，一个表格只能有一个标题

<tr>表格中的行，<tr>中包含一个或多个<th>或<td>

<th>表头单元格，<th>中的文本通常是居中的粗体文本

<td>标准单元格，<td>中的文本通常是正常字体，且左对齐

属性

<table></table>

border：表格的边框

width：表格的宽度

cellpadding：单元格边界与单元格内容的间距

cellspacing：单元格之间的间距

bordercolor：边框颜色

bgcolor：背景颜色

<tr></tr>

align（left/center/right）：水平对齐方式（左中右）

valign（top/middle/bottom）：垂直方向的对齐方式（上中下）

height：高度

bgcolor：背景颜色

<td></td>

height：高度

width：宽度

align（left/center/right）：水平对齐方式

valign（top/middle/bottom）：垂直方向的对齐方式

bgcolor：背景颜色

布局

<thead>、<tbody>、<tfoot>依次表示表头、主体、脚注，默认情况下这三个标签不会影响到表格的布局

如果要使用这三个标签，就必须三个一起使用，而且次序不能颠倒

<table border="1">
	<thead>
		<tr>
			<th>月份</th>
			<th>利润</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>一月</td>
			<td>三万元</td>
		</tr>
	</tbody>
	<tfoot></tfoot>
</table>

合并单元格

<th>和<td>具有两个重要属性,可以用来合并单元格

colspan：横向合并单元格

rowspan：纵向合并单元格

<table border="1">
	<tr>
		<th rowspan="3">一季度</th>
		<td>一月</td>
		<td>5万元</td>
	</tr>
	<tr>
		<td>二月</td>
		<td>3万元</td>
	</tr>
	<tr>
		<td>三月</td>
		<td>4万元</td>
	</tr>
	<tr>
		<th>总额</th>
		<td colspan="2">12万元</td>
	</tr>
</table>

表单

<form>定义表单，它用于向服务器传输数据，表单通常放在表格里

name：用于定义表单的名称

action：一个URL，定义提交表单时向何处发送数据

method：定义发送表单数据时的HTTP方法（get/post）

post和get的区别

get只能提交少量数据，post可以携带大量数据；

get提交数据会在地址栏显示，安全性差，post方式更加安全。

输入<input/>

<input/>输入表单，使用type属性定义不同的元素：

文本text和密码password

name：input元素的名字（只有设置了name属性的表单元素才能在提交表单时传递他们的值）

value：定义输入字段的初始值

size：定义输入字段的宽度

maxlength：定义输入字符的最大长度

<form action="" method="post">
	账号: <input type="text" name="account" value="superman" />			
</form>

提交submit

submit提交按钮会将表单数据发送给服务器

<input type="submit" value="提交" />

重置reset

reset重置按钮会清除表单中的所有数据

<input type="reset" value="重置" />

启动JS程序button

button是一个可点击按钮，常用于启动JavaScript程序

图片形式image

image用来定义图像形式的提交按钮，需结合src属性和alt属性一起使用

单选框radio和复选框checkbox

一组radio或一组checkbox的name值应该是相同的

radio和checkbox必须设置value属性

<form>
	性别:<input type="radio" name="gander" value="male" checked="checked" />男
	<input type="radio" name="gander" value="female" />女
	<hr />
	爱好:<input type="checkbox" name="hobby" value="game" checked="checked" />玩游戏
	<input type="checkbox" name="hobby" value="reading" checked="checked" />读书
	<input type="checkbox" name="hobby" value="skiing" />滑雪	
</form>

文件上传file

使用file时不能设置value属性，使用accept属性可以规定提交文件的类型

<form>
	<input type="file" name="pic" accept="image/gif" />
</form>

隐藏字段hidden

对于用户是不可见的，隐藏字段通常会存储一个默认值

<form>
	<input type="hidden" name="country" value="China" />
</form>

小结

针对不同的<input>类型，其value属性的含义也不同

• type="button"、"reset"、"submit"：定义按钮上显示的文字
• type="text"、"password"、"hidden"：定义输入字段的初始值
• type="checbox"、"radio"、"image"：定义与输入相关联的值
• checbox和radio中必须设置value属性，file中不能使用value属性

下拉列表<select><select/>

<select>用来创建下拉列表，<option>是其中的选项

<select>属性

multiple：设置多选

size：设置可见选项的数目

<option>属性

selected：设置为选中状态

value：送往服务器的属性值

<select name="fruit">
	<option value="apple">苹果</option>
	<option value="banana" selected="selected">香蕉</option>
	<option value="orange">橙子</option>
	<option value="pear">梨</option>
</select>

文本输入控件<textarea><textarea/>

<textarea>是用来定义多行文本的文本输入控件，常用属性包括

clos：文本区的列数

rows：文本区的行数

disabled：禁用文本区

readonly：文本区只读

<textarea rows="5" cols="10" disabled="disabled">这是一个被禁用的文本区</textarea>
<textarea rows="5" cols="10" readonly="readonly">这是一个只读的文本区</textarea>
<textarea rows="5" cols="10">这是一个可以编辑的文本区</textarea>

表单元素的其它属性

size(尺寸) ： text、password

maxlength（最大长度） ： text、password、textarea

checked（是否选中） ： radio、checkbox

selected（是否选中） ： option

readonly（只读） ： text、password、textarea、readonly="readonly"

disabled（禁用） ： text、password、radio、checkbox、textarea、button、submit、reset 等

HTML5新增的表单元素及属性

表单元素

<input type="#" name="" value=""/>

#:

color：颜色

numbe： 数值 （value、max最大值、min最小值、step增量）

tel：电话

email：邮件

url：网址

date：日期 年月日

month：年月

week：年周

time：时间

datetime：年月日 时间

datetime-local：年月日 时间

range：范围（value、max、min、step）

search：搜索

表单属性

required：必填

autofocus：自动聚集焦点

autocomplete：自动完成（off、on）

multiple：多选

list：列表

formaction：更改提交地址

formmethod：更改提交方式

max：最大值

min：最小值

step：增量

placeholder：文本提示信息

标签分类

块级元素（大盒子）

div form table ul li ol dl dt dd h1-h6 p header footer nav figure section address aside hgroup hr br iframe

1. 独立占一行
2. 块级可以嵌套所有元素（h1-h6 p dt 不能嵌套块级元素，可以嵌套行内元素和行内块元素）
3. 块级元素有宽和高

行内元素（小盒子）

span a strong b i em time audio label

1. 在同一行显示
2. 行内元素不可以嵌套块级元素，但是可以嵌套行内元素和行内块元素（a可以嵌套块级元素）
3. 行内元素没有宽和高

行内块级元素（小盒子）

img input select textarea video

1. 在同一行显示
2. 有宽和高