一、表单
1、表单概述
网页中的表单可以用来收集用户填写的信息,如调查问卷、注册会员等。表单是个容器,表单里面的元素有文本框、密码框、单选框和复选框等。表单是一种数据提交的方法。
表单中的子元素又叫做表单控件。表单结构中,同一种表单控件可以添加多个,表单控件有一个name属性,必须赋予不同的名字,用于标识不同的控件。
(1)表单的基本语法
格式:<form></form>
(2)表单的数据传输方式
表单数据传输会用到action和method属性。action表示表单提交后发送的URL地址;发送的方式用method表示,可选择的参数有GET
(传输量比较小)和POST(传输值比较大)。
2、文本框和密码框
(1)文本框
文本框用来输入文字信息,可以输入汉字、数字和字母。
语法格式:<input type="text">
(2)密码框
语法格式:<input type="password">
3、单选框和复选框
(1)单选框
单选框用于在表单中有多个选项,且只能选一个的情况下使用。
语法格式:<input type="password">
应用举例:
<input type="radio" name="book"> DIV
<input type="radio" name="book" checked> HTML
<input type="radio" name="book"> CSS
(2)复选框
复选框是可以选择多个选项的选框。
应用举例:
<input type="checkbox" name="book"> DIV
<input type="checkbox" name="book" checked> HTML
<input type="checkbox" name="book" checked> CSS
4、下拉列表与文字域
(1)下拉列表
下拉列表是可以选择的列表,当在列表中选择要选择的选项时使用,且只能选择其中一个选项。
<select>
<option>选项一</option>
<option selected>选项一</option>
<option>选项一</option>
</select>
应用举例:
<select>
<option selected>HTML</option>
<option >CSS</option>
<option >DIV</option>
</select>
(2)文本域
文本域用于输入多行文字,或大量文字。
语法格式:
<textarea></textarea>
文字域通过rows属性和cols属性分别设置行和列。
应用举例:
<textarea name="book" rows="10" cols="10"></textarea>
5、按钮
语法格式:
<input type="submit" value="按钮" >
二、表格
1、表格的基本语法
表格语法:<table></.table>
表格中的常用属性:
(1)表行:表示表格的一行
<tr></tr>
(2)表头:表示一列
<th></th>
(3)表元;表示表格中的一个方格
<td></td>
应用举例:
<table border="1">
<tr><!--设置表行-->
<th>表头一</th><!--设置表头-->
<th>表头二</th>
</tr>
<tr>
<td>表元1</td><!--设置表元-->
<td>表元2</td>
</tr>
<tr>
<td>表元3</td>
<td>表元4</td>
</tr>
</table>
2、跨多行、多列表元
(1)跨多行表元
th和td使用rowspan表示跨多少个单元格
如:
<th rowspan="3">表头一</th><!--设置表头-->
(2)跨多列表元
th和td使用colspan表示跨多列表元。
如:<th colspan="3"><th>
3、设置表格大小
(1)设置表格边框
<table border=1></table>
border后面的数值越大,宽度越大。
(2)设置表格的高度和宽度
<table border=1 width=300 height=200></table>
4、表格文字对齐
设置对齐格式:
<tr align=#><tr>
<th align=#><th>
<td valign=#><td>
#可选择的参数有left、center、right
5、表格在网页中对齐
对齐格式:<table align=#></table>
#可选择的参数有left、center、right
三、框架
1、框架的基本概念
网页中框架的作用是将浏览器分割成几个相对独立的小窗口,浏览器可以将不同的网页文件同时传送到这几个小窗口。
基本语法:框架有<frameset></frameset>标记对表示,它与<head></head>标记对并列,<frameset></frameset>标记对里面用<frame></frame>标记对来表示在框架中放入什么文件。
应用举例:
</head>
<frameset cols="25%,50%,25%">
<frame src="http://www.baidu.com/"></frame>
<frame src="http://www.baidu.com/"></frame>
<frame src="http://www.baidu.com/"></frame>
</frameset><noframes></noframes>
2、框架分栏
(1)垂直分栏
垂直分栏对框架里的网页文档垂直排列,每张网页文档占用一列显示。
<frameset cols="25%,25%">
<frame src="http://www.baidu.com/"></frame>
<frame src="http://www.baidu.com/"></frame>
</frameset>
如上例每张网页占50%。
(2)框架水平分栏
水平分栏就是把网页文档分成多行显示。
<frameset rows="25%,25%">
<frame src="http://www.baidu.com/"></frame>
<frame src="http://www.baidu.com/"></frame>
</frameset>
3、框架的常用属性
(1)设置不可调节框架大小
<frame noresize=" noresize" src="http://www.baidu.com/"></frame>
添加noresize=" noresize"后,边框的大小用户无法改变。
(2)浏览器不支持框架
旧版的浏览器不支持框架,可以在<noframes></noframes>显示不支持框架的显示内容。
(3)设置框架边框
框架边框在<frameset>中用frameborder属性表示。
<frameset frameborder=#>
#有两种表示方式:
- yes表示有边框,no表示无边框
- 1表示有边框,0表示无边框
(4)设置滚动条
滚动条的设置在<frame>里的scrolling属性。
语法格式:<frame src= " " scrolling="#" />
#可以为auto、 yes、 no分别为自动滚条、有滚条和无滚条。
4、框架链接
(1)导航框架
导航框架在<frame>中加入name属性,表示该<frame>的名称。
应用举例:
1)新建如下两个html文件
2)主页.html代码
<frameset cols="25%,75%">
<frame noresize="noresize" src="导航框架链接.html"></frame>
<frame noresize="noresize" name="myframe" src="http://www.baidu.com/"></frame>
</frameset><noframes></noframes>
代码分析: 第一个<frame>显示导航框架链接.html的网页,第二个<frame>命名为myframe,并显示百度的界面。
3)导航框架链接.html代码
<body>
<a href="http://www.sina.com.cn/" target="myframe" >导航链接</a>
</body>
代码分析:建立文字链接,将新浪的界面显示到名字为myframe的<frame>中。
测试结果:
启动后显示结果:
点击左侧“导航链接”后显示结果:
(2)内联框架
内联框架是存在于<body></body>的单个HTML文件中,可以链接其他网页并显示它,即在一个页面张红嵌入一个框架窗口来显示另一个页面的内容。
语法:<iframe></iframe>
其他属性设置:
应用举例:
<body>
<iframe src="http://www.baidu.com/"/>
</body>