一，HTML语言的一般语法：

1，围堵标记：<>…

1）带属性的标记： …

2）无属性的标记：加粗 居中 标题

2，空标记：有开始无终点 <>……

2）无属性标记：
回车或换行

二，HTML语言常用标记介绍

1，文件标记：

1）：表示网页文件的开始和结束

2）：头，文件头标记，浏览当中不想放在里面的，不想显示的。

①网页的标题 ②脚本语言代码 ③自定义的CSS样式 ④网页自动转向（刷新） ⑤网页背景音乐

3）：设置网页标题

4）：身体，文件体标记（网页里所有内容）

标记的属性：

①text=#000000 16进制数表示（网页文本色）网络颜色（216种）

0123456789ABCDEF

格式：

红：FF0000 绿：00FF00 蓝：0000FF

黄：FFFF00 洋红（品色）：FF00FF 青：00FFFF

白：FFFFFF 黑：000000 浅蓝：5555FF

深蓝：000099 灰色：为均值时 中灰色：777777 深灰：333333

可用英文单词：如：red 红 black 黑 gray 灰

②bgcolor=#FFFFFF （设置背景色）

③link=#000000（文字超链正常显示的颜色）

④alink=#000000 （文字超链击活时显示的颜色）

⑤vlink=#000000 （文字超链用过后显示的颜色）

⑥background=“文件名”（设置网页背景图）必须是gif jpg PNG格式

⑦bgproperties=fixed （固定网页背景图）

注意：

1)属性属于标记，不能单独使用。

2)属性的值两侧的“”引号可省略。

3)属性可使用多个，属性之间至少用一个空格分开，无前后次序，但必须在标记后面。

2，排版类标记：

1）：空标记，放在头部。2）

：标记（定义自然段）

3）
：空标记，软回车

4）

①size=数值（线的粗细）单位：px（像素）

②width=数值（线的长度或宽度）可以用px，也可用%（相应宽度）

③align=center或left或right 居中 居左 居右

④noshade：取消阴影（水平线的）

⑤color=#000000：设置水平线颜色

第二节

5）：控制文本或图片水平居中

6）

：预设格式（按照原代码的格式，在IE中显示）字号自动小一级

7）：加粗， =相等

8）：斜体（倾斜） =相等

9）：设置下划线

10）

…

：六级标题，特点：独站一行（字体、字形、字号不能改变）

11）：排版标记，（设置字体，字号，字色）

属性：face=宋体或其它

size=数值，从1-7（绝对字号）或（+1-+7）（-1- -7）相对字号 默认字号为3号

color=#000000 等于某个颜色值按ctrl+拖动，复制

字号 1 2 3 4 5 6 7

实际大小 9(px) 10pt磅 12pt 14pt 18pt 24pt 36磅

1英寸=72磅 1(pt)=0.3527mm（毫米）

3，链接标记：

：为网页中文字或图片设置超链接（也可做内部链接）属性：href=URL（网址）完整的 加http://

title=文字 设置鼠标指针标签

target=_blank 新建窗口

_self 目标窗口（默认）

目录网页 如：加=../图片名(…)上目录

4，图片标记：

1）src=文件名绝对路径：file://d:“文件夹名”/图片名（网页和图片是链接关系）

2）alt=文字（设置图片凭带文本）不显示图片：工具/选项/显示图片/不打勾t，浏览网页中（右击“显示图片”）

3）height=数值（单位：px）高度

4）width=数值（单位：px）宽度

5）align=top（顶）一行文字 middle（中） 图片与同行文字的对齐方式 bottom（底） left（左） 图片的水平对齐方式 right（右）

6）vspace=数值 （垂直间距） 左右两侧

7）hspace=数值 （水平间距）

8）border=数值（设置图片边框大小）

5，表格标记：

1）创建表格的标记：

①：定义一个表格

②：定义一个行

③：定义一个单元格

④：定义一个单元格（一般用表头）

第一行

第二行

加文字第一行，第一个单元格

加文字

结束第一行

结束第二行

ctrl+Z：撤消

的属性：

①width=数值（实数）绝对宽度、或（百分比）相对宽度

②height=数值

③cellspacing=数值（单元格之间的间格距离）

④cellpadding=数值（内容对应单元格的间格距离）

⑤align=left 控制表格center 居中 在容器中的水平 right 右对齐方式

⑥bgcolor=#000000（设置表格背景色）

⑦background=文件名（设置表格背景图）

⑧border=数值（表格边框大小）

如果出现待机状态：ctrl+alt+← 退格

⑨bordercolor=#000000（设置边框颜色）

⑩bordercolorlight=#000000（设置边框的像光色）

⑾bordercolordark=#000000（设置边框背光色）

的属性

①align=left 内容的水平对齐方式center right

②valign=top 内容的垂直对齐方式middle bottom

③colspan=数值（横向占格）本身还占一个格

④rowspan=数值（纵向占格）

第三节

1，其它标记：

1）：空标记

作用：①定义网页代码 ②设置搜索关键字 ③URL自动刷新或自动转向 ④设置网页切换的动态过渡的效果

①定义网页代码：（ctrl+U）字体 内容 类型 楷体

②收索关键字： 关键之间可用“；”分开

③若干时间后，网页自动刷新转到指定的地址：

④动态过渡效果：

page-enter：网页进入时出现动画

page-exit：网页退出时出现动画

transition：设置动画的过渡效果（0-23）共24种

