目录
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提交则无此现象。