无聊的要死..没事把这个帖出来...一楼喂摆渡

■ 细说HTML标签 在HTML语法中，大致上可以分为： ( 节录自‘网站建置百宝箱’)网页架构：主要网页主架构的介绍 分隔标签：也就是所谓的水平线 排版标签：针对标签的属性，可做适当的版面编排 字体标签：教导您设定文字的字体。 文字标签：教导您设定文字的颜色、行距、变化.....等等。 影像标签：教导您如何在网页中，植入图像。 背景标签：教导您如何设定背景颜色或是背景图像。 连结标签：教导您如何设定超连结，以及开视窗的条件。 表格标签：教导您如何在网页中运用表格。 序列标签：教导您如何设定文字序列或图形序列。 表单标签：教导您如何制作可填写用的表单。 框架标签：可让同一个视窗由多个网页一起组成。 其他技巧：让您的整个网页背景可以让您设定为图片或是声音。

4.1 网页架构 <回细说索引> 　　　
网页制作教学　　
　　　　BODY之间则为主要语法所在，也是网页的主要呈现部分。　【标签解说】 以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。 简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的以及。 在抬头的部份中，有另一组标签
。打在
这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。 您可能会发现，为什么我一直没提到这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。

本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！ 使用方法：强制断行标签
、强制分段标签
标签解说：我们在写文章时，有时候在特定的地方会强迫断行（
），或是在写完某一段的时候便会分段（
），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。 使用范例： 原始码 呈现结果 这是一个断行的范例
看出来了吗？ 这是一个断行的范例看出来了吗？ 这是一个分段的范例
基本上他会比断行还多空出一行 这是一个分段的范例 基本上分段会比断行还多空出一行 【分隔线标签】 使用方法：上一段文字内容
下一段文字内容 标签解说：利用
这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下： 使用范例：一般用法 尚未加任何属性。 原始码 普通分隔线
呈现结果 普通分隔线 -------------------------------------------------------------------------------- 颜色属性 用法：
原始码 橘色分隔线
呈现结果 橘色分隔线 -------------------------------------------------------------------------------- 宽度属性 用法：
，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。 原始码 宽度为240px的分隔线
呈现结果 宽度为240px分隔线 -------------------------------------------------------------------------------- 厚度属性 用法：
原始码 厚度为5的分隔线
呈现结果 厚度为5分隔线 -------------------------------------------------------------------------------- 位置属性 用法：
，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right" 原始码 靠右的分隔线
呈现结果 靠右的分隔线 -------------------------------------------------------------------------------- 阴影属性 用法：
，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。 原始码 实心分隔线（无阴影）
呈现结果 实心分隔线（无阴影） --------------------------------------------------------------------------------

4.3 排版标签 <回细说索引>【文字置左、置中、置右】 使用方法：老实说，刚刚我们学过的分段标签
再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示： 原始码 呈现结果
文字靠左 文字靠左
文字置中 文字置中
文字靠右 文字靠右 标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签
的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。 【置中标签】 使用方法：
这是置中 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！ 使用范例： 原始码 呈现结果
这是最中间 这是最中间 【向右缩排标签】 使用方法：
要缩排的文字 标签解说：利用
这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。 使用范例： 原始码 呈现结果
缩排1单位 缩排1单位
缩排2单位 缩排2单位 【保存原始格式标签】 使用方法：
文字内容
标签解说：利用
这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。 使用范例： 原始码 呈现结果
文　字　格　式 文　字　格　式

4.5 文字标签 <回细说索引>【文字字型设定】 使用方法：
文字 标签解说：网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！ 另外，如果您的网页中有加上这一行叙述
（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显示。 使用范例：原始码 呈现结果
楷体_GB2312 楷体_GB2312
华康俪中黑 华康俪中黑 【特殊字元】 使用方法：  标签解说：很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“<”，常用的如下： 使用范例：原始码 呈现结果   ( 代表一个不断行空白) < < > > & & " " 【设定文字内定值大小】 使用方法：
标签解说：这个标签可以改变文字大小的内定值，直接加在标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。

4.6 影像标签 <回细说索引>【影像标签】 在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。 另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。 使用方法：
标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。 使用范例： 基本用法 用法：
显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。 原始码
嗨！我是本站的模特儿喔！ 呈现结果 嗨！我是本站的模特儿喔！ 长宽设定 用法：

