1.table属性
width是高
height是宽
align是对齐分左对齐left右对齐right中间对齐center
border 外边框
bgcolor 背景色
background 背景图片
Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0
Cellpadding 单元格边距（表格边框与内容的距离） 一般情况写0
(1)表格内tr属性
align 水平对齐
(left/center/right 左/中/右对齐)对应水平对齐
valign 垂直对齐
(top/middle/bottom 上/中/下)对应垂直对齐
bgcolor 背景色
(2)表格内td的基本属性
width(宽)、height(高)(单位是像素px或者是%)
align(水平对齐)、valign(垂直对齐)
bgcolor 背景色
background 指定背景图片
colspan 水平合并 合并多列(就是横着占了多个单元格)
rowspan 垂直合并 合并多列(就是竖着占了多个单元格)
(3)表头th标签
是特殊的单元格，文字会自动加粗、居中。它的用法是取代的位置即可（用作表头第一行） 1 举例为：
<table border="1" width="300">
<tr>
<th>餐饮类型</th>
<th>主要菜系</th>
<th>价格</th>
</tr>
<tr>
<td>中餐厅</td>
<td>生猛海鲜</td>
<td>1000元</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
表格主体tbody标签
表格可以在table里直接用tr和td但是也可以用页眉页脚和主体来表示简单来说就是头身体脚。
thead 表格页眉（头部）只能出现一次
tbody 表格主体可以出现多次
tfoot 表格页脚（结尾）只能出现一次
以上三个标签结合使用，可将表格中的一行或几行合成一组
举例为:
….
….
….
二、表单属性
表单的概念
表单在网页中主要负责数据采集功能，表单的标记是:
表单的属性
action属性：设置表单的提交地址（表单提交的url）指定表单提交后由服务器上的哪个处理程序进行处理
2 method属性：设置表单的提交方法， 属性值为get、post提交方式
3 name属性：设置表单的名称
4 target属性：设置表单的打开方式， 属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank
在新窗口打开
enctype:默认编码 或者指定二进制流 【附件的提交形式】
method的值为get:它是通过URL来传递表单数据的，表单元素的数据在地址栏可见，而且有大小限制，传数据量小一般不大于2KB
method的值为post:它是通过请求正文传递表单数据的，URL不可见表单元素数据，比较安全，而且没有大小限制，但往往服务器会控制
输入标记
表单元素中输入标签是,常用属性有type（类型）、name（名称）、value（值）、checked（默认选中）
三、HTML常用的表单控件
1.文本框(text)
文本框：主要用于输入单行文本内容。代码如下:
姓名：
账号：
2. 密码框
密码框：主要用于输入一些保密信息，代码格式如下：
密码：
密码：
分组：
用户登录
3. 单选框
单选框主要是让网页浏览者在一组选项里选择一个。
Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称【name=“gender”】。
代码格式如下：
性别：男
女
效果如下：
性别：男
女
4 复选框
复选框主要是让网页浏览者在一组选项里同时选择多个选项。
选中checked代码格式如下：【disabled="disabled"足球】
爱好：读书
听歌
阅读
兴趣爱好：足球
篮球球
音乐
扩展：隐藏域：
图像域：
5. 文件域
文件域主要是让网页浏览者上传文件。
代码格式如下：
上传文件：
6. 提交按钮
提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。
代码格式如下：
7. 重置按钮
重置按钮用来重置表单中输入的信息。代码格式如下：
<input type="reset"value=“重置”/>
8. 图片域
图像域标记
代码格式如下:
下拉列表
下拉菜单主要用于在有限的空间里设置多个选项。
下拉菜单选中状态给option添加 selected
代码格式如下：
… 居住城市(下拉菜单)： 北京 上海 深圳 厦门
10. 文本域标记及属性 文本域主要用于输入较长的文本信息。 代码格式如下： 默认文字 效果： Cols属性：定义文本域的宽度 （列） rows属性：定义文本域的高度 （行） ************************************************** 四、HTML5新增表单控件
HTML5文本框及placeholder属性
当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。
代码格式如下：
一般主要用于提示输入等
HTML5文本框类型tel
提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码
还包括其他字符（如+ 、-、(、)等），如86-0536-8888888
代码格式如下： pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->
电话号码：
电话号码：
HTML5 文本框类型 url 网址
url类型的input 元素提供用于输入url地址这类特殊文本的文本框．当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交．
代码如下：
4. HTML Email邮件
Email类型的input元素是一种专门用于输入e-mail地址在文本输入框，在提交表单时，会自动验证输入框的值．如果不是一个有效的e-mail地址,则该输入框不允许提交该表单．
代码如下：
<input type="email"/>
1
5.HTML5文本框类型number 数字 max最大值 min最小值 step步长 Number类型的input 元素提供用于输入数值的文本框．我们还可以设定对所接受数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。 代码如下： step（步长）属性值倍数 max最大值 min最小值 6. HTML5文本框类型date Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示 代码如下： 7.视频 您的浏览器不支持Video标签。 8.音频 Your browser does not support this audio format. ************************************************************************* 最后我们还讲了一个用表单套表格的案例: (里面还夹杂了一些js二级联动是自己多学了一点) 代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单练习</title>
<META NAME="Generator" CONTENT="EditPlus">
<script language="JavaScript" type="text/javascript">
//定义了城市的二维数组，里面的顺序跟省份的顺序是相同的。通过selectedIndex获得省份的下标值来得到相应的城市数组
var city=[
["东城区","西城区","崇文区","朝阳区"],
["石家庄","唐山","邯郸","邢台"],
["青岛","济南","德州","济南"]
];
function getCity(){
//获得省份下拉框的对象
var sltProvince=document.form1.province;
//获得城市下拉框的对象
var sltCity=document.form1.city;
//得到对应省份的城市数组
var provinceCity=city[sltProvince.selectedIndex - 1];
//清空城市下拉框，仅留提示选项
sltCity.length=1;
//将城市数组中的值填充到城市下拉框中
for(var i=0;i<provinceCity.length;i++){
sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);
}
}
</script>
</head>
<body>
<form action="" name="form1" method="post">
<table width="500" height="380" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">填写注册资料</td>
</tr>
<tr>
<td width="120" align="right">姓名：</td>
<td width="380"><input type="text" /></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" /></td>
</tr>
<tr>
<td align="right">密码提示问题：</td>
<td>
<select>
<option value="">请选择一个问题</option>
<option value="1">你小学班主任是谁?</option>
<option value="2">你初中班主任是谁?</option>
</select>
</td>
</tr>
<tr>
<td align="right">密码提示答案：</td>
<td><input type="text"/></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input name="sex" type="radio" checked="checked" />男
<input type="radio" name="sex"/>女</td>
</tr>
<tr>
<td align="right">年龄：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td align="right">籍贯：</td>
<td><select name="province" onChange="getCity()">
<option value="0">请选择</option>
<option value="北京市">北京</option>
<option value="河北省">河北</option>
<option value="山东省">山东</option>
</select>省/直辖市
<SELECT name="city">
<OPTION VALUE="0">请选择所在城市 </OPTION>
</SELECT>
市</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td><input type="checkbox" checked="checked" />
上网
<input type="checkbox" />体育
<input type="checkbox" />学习
</td>
</tr>
<tr>
<td align="right" valign="top">个人介绍：</td>
<td><textarea cols="30" rows="4"></textarea></td>
</tr>
<tr>
<td align="right">上传头像：</td>
<td><input type="file"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册" />
<input type="reset" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
