2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行 （
），或是在写完某一段的时候便会分段（

），写网 页也一样，而且更需要断行及分段的功能，以免整个网页看起 来乱糟糟的。 3. 使用范例： 原始码 呈现结果 这是一个断行的范例
看出来了吗？ 这是一个断行的范例 看出来了吗？ 这是一个分段的范例

基 本上他会比断行还多空出 一行 这是一个分段的范例 基本上分段会比断行还多 空出一行 【分隔线标签】 1. 使用方法：上一段文字内容

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

文字靠 左

文字 置中

文字靠 右

的属性之一，这个属性将来会常常在不同 标签中看到，它的功能是专门在设定“水平对齐位置”，其常 见的设定值有三个，也就是置左（align="left"）、置中 （align="center"）、置右（align="right"）。 【置中标签】 1. 使用方法：

要缩排的文字

缩排 1单位

缩 排 2单位

文字内容
  

  

2. 标签解说：利用
这个标签可以将其包起来的文字
排版、格式，原封不动的呈现出来。算是相当好用的标签之
一。  

  

3. 使用范例：  

原始码 呈现结果 

 

文 字 
 格 式 
 

文 字 

                             

格 式 

                             

4.  

4.4 字体标签 <回细说索引> 




 
【标题标签】  

1. 使用方法：
标题内容
  

  

2. 标签解说：标题的大小一共有六种，两个标签一组，也就是从
到
，
最大，
最小。使用标题标签时，该标签
会将字体变成粗体字，并且会自成一行。  

  

3. 使用范例： 

原始码 呈现结果  

标题一
 标题一 

标题二
 标题二 

标题三
 标题三 

标题四
 标题四 

标题五
 标题五 

标题六
 标题六 

 

 

【设定字体大小标签】  

1. 使用方法：文字内容  

  

2. 标签解说：标题的大小一共有七种，也就是
（最小）到（最大），另外，还有一种写法：
文字内容，其意思就是说：比预设字
大一级。当然也可以 font size=+2（比预设字大二级），或
是 font size=-1（比预设字小一级），以一般而言，预设字
体多为 3。  



  

3. 使用范例： 

原始码 呈现结果  

字体一
 或是 
字体一
 

字体一  

字体二
 或是 
字体二
 

字体二  

字体三
 或是 
字体三
 

字体三  

字体四
 或是 
字体四
 

字体四  

字体五
 或是 
字体五
 

字体五  

字体六
 或是 
字体六
 

字体六  

字体七
 或是 
字体七
 

字体七  

 

 

【字型变化标签】  



1. 使用方法：文字  

  

2. 标签解说：在文字标签里，对于文字的格式也有相当多的变
化，如粗体、斜体...等，此外，也定义了一些现成的格式供

编者使用，如‘强调’、‘原始码’...等，当然，这只是方
便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标
签。  

  

3. 使用范例： 

原始码 呈现结果  

粗体 粗体  

斜体 斜体  

底线 底线  

上标 上标  

下标 下标  

打字机 打字机  

闪烁（ie
没效果） 

闪烁  

强调 强调  

加强 加强  

范例 范例  

原始码 原始码  

变数 变数  

定义 定义  

引用 引用  

所在地址
 

所在地址 



 
 

【文字颜色设定】  

1. 使用方法：文字颜色  

  

2. 标签解说：文字也可以设定 颜色喔！至于颜色有哪些....
这....哪天我心血来潮再来做个色彩对应表吧！  

  

3. 使用范例： 

原始码 呈现结果  



红 
红色的字喔！  



橙 
橙色的字喔！  



黄 
黄色的字喔！  



绿 
绿色的字喔！  



蓝 
蓝色的字喔！  



靛 
靛色的字喔！  



紫 
紫色的字喔！  



黑 
黑色的字喔！  



灰 
灰色的字喔！  



4.  

4.5 文字标签 <回细说索引> 

【文字字型设定】  

1. 使用方法：文字  

  

2. 标签解说：网页上也可以使用字型喔！唯一的一个限制是：对
方也要有该字型！否则看到的仍然还是宋体。另外要说明的
是，这个标签并无法保证在每个浏览器上都能正常的显现，不
过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来
显示，所以不用怕会一团乱！  

另外，如果您的网页中有加上这一行叙述

