第2章 HTML基础_PHP Web开发快速入门及实例精选-QQ阅读女生青春网

书名：PHP Web开发快速入门及实例精选
作者名：陆昌辉等编著
本章字数：7030字
更新时间：2020-08-26 18:24:18

第2章 HTML基础

HTML英语意思是：Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX, Windows等）。本章将简单介绍HTML的基础知识以及如何创建表格和创建窗口框架。

2.1 HTML基本结构

HTML文件是标准的ASCII文件，它看起来像是加入了许多被称为链接签的特殊字符串的普通文本文件。从结构上讲HTML文件由元素组成，组成HTML文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”，即它有起始标记和结尾标记。元素的起始标记叫做起始链接签，元素结束标记叫做结尾链接签，在起始链接签和结尾链接签中间的部分是元素体。每一个元素都有名称和可选择的属性，元素的名称和属性都在起始链接签内标明，比如体元素。

        <body backgroud="back-ground.gif">
        <h2>演示</h2>
        这是一个HTML文件． <p>
        </body>

第一行是体元素的起始链接签，它标明体元素从此开始。几乎所有的链接签都具有相同的结构，具体解释如下：

● <起始链接签开始

● body元素名称，由于元素和链接签一一对应，所以元素名也叫链接签名。

需要注意的是，<和body之间不能有空格。元素名称不分大小写。background：背景属性名，一个元素可以有多个属性，属性及其属性值不分大小写。本属性指明用名为back-ground.gif图片来填充背景。

● =指明属性值

"background.gif" 属性值，表示用background.gif文件来填充背景。

属性名，=，属性值合起来构成一个完整的属性，一个元素可以有多个属性，各个属性用空格分开。

● >起始链接链结束

第二行和第三行是body元素的元素体，最后一行是body元素的结尾链接签。结尾链接签用</开始，随后是元素名，然后是>。

从上面的例子中，可以看出一个元素的元素体中可以有另外的元素，比如上例中第二行的标题元素<h2>…</h2>和第三行的分段元素<p>。实际上，HTML文件仅由一个HTML元素组成，即文件以<html>开始，以</html>结尾，文件的其部分都是html的元素体。HTML元素的元素体由两大部分，即头元素<head>…</head>和体元素<body>…</body>以及一些注释组成。头元素和体元素的元素体又由其他的元素和文本及注释组成。也就是说，一个HTML文件应具有下面的结构：

        <html>   html文件开始
        <head>   文件头开始
          文件头
        </head>  文件头结束
        <body>   文件体开始
          页面内容
        </body>  文件体结束
        </html>  html文件结束

2.2 格式化HTML页面

在HTML文件中，有些元素只能出现在头元素中，绝大多数元素只能出现在体元素中。在头元素中的元素表示的是该HTML文件的一般信息，比如文件名称，是否可检索等等。这些元素书写的次序是无关紧要的，它只表明该HTML有还是没有该属性。与此相反，出现在体元素中的元素是次序敏感的，改变元素在HTML文件中的次序会改变该HTML文件的输出形式。

一般来讲，HTML的元素有下列3种表示方法：

1.<元素名>文件或超文本</元素名>

2.<元素名属性名=“属性值…”>文本或超文本</元素名>

3.<元素名>

第3种写法仅用于一些特殊的元素，比如分段元素P，它仅仅通知www浏览器在此处分段，因而不需要界定作用范围，所以它没有结尾链接签。htlm3.0标准中，也定义了</p>链接签，它用于需要界定作用范围的段落，比如增加对齐方式属性的段落。

（1）title元素

title元素标明文档的标题，是对文件内容的概括，title元素仅可在head元素内使用，其格式为：

< title >文件题目</ title >

下面的例子使用的title元素指定了文档的标题。

        <head>
        <title>欢迎使用Internet Explorer! </title>
        </head>

（2）body元素

body元素指定文档主体的开始和结束，表2.1列出了body元素的常用属性。

表2-1 body元素的常用属性

例如：

        <body
        leftMargin=”0” topMargin=”0” marginwidth=”0” marginheight=”0”>正文内容</body>

① hn元素

标题元素有6种，分别为h1、h2、…、h6，用于表示文章中的各种题目。标题号越小，字体越大。一般情况下，浏览器对标题作如下解释：