duration：持续时间，单位是秒

0：盒状收缩 1：盒状放设 2：圆形收缩

3：圆形放射 4：由下往上 5：由上往下

6：从左至右 7：从右至左 8：垂直百叶窗

9：水平百叶窗 10：水平格状百叶窗 11：垂直格状百叶窗

12：随意溶解 13：从左右两端向中间展开

14：从中间向左右两端展开 15：从上下两端向中间展开

16：从中间向上下两端展开 17：从右上角向左下角展开

18：从右下角向左上角展开 19：从左上角向右下角展开

20：从左下角向右上角展开 21：水平线状展开

22：垂直线状展开 23：随机（不一定）

2，：设置网页背景音乐（位置在头部）空标记

声音格式： （Mp3不能设置）体积小单音 声音效果好，但体积大（一首歌5Mb）

属性：src=文件名

loop=数值（设置音乐拔放的次数）如果不用是无限

3，：为文字或图片设置“走马灯”效果（围堵类）

属性：

①behavior =scroll 无限寻环滚动

slide 从右到左滚动一次，到边即停

alternate 左右来回滚动（弹）

②direction=left（默认）从右向左

right 左向右

up 向上（下到上）

down 向下（上到下）

③scrolldelay=数值（控制延迟时间，单位：毫秒）

④scrollamount=数值（控制两针之间移动的距离，单位：像素）

⑤loop=数值（控制寻环次数）

⑥width=数值（控制滚动的宽度）

⑦height=数值（高度）

⑧bgcolor=#000000（控制滚动期间的背景色）

鼠标移入“走马灯”停止移动：

onmouseover=this.stop(); onmouseout=this.start();

4，特殊字符：

1）空格： （一个空格占0.5个汉字）

2）版权：○C ©

3）○R ®

4）商标：TM ™

5）&：&

6）人民币：¥

7）黑桃：♠

8）剑号：†

9）叉字号：&psI;

10）方块号：♦

11）小脚丫：ö

12）心号：&hearts

13）草花：&dabs

HTML基础-第一讲

HTML是网页主要的组成部分，基本上一个网页都是由HTML语言组成的，所以要学习网站怎样建设，必须从网页的基本语言学起。

先简单的介绍一下HTML语言（我们在这灌输大家的是能够实际操作），HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人

建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现

在你看到的就是这种语言写的页面。

是呀，HTML并不是很神奇，只是因为你不是很了解它，现在咱们就开始接她的面纱：

一、HTML的组成结构（头部、眼睛、身体----好像一个人一样是不是？）

1、头部。只要你学过英语，你应该知道头怎么用英文写吧！yes，HEAD就是了；所以，头部的HTML写法就是头部的内容，简单不，大

家注意一下，这两个非常相似，只是后一个比前一个多了“/”符号。类似这样的以后会经常用到。

2、眼睛。就好像人的眼睛一样，它是心灵的窗口，而一个网页的眼睛应该就是它的页面的标题了，标题怎么说呢？title,yes！大家知道眼睛是长在

头上的，所以啦:标题这些应放在和之间。也就是

标题

3、身体。身体是网页最主要的部分了，因为前面讲的都不是页面所显现出来的，而大家所看到的页面页就是他的身体部分了（当然它的TITLE可以在

浏览器的最左上角可以看到），身体----BODY，他的写法也就是：页面内容最后，别忘了把这些部分组成一体----网页，所以咱们就

用把他们给包起来。

好了，咱们来大体看看网页的结构：

标题

页面内容

HTML基础-第二讲

我们在第一讲里概括了一下网页的主要框架，现在我们来详细的研究网页的内部细则：

先从它的身体部分(body) 开始：

欣赏一个网页时，一般先注意到的是这个页面的背景，如果有背景音乐，那就更吸引人了！是不是呀，那么这些是怎么实现的呢？看下边：

1、背景颜色

我们发现多了个bgcolor其实就是backgroundcolor（背景颜色）的意思，bgcolor="red"设置网页的背景颜色为红色，现在颜色

一般都是#ff0000样式的。

2、背景图片

中“backgroud”就是设置背景图片的啦，back-ground.gif是背景图片的名字，为什么有的朋友也是如此写

的，而网页却没有背景图片呢？其实back-ground.gif是该图片相对于这个页面的位置，比如你做的这个页面放在c:\我的网站\，而背景图片的位置

放在c:\我的网站\images\，那么就得这样写了：，注意两者的区别！

3、背景音乐

背景音乐和上边介绍的两个有很大的不同，它的代码是放在页面的头部里，为什么在这里讲呢？就是因为它也是显示网页的时候我们

首先接受到的信息。看看它的代码吧：

bgsound 不用说了吧背景声音，background_sound.mid是音乐的文件名，当然也得写它的相对路径哦（关于相对路径，可能有的网友，一下子不能搞

明白，我们将会在其他板块介绍的）！loop，循环，那么loop="-1"是什么意思呢？loop是bgsound 的一个属性，当然src也是了，后边跟得就是属性

值了，那么loop="-1"就是无限循环的意思，只要是页面打开，音乐不会停止的，loop="1"说明循环一次，等于0就是不循环了，呵呵，简单不！

4、body其它属性：topmargin，leftmargin。有的朋友再做页面的时候，感觉文字或者表格怎么也不能靠在浏览器的最上边和最左边，怎么回事呢？