（指定网页的语言格式，以后我会解释），那么，netscape可
以正确显示出中文，但英文无反应。若没有加该行，那么英文
会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显
示。  

3. 使用范例： 

原始码 呈现结果  

楷体
_GB2312 

楷体_GB2312  

华康俪中黑 

华康俪中黑  

 

 

【特殊字元】  

1. 使用方法：   




  

2. 标签解说：很多特殊的符号是需要特别处理的，比如说" < 
"、" > "这两个符号若想要呈现在网页上是没有办法直接打" 
< "的，要呈现" < "必须输入编码表示法：“<”，常用的
如下：  

  

3. 使用范例： 

原始码 呈现结果  

  
  ( 代表一个不断行
空白)  

< <  

> >  

& &  

" "  

 

 

【设定文字内定值大小】  

1. 使用方法：  

  

2. 标签解说：这个标签可以改变文字大小的内定值，直接加在
标签之后就行了。一般而言，若是没有特别设定，文字
大小内定值预定值为 3。  

4.6 影像标签 <回细说索引> 

【影像标签】  

在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首
先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正
确，任电脑再厉害也找不到您要的图，档名大小写不一致，如




Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显
示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器
的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样
的档案了，所以，可别忽略档名大小写不一致的影响。  

另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我
们先来看看影像的标签如何写。  

1. 使用方法：  

  

2. 标签解说：目前常见的网页图形格式有两种就是 gif及 jpg两
种格式。gif格式只有 256色，不过色彩比较鲜艳干净漂亮，
适合电脑美工图案。而 jpg格式的图案是全彩失真压缩，比较
适合一大堆颜色的图片，如照片就较适合用 jpg格式来呈现。  

  

3. 使用范例：  

基本用法 
用法： 
显示图片最基本的方法（就是不加任何属性
啦！）其中 boy.gif 就是图档的档名。 

原始码 
嗨！我是
本站的模特儿喔！ 

呈现结果 嗨！我是本站的模特儿喔！ 

长宽设定 

用法： 
设图片的大小，其实不用设也可以，但是有
设更好，可以加快浏览速度，因为浏览器就
不用在那边花时间算您的图片有多大啦！此
外您也可以自己随意设定图片大小。 

原始码 
 



呈现结果 
 

加上说明 

用法： 
滑鼠一到图上时，说明文字就会自动出现。
此外，在图片未显示出来或显示不出来时，
也会以这一段字代替，让使用者知道这个未
显示出来的图片究竟是干嘛用的。 

原始码 
移到图上看看。 

呈现结果 移到图上看看。 

图片位置 

用法： 
图片位置设定！可以靠左放：align=left、
靠上 align=top、靠下 align=bottom、垂直
置中 align=middle，其中靠左放可以造成
‘文绕图’的效果。 

原始码 
嗨！我往右边靠！ 

呈现结果 嗨！我往右边靠！ 

原始码 
嗨！我往左边靠！ 

呈现结果 嗨！我往左边靠！ 

原始码 
文字对齐我头顶！ 

呈现结果 文字对齐我头顶！ 

原始码 
文字对齐我脚底！ 

呈现结果 文字对齐我脚底！ 

原始码 
文字对齐我中间！ 

呈现结果 文字对齐我中间！ 



原始码 
文字对齐我绝对中间！ 

呈现结果 文字对齐我绝对中间！ 

边框设定 

用法： 

设定边框大小，通常都设成 0 感觉比较美观
啦！因为内定的框框实在是不怎么漂
亮....。尤其在连结时，设框框简直是丑毙
了...。 

原始码 
 

呈现结果 
 

左右间距 

用法： 
离文字的水平距离，通常多少也设一点，以
免靠文字太近，看起来才不会有太挤的感
觉。 

原始码 
左边的字右边的字 

呈现结果 左边的字 右边的字 

上下间距 

用法： 
离文字的垂直距离，通常多少也设一点，以
免靠文字太近，看起来才不会有太挤的感
觉。 

原始码 
上面的字

下面的字 

呈现结果 

上面的字 

 
下面的字 

10.由于此网页有用 css控制版面图文，故在 netscape下观看，



会稍有不正确。  

 

 

【网页影像重要观念】  