原始码 上面的字
下面的字 呈现结果 上面的字下面的字 由于此网页有用css控制版面图文，故在netscape下观看，会稍有不正确。 【网页影像重要观念】 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在c:\images里，而网页档放在c:\demo里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表：html档的位置 图档的位置 写法 情形说明 c:\demo c:\demo
图文均在同一目录 c:\demo c:\demo\images
图在网页下一层目录 c:\demo c:\
图在网页上一层 c:\demo c:\image
图文在同一层但不同目录 或许有人看到不明就理，我来说明一下，“../”是回到上一层目录的意思。“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格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！ 图档范例 说明 gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。 jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。

4.7 背景标签 <回细说索引>【背景标签】 说穿了，背景标签只有这个标签，其余的效果，只要加上一些简单的属性便可做到。 使用方法： 标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在这标签里面。我就其属性来一一解说： 背景颜色 用法：设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！ 原始码
这是标题 这里是本文区 呈现结果 按下此处观看结果 背景图案 用法：g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。 原始码
这是标题 这里是本文区 呈现结果 按下此处观看结果 【内文、连结文字颜色设定】 使用方法：设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。 原始码
这是标题 这里是本文区 呈现结果 按下此处观看结果 连结颜色 用法：设定“连结”的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，那又会变成另一个颜色了，这底下会说明。 原始码
这是标题 连结文字 呈现结果 按下此处观看结果（设定连结为橘色） 连结时颜色 用法：设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。 原始码
这是标题 连结中文字 呈现结果 按下此处观看结果（滑鼠点下连结瞬间才会出现我们设定的浅蓝色） 已连结颜色 用法：设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。 原始码
这是标题 连结文字 呈现结果 按下此处观看结果（设定已执行过的连结以红色显示）

4.9 表格标签 <回细说索引>【网页中的表格观念】 举个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好几个步骤的，第一个步骤，利用
标签告诉电脑我要做一个表格；第二个步骤，利用一组标签先做一个横列，然后在横列中利用三组标签再分出三栏；第三个步骤，重复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细： 首先我们来看一个最简单的表格： 原始码 呈现结果
1 1 利用这个标签来告诉电脑，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组是设定一横列的开始。一组则是设定一个栏位。当然，文字就是要摆在这里面。 现在我们再来增加二个格子： 原始码 呈现结果
1
2
3 1 2 3 看见没有，没有增加，却增加了二组。那如果我要再加上一列呢？很简单，就像这样： 原始码 呈现结果
1
2
3
4
5
6 1 2 3 4 5 6 【合并表格栏位】 并非所有的表格都是规规矩矩的只有几栏、几列而已，有时候，我们还会希望能够“合并栏位”，让表格更美观、更实用一点，而谈到“合并栏位”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是横列间的合并），一种是左右合并（也就是直栏间的合并），这两种合并方式各有不同的属性设定方法。 左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3 格通通合并变成一大格： 原始码 呈现结果
1
4
5
6 1 4 5 6 您应该会发现，怎么2、3都消失了？只剩下1，而且该栏的标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个都可以省掉了，因为都被并掉了嘛！ 上下栏位合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4格通通合并变成一大格： 原始码 呈现结果
1
2
3
5
6 1 2 3 5 6 有了上一次的经验后，我们就知道，要合并栏位就一定有些栏位会被“牺牲”掉（也就是那些被合并的栏位啦！），这次我们要“上下合并”，我们将1与4合并成一个栏位，那么被牺牲的是哪一个栏位呢？没错就是下面那一个倒楣的4，我们看看上图，果然4已经删掉了，而在1的标签中则多了个生面孔ROWSPAN，这就是“上下栏位合并”的属性，ROWSPAN=2的意思就是“这个栏位上下连跨了2个栏位”，其结果如下： 【表格栏位对齐位置设定】 我可以自己设定表格的大小吗？当然可以，您可以自由设定表格的“宽”及“高”喔！我们来制作一个宽100、高60的表格，做法如下： 原始码 呈现结果
1 1 哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在加入 ALIGN=CENTER 这参数即可： 原始码 呈现结果
1 1 