h1黑体，特大字体，居中，上下各有两行空行。

h2黑体，大字体，上下各有一到两行空行。

h3黑体，斜体，大字体，左端微缩进，上下空行。

h4黑体，普通字体，比h3更多缩进，上边一空行。

h5黑体，斜体，与h4相同缩进，上边一空行。

h6黑体，与正文有相同缩进，上边一空行。

hn可以有对齐属性，如下：

align=left标题居左

align=center标题居中

align=right标题居右

例：<h2 align=center>居中标题文字</h2>

下面给出hn的例子：

<h1>PHP书籍</h1>

<h2> PHP书籍</h2>

<h3> PHP书籍</h3>

<h4> PHP书籍</h4>

<h5> PHP书籍</h5>

<h6> PHP书籍</h6>

② p元素

HTML的浏览器是基于窗口的，用户可以随时改变显示区的大小，所以HTML将多个空格以及回车等效为一个空格，这与绝大多数字处理器是不同的。HTML的分段完全依赖于分段元素<P>，比如下面两段源文件有相同的输出。

源码一：

        <h2>您认为哪场比赛最好看</h2>
        英格兰vs阿根廷<p>巴西vs葡萄牙<p>

源码二：

        <h2>您认为哪场比赛最好看</h2>
        英格兰vs阿根廷<p>
        巴西vs葡萄牙<p>

<p>也可以有多种属性，比较常用的属性是：

align=left标题居左

align=center标题居中

align=right标题居右

例：<p align=center>您认为哪场比赛最好看</p>

当HTML文件中有图形时，图形可能占据了窗口的一端，图形的周围可能还有较大的空白区。这时，不带clear属性的<p>可能会使文章的内容显示在该空白区内。为确保下一段内容显示在图形的下方，可使用clear属性。clear属性的含义为：

clear=left下一段显示在左边界处空白的区域

clear=right下一段显示在右边界处空白的区域

clear=all下一段的左右两边都不许有别的内容

③ 清单<List>

清单用于列举事实，常用的清单有3种格式，即无序清单（unordered list），有序清单（ordered list）和定义清单（definition list）。

④ 无序清单<ul>

无序清单用（ul）开始，每一个清单条目用<li>引导，最后是</ul>。

注意：清单条目不需要结尾链接签</Li>，输出时每一个清单条目缩进，并且以黑点标示。

例：无序清单

        <ul>
        <li>英格兰
        <li>阿根廷
        </ul>

输出为

● 英格兰

● 阿根廷

⑤ 有序清单<ol>

有序清单与无序清单相比，只是在输出时清单条目用数字标示，下面是一个例子及其输出结果：

        <ol>
        <li>阿根廷
        <li>英格兰
        </ol>

输出为：

● 阿根廷

● 英格兰

⑥ 定义清单<dl>

定义清单用于对清单条目进行简短说明的场合，用<dl>开始，清单条目用<dt>引导，它的说明用<dd>引导。

        <dl>
        <dt>阿根廷
        <dd>梅西在巴塞罗那取得了辉煌的成绩，而且在2005年的世青赛上一举成名帮助阿根廷队赢得了冠军，而且成为了那届赛事的最佳射手和最佳球员。
        <dt>英格兰
        <dd>鲁尼，这是英格兰队最大的宝贝。这是世界给予英格兰人的足球礼物。
        </dl>

输出为：

阿根廷

梅西在巴塞罗那取得了辉煌的成绩，而且在2005年的世青赛上一举成名帮助阿根廷队赢得了冠军，而且成为了那届赛事的最佳射手和最佳球员。

英格兰

鲁尼，这是英格兰队最大的宝贝。这是世界给予英格兰人的足球礼物。

⑦ 块引用<BLOCKQUOTE>

块引用设置文本中的一段引语。浏览器内对块引用的解释一般为左右缩进，上下各有一空行，有些浏览器还采用斜体字。

例：

        <P>他说，
        <BLOCKQUOTE>“你好！”</BLOCKQUOTE>

⑧ 预排版文本<pre>