因为一般我们用的制作软件或者说html语言默认的都是topmargin和leftmargin值等于12，如果你把他们的值设为0，你看看会有什么效果！如下比较

一下和，有兴趣的朋友可以任意设置他们的值！

好了，这一节先讲到这里！大家在自己的电脑上实习一下，呵呵！

HTML基础第三讲---字体

同样我们在这里继续讲一下它的body，因为它能直观的让大家观察到你所学到的成果。

这一讲，我们来学习字体及其属性，然后大家在学习完后制作一下，看看它的每一个属性所表现的效果。

字体，英文font，这html语言中也是它---font，下面咱们来研究一下font:

1、标题字体 文字 # =1，2，3，4，5，6

比如：

今天天气真好！

注意：这些一般的用在标题上，所以起名叫标题字体； ... 这些标记显示黑体字；这些标记自动插入一个空行，不必用

标记再加空

行，因此在一行中无法使用不同大小的字体。

2、字体的大小，用于一般文字。

文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -#

#=1, 2, 3, 4, 5, 6, 7

例子：今天天气真好！

3、逻辑字体(Logical Style)

下划线：文字，代码：文字，删除线：文字，闪烁：文字，增强：文

字，强调：文字，示例：文字，还有老多，一般的这些了解一下就可以。

4、字体的标志，很常用的。粗体：文字，斜体：文字

5、字体颜色

指定颜色 文字 # ="#rrggbb" 16 进制数码，或者是下列预定义色彩：

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 

对于16 进制编码的颜色，我们可以这样理解rrggbb六个字符：前两个表示红色，中间的两个表示绿色，后两个表示蓝色；那么，红色（red）

ff0000，同样绿色（green）00ff00，蓝色0000ff；其它的颜色就是这几个字符（0-9，a-f）的组合。

比如： 文字 红色文字

文字 红色文字

大家看看 文字 是什么颜色的文字

6、客户端字体(Font Face)

... #=客户端可获得的字体，什么是客户端，通俗的讲，就是你的电脑，face="#"就是从你的电脑获得的字

体，大家可以点击客户端字体(Font Face)示例 。

7、字符实体(Entities)，字符实体一般用在把html里的符号显示在页面上比如"<"、"&"等，如果你单独的打上<，页面也可以显示，但如果你想显

示这几个字符，怎么办呢？就是它啦。

&#; #=字符实体名称 或者 ascii 值

& &

< <

> >

" "

这些只是一小部分，那么要显示就要写成了。

以上学到的我们可以综合使用：比如文字

注意写的时候要前后一致前面后边对应的也应该

好了，关于字体就讲完了！

HTML基础第四讲---图像

图像，也就是images，在html语法中用img来表示，其基本的语法是：

图象在页面中的对齐/布局：

align，它的值left, center, right就是他的中文意思，left居左，center居中，right居右。

图象和文字的对齐：

的靠上边、中间、底端。大家可以对比这看看各自的效果，很容易记住哦！

大家可以在自己的机子上按照我给你的语法，写下来，看看效果就行了。

HTML基础第五讲---控制表格及其表项的对齐方式

缺省情况下，表格在浏览器屏幕上左对齐，你可以使用的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“

right”。例如，让一个表格在屏幕中央显示可以使用：

注意

使用的ALIGN属性要小心，不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央，使用标识符来包含表格会更安全些。

你可以使用的ALIGN属性来设置表格中每行元素的水平对齐方式，这个属性也可以取值“left”、“center”和“right”。要设置某一行中所

有元素的竖直对齐方式，可以使用的VALIGN属性，它可以取值“top”、“middle”和“botton”（缺省情况下取值“middle”）。

要更好地控制表格中某个表头或元素的排列方式，可以使用和标识符的ALIGN和VALIGN属性，这两个属性的取值范围与相同，然

而的ALIGN和VALIGN属性将会覆盖任何为整个一行指定的排列方式。

控制表项的空间

当浏览器显示一个表格时，它将每一列的宽度设置为这一列中最长表项的宽度。浏览器尽可能地占用较小的屏幕空间来紧密地排列表格中的每一项。

你可以使用的CELLPADDING和CELLSPACING属性来改变这一缺省值。

通过使用CELLPADDING属性，你可以为表格中的每一项安排一个更大的空间，使用CELLSPACING属性，你可以为表项之间留出一定的空间。这两个属性

的值都以象素来指定。下面的例子说明了如何使用这两个属性（见图6.20）：

Cell Spacing

Normal Table

First Column

Second Column

Table With Cell Spacing

First Column

Second Column

Table With Cell Padding

First Column

Second Column

控制表格和表项的大小

某些时候你可能想让表格显示出来大一些，你可以用的WIDTH属性来控制表格的宽度，你可以为WIDTH属性提供宽度的绝对值或相对值。

当为WIDTH属性提供宽度的绝对值时，你用象素来表示。例如，要建立一个宽为100个象素的表格，可以用。当然，并不能保证

表格显示出来恰好是你指定的宽度，表项中的内容可能会迫使表格显示出来比WIDTH属性指定的值要宽。

另外，你也可以用相对值来指定表格的宽度，例如，如果你想让表格占有整个浏览器屏幕那么宽，你可以用，同样地，如

果你在WIDTH属性中指定的百分数太小的话，浏览器显示出来的表格就不是那个宽度。

属性可以用来指定表格的整体高度，同样这个属性可取绝对值和相对值。但使用这个属性时要小心，即使Microsoft和Netscape的浏览器都

