前期章节：
HTML基础教程（一） HTML基础教程（二） HTML基础教程（三）
目录
八、HTML框架(Frames)
九、HTML列表(Lists）
八、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文件内。
示例
列分Frame
这个例子显示如何在浏览器里同时显示三个网页，三个网页是按列分布的。
<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>
行分Frame
这个例子显示如何在浏览器里同时显示三个网页，三个网页是按行分布的。
<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>
混合Frameset
这个例子既用到了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>
Frameset中的noresize属性
使用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>
Frame用于导航
<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>
Iframe的使用
这个例子显示如何在一个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)的排序列表
这个例子显示如何用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)的不排序列表
这个例子显示如何用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>