HTML的输出是基于窗口的，因而HTML文件在输出时都是要重新进行排版的，若确实不需要重新排版的内容，可以用<pre>…</pre>通知浏览器。浏览器在输出时，对这部分内容几乎不做修改地输出。早期的HTML规范规定：在预排版区内不能出现格式化输出的元素，如hn等，而Netscapr2.0在遇到预排版元素时，允许其中有其他元素。

        <pre>
            轻轻的你来了 带来了你那迷人的笑容
            轻轻的你来了 叩响了我宁静的心扉
            轻轻的你来了 帮我赶走我心中的孤寂
        </pre>

⑨ 居中<center>

很多元素都有对齐方式属性，如hn、p等。也可以直接使用居中链接签<center>居中内容</center>。

        <h3 align=center>
        居中标题
        </h3>
        <center>
        居中文字
        </center>

输出为：

居中标题

居中文字

⑩ 链接

所谓链接在本质上属于一个网页的一部分，它是一种允许同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

要了解链接，首先必须先了解一下相对路径和绝对路径，相对路径：相对当前目录的路径；绝对路径：从根目录下的全路径（一般不推荐使用）。

例如：

<a href="d:/test.htm"> 这是一个绝对路径

<a href="./test.htm"> 这是一个相对路径

A网页内部的链接

● 使用方法

先在欲链接处做记号：<a name="here1">这里是用户想链接的点</a>，然后，设定链接：<a href="#here1">链接</a>

● 标志解说

当某页的内容很多时，可以利用网页的内部链接，以便使用者快速地找到资料。

● 使用范例

表2-2 内部标签

网页外部的链接使用范例：

网站链接：<a href="http://www.163.com">网易</a>

电子邮件链接：<a href="mailto:163@163.com">我的电子邮箱</a>

ftp链接：<a href="ftp://ftp.163.com">下载档案</a>

news链接：<a href="news: news.163.com"> news服务</a>

gopher链接：<a href="gopher://gopher.163.com/"> gopher服务</a>

bbs链接：<a href="telnet://bbs.163.com/"> bbs服务</a>

B链接标志的参数

● 使用方法

在链接后面加入target=_参数

● 标志解说

链接的参数并不多，常见的大概就是target这个参数了，target的意思是『目标』，也就是网页链接的指向目标，这参数在框窗（frame）里尤为重要！

● 使用范例

target=框窗名称：在框架（框窗or frame）中才用得到。正常而言，框窗有各自的名称；因此，我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。

target=_blank：在新的浏览窗口中显示链接的画面内容。

target=_parent：把链接的画面内容当成文件的上一个画面。

target=_self：在目前的窗口中显示链接的画面内容。

target=_top：这个参数可以解决新链接的画面内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。

⑪图像的使用，也就是images

● 基本语法

<img src=#> #表示图像的URL，也就是图像在网上的地址。

<img alt=#> #表示在浏览器尚未完全读入图像时，在图像位置显示的文字；也是图像显示以后，当鼠标放在图片上时所显示的文字。

例子：<img src="./mingxing.jpg" alt=”明星相片”>

● 图像在页面中的对齐/布局

语法：

          <img align= left >
          <img align= center >
          <img align= right >

使用图像的align属性，left表示居左，center表示居中，right表示居右。

例子：

          <img src="./mingxing.jpg " alt=”明星相片” align=left>

● 图像和文字的对齐

语法：

          <img align= top >
          <img align= middle >
          <img align= bottom >

分别表示文字在图片的靠上边、中间、底端。

● 图像的边框

<img border=value> value的值是数字，是指这个图像的边的宽度。

例：

          <img src="./mingxing.jpg"alt=”明星相片”  border=1>

⑫字体<font>

指定用于渲染所包含文本的新字体、大小和颜色，现行的新版本浏览器已经慢慢不使用<font>这样的标识了，它基本上被CSS样式表所取代，CSS样式表请参考层叠样式表的相关资料。

font标签的常用属性：

color：设置或获取该对象要使用的颜色。

size：设置或获取该对象的字体大小。

例：

          <FONT SIZE="5" COLOR="#FFFF00"></FONT>

⑬分行<BR>和禁止分行<nobr>

<br>表示在此处分行；<nobr>....</nobr>通知浏览器，其中的内容在一行内显示，若一行内显示不了，则超出部分被裁剪掉。