能正确解释它，但它并不是HTML 3.2规范中的一部分。

你也可以用和标识符的WIDTH和HEIGHT属性来控制表格中某一表项的大小，你必须用绝对象素值来指定这些属性的值。你要知道当你设置这

些值时，只不过是在为浏览器提供建议，浏览器尽量按你的意愿去做，但也有可能不能完全按你指定的方式来显示一个表格。

在表格中加入颜色和图象

根据HTML 3.2规范，表格不具有任何颜色属性。然而，值得庆幸的是Netscape和Microsoft都扩展了HTML来让表格具有自己的背景色，两种浏览器都

能识别标识符的BGCOLOR属性。

你可以使用颜色名或RGB值来设定BGCOLOR的值，下面的例子说明了这个属性的用法：

Table Color

I have a blue background

当这个例子中的文字在浏览器上显示时，它处于一个浅蓝色的框中，这对于突出主页上主体文字中某些特定的文本是很有用的。例如，你可以使用这

种方法来突出一个引用、标题或是网页上一个简短的注释。

你也可以为表格中某一行甚至是某一个表项使用BGCOLOR属性。例如，可以用不同的颜色来区分表格中不同列的数据。

BGCOLOR属性的一个更令人兴奋的用处可能是设置你网页的整体颜色，如果你将表格的宽度设为屏幕的宽度，你可以建立一个具有多列的网页，而每

一列都具有不同的颜色。下面的例子建立了一个有两列不同颜色的网页：

Two Color Columns

I have a olive background

I have a aqua background

Netscape和Microsoft的浏览器都允许你为表格设定背景图片（见图6.21），你可以通过标识符的BACKGROUND属性来指定一幅图象：

Two Color Columns

I have a checkered background

Netscape Navigator 4.0和Internet Explorer 3.0及4.0还允许你在表格的某一行或某个表项使用BACKGROUND属性，通过为不同的表项使用不同的背

景图象，你可以建立一个可视性非常强的网页。

表格作为子页

标识符最初被引入HTML是用来格式化地显示信息。然而，随着时间的推移，这个标识符的属性被大大地扩充了，现在可以将看成是

用来在网页中建立一个子页的标识符。这个标识符被扩展出了那么多的属性，以致于现在它很象标识符了。在Netscape 和Microsoft的浏览

器上，具有许多和相同的属性，你可以为表格指定它自己的背景色和图象。另外标识符还能包含所有能在中包含的

HTML标识符。

然而，具有一个比更大的优势，每一个HTML文件必须有且只有一个标识符，但对于来说，则没有这种限制，你可以在

HTML文件中包含任意数目的。

当你设计网页时，不要让这个名字愚弄了你。不仅仅用于建立表格，还可以在你的网页上建立子页，当你想把单个网页分成多个部

分时，就用标识符。

小结

本章讲述了一些重要的HTML标识符。例如，你现在知道了如何建立HTML窗体来让你的网页具有交互性。你还学习了一些对信息进行列表的有用的

HTML标识符。最后，你学习了怎样用表格来组织信息，以及怎样用表格来为你的网点进行高级网页布局。

下一章将介绍一些HTML中高级的标识符，你将学习怎样使用image map、框架及cascading style sheets。在学完下一章后，你就可以设计出任何你

曾经看过，甚至想过的。

HTML基础第六讲---表格

上一讲，风行鹤朋友给我们讲了关于《控制表格及其表项的对齐方式》，在这里我要讲讲表格及其属性 ，然后大家在复习一下上一节的内容，这样

就会有事半功倍的感觉。

表格，一般的用于对网页的内容进行排版，比如文字放在页面的某个位置，你就可以做个表格，然后设置一下表格的属性，它文字放在表格的某个单

元个里，就行了；其实用过word的朋友应该非常明白的。除了页面的排版外，表格还可以制作出非常好看的效果，比如按钮、变色、边线等等。大家

要会灵活的运用。

看看表格的基本语法：... - 定义表格

...- 定义表行

...- 定义表头

...- 定义表元

下面看看它的示例：

FoodDrinkSweet

ABC

不带边框的表格：

FoodDrinkSweet

ABC 

Food Drink Sweet

A B C

跨多行、多列的表元(Table Span)

跨多列的表元

Morning Menu

Food Drink Sweet

ABC

跨多行的表元

Morning Menu

Food A

Drink B

Sweet C

表格尺寸设置 边框尺寸设置：

FoodDrinkSweet

ABC

表格尺寸设置：

FoodDrinkSweet

ABC 

表元间隙设置：

FoodDrinkSweet

ABC 

表元内部空白设置：

FoodDrinkSweet

ABC 

表格内文字的对齐/布局

#=left, center, right

FoodDrinkSweet

A

B

C 

#=top, middle, bottom, baseline

FoodDrink

SweetOther

A

B

C

D

好了，表格的基本的应用就是这些了。大家有什么问题，积极发问啊！！！

HTML基础第七讲---框架

框架（Frame）也就是所谓的分割窗口、分割画面、框窗效果（还真是五花八门），这个技巧在运用上问题比较多，用的好的话，有助于网友快速且

有条理的浏览网页，整理不好的话，呵呵...那笑话可就闹大了。 

【框架的基本概念】

1. 首先，各位先看看右手边这张图，我们将利用这张图来作解说，这样子，讲起来可能会清楚一点。 OK！我们可以看见，右边的这个窗口，一共分为

