三、表格
1.表格基本语法:<table>
<tr><td>内容</td></tr>
</table>
2.表格的对齐方式:
属性 |
值 |
说明 |
align (水平对齐方式) |
left |
左对齐 |
center |
居中对齐 |
|
right |
右对齐 |
|
valign (垂直对齐方式) |
top |
顶端对齐 |
middle |
居中对齐 |
|
bottom |
底端对齐 |
|
baseline |
基线对齐 |
3.表格的跨行跨列:
<td colspan=“所跨的列数”>单元格内容</td>
<td rowspan=“所跨的行数”>单元格内容</td>
四、框架
1.框架的优点:
在同一个浏览器窗口显示多个页面;
可以实现页面复用;
实现典型的“目录结构”;
2.<frameset>框架的基本语法:
<frameset cols=“25%,50%,*” rows=“50%,*” border=“5”>
<frame src=“the_second.html”>
……
</frameset>
3.纵向分割窗口:
使用<frameset>标签的“rows”行数属性;
4.横向分割窗口:
使用<frameset>标签的“cols”列数属性;
5框架<frame>的常用属性:
属性 |
作用 |
举例 |
framebrder |
是否显示框架周围的边框 |
frameboder=“1” |
name |
框架表识名 |
name=“mainframe” |
scrolling |
是否显示滑动条 |
scrolling=“no” |
noresize |
是否允许调整框架窗口大小 |
noresize=“noresize” |
6.<iframe>的基本用法:
<iframe src=“引用页面地址”name=“框架标识名”frameborder=“边框” scrolling=“是否出现滚动条”……></iframe>
五、表单
1.<form>标签的属性
属性 |
说明 |
action |
此属性指示服务器上处理表单输出的程序。一般来说,当用户单击表单上的“提交”按钮后,信息发到web服务器上,由acting属性所指定的程序处理。语法为action=“URL”。如果action属性的值为空,则默认表单提交到本页。 |
method |
此属性告诉浏览器如何将数据发送给服务器,它指定向服务器发送数据的方法(用post方法还是用get方法)。如果值为get,浏览器将创建一个请求,该请求包括页面URL、一个问号和表单的值。浏览器会将请求返回给URL中指定的脚本,以进行处理。如果将指定为post,表单上的数据会作为一个数据块发送到脚本,而不使用请求字符串。语法为method=(get post) |
2.<input>元素的属性
属性 |
说明 |
type |
此属性指定表单元素的类型。可用的选项有text、password、checkbox、radio、submit、reset、file、hidden、image和button。默认选择为text |
name |
此属性指定表单元素名称。例如:如果表单上有几个文本框,可以按名称来标识他们,如text1、text2等。 |
value |
此属性是可选属性,它指定表单元素的初始值。但如果type为radio,则必须指定一个值。 |
size |
此属性指定表单元素的初始宽度。如果type为text或password,则表单元素的大小以字符为单位。对于其他输入类型,宽度以像素为单位。 |
maxlength |
此属性用于指定可在text或password元素中输入最大字符数。默认值为无限大 |
checked |
指定按钮是否是被选中的。当输入类型为radio或CheckBox时,使用此属性。 |
3、文本框
<p>用户名<input name=“sname” type=“text” size=“30” maxlength=“20”></p>
4.密码框
<p>密 码:
<input name=“pass” type=“text” size=“21”></p>
5.单选按钮
<fom method=”post” action=””>
性别:
<input name=”gen” type=”radio” class=”input” value=”男”>男 ;
<input name=”gen” type=”radio” value=”女” class=”input”>女
</form>
6.复选框
<form method=”post” action=””>
爱好:
<input type=”checkbox” name=”interest” value=”sports”>运动
<input type=”checkbox” name=”interest” value=”talk”>聊天
<input type=”checkbox” name=”interest” value=”play”>玩游戏
</form>
7.列表框
<select name=“指定列表名称” size=“行数”>
<option value=“可选项的值” selected=“selected”>……</option>
<option value=“可选项的值” >……</option>
</select>
8.按钮
<input type=“reset” name=“Reset” value=“重填”>
按钮的作用:
(1) reset按钮:重置
(2) submit按钮:提交到指定URL服务器
(3) button按钮:属于普通按钮,需要与事件关联使用
9.多行文本域
<textarea name=“textarea” cols=“显示的列的宽度”rows=“显示的行数”>
文本内容
</textarea>
10.文本域
<form action=“” method=“post” enctype=“multipart/from-data”>
<p><input type=“file” name=“files”/><br/>
<input type=“submit” name=“upload” value=“上传”/></p>
</form>
11.表单的语义化
(1)域
在表单中,可以使用<fieldset>标签实现的定义。
(2)域标题
所谓域标题就是给创建的域设置一个标题。
<fiedset>标签与<legend>标签会一起使用。
(3)表单元素的标注
<lable for=“表单元素的id”>标注的文本</lable>