HTML表格，表单，内嵌框架：（三）
⾃从开始学习编程之后，体重就飙升，除了吃饭睡觉就是学习，也不运动，⼀步⼀步⾛向油腻，我⼀定要保护好头发，我可不想早早秃了头。这篇就总结⼀下表格和表单都⽐较重要，但是个⼈认为表单更为重要⼀点，⽤的地⽅也很多。
HTML表格
表格常⽤标签
1、table标签：声明⼀个表格
2、tr标签：定义表格中的⼀⾏
3、td和th标签：定义⼀⾏中的⼀个单元格，td代表普通单元格，th表⽰表头单元
表格常⽤属性
1、border 定义表格的边框
2、cellpadding 定义单元格内内容与边框的距离
3、cellspacing 定义单元格与单元格之间的距离
4、align 设置单元格中内容的⽔平对齐⽅式，设置值有：left | center | right
5、valign 设置单元格中内容的垂直对齐⽅式 top | middle | bottom
6、colspan 设置单元格⽔平合并
7、rowspan 设置单元格垂直合并
表格的传统布局
传统的布局⽅式就是使⽤table来做整体页⾯的布局，布局的技巧归纳为如下⼏点：
1、定义表格宽⾼，将border、cellpadding、cellspacing全部设置为0
2、单元格⾥⾯嵌套表格
3、单元格中的元素和嵌套的表格⽤align和valign设置对齐⽅式
4、通过属性或者css样式设置单元格中元素的样式
传统布局⽬前的应⽤
1、快速制作⽤于演⽰的html页⾯
2、商业推⼴EDM制作(⼴告邮件)
下⾯写⼀个简单的代码，让⼤家看⼀看表格的效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>正道的表格</title>
</head>
<body>
<table border="1"width="500"cellpadding="10"cellspacing="0"align="center"> <tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>地点</th>
</tr>
<tr>
<td>正道</td>
<td>男</td>
<td>23</td>
<td>西安</td>
</tr>
<tr>
<td>⽼李</td>
<td>⼥</td>
<td>23</td>
<td>北京</td>
</tr>
<tr>
<td>⽼刘</td>
<td>⼥</td>
<td>23</td>
<td>⼤连</td>
</tr>
</table>
</body>
</html>
代码就很简单，就像我写的⼀样，第⼀张图是没有加边框的，第⼆张是加了边框的。当然也可以将列⾏进⾏合并，进⾏修改在这⾥我就不写了。
HTML表单
表单⽤于搜集不同类型的⽤户输⼊，表单由不同类型的标签组成，实现⼀个特定功能的表单区域（⽐如：注册），⾸先应该⽤标签来定义表单区域整体，在此标签中再使⽤不同的表单控件来实现不同类型的信息输⼊，具体实现及注释可参照以下伪代码：<!-- form定义⼀个表单区域,action属性定义表单数据提交的地址，
method属性定义提交的⽅式。  -->
<form action=""method="get">
<!-- label标签定义表单控件的⽂字标注，input类型为text定义了
⼀个单⾏⽂本输⼊框  -->
<p>
<label>姓名：</label><input type="text"name="username" />
</p>
<!-- input类型为password定义了⼀个密码输⼊框  -->
<p>
<label>密码：</label><input type="password"name="password" />
</p>
</form>
效果图如下，⼤家是不是⾮常眼熟，我们经常登录使⽤的就是这种表单。
下⾯的我就把代码写到⼀起吧，然后效果图也放⼀起，都是表单的⼀些常⽤⽅法。
<!-- form定义⼀个表单区域,action属性定义表单数据提交的地址，
method属性定义提交的⽅式。  -->
<form action=""method="get">
<!-- input类型为radio定义了单选框  -->
<p>
<label>性别：</label>
<input type="radio"name="gender"value="0" />男
<input type="radio"name="gender"value="1" />⼥
</p>
<!-- input类型为checkbox定义了单选框  -->
<p>
<label>爱好：</label>
<input type="checkbox"name="like"value="sing" />唱歌
<input type="checkbox"name="like"value="run" />跑步
<input type="checkbox"name="like"value="swiming" />游泳
</p>
<!-- input类型为file定义上传照⽚或⽂件等资源  -->
<p>
<label>照⽚：</label>
<input type="file"name="person_pic">
</p>
<!-- textarea定义多⾏⽂本输⼊  -->
<p>
<label>个⼈描述：</label>
<textarea name="about"></textarea>
</p>
<!-- select定义下拉列表选择  -->
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">⼴州</option>
<option value="3">深圳</option>
</select>
</p>
<!-- input类型为submit定义提交按钮
还可以⽤图⽚控件代替submit按钮提交，⼀般会导致提交两次，不建议使⽤。如：    <input type="image" src="xxx.gif">
-->
<p>
<input type="submit"name=""value="提交">
jquery框架搭建
<!-- input类型为reset定义重置按钮  -->
<input type="reset"name=""value="重置">
</p>
</form>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。