1 、 2 、 3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个 index.htm 是做什么用的呢？

2. 原来，左下角的这个档案 index.htm，就是要告诉计算机，我们要将画面分割成这样，也就是说，所有Frame的卷标，其实都只摆在

index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其它档名也是可以的。）

3. 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了。），另外，

还会多一个档案是来告诉计算机要如何分割的。（也就是例中的 index.htm 档啦！）

【开始分割】

1. 别急、别急，分割窗口可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想象画面是一个蛋糕，你要怎么割，才能割成那样呢？

原始码 呈现结果

框窗实作

2. 各位会发现，奇怪，在上面的语法中，怎么都没见到熟悉的身影？呵呵...没错，它已经被待会儿要加进去的

卷标给取代了！也就是说，如果我们要分割画面，就要先用卷标告诉计算机说：『喂！我要开始分割了！』此时，是派不上用场的，

所以躲到一旁凉快去了！

3. 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图：

原始码 呈现结果

框窗实作

4. 在中，我们要告诉计算机到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成。

COLS="120,*" 就是说，左边那一栏强制定为 120点，右边则随窗口大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"

也是可以的。

5. 然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图：

原始码 呈现结果

框窗实作

6. 看见了没？原本的（在第 3 点的语法中）被另一组所取代了！所以要注意喔！

第二组是被第一组所包围起来的喔！（乱七八糟了对不对？）

7. 呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，

这是一个最简单的分割法，我们会再将一些进阶的卷标在底下一一说明。

【其它卷标参数说明】

1. COLS="120,*"

就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，

四个以上当然就是四组数字啦！

2. ROWS="120,*"

就是横向切割画面，也就是将画面上下分开，切法同上。

3. frameborder=0

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

4. framespacing=5

表示框架与框架间的保留空白的距离，以免看起来太挤。

1. SRC="a.htm"

设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。

（如果该网页在不同目录，记得路径要写清楚）

2. NAME="1"

设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。

3. frameborder=0

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

4. scrolling="no"

设定是否要显示滚动条，YES是要显示滚动条，NO是无论如何都不要显示，AUTO是视情况显示。

5. noresize

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

6. marginhight=2

表示框架高度部份边缘所保留的空间。

7. marginwidth=2

表示框架宽度部份边缘所保留的空间。

【相关用法】

◆

1. 使用方法：请换有支持Frame功能的浏览器

2. 卷标解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此卷标，让这些网友知道，该换换浏览器了。或者，你也可以在这卷标中，

摆上没有Frame语法的网页卷标，那么，没有支持Frame功能的浏览器，便会自动显示没有Frame语法的网页。

◆ target=框窗名称

1. 使用方法：显示内容

2. 卷标解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？

就像上面加个 target=框窗名称 就行啦！

◆ target=_top

1. 使用方法：网人俱乐部

2. 卷标解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，

这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个屏幕啦！

HTML基础第八讲---序列卷标

什么叫做序列卷标？其实，这是一个大家都蛮熟悉的东西，只是在网页中换个名称来称呼罢了，序列卷标的功能在WORD里面叫做「项目符号及编号」

，也就是将每一要点以数字，如：1.2.3.4…或符号一条一条的清楚的列出的功能。

【无序卷标】

序列卷标基本上可分为两种，一种是「无序条列」，一种是「有序条列」。所谓「无序条列」当然就是意指各条列间并无顺序关系，纯粹只是利用条

列式方法来呈现资料而已，此种无序卷标，在各条列前面均有一符号以示区隔。至于「有序条列」就是指各条列之间是有顺序的，从1、2、3…一直

延伸下去。

我们先来看看「无序列表卷标」如何使用： 原始码 呈现结果

姓名：吴弘凯 

生日：1973/6/16 

星座：双子座 

其中

卷标即为「无序列表卷标」，每增加一列内容，就必须加一个
• 。

前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）： 原始码 呈现结果 

姓名：吴弘凯 

生日：1973/6/16 

星座：双子座 

【有序卷标】 

接下来，我们来看看「有序列表卷标」如何使用： 原始码 呈现结果 

姓名：吴弘凯 

生日：1973/6/16 

星座：双子座 

其中

卷标即为「有序列表卷标」，每增加一列内容，就必须加一个
1. 。

和无序列表卷标一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种： 原始码 呈现结果 

姓名：吴弘凯 

生日：1973/6/16 

星座：双子座 

另外，我们亦可指定序列起始的数目，其方法如下： 原始码 呈现结果 

姓名：吴弘凯 

生日：1973/6/16 

星座：双子座

【定义列表卷标】

接下来我们要说明的这个卷标，是「定义列表卷标」也是属于序列卷标之一。我们先来举个例子，我们常常会在文章中看见这样的格式：

CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？

简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何对象均有更佳的操控性…

网页里也有可以做到这种效果的卷标喔！现在要来跟各位说的就是这个卷标。咱们先来看看这卷标的用法：

我们先来看看「定义列表卷标」如何使用 原始码 呈现结果

小标题

标题的内容说明

小标题 

标题的内容说明

HTML基础第九讲---表单

最基本的留言版应该大家都用过吧！没错这就是一个表单运用很好的例子。表单提供了一个管道让读者发表心声，让网站不再只是设计者的天下，而

是能够让更多网友共同参与的地方。另外在商业用途上，表单也扮演着相当吃重的角色，藉由这些表单配合相关程序，使得公司能够在网络上发展电

