HTML4.0语法教学
作者：未知 文章来源：转载 点击数： 更新时间：2006-12-14
[ 字体：缩小 正常 放大 | 双击自动滚屏 ]
请选择合适的字体颜色：
选择颜色
黑 色
红 色
黄 色
绿 色
橙 色
紫 色
蓝 色
褐 色
墨 绿
深 蓝
赭 石
粉 绿
淡 绿
黄 灰
翠 绿
综 红
砖 红
淡 蓝
暗 红
玫瑰红
紫 红
桔 黄
军 黄
烟 灰
深 灰
灰 蓝
■ 细说HTML标签
网站建置百宝箱
网页架构 分隔标签 排版标签 字体标签 文字标签 影像标签 背景标签 连结标签 表格标签 序列标签 表单标签 框架标签 其他技巧 4.1 网页架构 <回细说索引
<HTML>网页制作教学 </TITLE>BODY之间则为主要语法所在，也是网页的主要呈现部分。
【标签解说】
以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法） 集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。
简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的<HEAD></HEAD> 以及<BODY></BODY> 。
在抬头的部份<HEAD></HEAD>中，有另一组标签<TITLE></TITLE> 。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。
您可能会发现，为什么我一直没提到<HTML></HTML>这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。
4.2 分隔标签 <回细说索引
【文字上的分隔标签】
或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！
使用方法： word>强制断行标签 word><br> 、word>强制分段标签 word><p>
标签解说： 我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
这是一个断行的范例<br>看出来了吗？
这是一个断行的范例
这是一个分段的范例<p>基本上他会比断行还多空出一行
这是一个分段的范例
基本上分段会比断行还多空出一行
【分隔线标签】
使用方法： word>上一段文字内容 word><hr> word>下一段文字内容
标签解说： 利用word><hr> 这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：
使用范例：
word bgColor=#414141>一般用法
word bgColor=#666666>尚未加任何属性。
word width=60 bgColor=gray>原始码
普通分隔线word><hr>
word bgColor=#808080>呈现结果
普通分隔线
word width=60 bgColor=#414141>颜色属性
word bgColor=#666666>用法：<hr color="颜色码或颜色名称">
word width=60 bgColor=gray>原始码
橘色分隔线word><hr color="#ff8000">
word bgColor=#808080>呈现结果
橘色分隔线
word width=60 bgColor=#414141>宽度属性
word bgColor=#666666>用法：<hr width="宽度">，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占荧幕50%。
word width=60 bgColor=gray>原始码
宽度为240px的分隔线word><hr width="240">
word bgColor=#808080>呈现结果
宽度为240px分隔线
word width=60 bgColor=#414141>厚度属性
word bgColor=#666666>用法：<hr size="厚度">
word width=60 bgColor=gray>原始码
厚度为5的分隔线word><hr size="5">
word bgColor=#808080>呈现结果
厚度为5分隔线
word width=60 bgColor=#414141>位置属性
word bgColor=#666666>用法：<hr align="水平对齐位置">，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right"
word width=60 bgColor=gray>原始码
靠右的分隔线word><hr align="right">
word bgColor=#808080>呈现结果
靠右的分隔线
word width=60 bgColor=#414141>阴影属性
word bgColor=#666666>用法：<hr noshade>，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。
word width=60 bgColor=gray>原始码
实心分隔线（无阴影）word><hr noshade>
word bgColor=#808080>呈现结果
实心分隔线（无阴影）
4.3 排版标签 <回细说索引
【文字置左、置中、置右】
使用方法： 老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<p align="left">文字靠左</p>
文字靠左
<p align="center">文字置中</p>
文字置中
<p align="right">文字靠右</p>
文字靠右
标签解说： 嗯！秘诀就在于“align=word>对齐位置 ”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是word>置左（align="left"） 、word>置中（align="center"） 、word>置右（align="right"） 。
【置中标签】
使用方法： word><center> word>这是置中 word></center>
标签解说： 这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<center>这是最中间</center>
这是最中间
【向右缩排标签】
使用方法： word><blockquote> word>要缩排的文字 word></blockquote>
标签解说： 利用word><blockquote> word></blockquote> 这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<blockquote>缩排1单位</blockquote>
缩排1单位
<blockquote><blockquote>缩排2单位</blockquote></blockquote>
缩排2单位
【保存原始格式标签】
使用方法： word><pre> word>文字内容 word><pre>
标签解说： 利用word><pre> word></pre> 这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<pre>
文 字
格 式
4.4 字体标签 <回细说索引
【标题标签】
使用方法： word><h1> word>标题内容 word></h1>
标签解说： 标题的大小一共有六种，两个标签一组，也就是从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<h1>标题一</h1>
标题一
<h2>标题二</h2>
标题二
<h3>标题三</h3>
标题三
<h4>标题四</h4>
标题四
<h5>标题五</h5>
标题五
<h6>标题六</h6>
标题六
【设定字体大小标签】
使用方法： <font size=3> word>文字内容 </font>
标签解说： 标题的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1> word>文字内容 </font> ，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 3。
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<font size=1>字体一</font> 或是
字体一
<font size=2>字体二</font> 或是
字体二
<font size=3>字体三</font> 或是
字体三
<font size=4>字体四</font> 或是
字体四
<font size=5>字体五</font> 或是
字体五
<font size=6>字体六</font> 或是
字体六
<font size=6>字体七</font> 或是
字体七
【字型变化标签】
使用方法： word><b> word>文字 word></b>
标签解说： 在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<b>粗体</b>
粗体
<i>斜体</i>
斜体
<u>底线</u>
底线
<sup>上标</sup>
上标
<sub>下标</sub>
下标
<tt>打字机</tt>
打字机
<blink>闪烁</blink>（ie没效果）
闪烁
<em>强调</em>
强调
<strong>加强</strong>
加强
<samp>范例</samp>
范例
<code>原始码</code>
原始码
<var>变数</var>
变数
<dfn>定义</dfn>
定义
<cite>引用</cite>
引用
<address>所在地址</address>
所在地址
【文字颜色设定】
使用方法： word><font color="#fefecb"> word>文字颜色 word></font>
标签解说： 文字也可以设定 颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<font color="#ff0000">红</font>
红色的字喔！
<font color="#ff8000">橙</font>
橙色的字喔！
<font color="#ffff00">黄</font>
黄色的字喔！
<font color="#00ff00">绿</font>
绿色的字喔！
<font color="#0080ff">蓝</font>
蓝色的字喔！
<font color="#0000a0">靛</font>
靛色的字喔！
<font color="#8000ff">紫</font>
紫色的字喔！
<font color="#000000">黑</font>
黑色的字喔！
<font color="#c0c0c0">灰</font>
灰色的字喔！
4.5 文字标签 <回细说索引
【文字字型设定】
使用方法： word><font face="字型名称"> word>文字 word></font>
标签解说： 网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！
另外，如果您的网页中有加上这一行叙述<meta http-equiv="content-type" content="text/html;charset=big5">（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显示。
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<font face="楷体_GB2312">楷体_GB2312</font>
楷体_GB2312
<font face="华康俪中黑">华康俪中黑</font>
华康俪中黑
【特殊字元】
使用方法： word>
标签解说： 很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“<”，常用的如下：
使用范例：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
( 代表一个不断行空白)
<
<
>
>
&
&
"
"
【设定文字内定值大小】
使用方法： word><basefont size="1~7">
标签解说： 这个标签可以改变文字大小的内定值，直接加在<body>标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。
4.6 影像标签 <回细说索引
【影像标签】
在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。
另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。
使用方法： word><img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32>
标签解说： 目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。
使用范例：
word width=60 bgColor=#414141>基本用法
word bgColor=#666666>用法：<img src="图档名称、路径">
word width=60 bgColor=gray>原始码
<img src="word>images/G-FASE4.GIF ">嗨！我是本站的模特儿喔！
word bgColor=#808080>呈现结果
word width=60 bgColor=#414141>长宽设定
word bgColor=#666666>用法：<img src="图档" height="高度" width="宽度">
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" height=word>32 width=word>32 >
word bgColor=#808080>呈现结果
word width=60 bgColor=#414141>加上说明
word bgColor=#666666>用法：<img src="图档" alt="说明文字">
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>alt="本站特约模特儿" >移到图上看看。
word bgColor=#808080>呈现结果
word width=60 bgColor=#414141>图片位置
word bgColor=#666666>用法：<img src="图档" align="位置">
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>align=right >嗨！我往右边靠！
word bgColor=#808080>呈现结果
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>align=left >嗨！我往左边靠！
word bgColor=#808080>呈现结果
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>align=top >文字对齐我头顶！
word bgColor=#808080>呈现结果
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>align=bottom >文字对齐我脚底！
word bgColor=#808080>呈现结果
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>align=middle >文字对齐我中间！
word bgColor=#808080>呈现结果
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>align=absmiddle >文字对齐我绝对中间！
word bgColor=#808080>呈现结果
word width=60 bgColor=#414141>边框设定
word bgColor=#666666>用法：<img src="图档" border="边框粗细">
word width=60 bgColor=gray>原始码
<img src="images/G-FASE4.GIF" word>border="4" >
word bgColor=#808080>呈现结果
word width=60 bgColor=#414141>左右间距
word bgColor=#666666>用法：<img src="图档" hspace="离左右物件的距离">
word width=60 bgColor=gray>原始码
左边的字<img src="images/G-FASE4.GIF" word>hspace="15" >右边的字
word bgColor=#808080>呈现结果
左边的字
word width=60 bgColor=#414141>上下间距
word bgColor=#666666>用法：<img src="图档" vspace="离上下物件的距离">
word width=60 bgColor=gray>原始码
上面的字<br><img src="images/G-FASE4.GIF" word>vspace="15" ><br>下面的字
word bgColor=#808080>呈现结果
上面的字
由于此网页有用css控制版面图文，故在netscape下观看，会稍有不正确。
【网页影像重要观念】
关于路径： 现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在c:\images里，而网页档放在c:\demo里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表：
word bgColor=#808080>html档的位置
word bgColor=#808080>图档的位置
word bgColor=#808080>写法
word bgColor=#808080>情形说明
c:\demo
c:\demo
<img src="tad.gif">
图文均在同一目录
c:\demo
c:\demo\images
<img src="images/tad.gif">
图在网页下一层目录
c:\demo
c:\
<img src=" ../tad.gif">
图在网页上一层
c:\demo
c:\image
<img src=" image/tad.gif">
图文在同一层但不同目录
word>或许有人看到不明就理，我来说明一下，“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意，而“images/”的意思就是，回到上一层目录，然后再进入目录images中。以上我们使用的均为“相对路径 ”的概念。
影像单位： 或许您会常常看到px这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”，我们称之为“像素”。像素，是荧幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，荧幕本身十五吋，不会因为你的任何设定而变成十七吋。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“640 ×480”、“800 ×600”、“1024 ×768”。举其中之一的640 ×480来说，其代表的就是在荧幕上有宽640个光点，高有480光点，若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，荧幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。
影像格式： 网页用的图档目前只有gif格式（即副档名为gif的图档，如：bg.gif）以及jpg格式（即副档名为jpg的图档，如：bg.jpg）为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！
word bgColor=gray>图档范例
word bgColor=#808080>说明
gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。
jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。
4.7 背景标签 <回细说索引
【背景标签】
说穿了，背景标签只有<BODY>这个标签，其余的效果，只要加上一些简单的属性便可做到。
使用方法： word><body bgcolor="#ffffff" background="bg.jpg" word>>
标签解说： 这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一word>（哎哎哎...现在放马后炮有什么用！） 。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在<body>这标签里面。我就其属性来一一解说：
word width=60 bgColor=#414141>背景颜色
word bgColor=#666666>用法：<body bgcolor="颜色码">
word width=60 bgColor=gray>原始码
<html><body word>bgcolor="#f9e6a2" >
这里是本文区
</body>
word bgColor=#808080>呈现结果
按下此处观看结果
word width=60 bgColor=#414141>背景图案
word bgColor=#666666>用法：<body background="图档名称、路径">
word width=60 bgColor=gray>原始码
<html><body word>background="bg.jpg" >
这里是本文区
</body>
word bgColor=#808080>呈现结果
按下此处观看结果
【内文、连结文字颜色设定】
使用方法： word><body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000 word>>
标签解说： 用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个<body>标签中，便有设定内文、连结等文字的颜色内定值功能。用法如下：
word width=60 bgColor=#414141>内文颜色
word bgColor=#666666>用法：<body text="颜色码">
word width=60 bgColor=gray>原始码
<html><body word>text="#0906a2" >
这里是本文区
</body>
word bgColor=#808080>呈现结果
按下此处观看结果
word width=60 bgColor=#414141>连结颜色
word bgColor=#666666>用法：<body link="颜色码">
word width=60 bgColor=gray>原始码
<html><body word>link="#ff6600" >
<a href="index.htm">连结文字</a>
</body>
word bgColor=#808080>呈现结果
按下此处观看结果
word width=60 bgColor=#414141>连结时颜色
word bgColor=#666666>用法：<body alink="颜色码">
word width=60 bgColor=gray>原始码
<html><body word>alink="#0099ff" >
<a href="index.htm">连结中文字</a>
</body>
word bgColor=#808080>呈现结果
按下此处观看结果
word width=60 bgColor=#414141>已连结颜色
word bgColor=#666666>用法：<body vlink="颜色码">
word width=60 bgColor=gray>原始码
<html><body word>vlink="red" >
<a href="demo1-10-6.htm">连结文字</a>
</body>
word bgColor=#808080>呈现结果
按下此处观看结果
4.8 连结标签 <回细说索引
【WWW连结标签基本概念 】
连结基本概念： 一般而言，所谓连结就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样 word>（以上这段是给超级新手看的...） 。
扯到连结，最基本来看有‘内部连结’ 及‘外部连结’ ，所谓‘内部连结’就是自己网站间网页的连结，至于外部连结我们稍后再来讨论。
要了解内部连结，首先必须先了解一下这两种东西，一个是word>‘相对路径’ ，一个是word>‘绝对路径’ 。
现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 c:\www 里面，现在假设 c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！
现在我们想在 index.htm 里面设一个连结，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：
<a href="word>/c|/www/text1.htm ">
这就是‘绝对路径’
<a href="word>text1.htm ">
这就是‘相对路径’
瞧出什么端倪了没有？嗯嗯....没错，‘绝对路径’要给电脑一个非常详尽的位置，让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦！如果没有特别指定，他就会直接在 index.htm 的word>所在目录 下找，也就是在 c:\www 底下去找text1.htm。
如果说，今天我们将 c:\www 里所有的档案都上传到网路上的网页伺服器word>（总不能做好了只给自己看吧！） ，且该伺服器是别人的电脑，而非你自己架设的主机，那么问题就来了！你猜，哪一种连结会出问题？呵呵...答案是‘绝对路径’，您猜对了吗？
为什么说‘绝对路径’会出问题呢？因为，当您将档案上传到网路上时，您的整个网页目录架构一定会变，到时候，电脑可能找不到 c:\ word>（尤其是unix 系列的主机） 更可能找不到 www 这目录word>（有些会规定要放在特定的目录下才能显示网页） ，所以说，没事的话，尽量用‘相对路径’来作连结吧！好写又不容易出错。
另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:\www\gif\ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:\www 底下。现在我们想在 index.htm 下设个连结到 p1.gif 这图档word>（连结不限于只能连html档，图档、文字档均可） ，那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？
<a href="word>/c|/www/gif/p1.gif ">
这是‘绝对路径’的写法
<a href="word>gif/p1.gif ">
这是‘相对路径’的写法
如何？不难吧！word>（只是字有点多，看到脑子发胀）
总整理： 很乱吗？嗯...看看这表，或许会清楚些。
word>相对路径表示方式 word>代表连结位置
<a href="text1.htm">
text1.htm在目前的目录中word>（就例子而言，就是在c:\www中）
<a href="docs/text1.htm">
text1.htm在名为docs的word>次目录 中word>（就本例而言，就是在c:\www\docs中）
<a href="../text1.htm">
text1.htm在目前目录的上一层目录中word>（就本例而言，就是在c:\底下了）
【网页内部的连结 】
使用方法：
先在欲连结处作记号： word><a name="here1"> word>这里是你想连结的点 word></a>
设定连结： word><a href="#here1"> word>连结 word></a>
标签解说： 有时候，当某页的内容很多时，我们可以利用网页的内部连结，来使使用者快速的找到资料。其原理不过是：在欲连结处做个记号word>（网页的任何地方都可以喔！） ，然后，连结时就寻这记号，就可以快速找到资料。很简单吧！
使用范例：
word>范例
word>第一步骤
word>第二步骤
www连结标签基本概念 <a name="m1">欲连结的位置</a>
<a href="#m1">www连结标签基本概念</a>
网页内部的连结 <a name="m2">欲连结的位置</a>
<a href="#m2">网页内部的连结</a>
网页外部的连结 <a name="m3">欲连结的位置</a>
<a href="#m3">网页外部的连结</a>
【网页外部的连结 】
标签解说： 连结到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网路上的服务五花八门，所以不同的服务有不同的连结方法，我将之整理在下表。
使用范例：
word bgColor=#808080>网站连结
好站 <a href="word>http://sunspot-design.com ">好站</a>
word bgColor=#808080>电子邮件连结
写情书给我 <a href="word>mailto:tad@ms1.url.com.tw ">写情书给我</a>
word bgColor=#808080>ftp连结
下载档案 <a href="word>ftp://ftp.ntu.edu.tw ">下载档案</a>
word bgColor=#808080>news连结
seednet news服务 <a href="word>news:news.seed.net.tw ">seednet news服务</a>
word bgColor=#808080>gopher连结
seednet gopher服务 <a href="word>gopher://gopher.seed.net.tw/ ">seednet gopher服务</a>
word bgColor=#808080>bbs连结
seednet gopher服务 <a href="word>telnet://bbs.seed.net.tw/ ">seednet bbs服务</a>
【连结标签的参数】
使用方法： 在连结后面加入 target=_参数
标签解说： 连结的参数并不多，常见的大概就属 target 这参数了，target 的意思是‘目标’，也就是网页连结的指向目标，这参数在框窗（frame）里尤为重要！
使用范例：
word>target=框窗名称 ：
word>target=_blank ：
word>target=_parent ：
word>target=_self ：
word>target=_top ：
4.9 表格标签 <回细说索引
【网页中的表格观念】
举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用<TABLE></TABLE>标签告诉电脑我要做一个表格；第二个步骤，利用一组<TR></TR>标签先做一个横列，然后在横列中利用三组<TD></TD>标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细：
首先我们来看一个最简单的表格：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<TABLE BORDER=1>word><TR> word><TD> 1word></TD> word></TR>
利用<TABLE>这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组<TR></TR>是设定一横列的开始。一组<TD></TD>则是设定一个栏位。当然，文字就是要摆在这里面。
现在我们再来增加二个格子：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<TABLE BORDER=1>word><TR> word><TD> 1word></TD> word><TD> 2word></TD> word><TD> 3word></TD> word></TR>
看见没有，<TR></TR>没有增加，word><TD> word></TD> 却增加了二组。那如果我要再加上一列呢？很简单，就像这样：
word width="50%" bgColor=#808080>原始码
word width="50%" bgColor=#808080>呈现结果
<TABLE BORDER=1>word><TR> word><TD> 1word></TD> word><TD> 2word></TD> word><TD> 3word></TD> word></TR> word><TR> word><TD> 4word></TD> word><TD> 5word></TD> word><TD> 6word></TD> word></TR>
【合并表格栏位】
并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。
左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3 格通通合并变成一大格：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER=1>word>COLSPAN=3 >1</TD></TR>
word>您应该会发现，怎么2、3都消失了？只剩下1，而且该栏的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个<TD>都可以省掉了，因为都被并掉了嘛！
上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4格通通合并变成一大格：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER=1>word>ROWSPAN=2 >1</TD><TD>2</TD><TD>3</TD></TR>
word>有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的<TD>标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下：
【表格栏位对齐位置设定】
我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60" >
哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入 ALIGN=CENTER 这参数即可：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">ALIGN=CENTER >1</TD></TR>
此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在<TD>中呢？因为，<TD>是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在<TD>中。
既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">VALIGN=TOP >1</TD></TR>
利用VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。
【表格背景、底色设定】
那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="1" BGCOLOR=#FFCC33 >
将BGCOLOR="颜色码"加在<TR>中，可以指定“一列”的背景颜色：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="1" >BGCOLOR=#FFCC33 ><TD>1</TD><TD>2</TD></TR>
将BGCOLOR="颜色码"加在<TD>中，可以指定“一栏”的背景颜色：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="1" >BGCOLOR=#FFCC33 >1</TD><TD>2</TD></TR>
表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="1" BGCOLOR=#FFCC33 >
将BACKGROUND="图片名称"加在<TD>中，可以指定“一栏”的背景颜色：
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="1">BGCOLOR=#FFCC33 >1</TD><TD>2</TD></TR>
【表格框线设定】
如何设定表格粗细？只要利用BORDER="粗细值"就行了。
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE word>BORDER=5 >
如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="5" word>BORDERCOLOR="#0080FF" >
另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" word>BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97" >
【表格栏距设定】
我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="1" word>CELLPADDING="10" >
我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。
word width="70%" bgColor=#808080>原始码
word width="30%" bgColor=#808080>呈现结果
<TABLE BORDER="1" word>CELLSPACING="5" >
嗨！我是本站的模特儿喔！
