本文深入解析HTML框架(Frames)的使用方法，包括Frameset布局、Frame与Iframe的应用，以及HTML表单(Forms)的构成要素，如表单控件、Action与Method属性，涵盖单行文本输入、复选框、单选框、下拉框、多行文本框、密码输入框等控件的使用实例。
八、HTML框架(Frames)
使用框架(Frame)，你可以在浏览器窗口同时显示多个网页。每个Frame里设定一个网页，每个Frame里的网页相互独立。
Frameset
<frameset></frameset>决定如何划分Frame。<frameset>有cols属性和rows属性。
使用cols属性，表示按列分布Frame；
使用rows属性，表示按行分布Frame。
Frame
用<frame>这个Tag设定网页。<frame>里有src属性，src值就是网页的路径和文件名。
下面的代码的目的是：将Frameset分成2列，第一列25%，表示第一列的宽度是窗口宽度的25%；第二列75%，表示第一列的宽度是窗口宽度的75%。第一列中显示a.html，第二列中显示b.html。
<frameset cols="25%,75%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
</frameset>Iframe
Iframe是Inline Frame的意思，用<iframe></iframe>可以将Frame置于一个HTML文件内。
示例
这个例子显示如何在浏览器里同时显示三个网页，三个网页是按列分布的。
<html>
<frameset cols="25%,50%,25%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</html>这个例子显示如何在浏览器里同时显示三个网页，三个网页是按行分布的。
<html>
<frameset rows="25%,50%,25%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</html>这个例子既用到了cols属性，又用到了rows属性，将Frame进行灵活分布。
<html>
<frameset rows="50%,50%">
<frame src="../asdocs/html_tutorials/Frame_a.html">
<frameset cols="25%,75%">
<frame src="../asdocs/html_tutorials/Frame_b.html">
<frame src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</frameset>
</html>使用Noresize属性可以确保Frame的大小。如果不使用noresize属性，你可以用鼠标移动Frame的边界，来改变Frame的大小，如果设置了noresize属性，就不能移动边界了。
<html>
<frameset rows="50%,50%">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_a.html">
<frameset cols="25%,75%">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_b.html">
<frame noresize="noresize" src="../asdocs/html_tutorials/Frame_c.html">
</frameset>
</frameset>
</html><html>
<frameset cols="120,*">
<frame src="../asdocs/html_tutorials/framelist.html">
<frame src="../asdocs/html_tutorials/Frame_a.html" name="showframe">
</frameset>
</html>这个例子演示如何建立一个用于导航的Frame。这个导航Frame包含一个HTML，这个HTML（代码如下）包含了一个网页列表。点击网页列表中的任何一项，就会在第二个Frame中显示点击中的网页。
<HTML>
<HEAD>
<TITLE> humorlist.html </TITLE>
</HEAD>
<BODY>
<p><a href = "../asdocs/html_tutorials/Frame_a.html" target="showframe">笑话一<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_b.html" target="showframe">笑话二<a></p>
<p><a href = "../asdocs/html_tutorials/Frame_c.html" target="showframe">笑话三<a></p>
</BODY>
</HTML>这个例子显示如何在一个HTML文件里用iframe嵌入一个网页。
<html>
<body>
<p>用 IFRAME 可以在HTML文件里显示另一个网页。</p>
<p>这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。</p>
<iframe src="../asdocs/html_tutorials/Frame_a.html"></iframe>
</body>
</html>九、HTML列表(Lists)
HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。
排序列表(Ordered List)
排序列表中，每个列表项前标有数字，表示顺序。
排序列表由<ol>开始，每个列表项由<li>开始。
示例
<html>
<body>
<h4>一个排序列表(Ordered List)：</h4>
<ol>
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ol>
</body>
</html>不排序列表(Unordered List)
不排序列表不用数字标记每个列表项，而采用一个符号标志每个列表项，比如圆黑点。
不排序列表由<ul>开始，每个列表项由<li>开始。
示例
<html>
<body>
<h4>不排序列表(Unordered List)：</h4>
<ul>
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ul>
</body>
</html>定义列表
定义列表通常用于术语的定义。
定义列表由<dl>开始。术语由<dt>开始，英文意为Definition Term。术语的解释说明，由<dd>开始，<dd></dd>里的文字缩进显示。
<html>
<body>
<h4>定义列表(Definition List)：</h4>
<dl>
<dt>野生动物</dt>
<dd>所有非经人工饲养而生活于自然环境下的各种动物。</dd>
<dt>宠物</dt>
<dd>指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，又称作同伴动物。</dd>
</dl>
</body>
</html>更多示例
这个例子显示如何用Type属性设置排序列表项前的符号。
<html>
<body>
<h4>排序列表，不设Type属性：</h4>
<ol>
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ol>
<h4>排序列表，Type属性设为A：</h4>
<ol type="A">
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ol>
<h4>排序列表，Type属性设为a：</h4>
<ol type="a">
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ol>
<h4>排序列表，Type属性设为I：</h4>
<ol type="I">
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ol>
<h4>排序列表，Type属性设为i：</h4>
<ol type="i">
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ol>
</body>
</html>这个例子显示如何用Type属性设置不排序列表项前的符号。
<html>
<body>
<h4>Type设为disc的列表，列表项前面的符号是圆黑点：</h4>
<ul type="disc">
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ul>
<h4>Type设为circle的列表，列表项前面的符号是空心圆：</h4>
<ul type="circle">
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ul>
<h4>Type设为square的列表，列表项前面的符号是黑方块：</h4>
<ul type="square">
<li>网页课程</li>
<li>网页代码</li>
<li>魔兽世界</li>
</ul>
</body>
</html>列表里可以含有子列表。通常用这种嵌套的列表，反映层次较多的内容。
<html>
<body>
<h4>嵌套一层的列表：</h4>
<ul>
<li>肉类</li>
<li>蔬菜
<ul>
<li>番茄</li>
<li>青菜</li>
</ul>
</li>
<li>酒类</li>
</ul>
<h4>嵌套2层的列表：</h4>
<ul>
<li>动物
<ul>
<li>两栖动物</li>
<li>哺乳动物
<ul>
<li>人</li>
<li>猩猩</li>
</ul>
</li>
<li>鱼类</li>
</ul>
</li>
<li>植物</li>
</ul>
</body>
</html>十、HTML表单(Forms)
HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname">
<input type="submit" value="提交">
</form><html>
<head>
<title>输入用户姓名</title>
</head>
<body>
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>
</body>
</html>学习HTML表单(Form)最关键要掌握的有三个要点：
- 表单控件(Form Controls)
- Action
- Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type= "text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp。
至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有：
| 表单控件(Form Contros) | 说明 |
| input type="text" | 单行文本输入框 |
| input type="submit" | 将表单(Form)里的信息提交给表单里action所指向的文件 |
| input type="checkbox" | 复选框 |
| input type="radio" | 单选框 |
| select | 下拉框 |
| textArea | 多行文本输入框 |
| input type="password" | 密码输入框(输入的文字用*表示) |
表单控件(Form Control)：单行文本输入框(input type="text")
单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。例句如下：
<input type="text" name="yourname">演示示例（同上）
表单控件(Form Control)：复选框(input type="checkbox")
复选框允许用户在一组选项里，选择多个。示例代码：
<input type="checkbox" name="fruit" value ="apple">苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br><html>
<head><title>选择</title></head>
<body>
请选择你喜欢的水果：<br>
<form action = "http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="checkbox" name="fruit" value ="apple" >苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>用checked表示缺省已选的选项。
<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br><html>
<head><title>选择</title></head>
<body>
请选择你最喜欢的水果：<br>
<form action = "http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="radio" name="fruit" value = "Apple">苹果<br>
<input type="radio" name="fruit" value = "Orange">桔子<br>
<input type="radio" name="fruit" value = "Mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>用checked表示缺省已选的选项。
<input type="radio" name="fruit" value = "Orange" checked>桔子<br>表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select><html>
<body>
<form action = "http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
你最喜欢的水果是：
<select name="fruit" >
<option value="apple">苹果
<option value="orange">桔子
<option value="mango">芒果
</select>
<input type="submit" value="提交">
</form>
</body>
</html>如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
<select name="fruit" multiple>用户还可以用size属性来改变下拉框(Select)的大小。
<select name="fruit" size = "1" multiple>表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>其中cols表示textarea的宽度，rows表示textarea的高度。
<html>
<head><title>请提宝贵意见</title></head>
<body>
<form action="http://www.admin5.com/html/asdocs/html_tutorials/suggest.asp" method="get">
请提宝贵意见：<br>
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
<br>
<input type="submit" value="提交">
</form>
</body>
</html>表单控件(Form Control)：密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：
<input type="password" name="yourpw"><html>
<head><title>输入用户姓名和密码 </title></head>
<body>
<form action="http://www.admin5.com/html/asdocs/html_tutorials/userpw.asp" method="post">
请输入你的姓名：
<input type="text" name="yourname"><br>
请输入你的密码：
<input type="password" name="yourpw"><br>
<input type="submit" value="提交">
</form>
</body>
</html>表单控件(Form Control)：提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：
<input type="submit" value="提交">演示示例（同input type=”text”示例）
表单控件(Form Control)：图片提交(input type="image")
input type=image 相当于 input type=submit，不同的是，input type=image 以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。
<input type="image" src ="images/icons/go.gif" alt = "提交" NAME="imgsubmit"><html>
<head><title>输入用户姓名</title></head>
<body>
<form action="http://www.admin5.com/html/asdocs/html_tutorials/yourname.asp" method="get">
请输入你的姓名：
<input type="text" name="yourname"><br>
<input type="image" src ="images/icons/go.gif" alt = "提交" NAME="imagesubmit">
</form>
</body>
</html>
扫一扫
196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