子商务，所以说表单可以说是网页实用化、商务化相当重要的一环喔！ 

【表单的用途】

对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程序或是ASP程序来运作，

不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！

本单元纯粹以介绍各式表单为主，至于一些CGI或ASP观念在此工友就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。

【各种输入类型】

1. 文字输入列：每个表单之所以会有不同的类型，原因就在于TYPE="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。

文字输入列的形态就是TYPE="TEXT，其使用方法如下：

　 呈现结果 姓名：

原始码

姓名：

2.其有下列可设定之属性：

o NAME="名称"，是设定此一字段的名称，程序中常会用到。

o SIZE="数值"，是设定此一字段显现的宽度。

o VALUE="预设内容"，是设定此一字段的预设内容。

o ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、

LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

o MAXLENGTH="数值"，是设定此一字段可设定输入的最大长度。

3. 单选核取表单：利用TYPE="RADIO"就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，

故为单选核取表单。

呈现结果 性別：男 女

原始码

性別：

男

女

4. 其有下列可设定之属性：

o NAME="名称"，是设定此一字段的名称，程序中常会用到。

o VALUE="内容"，是设定此一字段的内容、值或是意义。

o ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、

LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

o CHECKED，是设定此一字段为预设选取值。

5. 复选核取表单：利用TYPE=" CHECKBOX "就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，

故为复选核取表单。

呈现结果 喜好：电影看书 

原始码

喜好：

电影

看书

6. 其有下列可设定之属性：

o NAME="名称"，是设定此一字段的名称，程序中常会用到。

o VALUE="内容"，是设定此一字段的内容、值或是意义。

o ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、

LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

o CHECKED，是设定此一字段为预设选取值。

7. 密码窗体：利用TYPE=" PASSWORD "就会产生一个密码窗体，密码窗体和文字输入窗体长得几乎一样，差别就在于密码窗体在输入时全部会以星号来取代输入的文字，以防他人偷窥。

呈现结果 请输入密码：

原始码

请输入密码：

8. 其有下列可设定之属性：

o NAME="名称"，是设定此一字段的名称，程序中常会用到。

o SIZE="数值"，是设定此一字段显现的宽度。

o VALUE="预设内容"，是设定此一字段的预设内容，不过呈现出来仍是星号。

o ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、

LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

o MAXLENGTH="数值"，是设定此一字段可设定输入的最大长度。

9. 送出按钮：通常我们窗体填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用TYPE=" SUBMIT "及TYPE=" RESET "来产生，相当的简单易用。

　 呈现结果

原始码

10. 其有下列可设定之属性：

o NAME="名称"，是设定此一按钮的名称。

o VALUE="文字"，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上「送出查询」、「重设」等字样。

o ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、

LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

11. 按钮组件：窗体中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE=" BUTTON "来产生一个按钮，相当简单。

呈现结果 请按下按钮： 

原始码

请按下按钮：

12. 其有下列可设定之属性：

o NAME="名称"，是设定此一按钮的名称。

o VALUE="文字"，是设定此一按钮上要呈现的文字。

o ALIGN="对齐方式"，是设定此一字段的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对齐）、

LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、ABSBOTTOM（绝对置下）等。

13. 隐藏字段：窗体中有时有些东西因为某些因素，不想让使用者看到，但因程序需要却又不得不存在，此时，我们就可以利用TYPE="

HIDDEN "来产生一个隐藏的字段。

呈现结果 隐藏字段： 

原始码

隐藏字段：

14. 其有下列可设定之属性：

o NAME="名称"，是设定此一字段的名称。

o VALUE="文字"，是设定此一字段的值、文字或意义。

【大量文字输入组件】

1. 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用

来产生一个可以输入大量文字的组件，夹在两个卷标中的文字会出现在框框中，可作为预设文字。 呈现结果 请输入您的意见：

原始码

请输入您的意见：

2. 其有下列可设定之属性：

o NAME="名称"，是设定此一字段的名称。

o WRAP="设定值"，是设定此一字段的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在屏幕上会自动换行，

不过若是使用者没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将屏幕上的自动换行，

视为换行效果送出）。

o COLS="数值"，是设定此一字段的行数（横向字数）。

o ROWS="数值"，是设定此一字段的列数（垂直字数）。

【下拉式选单】

1. 下拉式选单令整个网页看起来有很专业的感觉，我们只要利用便可以产生一个下拉式选单，另外，

还需要配合卷标来产生选项，这样才算完整喔！ 呈现结果 您喜欢看书吗？： 非常喜欢還算喜欢不太喜欢非常讨厌

原始码

您喜歡看書嗎？：

非常喜欢

還算喜欢

不太喜欢

非常讨厌

2. 其有下列可设定之属性：

o SIZE="数值"，是设定此一字段的大小，默认值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，

将四个选项一起呈现在方块中。

o MULTIPLE，是设定此一字段为复选，可以一次选好几个选项。

HTML基础第十讲---排版卷标

网页的排版部份也是很重要的一环，有些现成的卷标就可以让您轻易的完成缩排或是一些特殊格式的编排喔！

【文字置左、置中、置右】

1. 使用方法：老实说，刚刚我们学过的分段卷标

再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示： 

原始码 呈现结果

文字靠左

文字置中

文字靠右

2. 卷标解说：嗯！秘诀就在于「align=对齐位置」而已啦！align是分段卷标