clear属性表明了下一行的超出部分将被裁剪掉，语法如下：

          <br clear=left>
          <br clear= right >
          <br clear=all>

⑭转义字将与特殊字符

在HTML中<, >, &有特殊含义，（前两个字符用于链接签，&用于转义），在使用这三个字符时，应使用它们的转义序列。

表2-3 数据类型检查函数

例如，在HTML中写& Lt; font &Lgt；显示为<font>，若直接写为<font>则被认为是一个链接签。

注意：

a．转义序列各字符间不能有空格；

b．转义序列必须以“; ”结束；

c．单独的&不被认为是转义开始。

如“&空格Lt; ” 被解释为“& Lt; ”而不是 <

如“&# 62空格；” 被解释为“&# 62; ”而不是 >

HTML使用的字符集是ISO &859 Larin-1字符集，该字符集中有许多标准键盘上无法输入的字符，对这些特殊字符只能使用转义序列。

2.3 创建HTML表格

一个表格由<table>开始，以</table>结束，表的内容由<tr>, <th>和<td>定义。<tr>说明表的一个行，表有多少行就有多少个<tr>; <th>说明表的列数和相应栏目的名称，有多少列就有多少个<th>; <td>用来填充由<tr>和<th>组成的表格。

下面是一个表格HTML源码：

        <table border=1 width=80%>
        <thead>
        <tr>
        <th>标题 1</th>
        <th>标题 2</th>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>第 1行，第 1列文本。</td>
        <td>第 1行，第 2列文本。</td>
        </tr>
        <tr>
        <td>第 2行，第 1列文本。</td>
        <td>第 2行，第 2列文本。</td>
        </tr>
        </tbody>
        </table>

表格结构中可以出现：caption, col, colgroup, tbody, tfoot和thead标签，其中对于每个table对象，仅可指定一个thead和tfoot。

1. caption：指定表格的简要描述。

例如：

        <table>
        <caption valign=bottom>
        此标题将出现在表格下方。
        </caption>
        <tbody>
        <tr>
        <td>
        这是表格中的文本。
        </td>
        </tr>
        </tbody>
        </table>

其中valign=bottom表示标题出现的位置，其值为top和bottom，设置标题是在表格的上面还是下面。

2. col：指定基于列的表格默认属性。

例：

        <html>
        <body>
        <table border="2" rules="groups">
        <! -- 规则设定为 "groups"，这在本例中没有效果。要使此属性工作，必须使用colspan定义列组。
    -->
        <colspan="2" style="color: red">
        <col style="color: blue">
        <tr>
        <td>此列位于第一组。</td>
        <td>此列位于第一组。</td>
        <td>此列位于第二组。</td>
        </tr>
        <tr>
        <td>此列位于第一组。</td>
        <td>此列位于第一组。</td>
        <td>此列位于第二组。</td>
        </tr>
        </table>
        </body>
        </html>

col元素可嵌入于colgroup元素内。如果是这样的话，嵌套的col属性将覆盖colgroup属性。

3. colgroup：指定表格中一列或一组列的默认属性。

下面的例子使用了colgroup元素指定表格中两组列的特征

        <html>
        <body>
        <table border="2" rules="groups">
        <! -- 规则设定为 "groups"，这将在由colgroup定义的表格列周围放置内部分隔线。-->
        <colgroup span="2" style="color: red">
        </colgroup>
        <colgroup style="color: blue">
        </colgroup>
        <tr>
        <td>此列位于第一组。</td>
        <td>此列位于第一组。</td>
        <td>此列位于第二组。</td>
        </tr>
        <tr>
        <td>此列位于第一组。</td>
        <td>此列位于第一组。</td>
        <td>此列位于第二组。</td>
        </tr>
        </table>
        </body>
        </html>

若在colgroup中嵌套了col元素，col元素的标签属性将覆盖colgroup元素的标签属性。下面的例子演示了这一点。

        <html>
        <body>
        <table border="2">
        <colgroup span="3" style="color: gren; background: black">
        <! -- 样式仅应用于前两列，而不是所有的三列，而且字体是红色而不是绿色。这是col元素的标签属性导致的。-->
        <col style="color: red">
        </colgroup>
        <tr>
        <td>此列位于第一组。</td>
        <td>此列位于第一组。</td>
        <td>此列位于第二组。</td>
        </tr>
        <tr>
        <td>此列位于第一组。</td>
        <td>此列位于第一组。</td>
        <td>此列位于第二组。</td>
        </tr>
        </table>
        </body>
        </html>