1. 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您
的网页名称写的多正确也没用，因为浏览器无法寻着您的路径
去找到该有的图片，所以，我们来看看该如何正确的使用路
径。有些人并不喜欢将网页及图通通放在同一个目录下，比如
说有人将图档全放在 c:\images里，而网页档放在 c:\demo

里，这样子的话，我们该如何正确的写图片的路径呢？我将几
种常见的情形整理成下表： 

html档
的位置 

图档的位置 写法 

情
形
说
明  

c:\demo c:\demo  

图
文
均
在
同
一
目
录  

c:\demo c:\demo\images 
 

图
在
网
页
下
一
层
目
录  

c:\demo c:\ 
 

图
在
网



页
上
一
层  

c:\demo c:\image 
 

图
文
在
同
一
层
但
不
同
目
录  

2. 或许有人看到不明就理，我来说明一下，“../”是回到上一
层目录的意思。“images/”则是进入下一层目录 image之
意，而“images/”的意思就是，回到上一层目录，然后再进
入目录 images中。以上我们使用的均为“相对路径”的概
念。  

3. 影像单位：或许您会常常看到 px这个单位，没错，这是我们
在制作最常用的一个单位了。这个单位完整的写法是
“pixels”，我们称之为“像素”。像素，是荧幕上的一个小
光点，然而这一小光点的大小，并非是固定的，举个例子而
言，荧幕本身十五吋，不会因为你的任何设定而变成十七吋。
但是，其解析度是可以改变的，我们常见的解析度有以下几
种：“640 ×480”、“800 ×600”、“1024 ×768”。举其

中之一的 640 ×480来说，其代表的就是在荧幕上有宽 640个
光点，高有 480光点，若是我们将解析度调整为 800 ×600其

宽势必要从 640变成 800个光点，也因此，该光点便会变小一
点，所以，我们看起来就会觉得解析度调高后，荧幕内的东
西，变得小小的，很精致，那就是因为光点变小的原因。  

  

4. 影像格式：网页用的图档目前只有 gif格式（即副档名为 gif
的图档，如：bg.gif）以及 jpg格式（即副档名为 jpg的图



档，如：bg.jpg）为一般的浏览器所接受。其他如 bmp格式或
是 pcx格式都是无法在网页上使用的，若非得要用，那就利用
影像绘图软体来作格式的转换吧！  

图档范例 说明  

 

gif格式的图形只能以 256个颜色显示，虽
然其色彩较少，但颜色鲜艳亮丽，若是图形
颜色不多，用 gif格式存档会较漂亮。  

 

jpg格式的图形是以全彩显示，适合用在相
片或是渐层颜色的图片上，压缩比例以 75%
为适中。  

 

4.7 背景标签 <回细说索引> 

【背景标签】  

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

1. 使用方法：  

  

2. 标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网
页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么
用！）。我们背景颜色或图片的设定以及连结字体的颜色，通
通都放在这标签里面。我就其属性来一一解说：  

背景颜色 

用法： 
设定背景颜色。有人会说：‘我已经设定了
背景图片，那背景颜色还有用吗？’当然有
用！当使用者连结到贵站时，若背景图案还
没传输完之前（有的背景图蛮大的），就会
先显现背景颜色，您说，是不是比一片灰灰
的好看多了呢！ 

原始码 
 

 




 
  

  

这里是本文区  

 

 

呈现结果 按下此处观看结果  

背景图案 

用法： 

g设定背景图案。图档可以是 jpg或 gif格式
的图档，我建议：图档不要太大，否则网页
载入会蛮慢的。 

原始码 

 

 

 
  

  

这里是本文区  

 

 

呈现结果 按下此处观看结果  

 

 

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

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

原始码 

 

 

 
  

  

这里是本文区  

 

 

呈现结果 按下此处观看结果  

连结颜色 

用法： 
设定“连结”的颜色。只要是有连结的地方
就会出现你指定的颜色，当然，如果按下连
结后，那又会变成另一个颜色了，这底下会
说明。 

原始码 

 

 

 
  

  

连结文字  

 

 

呈现结果 按下此处观看结果（设定连结为橘色） 

连结时颜 用法： 





色 设定“按下连结”的颜色，也就是当您滑鼠
按下那连结的瞬间所呈现的颜色。 

原始码 

 

 

 
  

  

连结中文字  

 

 

呈现结果 
按下此处观看结果（滑鼠点下连结瞬间才会
出现我们设定的浅蓝色） 

