目录
1、表格
表格是较为常见的一种标签，但不是用来布局，常见处理、显示表格数据。
（1）表格提供了HTML中定义表格数据的方法
（2）表格由行中的单元格组成
（3）表格中没有列元素，列的个数取决于行的单元格个数
1.1创建表格
在HTML中，要想创建表格，就需要使用相关表格标签，创建表格的基本语法如下：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>table标签为创建表格的外围框架（可在table标签里类同图像进行width border alter定义），tr标签为行标签，td为单元格。例：
<table width="500" border="2">
<tr>
<td>姓名</td>
<td>性别</td>
<td>电话</td>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>120</td>
</tr>
</table>
1.2 表格属性
通过在table标签中添加属性名来更改表格属性，如在上例中
<table width="500" border="2" title="表格" align="center" cellspacing="10" cellpadding="10">
一般情况下 border cellspacing cellpadding 三参为0，如下效果：
对tr加align则对行对齐，对td加align可对单元格对齐（使用CSS更加便捷）
1.3 表头单元格和表格标题
（1）表头单元格标签使用th取代td，则会使单元格内内容自动居中加粗，如，对上例中表格的第一行进行修改
<table width="500" border="2" title="表格" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr align="center">
<th>小王</th>
<td>女</td>
<td>110</td>
</tr>
<tr align="center">
<th>小明</th>
<td>男</td>
<td>120</td>
</tr>
</table>效果为
（2）使用caption标签来定义表格标题，放入table标签中且紧挨table下方，只存在表格中，如：
<table width="500" border="2" title="表格" align="center" cellspacing="0" cellpadding="0">
<caption>个人信息表</caption>
（3）表格的划分：表格可用thead和tbody将表格划分为头部和主体两部分，无功用仅为划分，如
<table border="1" align="center" width="550" cellpadding="0" cellspacing="0">
<caption>小说排行榜</caption>
<thead>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</thead>
<tbody>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="bd.png" width="50"></td>
<td>321</td>
<td>112</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tbody>
</table>
1.4 合并单元格
跨行合并：rowspan 跨列合并：colspan
合并单元格为自上而下，自左而右，合并几个单元格则给予rowspan或colspan参数为几，并将原有的要被合并的单元格标签去除。如下，为合并第三行的第二第三个单元格，即跨列合并：（删除的单元格个数=合并个数-1）
<table align="center" width="400" height="200" border="1">
<caption>合并单元格</caption>
<tr align="center">
<td>123</td>
<td>abc</td>
<td>def</td>
<td>opq</td>
</tr>
<tr align="center">
<td>123</td>
<td>abc</td>
<td>def</td>
<td>opq</td>
</tr>
<tr align="center">
<td>123</td>
<td>abc</td>
<td colspan="2">def</td>
</tr>
</table>
同样，为了合并第四列的三个单元格，合并数为3，需要删除2个单元格，即（2,4）（3，4）所对应单元格，如下
<table align="center" width="400" height="200" border="1">
<caption>合并单元格</caption>
<tr align="center">
<td>123</td>
<td>abc</td>
<td>def</td>
<td rowspan="3">opq</td>
</tr>
<tr align="center">
<td>123</td>
<td>abc</td>
<td>def</td>
</tr>
<tr align="center">
<td>123</td>
<td>abc</td>
<td>def</td>
</tr>
</table>
2、表单
网页中，需要跟用户交互，收集用户资料，此时需要表单。
HTML中，一个完整的表单通常由表单控件（也称表单元素）（即表单中出现的如输入框按键之类的小方框）、提示信息和表单域（表单整体区域）3个部分构成。
2.1 input控件
<input />标签为单标签，type属性为其最基本属性，其取值有多种，用于指定不同的控件类型。除了type属性外，<input />标签还可以定义很多其它的属性，其常用属性如下
（1）type确定了输入框是那种内容，如text值为普通文本输入，而password为不可见的密码输入，如下为每行两个单元格所构建的表格：（maxlength可通过赋值确定输入框最多字符数）
<table align="center" border="0" width="400" cellpadding="0" cellspacing="0">
<caption><h4>青春不常在，抓紧谈恋爱</h4></caption>
<tr>
<td>所在地区</td>
<td><input type="text" value="福州"></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" value="andy"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password"></td>
</tr>
</table>
（2）当存在选项选择时可令type值为radio(单选)或checkbox(多选)，需要注意的是选项必须给input附加name，即相同的一组需要给他们命名相同的名字。如，在上例中，添加性别和喜欢选项
checked="checked"可设置默认被选定状态
<tr>
<td>性别</td>
<td>
男<input type="radio" name="sex">
女<input type="radio" name="sex">
</td>
</tr>
<tr>
<td>喜欢的类型</td>
<td>
温柔<input type="checkbox" name="love">
体贴<input type="checkbox" name="love">
阳光<input type="checkbox" name="love">
国庆<input type="checkbox" name="love">
</td>
</tr>
（3）给type赋值button，即可创建一个按钮，其中value为button中所要显示的值。
将type赋值为submit或reset可创建提交或重置按钮。
将type赋值为image且在后面通过src赋予图像地址则构建一个图像的按钮。如下，为创建按钮
<tr>
<td></td>
<td>
<input type="button" value="注册">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="image" src="bd.png" width="50">
</td>
</tr>
（4）type赋值为file可用来提交文件，如
<tr>
<td>上传头像</td>
<td><input type="file"></td>
</tr>
单元格距离可通过tr设置width和height来控制
2.2 label标签
label标签为input元素定义标注，可通过点击设定文字直接进入输入框，如
<body>
<label>用户名<input type="text"></label>
<label>用户名<input type="text"></label>
<label>用户名<input type="text"></label>
</body>
点击任意一个用户名即可进入对应着的输入框。
通过label标签中的for给予一个id值，可实现类似锚点定位的功能，如
<body>
<label for="pwd">请输入密码</label>
<div><input type="password" id="pwd"></div>
</body>
点击请输入密码即可进入密码输入框。
2.3 textarea控件（文本域）
text文本框只能写一行，textarea可输入多行文本
<textarea cols="每行中的字符数" rows="显示的行数"
文本内容
</textarea>其中宽和高由css控制，一般cols和rows，如
<tr>
<td></td>
<td><textarea name="" id="" cols="30" rows="10">给我留言吧</textarea></td>
</tr>
2.4 下拉菜单
使用select控件定义下拉菜单的基本语法如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>select中至少应包含一对<option></option>
若想要表述默认选中，则在option后面添加selected="selected"。如
<tr>
<td>籍贯</td>
<td>
<select name="" id="">
<option value="">籍贯</option>
<option value="" selected="selected">山西</option>
<option value="">湖南</option>
</select>
</td>
</tr>
2.5 表单域
对于大的网页，可能含有多个表单，这时如果不划分表单域进行提交或者重置会导致意外的结果。创建表单域方式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>添加form后，即可使用submit和reset进行提交和重置。
（1）action在表单接受到信息后，将信息传递给服务器进行处理，action用于指定接受处理表单数据的服务器程序的URL地址。（php），如
<body>
<form action="demo.php">
账户 <input type="text"><br>
密码 <input type="password"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
（2）method用于设置表单数据的提交方式，其取值为get或post
当表单设置为get并提交后，如图
<body>
<form action="" method="get">
账户 <input type="text" name="account"><br>
密码 <input type="password" name="password"><br>
<input type="submit" value="登录">
<input type="reset" value="重置">
</form>
</body>
可见通过get方式点击提交会将表单内容显示在地址框中，降低了安全性。而用post提交则无此现象。