4. tbody元素：表示内容为表格主体。

tbody元素内包含的有效标签有：td, th, tr。tbody元素会为全部表格自动定义，就算表格没有显式定义tbody元素。

下面的例子使用了tbody元素和table, td, thead和tr元素创建了一个第一行是表格标题，第二行是表格主体的表格。

            <table>
            <thead>
            <tr>
            <td>
            这是thead中的文本。
            </td>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>
            这是tbody中的文本。
            </td>
            </tr>
            </tbody>
            </table>

5. tfoot：表示为表尾。

tfoot元素内包含的有效标签有：td, th, tr。任何table对象都只能定义一个tfoot。

这个例子使用tfoot元素和table, tbody, td和tr元素创建了一个表格，第一行位于表格主体，第二行位于表格尾。

        <table>
        <tbody>
        <tr>
        <td>
        此文本位于表格主体。
        </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
        <td>
        此文本位于表尾。
        </td>
        </tr>
        </tfoot>
        </table>

6. thead元素：指明行作为表头。

thead元素内包含的有效标签有：td, th, tr。任何table对象都只能定义一个thead。

下面的例子使用thead元素和table, tbody, td和tr元素创建了一个表格，第一行位于表头，第二行位于表格主体。

        <table>
        <thead>
        <tr>
        <td>
        此文本位于表头。
        </td>
        </tr>
        </thead>
        <tbody>
        <tr>
        <td>
        此文本位于表格主体。
        </td>
        </tr>
        </tbody>
        </table>

7．有通栏的表

（1）有横向通栏的表用<th colspan=#>属性说明。colspan表示横向栏距，#代表通栏占据的网格数，它是一个小于表的横向网格数的整数。

（2）有纵向通栏的表用rowspan=#属性说明。rowspan表示纵向栏距，#表示通栏占据的网格数，应小于纵向网络数。需要说明的是有纵向通栏的表，每一行必须用</tr>明确给出一横向栏目结束，这和表的基本形式不同。

8．表的大小，边框宽度，表格间距

（1）表的大小用width=#和height=#属性说明。前者为表宽，后者为表高，#是以像素为单位的整数。

（2）边框宽度由border=#说明，#为宽度值，单位是像素。

（3）表格间距即划分表格的线的粗细用cellspacing=#表示，#的单位是像素。

9．表中文本的输出

（1）文本与表框的距离用cellpadding=#说明。下面的例子使表的内容与表框相距10个像素。

        <html>
        <body>
        <table cellpadding=10 >
        <tr><td bgcolor=\"green\">
        abcd<br>abcd</td>
        <td bgcolor=\"yellow\">
        efgh</td>
        </tr>
        <tr><td bgcolor=\"red\">
        ijkl</td>
        <td bgcolor=\"blue\">
        mnop</td></tr>
        </table>
        </body>
        </html>

（2）表格的后度大于其中的文本后度时，文本在其中的输出位置与用align=#说明。

#是left, center和right三者之一，分别表示左对齐，居中和右对齐，align属性可修饰<tr>, <th>和<td>链接签。

从下面例子能看出：

      <table border width=160>
      <tr>
          <th>Food</th><th>Drink</th><th>Sweet</th>
      <tr>
          <td align=left>A</td>
          <td align=center>B</td>
          <td align=right>C</td>
      </table>

运行结果如下：

（3）表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是top, middle, bottom, baseline四者之一。分别表示上对齐，文本中线与表格中线对齐，下对齐，文本基线与表格中线对齐，特别注意的是baseine对齐方式，它使得文本出现在网格的上方而不是想象中的下半部。同样，valign可以修饰<tr>, <th>, <td>中的任何一个。

10．浮动表格

所谓浮动表格是指表与文件中内容对齐时，若在现在位置上不能满足其对齐方式，表格会上下移动，即“挤开”一些内容，直到满足其对齐要求。

浮动属性一般由align=left或right指定。