已连结颜
色 

用法： 
设定“按下链结后”的颜色，也就是如果该
连结已经有被按过了，那么就会呈现的颜
色。如此的做法，是要让使用者容易识别到
底哪些连结有去过了，哪些没去过。 

原始码 

 

 

 
  

  

连结文字  

 

 

呈现结果 
按下此处观看结果（设定已执行过的连结以
红色显示） 

6.   

4.8 连结标签 <回细说索引> 






【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

连结 

seedne

t news

服务 

seednet 

news服务 

gophe

r连结 

seedne

t 

gopher

服务 

see

dnet gopher服务 

bbs连
结 

seedne

t 

gopher

服务 

seedne

t bbs服务 

 

 

【连结标签的参数】  

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

  

2. 标签解说：连结的参数并不多，常见的大概就属 target 这参
数了，target 的意思是‘目标’，也就是网页连结的指向目
标，这参数在框窗（frame）里尤为重要！  

  

3. 使用范例：  
o target=框窗名称： 

这在‘框架标签’中也有提到，而且也只有在框架（框窗 or 
frame）中才用得到。正常而言，框窗有各自的名称，因此，
我们可以利用此标签，来指定连结的内容显示到哪一个框窗
中。  

  
















o target=_blank： 
将连结的画面内容，开在新的浏览视窗中。  

  

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

  

o target=_self： 
将连结的画面内容，显示在目前的视窗中。  

  

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

4.9 表格标签 <回细说索引> 

【网页中的表格观念】  

举个例子来说，如果今天我们要做一个 3栏 2列的表格，在 WORD
中，只要设定表格为 3栏、2列就完成了，不过，在网页中做一个 3
栏 2列的表格，可是要分成好几个步骤的，第一个步骤，利用
标签告诉电脑我要做一个表格；第二个步骤，利用
一组标签先做一个横列，然后在横列中利用三组
标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再
分三栏，如此才能得到一个 3栏 2列的表格。听不太懂吗？没关系，
以下咱们就来慢慢的看个仔细：  

1. 首先我们来看一个最简单的表格：  

原始码 呈现结果  

 

1
 

 

1 
 




2. 利用这个标签来告诉电脑，这是一个表格，至于 
BORDER=1 这参数是设定此表格的框线粗细为 1。一组
是设定一横列的开始。一组则是设定一个
栏位。当然，文字就是要摆在这里面。  

3. 现在我们再来增加二个格子：  

原始码 呈现结果  

 

1
2
3
 

 

1 2 3 
 

4. 看见没有，没有增加，却增加了二组。那
如果我要再加上一列呢？很简单，就像这样：  

原始码 呈现结果  

 

1
2
3
 

4
5
6
 

 

1 2 3 

4 5 6 
 

 

 

【合并表格栏位】  

1. 并非所有的表格都是规规矩矩的只有几栏、几列而已，有时
候，我们还会希望能够“合并栏位”，让表格更美观、更实用
一点，而谈到“合并栏位”，我们就必须知道，合并的方向有
两种：一种是上下合并（也就是横列间的合并），一种是左右
合并（也就是直栏间的合并），这两种合并方式各有不同的属
性设定方法。  

  

2. 左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们
就来看看，如何将 1、2、3 格通通合并变成一大格：  

原始码 呈现结果  



 

1
 

4
5
6
 

 

1 

4 5 6 
 

3. 您应该会发现，怎么 2、3都消失了？只剩下 1，而且该栏的
标签还多了一个陌生的脸孔 COLSPAN="3"，没错，这就是
“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏

位左右横跨了 3个栏位”，也正因如此，本来的两个都可
以省掉了，因为都被并掉了嘛！  

4. 上下栏位合并：学会了左右合并！接下来，咱们就来看看，如
何上下合并，将 1、4格通通合并变成一大格：  

原始码 
呈现结
果  

 

1
2
3
 

5
6
 

 

1 
2 3 

5 6 
 

5. 有了上一次的经验后，我们就知道，要合并栏位就一定有些栏
位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我
们要“上下合并”，我们将 1与 4合并成一个栏位，那么被牺
牲的是哪一个栏位呢？没错就是下面那一个倒楣的 4，我们看
看上图，果然 4已经删掉了，而在 1的标签中则多了个生
面孔 ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2