此外，利用 ALIGN=RIGHT可以让表格中物件置右、利用 ALIGN=LEFT可以让表格中物件置左（预设值），至于为什么要加在中呢？因为，是一个栏位的意思，我们要指定在这栏位中的东西要置中或置左置右，就必须将ALIGN加在中。 既然可以置中，那么也可以控制表格内文字靠上方、靠下方吗？可以的，只要利用 VALIGN=TOP 这种属性即可让表格内物件靠上方对齐。 原始码 呈现结果
1 1 利用VALIGN=MIDDLE可以让表格中物件垂直置中（预设值），VALIGN=BOTTOM可以H让表格中物件靠下方。 【表格背景、底色设定】 那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法： 原始码 呈现结果
1
2
3
4 1 2 3 4 将BGCOLOR="颜色码"加在中，可以指定“一列”的背景颜色： 原始码 呈现结果
1
2
3
4 1 2 3 4 将BGCOLOR="颜色码"加在中，可以指定“一栏”的背景颜色： 原始码 呈现结果
1
2
3
4 1 2 3 4 表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要将BACKGROUND="图片名称"加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，您也可以指定某栏或某列的背景图片： 原始码 呈现结果
1
2
3
4 1 2 3 4 将BACKGROUND="图片名称"加在中，可以指定“一栏”的背景颜色： 原始码 呈现结果
1
2
3
4 1 2 3 4 【表格框线设定】 如何设定表格粗细？只要利用BORDER="粗细值"就行了。 原始码 呈现结果
1 1 如何设定表格颜色？只要利用BORDERCOLOR="颜色码"就行了。 原始码 呈现结果
1 1 另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感喔！只要利用 BORDERCOLORLIGHT="#颜色码"（亮面设定） BORDERCOLORDARK="颜色码"（暗面设定）就行了。 原始码 呈现结果
1 1 【表格栏距设定】 我们可以利用CELLPADDING属性自由设定表格内文距离格线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言内定值为2，不过我建议设定为4比较漂亮。 原始码 呈现结果
1
2 1 2 我们可以利用CELLSPACING属性设定表格栏位格线之间的距离。一般而言内定值为2，不过我通常习惯设为 0 。 原始码 呈现结果
1
2 1 2

4.10 序列标签 <回细说索引>【无序标签】 序列标签基本上可分为两种，一种是“无序条列”，一种是“有序条列”。所谓“无序条列”当然就是意指各条列间并无顺序关系，纯粹只是利用条列式方法来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。至于“有序条列”就是指各条列之间是有顺序的，从1、2、3…一直延伸下去。 我们先来看看“无序列表标签”如何使用： 原始码 呈现结果
姓名：杰克升
生日：1974/11/21
星座：天蝎座 姓名：杰克升 生日：1974/11/21 星座：天蝎座 其中
标签即为“无序列表标签”，每增加一列内容，就必须加一个
。 前面的符号一定是要圆形的吗？不，我们可以加入TYPE="形状名称"属性来改变其符号形状，一共有三个选择：DISK（实心圆）、SQUARE（小正方形）、CIRCLE（空心圆）三种（由于本页使用CSS故仅于Netscape看得出效果。）： 原始码 呈现结果
姓名：杰克升
生日：1974/11/21
星座：天蝎座 姓名：杰克升凯 生日：1974/11/21 星座：天蝎座 【有序标签】 接下来，我们来看看“有序列表标签”如何使用： 原始码 呈现结果
姓名：杰克升
生日：1974/11/21
星座：天蝎座 姓名：杰克升 生日：1974/11/21 星座：天蝎座 其中
标签即为“有序列表标签”，每增加一列内容，就必须加一个
。 和无序列表标签一样，我们也可以选择不同的符号来显示顺序，一样是用TYPE属性来作更改，一更有五种符号：1（数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）等五种： 原始码 呈现结果
姓名：杰克升
生日：1974/11/21
星座：天蝎座 姓名：杰克升 生日：1974/11/21 星座：天蝎座 另外，我们亦可指定序列起始的数目，其方法如下： 原始码 呈现结果
姓名：杰克升
生日：1974/11/21
星座：天蝎座 姓名：杰克升 生日：1974/11/21 星座：天蝎座 【定义列表标签】 接下来我们要说明的这个标签，是“定义列表标签”也是属于序列标签之一。我们先来举个例子，我们常常会在文章中看见这样的格式： CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一项新技术，什么叫做Cascading style sheet？简单说来他是一种具有阶层性的形式设定，能够让网页设计者在设计网页时，对于网页上的任何物件均有更佳的操控性… 网页里也有可以做到这种效果的标签喔！现在要来跟各位说的就是这个标签。咱们先来看看这标签的用法： 我们先来看看“定义列表标签”如何使用： 原始码 呈现结果
小标题
标题的内容说明 小标题 标题的内容说明

>_< 顶一个．

MS对有的人来说很有用...至少对我来说...但对这个没兴趣的一点用都没有...

顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

不鸟他们......把有用的帖子顶上去~~~顶顶顶

哎.............................................................

哇塞，LZ好厉害呦~