的属性之一，这个属性将来会常常在不同卷标中看到，

它的功能是专门在设定「水平对齐位置」，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。

【置中卷标】

1. 使用方法：这是置中

2. 卷标解说：这个卷标是最常用到的卷标了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！

3. 使用范例：

原始码 呈现结果

这是最中间 这是最中间

【向右缩排卷标】

1. 使用方法：

要缩排的文字

2. 卷标解说：利用这个卷标可以将其包起来的文字，全部往右缩排。而且加一组卷标，往右缩排一单位，加两组卷标，

往右缩排两单位，依此类推。

3. 使用范例：

原始码 呈现结果

缩排1单位

缩排2单位

【保存原始格式卷标】

1. 使用方法：

文字内容

2. 卷标解说：利用

算是相当好用的卷标之一。

3. 使用范例：

原始码 呈现结果 

文　字

格　式

文　字

格　式

HTML基础第十一讲---背景标志

您是否老觉得网页「空空的」，没错！一个可能是我们还没有很多内容，另一个可能则是我们还没有设定网页背景。网页背景有这么神奇的功效吗？

当然，网页背景是整个网页设计重要的一环，一个设计精美的网站，莫不费尽心思，让网页背景能够和前景图文相结合，做出网页整体感的效果。

【背景卷标】

说穿了，背景卷标只有这个卷标，其余的效果，只要加上一些简单的属性便可做到。

1. 使用方法：

2. 卷标解说：这个卷标其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。

我们背景颜色或图片的设定以及连结字体的颜色，通通都放在这卷标里面。工友就其属性来一一解说：

背景颜色 用法：设定背景颜色。有人会说：『我已经设定了背景图片，那背景颜色还有用吗？』

当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！

原始码

这是标题

这里是本文区 

呈现结果 这里是本文区

背景图片 用法：g设定背景图案。图档可以是jpg或gif格式的图档，工友建议：图档不要太大，

否则网页加载会蛮慢的。

原始码

这是标题

这里是本文区

呈现结果 这里是本文区

【内文、连结文字颜色设定】

1. 使用方法：

2. 卷标解说：用字体卷标中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个卷标中，便有设定内文、

连结等文字的颜色内定值功能。用法如下：

內文颜色 用法：设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。

原始码

这是标题

这里是文本区

呈现结果 这里是文本区

　 连接颜色 用法：设定「连结」的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，

那又会变成另一个颜色了，这底下会说明。

原始码

这是标题

连结文字

呈现结果 连结文字

连结时颜色 用法：设定「按下连结」的颜色，也就是当您鼠标按下那连结的瞬间所呈现的颜色。 

原始码

这是标题

连结中文字

呈现结果 连结中文字（这个效果请大家在自己的电脑上试验！鼠标点下连结瞬间才会出现我们设定的浅蓝色）

已连结顏色 用法：设定「按下链接后」的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，

是要让使用者容易识别到底哪些连结有去过了，哪些没去过。

原始码

这是标题

连结文字

呈现结果 连结中文字（这个效果请大家在自己的电脑上试验！设定已执行过的连结以红色显示）

HTML基础第十二讲---链接标志

没有链接，WWW将失去存在的意义！WWW之所以受欢迎，乃在于她除了有精美的图文之外，更有方便且多样化的链接，让使用者可以很快的找到其所需

的资料，也让网络能提供更多的服务！

【WWW链接标志基本概念】

1. 链接基本概念：一般而言，所谓链接就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当光标移到那些字上时，会变成手指形状，

按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。

说到链接，最基本来看有『内部链接』及『外部链接』，所谓『内部链接』就是自己网站间网页的链接，至于外部链接我们稍后再来讨论。

要了解内部链接，首先必须先了解一下这两种东西，一个是『相对路径』，一个是『绝对路径』。

现在假设一个情形：我们在自己的计算机里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www 里面目前有 index.htm 、

text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！

现在我们想在 index.htm 里面设一个链接，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下

面任一叙述：

这就是『绝对路径』

这就是『相对路径』

瞧出什么端倪了没有？嗯嗯....没错，『绝对路径』要给计算机一个非常详尽的位置，让计算机寻着这路径去找到档案。而『相对路径』就简单多啦！

如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:\www 底下去找text1.htm。

如果说，今天我们将 c:\www 里所有的档案都上传到网络上的网页服务器（总不能做好了只给自己看吧！），且该服务器是别人的计算机，

而非你自己架设的主机，那么问题就来了！你猜，哪一种链接会出问题？呵呵...答案是『绝对路径』，您猜对了吗？

为什么说『绝对路径』会出问题呢？因为，当您将档案上传到网络上时，您的整个网页目录架构一定会变，到时候，计算机可能找不到 c:\

（尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用『相对路径』

来作链接吧！好写又不容易出错。

另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、

text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个链接到 p1.gif 这图档（链接不限于只能连html文件，图文件、文字文件均可），

那我们又该如何来使用『相对路径』呢？他们又不在『同一个目录』下...？

这是『绝对路径』的写法 

这是『相对路径』的写法

如何？不难吧！（只是字有点多，看到脑子发胀）

2. 总结一下：很乱吗？嗯...看看这表，或许会清楚些。

相对路径表示方式 代表链接位置 

text1.htm在目前的目录中（就例子而言，就是在c:\www中） 

text1.htm在名为docs的次目录中（就本例而言，就是在c:\www\docs中） 