的意思就是“这个栏位上下连跨了 2个栏位”，其结果如下：  

 

 

【表格栏位对齐位置设定】  

1. 我可以自己设定表格的大小吗？当然可以，您可以自由设定表
格的“宽”及“高”喔！我们来制作一个宽 100、高 60的表
格，做法如下：  

原始码 呈现结果  



 

1
 

  

1 
 

2. 哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然
可以，只要在加入 ALIGN=CENTER 这参数即可：  

原始码 呈现结果  

 

1
 

  

1 
 

3. 此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 
ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要
加在中呢？因为，是一个栏位的意思，我们要指定在

这栏位中的东西要置中或置左置右，就必须将 ALIGN加在
中。  

4. 既然可以置中，那么也可以控制表格内文字靠上方、靠下方
吗？可以的，只要利用 VALIGN=TOP 这种属性即可让表格内物

件靠上方对齐。  

原始码 呈现结果  

 

1
 

  

1 
 

5. 利用 VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），
VALIGN=BOTTOM可以 H让表格中物件靠下方。  

【表格背景、底色设定】  

1. 那么表格可以设定底色吗？可以的不但表格可以，您也可以指
定某栏或某列的颜色，方法和加背景颜色一样，利用



BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方
法：  

原始码 呈现结果  

 

1
2
 

3
4
 

  

1 2 

3 4 
 

2. 将 BGCOLOR="颜色码"加在中，可以指定“一列”的背景颜
色：  

原始码 
呈现结
果  

 

1
2
 

3
4
 

  

1 2 

3 4 
 

3. 将 BGCOLOR="颜色码"加在中，可以指定“一栏”的背景颜
色：  

原始码 呈现结果  

 

1
2
 

3
4
 

  

1 2 

3 4 
 

4. 表格除了可以设定底色外，也可以用图片来作背景吗？当然可
以，方法一样简单，只要将 BACKGROUND="图片名称"加到表格
中就行了。和表格背景颜色一样，不但表格可以设定背景图
片，您也可以指定某栏或某列的背景图片：  

原始码 呈现结果  



 

1
2
 

3
4
 

  

1 2 

3 4 
 

5. 将 BACKGROUND="图片名称"加在中，可以指定“一栏”的
背景颜色：  

原始码 呈现结果  

 

1
2
 

3
4
 

  

1 2 

3 4 
 

 

 

【表格框线设定】  

1. 如何设定表格粗细？只要利用 BORDER="粗细值"就行了。  

原始码 呈现结果  

 

1
 

 

1 
 

2. 如何设定表格颜色？只要利用 BORDERCOLOR="颜色码"就行了。  

原始码 呈现结果  

 

1
 

 

1 
 

3. 另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来
更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮
面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。  



原始码 呈现结果  

 

1
 

 

1 
 

 

 

【表格栏距设定】  

1. 我们可以利用 CELLPADDING属性自由设定表格内文距离格线的
距离，这个属性很好用，保持适当的距离，看起来比较舒服。
一般而言内定值为 2，不过我建议设定为 4比较漂亮。  

原始码 呈现结果  

 

1
2
 

 

1 2 
 

2. 我们可以利用 CELLSPACING属性设定表格栏位格线之间的距
离。一般而言内定值为 2，不过我通常习惯设为 0 。  

原始码 呈现结果  

 

1
2
 

 

1 2 
 

 

4.10 序列标签 <回细说索引> 

【无序标签】  

1. 序列标签基本上可分为两种，一种是“无序条列”，一种是
“有序条列”。所谓“无序条列”当然就是意指各条列间并无
顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无




序标签，在各条列前面均有一符号以示区隔。至于“有序条
列”就是指各条列之间是有顺序的，从 1、2、3…一直延伸下

去。  

  

2. 我们先来看看“无序列表标签”如何使用：  

原始码 呈现结果  

 

姓名：杰克升 
生日：1974/11/21 
星座：天蝎座 
  

 姓名：杰克升  
 生日：
1974/11/21  

 星座：天蝎座  

其中
标签即为“无序列表标签”，每增加一列内容，就必
须加一个
。  

3. 前面的符号一定是要圆形的吗？不，我们可以加入 TYPE="形状
名称"属性来改变其符号形状，一共有三个选择：DISK（实心
圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本
页使用