从下面的例子也可以看出，align=right时把表格2“挤到”了表的左边。

        <table border="1" width="30%" id="table1" align="right">
        <tr>
        <td>这是浮动表格测试</td>
        </tr>
        </table>
        <table border="1" width="70%" id="table2">
        <tr>
        <td>2</td>
        </tr>
        </table>

11．表格颜色

表格的颜色用bgcolor=#指定。#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。

        <table border>
            <tr><th bgcolor=000000>
            <font color=ffffff>Food</font></th>
            <th bgcolor=whit>Drink</th>
            <tr><td bgclor=ffaaaa>A</td><td>B</td>
        </table>

2.4 创建窗口框架

网页窗口框架可以把浏览器窗口分成几个独立的部分，每部分显示单独的页面，页面的内容是互相联系的。内容非常多的网页不宜采用框架式结构，所以大网站中几乎所有的网页都不是框架式网页。框架（Frames）由框架集（Frameset）和单个框架（Frame）两部分组成。框架集是一个定义框架结构的网页，它包括网页内框架的数目、每个框架的大小、框架内网页的来源和框架的其他属性等。单个框架包含在框架集中，是框架集的一部分，每个框架中都放置一个内容网页，组合起来就是浏览者看到的框架式网页。

框架集的基本结构如下：

        <html>
              <head>
            <title>标题</title>
            </head>
            <frameset cols="25%, 50%, *">
            <frame src="contents.htm">
            <frame src="info.htm">
            <frame scrolling="no" src="graphic.htm">
          </frameset>
          <noframes>对于那些不支持FRAMESET元素的浏览器使用的HTML </noframes>
      </html>

<nframes>标签中的内容显示在不支持FRAMESET元素的浏览器窗口中，这里可以指向一个普通版本的HTML文件，以便使用不支持FRAMESET元素的浏览器的用户访问。

框架由<frameset>指定，并且可以嵌签，框架中各单框架显示的内容用<framre>指定。需要说明的是，frame是一个新出现的元素，有些流览器不支持它。

下面的例子使用了frame元素定义框架的属性，包括由框架载入的页面的位置。

        <frame frameborder=0 scrolling=no src="sample.htm">

Internet Explorer 5.5支持frame的内容透明。如果想要为frame定义透明内容，则必须满足下列条件。

● 与frame元素一起使用的allowtransparency标签属性必须设置为true。

● 在frame内容源文档，background-color或body元素的bgcolor标签属性必须设置为transparent。

可以将窗口横向分成几个部分，也可以分成纵向几个部分，还可以混和分框。

1．横向分框

横向分框用<frameset cols=#>指定，#可以是一个百分数，也可以是一整数。前者规定各框占窗口的百分数，后者指定各框的绝对大小。例如，下面的例子将窗口分成30%、20%、50%的几个区域，各区域的内容分别为a.html, b.html, c.html.

        <html>
        <head>
        <title>无标题文档</title>
        </head>
        <frameset rows="30%,20%,50%" frameborder="no" border="0" framespacing="0">
          <frame src="a.html">
          <frame src=" b.html " name="mainFrame" id="mainFrame" title="mainFrame" />
          <frame src=" c.html " name="bottomFrame" />
        </frameset>
        <noframes>
        <body>
        </body>
        </noframes>
        </html>

2．纵向分框

纵向分框用<frameset cols=#>指定，参见下例。

        <frameset cols="80, *" frameborder="no" border="0" framespacing="0">
          <frame src="a.html">
          <frame src="b.html">
        </frameset>

3．混合分框

将窗口分成横纵几个区域时，用<framset>代替<frame>链接至即可将原来分好的<frame>区域再次分框，下面的例子先将窗口分成20%,80%，然后将右边的区域（即80%的那部分区域）再分成分别占40%和60%的上下两个区域。

        <frameset rows="*" cols="20%,80%" frameborder="no" border="0" framespacing=
    "0">
          <frame src="a.html" name="leftFrame" scrolling="No" noresize="noresize"
    id="leftFrame" />
          <frameset rows="40%,60%" frameborder="no" border="0" framespacing="0">
            <frame src="b.html" name="topFrame" scrolling="No" noresize="noresize"
    id="topFrame" />
            <frame src="c.html" name="mainFrame" id="mainFrame" />
          </frameset>
        </frameset>

