1.文字标签
2.列表标签
3.图象标签
4.超链接标签
5.超链接方式
目录 1
2.HTML网页设计
如何建立 HTML网页
我们如何写作与设计 ASP网页？我们之前就说过,ASP与浏览器
之间只有下载网页及上传数据的关系,ASP程序无法控制浏览器
（网页）的内容，网页内多姿多彩的图片、文字还有声音动画
等，都还是必须通过 HTML语言来建立的！
不学 HTML语言直接用网页编辑器来制作网页也可以。问题是要
将传统固定式的 HTML网页加入 ASP程序变成动态生成的网页，就
必须知道基础的 HTML网页标签意义，知道应该将 ASP程序语句加
在那里呢？ HTML语言比较容易学，下面我们就讨论 HTML语言。
建立 HTML网页
2－ 1－ 1 基础网页架构
现在请你打开记事本来编辑网页：
步骤 1
,开始”－“程序”－“附件”－“记事本”，然后照抄一份
内容：
例 1
<HTML>
<HEAD>
<TITLE>网页基础架构 </TITLE>
</HEAD>
<BODY>
网页主体
</BODY>
</HTML>
步骤 2
内容输入完毕后，选取“文件”菜单中的“保存”项目将文件
储存起来：
步骤 3
在保存文件之前记得先建立一个放置网页文件的专属文件夹，
以方便日后进行管理。接着在“文件名称”栏位中输入网页文
件名称，记得要将扩展名,.htm” 也写上去呀，要不然可是会
被存成纯文本（＊,txt）的文件喔！最好是将“保存类型”也
选定为“所有文件（＊,＊）”以免文件保存后变成＊,htm.txt:
步骤 4
按下“保存”按钮后，如果记事本的标题栏出现我们所保存的
文件名称，就表示我们已经正确的将网页文件保存起来了：
步骤 5
打开浏览器，以打开旧文件的方式选择浏览我们刚刚所建立的
网页文件，恭喜你已经会编写基础网页了！
HTML标签文字是不分大小写的，例如：＜ html>与＜ HTML>这两
种标签的写法其意义是相同的。
2－ 1－ 2段落标签
段落标签是用来分隔内容段落的：在 HTML网页编辑中共有两种
段落分隔方式，正如你在使用 WORD文字编辑器时按下 Enter鍵产生
一个新段落及按下 Shift+Enter键产生一个强迫换行！请特别注意：
你在记事本中编辑的排版样式并不会就是浏览器中所显示的排版画
面！例如：
结果在浏览器中所有的文字却都连在一起了。
＜ P＞段落标签
要在网页中产生文章分段的效果就必须使用＜ P＞分段标签，使用
＜ P＞分段标签会在两段文字间加入一个空白栏：
＜ BR＞段落标签
如果你觉得使用＜ P＞分段标签会在两段文字间加入一个空白栏，
这种样本并不是你希望的，那就可以使用＜ BR＞段落标签，它同样
可产生分段的效果，但是在两段文字间不会加入空白栏：
例 2
<HTML>
<HEAD>
<TITLE>段落排版
1</TITLE>
</HEAD>
<BODY>
第一段
我是自动化专业的学
生，学的是自动化,
第二段
我的网站是：大家都
来学自动控制。
</BODY>
</HTML>：
例 3
<HTML>
<HEAD>
<TITLE>段落排版 2</TITLE>
</HEAD>
<BODY>
第一段 <P>
我是自动化专业的学生，
学的是自动化,<P>
第二段 <P>
我的网站是：大家都来
学自动控制。
</BODY>
</HTML>
＜ HR＞分隔线段落标签
要产生段落分隔效果，除了使用＜ P＞或＜ BR＞段落标签外，
我们也可以利用＜ HR＞分隔线标签，它同样可产生分段的效
果，不但可分隔两段文字，同时也会在两段文字间加入一条
水平分隔线,例 4
<HTML>
<HEAD>
<TITLE>段落排版 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
我是自动化专业的学生，学的是自动化,<BR>
第二段 <BR>
我的网站是：大家都来学自动控制。
</BODY>
</HTML>
2－ 2 文字标签
了解了基础的段落排版标签后，我们现在来看看关于文字变化
部分的标签使用方法吧！毕竟网页内容还是以文字为主体的，
＜ FONT＞标签就是使文字产生多样化的标签，可是单纯使用＜
FONT＞标签是没用的！我们还必须通过＜ FONT＞标签所附带的
属性设置才行。
2－ 2－ 1 文字色彩标签
指定文字颜色＜ FONT COLOR＝“颜色”＞
直接在 COLOR属性中指定名称即可。例如,BLUE” 将文字颜色指
定为蓝色，可是我们知道的颜色单字毕竟有限，因此我们也可
以利用 RGB16进制编码方式来指定颜色，例如,FF0000” 将文字
颜色指定为红色。
提示
HTML标签大多是两两成双，例如＜ FONT＞与＜ /FONT＞这一组标
签，一个代表起始作用，另一个代表终止作用，终止作用的标
签前会加上一个,/” 符号作为区分，当然也有独立存在的，例
如我们刚刚使用过的＜ HR＞分隔线标签。
例 5
<HTML>
<HEAD>
<TITLE>文字方案 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
<FONT COLOR="BLUE">我是自
动化专业的学生，学的是自动
化,</FONT><HR>
第二段 <BR>
<FONT COLOR="#FF0000"> 我
的网站是：大家都来学自动控
制。 </FONT>
</BODY>
</HTML>
例 6
<HTML>
<HEAD>
<TITLE>文字型式 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
<FONT FACE=,隶书”
COLOR=“BLUE”> 我是自动化专业
的学生，学的是自动
化,</FONT><HR>
第二段 <BR>
<FONT FACE="宋体 "
COLOR="#FF00F0"> 我的网站是：
大家都来学自动控制。 </FONT>
</BODY>
</HTML>
2－ 2－ 2 文字字体标签
指定文字字体＜ FONT FACE,字体名称”＞
通过 FACE属性我们可以指定文字的字体样式，但是必须浏览者
的机器中也安装有这种字体，否则显现出来的字体样式仍然是
“明细体”。
2－ 2－ 3 文字大小标签
指定文字字体＜ FONT SIZE＝“文字大小”＞
通过 Size属性我们可以指定文字的大小，文字的大小设置共有 7
级，默认大小是第 3级，也就是说，在没有特别指定文字大小的
情况下，文字大小的内置值是 3。
2－ 2－ 4 文字样式标签
我们有时为了加强语气会改变文字的样式，例如将文字变成斜
体或是粗体等，一般常使用的样式有：＜ I＞斜体、＜ B＞粗体、
＜ U＞下划线、＜ SUP＞上标字、＜ SUB＞下标字、＜ TI＞等宽文
字等。
例 7
<HTML>
<HEAD>
<TITLE>文字处理 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
<FONT SIZE="5">我是自动化
专业的学生，学的是自动化
</FONT><HR>
第二段 <BR>
<FONT SIZE="2"> 我的网站是：
大家都来学自动控制。
</FONT>
</BODY>
</HTML>
例 8
<HTML>
<HEAD>
<TITLE>文字样式 </TITLE>
</HEAD>
<BODY>
<I>我是斜体字 </I><BR>
<B>我是粗体字 </B><BR>
<U>我是下划线体字 </U><BR>
我是 <SUP>上标字 </SUP><BR>
我是 <SUB>下标字 </SUB><BR>
<TT>我是等宽字 </TT><BR>
</BODY>
</HTML>
2－ 2－ 5 注解文字标签
注解文字标签＜！ ―― 注解文字 ―― ＞
注解文字标签就是用来做网页编辑备忘提示用的，但是在浏览
网页时，这些备忘提示文字是不会出现在网页中的 。
2－ 3 列表标签
列表标签？这样说你或许有点迷惑，实际就是项目编号及符号！
若你常用文字编辑器的话，那应该就很熟了。记得：序列标签
（或是说列表标签）可分为两种，一种是“无序条列”，一种
是“有序条列”。“无序条列”是意指各条列间并列顺序关系，
只是利用条列方式来呈现数据，相对于 WORD文字编辑器就是加
上“项目符号”啦！那“有序条列”是指各条列间是有顺序的，
从 1,2,3?? 一直延续下去，也就是“项目编号” ！
2－ 3－ 1 有序列表标签
有序列表标签＜ OL＞与＜ LI＞
要进行有序排列时，必须有序排列数据外先用一组＜ OL＞,.＜
/OL＞列表标签包括起来，而且每个有序排列数据之前还必须加
上＜ LI＞这个项目编号标签，光是使用＜ OL＞,.＜ /OL＞列表标
签是不对的。
2－ 3－ 2 有序列表标签类型
设定有序列表标签类型工＜ OL TYPE,＝类型”＞
有序列表标签默认的编号格式是用阿拉伯数字 123，如果要改变
它的编号类型则必许通过,TYPE” 属性进行设定；＜ OL＞列表
标签可用的编号类型有五种，分别是数字（默认）、大写英文
字母（ A）小写英文字母（ a）、大写罗马数字（ I）、小写罗马
数字（ i）。
例 9
<HTML>
<HEAD>
<TITLE>有序列表
</TITLE>
</HEAD>
<BODY>
<OL>
<LI>姓名；路透社
<LI>专业；自动控制
<LI>E-MAIL
KALU03@vip.sina.com
</OL>
</BODY>
</HTML>
例 10
<HTML>
<HEAD>
<TITLE>有序列表类型
</TITLE>
</HEAD>
<BODY>
<OL TYPE="I">
<LI>姓名；路透社
<LI>专业；自动控制
<LI>电话； 3988123
<LI>E-MAIL
KALU03@vip.sina.com
</OL>
</BODY>
</HTML>
2－ 3－ 3 有序列表标签起始值
设定有序列表标签起始值＜ OL START＝“起始值”＞
有序列表标签默认的编号起始是从 1开始，那我喜欢从
10开始可以吗？当然可以，如果要改变编号起始值可
以通过,SATRT” 属性进行设置。
2－ 3－ 4 无序列表标签
无序列表标签＜ UL＞与＜ LI＞
相对的，要进行无序排列时，必须在无序排列数据外
先用一组＜ UL＞,.＜ /UL＞列表标签包括起来，而且每
个无序排列数据之前同样必须加上＜ LI＞这个项目编
号标签，光是使用＜ UL＞,.＜ /UL＞列表标签也是不对
的。
例 11
<HTML>
<HEAD>
<TITLE>有序列表类型
</TITLE>
</HEAD>
<BODY>
<OL START="10">
<LI>姓名；路透社
<LI>专业；自动控制
<LI>电话； 3988123
<LI>E-MAIL
KALU03@vip.sina.com
</OL>
</BODY>
</HTML>
例 12
<HTML>
<HEAD>
<TITLE>有序列表类型
</TITLE>
</HEAD>
<BODY>
<UL TYPE="circle">
<LI>姓名；路透社
<LI>专业；自动控制
<LI>电话； 63988123
<LI>E-MAIL
KALU03@vip.sina.com
</UL>
</BODY>
</HTML>
2－ 3－ 5 无序列表标签类型
设定无序列表标签类型＜ UL, TYPE” ＞
无序列表标签默认的项目符号是实心小圆点（ DISC），
如果要改变它的项目符号必须通过,TYPE” 属性进行
设置；＜ UL＞列表标签可用项目符号类型有三种，分
别是实心小圆点（ disc,默认）、空心小圆点（ circle）
与实心框（ square）等三种。
提示：
将 TYPE＝, 类型, 属性设定加在＜ UL＞标签内，则全
部条列数据前的项目符号将地都是相同的，若是将属
性设置加在＜ LI＞标签内，则每个条列数据前的项目
是可分别设为不同符号的。
综合总结
1；文字的标签 <FONT COLOR=颜色,FACE=字体名
称,SIZE=字体大小,>、样式标签可指定文字字
体分为；
<I>斜体 </I>.
<B>粗体 </B>.<U>下划线 </U>.<SUP>上标字 </SUP>.
<SUB>下标字 </USB>.<TT>等宽字 </TT>。
2；列表的标签有序 <OL TYPE=类型 >+<LI>排列,
无序 <UL TYPE=类型 >+<LI>排列,
2－ 4 图像标签
网页最迷人的地方就是它不光有文字的呈现，更包含了多采多姿的
图像，要在网页中加入漂亮的图片就必须使用图像标签来把图片加
入网页中，而图片是独立于网页之外，而不是网页的一部分，当我
们需要图片的呈现时，才以链接的方式将图片呈现在网页中，所以
在使用图像标签链接图片时要特别注意图片文件的路径与文件名是
否正确！
2－ 4－ 1 链接图片
<IMG SRC=“图片文件, ＞
这是图像标签最基本的用法，把图片文件直接链接呈现在网页中，
通常，我们还可以通过图像标签的 WIDTH与 HEIGHT属性来设定图片
呈现的大小，如果没有特别指定图片的大小，则呈现在网页中的图
片就是它原来实际的大小。
将 WIDTH＝“数值”与 HEIGHT＝“数值”属性设定其数值大小的单
位是指“像素”。
例 12
<HTML>
<HEAD>
<TITLE>图象标签 </TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院 <BR>
<IMG SRC="001.gif"
WIDTH="150"
HEIGHT="450"><BR>
专业：自动化 <BR>
控制工程系自动化教研室
</UL>
</BODY>
</HTML>
例 13
<HTML>
<HEAD>
<TITLE>图象标签 </TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院 <BR>
<IMG SRC="02.gif" ALT="郑
州轻工业学院的成绩就是好
"><BR>
专业：自动化 <BR>
控制工程系自动化教研室
</UL>
</BODY>
</HTML>
网页中加入图像链接，呈现一张指定特别大小的图片，
我们加入的图片文件名同样为 001.gif,图片文件与网
页位于同一个路径目录下，但是通过 WIDTH与 HEIGHT属
性指定它的大小：
提示,
将 WIDTH＝“数值”与 HEIGHT＝“数值”属性设定其数
值大小的单位是指“像素”。
2－ 4－ 2 图片文字说明
＜ IMG SRC＝“图片文件” ALT＝“图片说明”＞
图像标签的 ALT属性是用来设定图片的文字说明，当我
们将鼠标指标移至图片上时就会显现出这段说明文字，
一般情况下是没什么作用，但是当图片显示失败没办
法出现时，至少还能让浏览者知道这张图片的内容。
2－ 4－ 3 图片的排列
＜ IMG SRC＝, 图片文件, ALIGN＝,,排列位置, ＞
图像标签的 ALIGN属性是用来设置图片与文字排列的相对位置，也
就指定“文绕图”的样式啦！ ALIGN属性值设置有五种,TOP（上）、
BOTTEM（下）,MIDDLE（中）,LEFT（左）,RIGHT（右）。
2－ 5 超链接标签
超链接（ HyperLink）?什么是超链接？超链接就是指我们利用鼠标
点选某张图片或是某段文字符串时，浏览器就会自动读取该张图片
或是某段文字字符串内在所指向的网址或文件等。
那我们如何判定图片或文字字符串中隐藏了超链接这玩意儿？很简
单！当我们将鼠标指标移至文字字符串或图片上时鼠标指标若自动
变成“手指点选”的形状时，就代表这个图片或文字字符串中隐藏
了超链接，按下此一链接就会进入到另一个
网页（正常情况下，有时可能变成下载文件，
依超链接的对象而定）。
例 14
<HTML>
<HEAD>
<TITLE>图象标签排列
</TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院
<P>
<IMG SRC="03.gif"
ALIGN="RIGHT"><P>
专业：自动化 <BR>
控制工程系自动化教研室
</UL>
</BODY>
</HTML>
例 15
<HTML>
<HEAD>
<TITLE>文字超链接 </TITLE>
</HEAD>
<BODY>
我是自动化专业的教师
<BR><FONT COLOR="FF00FF">
我的 INTERNET网站是,
<A
HREF="HTTP://WWW.ZZULI.ED
U.CN">欢迎大家都来学自动
控制 </A></FONT>，请大家多
多指导
</BODY>
</HTML>
2－ 5－ 1 文字超链接
＜ A HREF＝, 链接目标, ＞链接文字＜ /A＞
文字超链接是最简单的一种，只要指定“链接目标”就行了！“链
接文字”之后一定要加上终止超链接的＜ /A＞标签，不然后面一长
串的网页内容也都会变成含有超链接了，必须注意喔！
2－ 5－ 2 图片超链接
＜ A HREF＝, 链接目标, ＞＜ IMG SRC＝, 图片文件, ＞＜ /A ＞
图片超连接是文字超链接的变形，只要将“链接文字”变更成“图
片标签”就行了。
提示
当我们为图片加上一个超链接后，图片将会产生一个蓝色的外框，
如果我们觉得不好看，可以利用影像标签的 BORDER属性，将其属性
值设定为,O”,就可以去除图片外的蓝色框框了，如下例。
＜ IMG SRC＝,00.gif”BORDER=”0” ＞
例 16
<HTML>
<HEAD>
<TITLE>文字超链接 </TITLE>
</HEAD>
<BODY>
我是自动化专业的教师 <BR>
我的 INTERNET网站是,
<A
HREF="HTTP://WWW.SINA.COM"
>欢迎大家都来学自动控制
</A>，请大家多多指导
</BODY>
</HTML>
例 17
<HTML>
<HEAD>
<TITLE>图象超链接 </TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研
室 <BR>
我的网站在此广告牌后,
<A
HREF="HTTP://WWW.ZZULI.COM.CN
">
<IMG SRC="00.gif"
ALIGN="MIDDLE"></A>
</BODY>
</HTML>
2－ 6 超链接的方式
还记得我们刚刚示范的图像标签链接时，特别说明图片文件与网页
是放在同一个目录下的，对吧！为什么要特别说明是放在同一目录
下呢？因为网页中所有对外的链接，不管是图片链接或超链接，都
是以网页本身的位置为出发点，也就是说，网页的链接是以其所在
目录为基础！
2－ 6－ 1 对外链接
对外链接乃是指：超链接的对象（网页、文件或图片 ?? ）与目前
浏览的网页是位于不同服务器上，所以，“链接目标”必须指明链
接的“绝对位置”，要明确指出链接目标所以的服务器名称、路径
与文件名，这种指定链接目标“绝对位置”的方式也就是所谓的
“绝对路径”链接。例如：
对外链接
＜ A HREF＝,HTTP,//WWW.ZZULI.COM/ad/ad.htm” ＞广告＜ /A＞
建立一个文字超链接，链接目标为位于 WWW.SINA.COM这个网络服务
器中 /ad.htm的网页。
例 18
<HTML>
<HEAD>
<TITLE>超链接方式 </TITLE>
</HEAD>
<BODY><FONT
COLOR="FF00F0"SIZE="6"FACE="隶
书 ">
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研
室 <BR>
我的网站在此广告牌后,
<A
HREF="HTTP://WWW.ZZULI.COM.CN">
<IMG SRC="00.gif"
ALIGN="MIDDLE"></A>
</BODY>
</HTML>
例 19
<HTML>
<HEAD>
<TITLE>超链接方式 </TITLE>
</HEAD>
<BODY><FONT
COLOR="FF00F0"SIZE="6"FACE="隶书 ">
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研室 <BR>
我的网站在此广告牌后,
<A HREF="HTTP://WWW.ZZULI.COM.CN">
<IMG SRC="E:/动网设计 05/图片夹
/009.gif" ALIGN="MIDDLE"></A>
</BODY>
</HTML>
2－ 6－ 2 对内链接
相对于“对外链接”，“对内链接”就是超链接的对象（网页、文件或图片 ?? ）
与目前浏览的网页是位于相同的服务器上，正因为链接网页与被链接的对象位于
同一部机器上，所以我们在链接目标时并不需要指定链接止标的服务器名称，但
是，链接网页与被链接的对象若位于不同的目录，则仍然必须明确的指出链接目
标所在的目录位置。例如：
对内链接
c:\page\test.htm网页要链接 c:\images\001.gif这张图片
＜ IMG SRC=”../images/001.gif” ＞
上例中，虽然链接网页与链接目标位于相同的机器上，但因为它们所在的目录位
置不同，所以仍然必须明确指出链接目标所在的目录位置，其中,../” 代表回
到上一层目录的意思，别忘了：网页的链接是以其所在目录为基础，因此，
,../images/001.gif” 的意思是说：请到上一层目录（就是 c..\），然后再到
image目录下找名为 001.gif的图片文件。这种以自我位置为中心去相对应链接目
标位置的方式，就是所谓的“相对路径”链接。
提示
一般来说，对外链接都是使用“绝对路径”链接表示法（也只能用这种方法
啦！），而对内链接就使用“相对路径”表示法，当然，对内链接若要使用绝对
路径链接表示法也可以，不过，对内链接使用“绝对路径”链接表示法维护性很
差，并不建议采用。
例 20<HTML>
<HEAD>
<TITLE>超链接方式 </TITLE>
</HEAD>
<BODY><FONT COLOR="FF00F0"SIZE="6"FACE="隶书 ">
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研室 <BR>
<FONT COLOR="770FFF"SIZE="7"FACE="宋体 ">
我的网站在此彩色图片后,
<A HREF="HTTP://WWW.ZZULI.COM.CN">
<IMG SRC="E:/动网设计 05/图片夹 /004.gif"
ALIGN="LEFT">
<IMG SRC="E:/动网设计 05/图片夹 /001.gif"
ALIGN="RIGHT"></A>
</BODY>
</HTML>
2.列表标签
3.图象标签
4.超链接标签
5.超链接方式
目录 1
2.HTML网页设计
如何建立 HTML网页
我们如何写作与设计 ASP网页？我们之前就说过,ASP与浏览器
之间只有下载网页及上传数据的关系,ASP程序无法控制浏览器
（网页）的内容，网页内多姿多彩的图片、文字还有声音动画
等，都还是必须通过 HTML语言来建立的！
不学 HTML语言直接用网页编辑器来制作网页也可以。问题是要
将传统固定式的 HTML网页加入 ASP程序变成动态生成的网页，就
必须知道基础的 HTML网页标签意义，知道应该将 ASP程序语句加
在那里呢？ HTML语言比较容易学，下面我们就讨论 HTML语言。
建立 HTML网页
2－ 1－ 1 基础网页架构
现在请你打开记事本来编辑网页：
步骤 1
,开始”－“程序”－“附件”－“记事本”，然后照抄一份
内容：
例 1
<HTML>
<HEAD>
<TITLE>网页基础架构 </TITLE>
</HEAD>
<BODY>
网页主体
</BODY>
</HTML>
步骤 2
内容输入完毕后，选取“文件”菜单中的“保存”项目将文件
储存起来：
步骤 3
在保存文件之前记得先建立一个放置网页文件的专属文件夹，
以方便日后进行管理。接着在“文件名称”栏位中输入网页文
件名称，记得要将扩展名,.htm” 也写上去呀，要不然可是会
被存成纯文本（＊,txt）的文件喔！最好是将“保存类型”也
选定为“所有文件（＊,＊）”以免文件保存后变成＊,htm.txt:
步骤 4
按下“保存”按钮后，如果记事本的标题栏出现我们所保存的
文件名称，就表示我们已经正确的将网页文件保存起来了：
步骤 5
打开浏览器，以打开旧文件的方式选择浏览我们刚刚所建立的
网页文件，恭喜你已经会编写基础网页了！
HTML标签文字是不分大小写的，例如：＜ html>与＜ HTML>这两
种标签的写法其意义是相同的。
2－ 1－ 2段落标签
段落标签是用来分隔内容段落的：在 HTML网页编辑中共有两种
段落分隔方式，正如你在使用 WORD文字编辑器时按下 Enter鍵产生
一个新段落及按下 Shift+Enter键产生一个强迫换行！请特别注意：
你在记事本中编辑的排版样式并不会就是浏览器中所显示的排版画
面！例如：
结果在浏览器中所有的文字却都连在一起了。
＜ P＞段落标签
要在网页中产生文章分段的效果就必须使用＜ P＞分段标签，使用
＜ P＞分段标签会在两段文字间加入一个空白栏：
＜ BR＞段落标签
如果你觉得使用＜ P＞分段标签会在两段文字间加入一个空白栏，
这种样本并不是你希望的，那就可以使用＜ BR＞段落标签，它同样
可产生分段的效果，但是在两段文字间不会加入空白栏：
例 2
<HTML>
<HEAD>
<TITLE>段落排版
1</TITLE>
</HEAD>
<BODY>
第一段
我是自动化专业的学
生，学的是自动化,
第二段
我的网站是：大家都
来学自动控制。
</BODY>
</HTML>：
例 3
<HTML>
<HEAD>
<TITLE>段落排版 2</TITLE>
</HEAD>
<BODY>
第一段 <P>
我是自动化专业的学生，
学的是自动化,<P>
第二段 <P>
我的网站是：大家都来
学自动控制。
</BODY>
</HTML>
＜ HR＞分隔线段落标签
要产生段落分隔效果，除了使用＜ P＞或＜ BR＞段落标签外，
我们也可以利用＜ HR＞分隔线标签，它同样可产生分段的效
果，不但可分隔两段文字，同时也会在两段文字间加入一条
水平分隔线,例 4
<HTML>
<HEAD>
<TITLE>段落排版 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
我是自动化专业的学生，学的是自动化,<BR>
第二段 <BR>
我的网站是：大家都来学自动控制。
</BODY>
</HTML>
2－ 2 文字标签
了解了基础的段落排版标签后，我们现在来看看关于文字变化
部分的标签使用方法吧！毕竟网页内容还是以文字为主体的，
＜ FONT＞标签就是使文字产生多样化的标签，可是单纯使用＜
FONT＞标签是没用的！我们还必须通过＜ FONT＞标签所附带的
属性设置才行。
2－ 2－ 1 文字色彩标签
指定文字颜色＜ FONT COLOR＝“颜色”＞
直接在 COLOR属性中指定名称即可。例如,BLUE” 将文字颜色指
定为蓝色，可是我们知道的颜色单字毕竟有限，因此我们也可
以利用 RGB16进制编码方式来指定颜色，例如,FF0000” 将文字
颜色指定为红色。
提示
HTML标签大多是两两成双，例如＜ FONT＞与＜ /FONT＞这一组标
签，一个代表起始作用，另一个代表终止作用，终止作用的标
签前会加上一个,/” 符号作为区分，当然也有独立存在的，例
如我们刚刚使用过的＜ HR＞分隔线标签。
例 5
<HTML>
<HEAD>
<TITLE>文字方案 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
<FONT COLOR="BLUE">我是自
动化专业的学生，学的是自动
化,</FONT><HR>
第二段 <BR>
<FONT COLOR="#FF0000"> 我
的网站是：大家都来学自动控
制。 </FONT>
</BODY>
</HTML>
例 6
<HTML>
<HEAD>
<TITLE>文字型式 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
<FONT FACE=,隶书”
COLOR=“BLUE”> 我是自动化专业
的学生，学的是自动
化,</FONT><HR>
第二段 <BR>
<FONT FACE="宋体 "
COLOR="#FF00F0"> 我的网站是：
大家都来学自动控制。 </FONT>
</BODY>
</HTML>
2－ 2－ 2 文字字体标签
指定文字字体＜ FONT FACE,字体名称”＞
通过 FACE属性我们可以指定文字的字体样式，但是必须浏览者
的机器中也安装有这种字体，否则显现出来的字体样式仍然是
“明细体”。
2－ 2－ 3 文字大小标签
指定文字字体＜ FONT SIZE＝“文字大小”＞
通过 Size属性我们可以指定文字的大小，文字的大小设置共有 7
级，默认大小是第 3级，也就是说，在没有特别指定文字大小的
情况下，文字大小的内置值是 3。
2－ 2－ 4 文字样式标签
我们有时为了加强语气会改变文字的样式，例如将文字变成斜
体或是粗体等，一般常使用的样式有：＜ I＞斜体、＜ B＞粗体、
＜ U＞下划线、＜ SUP＞上标字、＜ SUB＞下标字、＜ TI＞等宽文
字等。
例 7
<HTML>
<HEAD>
<TITLE>文字处理 </TITLE>
</HEAD>
<BODY>
第一段 <BR>
<FONT SIZE="5">我是自动化
专业的学生，学的是自动化
</FONT><HR>
第二段 <BR>
<FONT SIZE="2"> 我的网站是：
大家都来学自动控制。
</FONT>
</BODY>
</HTML>
例 8
<HTML>
<HEAD>
<TITLE>文字样式 </TITLE>
</HEAD>
<BODY>
<I>我是斜体字 </I><BR>
<B>我是粗体字 </B><BR>
<U>我是下划线体字 </U><BR>
我是 <SUP>上标字 </SUP><BR>
我是 <SUB>下标字 </SUB><BR>
<TT>我是等宽字 </TT><BR>
</BODY>
</HTML>
2－ 2－ 5 注解文字标签
注解文字标签＜！ ―― 注解文字 ―― ＞
注解文字标签就是用来做网页编辑备忘提示用的，但是在浏览
网页时，这些备忘提示文字是不会出现在网页中的 。
2－ 3 列表标签
列表标签？这样说你或许有点迷惑，实际就是项目编号及符号！
若你常用文字编辑器的话，那应该就很熟了。记得：序列标签
（或是说列表标签）可分为两种，一种是“无序条列”，一种
是“有序条列”。“无序条列”是意指各条列间并列顺序关系，
只是利用条列方式来呈现数据，相对于 WORD文字编辑器就是加
上“项目符号”啦！那“有序条列”是指各条列间是有顺序的，
从 1,2,3?? 一直延续下去，也就是“项目编号” ！
2－ 3－ 1 有序列表标签
有序列表标签＜ OL＞与＜ LI＞
要进行有序排列时，必须有序排列数据外先用一组＜ OL＞,.＜
/OL＞列表标签包括起来，而且每个有序排列数据之前还必须加
上＜ LI＞这个项目编号标签，光是使用＜ OL＞,.＜ /OL＞列表标
签是不对的。
2－ 3－ 2 有序列表标签类型
设定有序列表标签类型工＜ OL TYPE,＝类型”＞
有序列表标签默认的编号格式是用阿拉伯数字 123，如果要改变
它的编号类型则必许通过,TYPE” 属性进行设定；＜ OL＞列表
标签可用的编号类型有五种，分别是数字（默认）、大写英文
字母（ A）小写英文字母（ a）、大写罗马数字（ I）、小写罗马
数字（ i）。
例 9
<HTML>
<HEAD>
<TITLE>有序列表
</TITLE>
</HEAD>
<BODY>
<OL>
<LI>姓名；路透社
<LI>专业；自动控制
<LI>E-MAIL
KALU03@vip.sina.com
</OL>
</BODY>
</HTML>
例 10
<HTML>
<HEAD>
<TITLE>有序列表类型
</TITLE>
</HEAD>
<BODY>
<OL TYPE="I">
<LI>姓名；路透社
<LI>专业；自动控制
<LI>电话； 3988123
<LI>E-MAIL
KALU03@vip.sina.com
</OL>
</BODY>
</HTML>
2－ 3－ 3 有序列表标签起始值
设定有序列表标签起始值＜ OL START＝“起始值”＞
有序列表标签默认的编号起始是从 1开始，那我喜欢从
10开始可以吗？当然可以，如果要改变编号起始值可
以通过,SATRT” 属性进行设置。
2－ 3－ 4 无序列表标签
无序列表标签＜ UL＞与＜ LI＞
相对的，要进行无序排列时，必须在无序排列数据外
先用一组＜ UL＞,.＜ /UL＞列表标签包括起来，而且每
个无序排列数据之前同样必须加上＜ LI＞这个项目编
号标签，光是使用＜ UL＞,.＜ /UL＞列表标签也是不对
的。
例 11
<HTML>
<HEAD>
<TITLE>有序列表类型
</TITLE>
</HEAD>
<BODY>
<OL START="10">
<LI>姓名；路透社
<LI>专业；自动控制
<LI>电话； 3988123
<LI>E-MAIL
KALU03@vip.sina.com
</OL>
</BODY>
</HTML>
例 12
<HTML>
<HEAD>
<TITLE>有序列表类型
</TITLE>
</HEAD>
<BODY>
<UL TYPE="circle">
<LI>姓名；路透社
<LI>专业；自动控制
<LI>电话； 63988123
<LI>E-MAIL
KALU03@vip.sina.com
</UL>
</BODY>
</HTML>
2－ 3－ 5 无序列表标签类型
设定无序列表标签类型＜ UL, TYPE” ＞
无序列表标签默认的项目符号是实心小圆点（ DISC），
如果要改变它的项目符号必须通过,TYPE” 属性进行
设置；＜ UL＞列表标签可用项目符号类型有三种，分
别是实心小圆点（ disc,默认）、空心小圆点（ circle）
与实心框（ square）等三种。
提示：
将 TYPE＝, 类型, 属性设定加在＜ UL＞标签内，则全
部条列数据前的项目符号将地都是相同的，若是将属
性设置加在＜ LI＞标签内，则每个条列数据前的项目
是可分别设为不同符号的。
综合总结
1；文字的标签 <FONT COLOR=颜色,FACE=字体名
称,SIZE=字体大小,>、样式标签可指定文字字
体分为；
<I>斜体 </I>.
<B>粗体 </B>.<U>下划线 </U>.<SUP>上标字 </SUP>.
<SUB>下标字 </USB>.<TT>等宽字 </TT>。
2；列表的标签有序 <OL TYPE=类型 >+<LI>排列,
无序 <UL TYPE=类型 >+<LI>排列,
2－ 4 图像标签
网页最迷人的地方就是它不光有文字的呈现，更包含了多采多姿的
图像，要在网页中加入漂亮的图片就必须使用图像标签来把图片加
入网页中，而图片是独立于网页之外，而不是网页的一部分，当我
们需要图片的呈现时，才以链接的方式将图片呈现在网页中，所以
在使用图像标签链接图片时要特别注意图片文件的路径与文件名是
否正确！
2－ 4－ 1 链接图片
<IMG SRC=“图片文件, ＞
这是图像标签最基本的用法，把图片文件直接链接呈现在网页中，
通常，我们还可以通过图像标签的 WIDTH与 HEIGHT属性来设定图片
呈现的大小，如果没有特别指定图片的大小，则呈现在网页中的图
片就是它原来实际的大小。
将 WIDTH＝“数值”与 HEIGHT＝“数值”属性设定其数值大小的单
位是指“像素”。
例 12
<HTML>
<HEAD>
<TITLE>图象标签 </TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院 <BR>
<IMG SRC="001.gif"
WIDTH="150"
HEIGHT="450"><BR>
专业：自动化 <BR>
控制工程系自动化教研室
</UL>
</BODY>
</HTML>
例 13
<HTML>
<HEAD>
<TITLE>图象标签 </TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院 <BR>
<IMG SRC="02.gif" ALT="郑
州轻工业学院的成绩就是好
"><BR>
专业：自动化 <BR>
控制工程系自动化教研室
</UL>
</BODY>
</HTML>
网页中加入图像链接，呈现一张指定特别大小的图片，
我们加入的图片文件名同样为 001.gif,图片文件与网
页位于同一个路径目录下，但是通过 WIDTH与 HEIGHT属
性指定它的大小：
提示,
将 WIDTH＝“数值”与 HEIGHT＝“数值”属性设定其数
值大小的单位是指“像素”。
2－ 4－ 2 图片文字说明
＜ IMG SRC＝“图片文件” ALT＝“图片说明”＞
图像标签的 ALT属性是用来设定图片的文字说明，当我
们将鼠标指标移至图片上时就会显现出这段说明文字，
一般情况下是没什么作用，但是当图片显示失败没办
法出现时，至少还能让浏览者知道这张图片的内容。
2－ 4－ 3 图片的排列
＜ IMG SRC＝, 图片文件, ALIGN＝,,排列位置, ＞
图像标签的 ALIGN属性是用来设置图片与文字排列的相对位置，也
就指定“文绕图”的样式啦！ ALIGN属性值设置有五种,TOP（上）、
BOTTEM（下）,MIDDLE（中）,LEFT（左）,RIGHT（右）。
2－ 5 超链接标签
超链接（ HyperLink）?什么是超链接？超链接就是指我们利用鼠标
点选某张图片或是某段文字符串时，浏览器就会自动读取该张图片
或是某段文字字符串内在所指向的网址或文件等。
那我们如何判定图片或文字字符串中隐藏了超链接这玩意儿？很简
单！当我们将鼠标指标移至文字字符串或图片上时鼠标指标若自动
变成“手指点选”的形状时，就代表这个图片或文字字符串中隐藏
了超链接，按下此一链接就会进入到另一个
网页（正常情况下，有时可能变成下载文件，
依超链接的对象而定）。
例 14
<HTML>
<HEAD>
<TITLE>图象标签排列
</TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院
<P>
<IMG SRC="03.gif"
ALIGN="RIGHT"><P>
专业：自动化 <BR>
控制工程系自动化教研室
</UL>
</BODY>
</HTML>
例 15
<HTML>
<HEAD>
<TITLE>文字超链接 </TITLE>
</HEAD>
<BODY>
我是自动化专业的教师
<BR><FONT COLOR="FF00FF">
我的 INTERNET网站是,
<A
HREF="HTTP://WWW.ZZULI.ED
U.CN">欢迎大家都来学自动
控制 </A></FONT>，请大家多
多指导
</BODY>
</HTML>
2－ 5－ 1 文字超链接
＜ A HREF＝, 链接目标, ＞链接文字＜ /A＞
文字超链接是最简单的一种，只要指定“链接目标”就行了！“链
接文字”之后一定要加上终止超链接的＜ /A＞标签，不然后面一长
串的网页内容也都会变成含有超链接了，必须注意喔！
2－ 5－ 2 图片超链接
＜ A HREF＝, 链接目标, ＞＜ IMG SRC＝, 图片文件, ＞＜ /A ＞
图片超连接是文字超链接的变形，只要将“链接文字”变更成“图
片标签”就行了。
提示
当我们为图片加上一个超链接后，图片将会产生一个蓝色的外框，
如果我们觉得不好看，可以利用影像标签的 BORDER属性，将其属性
值设定为,O”,就可以去除图片外的蓝色框框了，如下例。
＜ IMG SRC＝,00.gif”BORDER=”0” ＞
例 16
<HTML>
<HEAD>
<TITLE>文字超链接 </TITLE>
</HEAD>
<BODY>
我是自动化专业的教师 <BR>
我的 INTERNET网站是,
<A
HREF="HTTP://WWW.SINA.COM"
>欢迎大家都来学自动控制
</A>，请大家多多指导
</BODY>
</HTML>
例 17
<HTML>
<HEAD>
<TITLE>图象超链接 </TITLE>
</HEAD>
<BODY>
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研
室 <BR>
我的网站在此广告牌后,
<A
HREF="HTTP://WWW.ZZULI.COM.CN
">
<IMG SRC="00.gif"
ALIGN="MIDDLE"></A>
</BODY>
</HTML>
2－ 6 超链接的方式
还记得我们刚刚示范的图像标签链接时，特别说明图片文件与网页
是放在同一个目录下的，对吧！为什么要特别说明是放在同一目录
下呢？因为网页中所有对外的链接，不管是图片链接或超链接，都
是以网页本身的位置为出发点，也就是说，网页的链接是以其所在
目录为基础！
2－ 6－ 1 对外链接
对外链接乃是指：超链接的对象（网页、文件或图片 ?? ）与目前
浏览的网页是位于不同服务器上，所以，“链接目标”必须指明链
接的“绝对位置”，要明确指出链接目标所以的服务器名称、路径
与文件名，这种指定链接目标“绝对位置”的方式也就是所谓的
“绝对路径”链接。例如：
对外链接
＜ A HREF＝,HTTP,//WWW.ZZULI.COM/ad/ad.htm” ＞广告＜ /A＞
建立一个文字超链接，链接目标为位于 WWW.SINA.COM这个网络服务
器中 /ad.htm的网页。
例 18
<HTML>
<HEAD>
<TITLE>超链接方式 </TITLE>
</HEAD>
<BODY><FONT
COLOR="FF00F0"SIZE="6"FACE="隶
书 ">
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研
室 <BR>
我的网站在此广告牌后,
<A
HREF="HTTP://WWW.ZZULI.COM.CN">
<IMG SRC="00.gif"
ALIGN="MIDDLE"></A>
</BODY>
</HTML>
例 19
<HTML>
<HEAD>
<TITLE>超链接方式 </TITLE>
</HEAD>
<BODY><FONT
COLOR="FF00F0"SIZE="6"FACE="隶书 ">
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研室 <BR>
我的网站在此广告牌后,
<A HREF="HTTP://WWW.ZZULI.COM.CN">
<IMG SRC="E:/动网设计 05/图片夹
/009.gif" ALIGN="MIDDLE"></A>
</BODY>
</HTML>
2－ 6－ 2 对内链接
相对于“对外链接”，“对内链接”就是超链接的对象（网页、文件或图片 ?? ）
与目前浏览的网页是位于相同的服务器上，正因为链接网页与被链接的对象位于
同一部机器上，所以我们在链接目标时并不需要指定链接止标的服务器名称，但
是，链接网页与被链接的对象若位于不同的目录，则仍然必须明确的指出链接目
标所在的目录位置。例如：
对内链接
c:\page\test.htm网页要链接 c:\images\001.gif这张图片
＜ IMG SRC=”../images/001.gif” ＞
上例中，虽然链接网页与链接目标位于相同的机器上，但因为它们所在的目录位
置不同，所以仍然必须明确指出链接目标所在的目录位置，其中,../” 代表回
到上一层目录的意思，别忘了：网页的链接是以其所在目录为基础，因此，
,../images/001.gif” 的意思是说：请到上一层目录（就是 c..\），然后再到
image目录下找名为 001.gif的图片文件。这种以自我位置为中心去相对应链接目
标位置的方式，就是所谓的“相对路径”链接。
提示
一般来说，对外链接都是使用“绝对路径”链接表示法（也只能用这种方法
啦！），而对内链接就使用“相对路径”表示法，当然，对内链接若要使用绝对
路径链接表示法也可以，不过，对内链接使用“绝对路径”链接表示法维护性很
差，并不建议采用。
例 20<HTML>
<HEAD>
<TITLE>超链接方式 </TITLE>
</HEAD>
<BODY><FONT COLOR="FF00F0"SIZE="6"FACE="隶书 ">
单位：郑州轻工业学院 <BR>
电气与信息工程学院，自动化教研室 <BR>
<FONT COLOR="770FFF"SIZE="7"FACE="宋体 ">
我的网站在此彩色图片后,
<A HREF="HTTP://WWW.ZZULI.COM.CN">
<IMG SRC="E:/动网设计 05/图片夹 /004.gif"
ALIGN="LEFT">
<IMG SRC="E:/动网设计 05/图片夹 /001.gif"
ALIGN="RIGHT"></A>
</BODY>
</HTML>