text1.htm在目前目录的上一层目录中（就本例而言，就是在c:\底下了）

【网页内部的链接】

1. 使用方法：

（1）. 先在欲链接处作记号：这里是你想链接的点

（2）. 设定链接：链接

2. 标志解说：有时候，当某页的内容很多时，我们可以利用网页的内部链接，来使使用者快速的找到资料。其原理不过是：在欲链接处做个记号

（网页的任何地方都可以喔！），然后，链接时就寻这记号，就可以快速找到资料。很简单吧！

3. 使用范例：

范例 第一步骤 第二步骤

www链接标志基本概念 欲链接的位置 www链接标志基本概念

网页内部的链接 欲链接的位置 网页内部的链接

网页外部的链接 欲链接的位置 网页外部的链接

【网页外部的链接】

1. 标志解说：链接到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网络上的服务五花八门，

所以不同的服务有不同的链接方法，工友将之整理在下表。

2. 使用范例：

网站链接 好站 好站

电子邮件链接 写信给朋友 写信给朋友

ftp链接 下载档案 下载档案

news链接 seednet news服务 seednet news服务

gopher链接 seednet gopher服务 seednet gopher服务

bbs链接 seednet gopher服务 seednet bbs服务

【链接标志的参数】

1. 使用方法：在链接后面加入 target=_参数

2. 标志解说：链接的参数并不多，常见的大概就属 target 这参数了，target 的意思是『目标』，也就是网页链接的指向目标，

这参数在框窗（frame）里尤为重要！

3. 使用范例：

o target=框窗名称：这在『框架标志』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，

我们可以利用此标志，来指定链接的内容显示到哪一个框窗中。

o target=_blank：将链接的画面内容，开在新的浏览窗口中。

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

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

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

“画中画”效果---谈Iframe标记的使用

纵观时下网站，本来网速就有些慢，可是几乎每页都要放什么Banner，栏目图片，版权等一大堆雷同的东西，当然，出于网站风格统一、广告效

应的需要，本无可厚非，可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了，有没有办法，让这些雷同的东西一次下载后就不用再下

载，而只下载那些内容有变化区域的网页内容呢？

答案很肯定：应用Iframe标记！

一、Iframe标记的使用

提起Iframe，可能你早已将之扔到“被遗忘的角落”了，不过，说起其兄弟Frame就不会陌生了。Frame标记即帧标记，我们所说的多帧结构就是在一个

浏览器窗口中显示多个HTML文件。现在，我们遇到一种很现实的情况：如有一个教程，是一节一节地上，每页末尾做一个“上一节“、“下一节“的链接，

除了每节教程内容不同之外，页面其它部分内容都是相同的，如果一页一页地做笨页面，这似乎太让人厌烦了，这时突发奇想，如果有一种方法让页面其

它地方不变，只将教程做成一页一页的内容页，不含其它内容，在点击上下翻页链接时，只改变教程内容部分，其它保持不变，这样，一是省时，另则以

后如教程有个三长两短的变动，也很方便，不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次

后就不再下载了。

Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外

的HTML文件相互独立显示，而是可以直接嵌入在一个HTML文件中，与这个HTML文件内容相互融合，成为一个整体，另外，还可以多次在一个页面内显示同一

内容，而不必重复写内容，一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

src：文件的路径，既可是HTML文件，也可以是文本、ASP等；

width、height："画中画"区域的宽与高；

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时，滚动选项，如果设置为NO，则不出现滚动条；如为Auto：则自动出现滚动条；如为Yes，

则显示;

FrameBorder：区域边框的宽度，为了让“画中画“与邻近的内容相融合，常设置为0。

比如:

二、父窗体与浮动帧之间的相互控制

在脚本语言与对象层次中，包含Iframe的窗口我们称之为父窗体，而浮动帧则称为子窗体，弄清这两者的关系很重要，因为要在父窗体中访问子窗体或相

反都必须清楚对象层次，才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中，Iframe即子窗体是document对象的一个子对象，可以直接在脚本中访问子窗体中的对象。

现在就有一个问题，即，我们怎样来控制这个Iframe，这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后，就可通过文档对象模型DOM对

Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件，并控制test.htm里一些标记对象：

test.htm文件代码为:

hello,my boy

如我们要改变ID号为myH1的H1标记里的文字为hello,my dear，则可用:

document.myH1.innerText="hello,my dear"(其中，document可省)

在example.htm文件中，Iframe标记对象所指的子窗体与一般的DHTML对象模型一致，对对象访问控制方式一样，就不再赘述。

2、在子窗体中访问并控制父窗体中对象

在子窗体中我们可以通过其parent即父（双亲）对象来访问父窗口中的对象。

如example.htm：

hello,my wife

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend"，我们就可以这样写：

parent.myH2.innerText="hello,my friend"

这里parent对象就代表当前窗体(example.htm所在窗体)，要在子窗体中访问父窗体中的对象，无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中，但它保持相对的独立，是一个“独立王国“哟，在单一HTML中的特性同样适用于浮动帧中。

试想一下，通过Iframe标记，我们可将那些不变的内容以Iframe来表示，这样，不必重复写相同的内容，这有点象程序设计中的过程或函数，减省了多少繁

琐的手工劳动！另外，至关重要的是，它使页面的修改更为可行，因为，不必因为版式的调整而修改每个页面，你只需修改一个父窗体的版式即可了。