4．分框与框中文本的间距

分框与其中的文本间距可以用Marginwidth=#和marginheigh=#来指定，前者指定文本与分框边缘的横向距离，后者为纵向距离，其单位都为像素。在下面的例子中，将右边分框的左右边距，上下空白都设为50个像素。

        <frameset cols="80, *" frameborder="no" border="0" framespacing="0">
          <frame src="a.html" marginWidth = “50px"  marginheigh = “50px" >
          <frame src="b.html" marginWidth = “50px"  marginheigh = “50px" >
        </frameset>

5．分框间的关联

分框之间可以有特定的关联，比如将某一框的内容输出到另一个框，这样就可以把其中一个框作为输出框，另一个框作为选择框。实现这种关联需要做下列的事情：

（1）在分框的frame文件中标记各个框，标记的方法是在<frame>中加入name属性，比如在下例中，定义左边的框为输出，右边框为索引。

        <frame src="A.html" name=display>
        <frame src="B.html" name=index>

（2）在A.html文件中指定输出到哪个框，具体方法是在A.html文件中加入下列一行。

        <base target="display">

这便得用鼠标单击A.html中的链接指针，它的输出会显示在左边的框中。

frameSet常用属性说明：

        < frameSet cols="120, *" frameborder=0 framespacing=5>

① cols：设置或获取对象的框架宽度

cols的值可以用百分比表示：

        <FRAMESET cols="40%, 60%">

cols的值可以用像素表示：

        <FRAMESET cols="50, 2*, *, 80">

② rows：设置或获取对象的框架高度。

rows的值可以用百分比表示：

        <FRAMESET rows ="40%, 60%">

rows的值可以用像素表示：

        <FRAMESET rows ="50, 2*, *, 80">

③ frameborder：设置或获取是否显示框架的边框。

设定框架的边框，其值可以为0、1、no、yes,0和no就是不要边框，1和yes表示要显示边框。边框是无法调整粗细的。

④ framespacing：表示框架与框架间的保留空白的距离。

        <frame src="a.htm" name="1" frameborder=0 scrolling="no" noresize
    marginheight=2 marginwidth=2>

⑤ src：设定此框架中要显示的网页地址。

⑥ name：设定这个框架的名称，这样才能指定框架来做连结，一定要设定，具体名称可以随便取。

⑦ frameborder：设定框架的边框，其值只有0和1,0就是不要边框，1就是要显示边框。边框是无法调整粗细的。

⑧ scrolling：设定是否要显示滚动条，Yes是要显示滚动条，No是无论如何都不要显示，Auto是视情况显示。

⑨ noresize：设定不让使用者可以改变这个框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。

⑩ marginheight：表示框架高度部分边缘所保留的空间。

⑪marginwidth：表示框架宽度部分边缘所保留的空间。

6. Iframe元素

Iframe是创建内嵌浮动框架标签，可以用它在HTML文档中嵌入另一个HTML文档。它不同于Frame标记的最大特征是在这个标记中所引用的HTML文件不是与另外的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体。

下面的例子是用iframe元素创建的包含页面sample.htm的框架。

        <Iframe id=iframe1 frameborder=0 scrolling=no src="sample.htm"></iframe>

Iframe元素常用属性有：

● name：内嵌帧名称。

● width：内嵌帧宽度（可用像素值或百分比）。

● height：内嵌帧高度（可用像素值或百分比）。

● frameborder：内嵌帧边框。

● marginwidth：帧内文本的左右页边距。

● marginheight：帧内文本的上下页边距。

● scrolling：是否出现滚动条（"auto" 为自动，"yes" 为显示，"no" 为不显示）。

● src：内嵌入文件的地址。

● style：内嵌文档的样式（如设置文档背景等）。

● allowtransparency：是否允许透明。

下面是一个使用Iframe的例子：

        <html>
        <head>
        <title>使用Iframe的例子 </title>
        </head>
        <body>
        <Iframe name=123  align=middle marginwidth=0 marginheight=0 vspace=-170
    hspace=0 src="http://www.163.com/"  frameborder=no scrolling=no  width=776
    height=2500></Iframe>
        </body>
        </html>