html语法

HTML 4.0 语 法 教 学   ■ 认识HTML语法 (标签快速导览) ◆ 网页架构 ◆ 分隔标签 ◆ 排版标签 ◆ 字体标签 ◆ 文字标签 ◆ 影像标签 ◆ 背景标签 ◆ 连结标签 ◆ 表格标签 ◆ 序列标签 ◆ 表单标签 ◆ 框架标签 ◆ 其他技巧

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

■ 细说HTML标签 在HTML语法中，大致上可以分为： ( 节录自‘网站建置百宝箱’) 网页架构：主要网页主架构的介绍 分隔标签：也就是所谓的水平线 排版标签：针对标签的属性，可做适当的版面编排 字体标签：教导您设定文字的字体。 文字标签：教导您设定文字的颜色、行距、变化.....等等。 影像标签：教导您如何在网页中，植入图像。 背景标签：教导您如何设定背景颜色或是背景图像。 连结标签：教导您如何设定超连结，以及开视窗的条件。 表格标签：教导您如何在网页中运用表格。 序列标签：教导您如何设定文字序列或图形序列。 表单标签：教导您如何制作可填写用的表单。 框架标签：可让同一个视窗由多个网页一起组成。 其他技巧：让您的整个网页背景可以让您设定为图片或是声音。 4.1 网页架构 <回细说索引> 　 　　 　　 　 　 　　BODY之间则为主要语法所在，也是网页的主要呈现部分。 　 【标签解说】 以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。 简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的以及。 在抬头的部份中，有另一组标签。打在这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。 您可能会发现，为什么我一直没提到这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。 4.2 分隔标签 <回细说索引> 【文字上的分隔标签】 或 许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或 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.4 字体标签 <回细说索引> 【标题标签】 使用方法： 标题内容 标签解说：标题的大小一共有六种，两个标签一组，也就是从 到 ， 最大， 最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。 使用范例： 原始码 呈现结果 标题一 标题一 标题二 标题二 标题三 标题三 标题四 标题四 标题五 标题五 标题六 标题六 【设定字体大小标签】 使用方法：文字内容 标签解说：标题的大小一共有七种，也就是（最小）到（最大），另外，还有一种写法：文字内容，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 3。 使用范例： 原始码 呈现结果 字体一 或是 字体一 字体一 字体二 或是 字体二 字体二 字体三 或是 字体三 字体三 字体四 或是 字体四 字体四 字体五 或是 字体五 字体五 字体六 或是 字体六 字体六 字体七 或是 字体七 字体七 【字型变化标签】 使用方法：文字 标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。 使用范例： 原始码 呈现结果 粗体 粗体 斜体 斜体 底线 底线 上标 上标 下标 下标 打字机 打字机 闪烁（ie没效果） 闪烁 强调 强调 加强 加强 范例 范例 原始码 原始码 变数 变数 定义 定义 引用 引用 所在地址 所在地址 【文字颜色设定】 使用方法：文字颜色 标签解说：文字也可以设定 颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！ 使用范例： 原始码 呈现结果 红 红色的字喔！ 橙 橙色的字喔！ 黄 黄色的字喔！ 绿 绿色的字喔！ 蓝 蓝色的字喔！ 靛 靛色的字喔！ 紫 紫色的字喔！ 黑 黑色的字喔！ 灰 灰色的字喔！ 4.5 文字标签 <回细说索引> 【文字字型设定】 使用方法：文字 标签解说：网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！ 另外，如果您的网页中有加上这一行叙述（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显示。 使用范例： 原始码 呈现结果 楷体_GB2312 楷体_GB2312 华康俪中黑 华康俪中黑 【特殊字元】 使用方法：  标签解说：很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“<”，常用的如下： 使用范例： 原始码 呈现结果     ( 代表一个不断行空白) < < > > & & " " 【设定文字内定值大小】 使用方法： 标签解说：这个标签可以改变文字大小的内定值，直接加在标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。 4.6 影像标签 <回细说索引> 【影像标签】 在 使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您 要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因 为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。 另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。 使用方法： 标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。 使用范例： 基本用法 用法： 显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。 原始码 images/G-FASE4.GIF">嗨！我是本站的模特儿喔！ 呈现结果 嗨！我是本站的模特儿喔！ 长宽设定 用法： 设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。 原始码 32 width=32> 呈现结果 加上说明 用法： 滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。 原始码 alt="本站特约模特儿">移到图上看看。 呈现结果 移到图上看看。 图片位置 用法： 图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。 原始码 align=right>嗨！我往右边靠！ 呈现结果 嗨！我往右边靠！ 原始码 align=left>嗨！我往左边靠！ 呈现结果 嗨！我往左边靠！ 原始码 align=top>文字对齐我头顶！ 呈现结果 文字对齐我头顶！ 原始码 align=bottom>文字对齐我脚底！ 呈现结果 文字对齐我脚底！ 原始码 align=middle>文字对齐我中间！ 呈现结果 文字对齐我中间！ 原始码 align=absmiddle>文字对齐我绝对中间！ 呈现结果 文字对齐我绝对中间！ 边框设定 用法： 设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在连结时，设框框简直是丑毙了...。 原始码 border="4"> 呈现结果 左右间距 用法： 离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。 原始码 左边的字hspace="15">右边的字 呈现结果 左边的字右边的字 上下间距 用法： 离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。 原始码 上面的字 vspace="15"> 下面的字 呈现结果 上面的字 下面的字 由于此网页有用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 背景标签 <回细说索引> 【背景标签】 说穿了，背景标签只有这个标签，其余的效果，只要加上一些简单的属性便可做到。 使用方法：> 标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在这标签里面。我就其属性来一一解说： 背景颜色 用法： 设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！ 原始码 bgcolor="#f9e6a2"> 这里是本文区 呈现结果 按下此处观看结果 背景图案 用法： g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。 原始码 background="bg.jpg"> 这里是本文区 呈现结果 按下此处观看结果 【内文、连结文字颜色设定】 使用方法：> 标签解说：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个标签中，便有设定内文、连结等文字的颜色内定值功能。用法如下： 内文颜色 用法： 设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。 原始码 text="#0906a2"> 这里是本文区 呈现结果 按下此处观看结果 连结颜色 用法： 设定“连结”的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，那又会变成另一个颜色了，这底下会说明。 原始码 link="#ff6600"> 连结文字 呈现结果 按下此处观看结果（设定连结为橘色） 连结时颜色 用法： 设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。 原始码 alink="#0099ff"> 连结中文字 呈现结果 按下此处观看结果（滑鼠点下连结瞬间才会出现我们设定的浅蓝色） 已连结颜色 用法： 设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。 原始码 vlink="red"> 连结文字 呈现结果 按下此处观看结果（设定已执行过的连结以红色显示）   4.8 连结标签 <回细说索引> 【WWW连结标签基本概念】 连结基本概念：一般而言，所谓连结就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。 扯到连结，最基本来看有‘内部连结’及‘外部连结’，所谓‘内部连结’就是自己网站间网页的连结，至于外部连结我们稍后再来讨论。 要了解内部连结，首先必须先了解一下这两种东西，一个是‘相对路径’，一个是‘绝对路径’。 现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 c:/www 里面，现在假设 c:/www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！ 现在我们想在 index.htm 里面设一个连结，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述： /c|/www/text1.htm"> 这就是‘绝对路径’ text1.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档，图档、文字档均可），那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？ /c|/www/gif/p1.gif"> 这是‘绝对路径’的写法 gif/p1.gif"> 这是‘相对路径’的写法 如何？不难吧！（只是字有点多，看到脑子发胀） 总整理：很乱吗？嗯...看看这表，或许会清楚些。 相对路径表示方式 代表连结位置 text1.htm在目前的目录中（就例子而言，就是在c:/www中） text1.htm在名为docs的次目录中（就本例而言，就是在c:/www/docs中） text1.htm在目前目录的上一层目录中（就本例而言，就是在c:/底下了） 【网页内部的连结】 使用方法： 先在欲连结处作记号：这里是你想连结的点 设定连结：连结 标签解说：有时候，当某页的内容很多时，我们可以利用网页的内部连结，来使使用者快速的找到资料。其原理不过是：在欲连结处做个记号（网页的任何地方都可以喔！），然后，连结时就寻这记号，就可以快速找到资料。很简单吧！ 使用范例： 范例 第一步骤 第二步骤 www连结标签基本概念 欲连结的位置 www连结标签基本概念 网页内部的连结 欲连结的位置 网页内部的连结 网页外部的连结 欲连结的位置 网页外部的连结 【网页外部的连结】 标签解说：连结到外面去，可以扩充您网站的实用性及充实性，也正因这功能，才造就了www五彩缤纷的世界。由于网路上的服务五花八门，所以不同的服务有不同的连结方法，我将之整理在下表。 使用范例： 网站连结 好站 http://sunspot-design.com">好站 电子邮件连结 写情书给我 mailto:[email protected]">写情书给我 ftp连结 下载档案 ftp://ftp.ntu.edu.tw">下载档案 news连结 seednet news服务 news:news.seed.net.tw">seednet news服务 gopher连结 seednet gopher服务 gopher://gopher.seed.net.tw/">seednet gopher服务 bbs连结 seednet gopher服务 telnet://bbs.seed.net.tw/">seednet bbs服务 【连结标签的参数】 使用方法：在连结后面加入 target=_参数 标签解说：连结的参数并不多，常见的大概就属 target 这参数了，target 的意思是‘目标’，也就是网页连结的指向目标，这参数在框窗（frame）里尤为重要！ 使用范例： target=框窗名称： 这在‘框架标签’中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名称，因此，我们可以利用此标签，来指定连结的内容显示到哪一个框窗中。 target=_blank： 将连结的画面内容，开在新的浏览视窗中。 target=_parent： 将连结的画面内容，当成文件的上一个画面。 target=_self： 将连结的画面内容，显示在目前的视窗中。 target=_top： 这个参数可以解决新连结的画面内容，被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成连结的画面内容。 4.9 表格标签 <回细说索引> 标签先做一个横列，然后在横列中利用三组标签再分出三栏；第三个步骤，重 复第二个步骤，再做一横列然后再分三栏，如此才能得到一个3栏2列的表格。听不太懂吗？没关系，以下咱们就来慢慢的看个仔细： 首先我们来看一个最简单的表格： 【网页中的表格观念】 举 个例子来说，如果今天我们要做一个3栏2列的表格，在WORD中，只要设定表格为3栏、2列就完成了，不过，在网页中做一个3栏2列的表格，可是要分成好 几个步骤的，第一个步骤，利用 标签告诉电脑我要做一个表格；第二个步骤，利用一组< TR> 原始码 呈现结果 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. 左右栏位合并：基本上，您的表格已经学会啰！接下来，咱们就来看看，如何将 1、2、3 格通通合并变成一大格：

   原始码	呈现结果
   COLSPAN=3>1 4 5 6	1 4 5 6

   您 应该会发现，怎么2、3都消失了？只剩下1，而且该栏的标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右栏位合 并”的属性，COLSPAN="3"的意思就是“这个栏位左右横跨了3个栏位”，也正因如此，本来的两个都可以省掉了，因为都被并掉 了嘛！

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

   原始码	呈现结果
   ROWSPAN=2>1 2 3 5 6	1 2 3 5 6

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

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

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

   原始码	呈现结果
   WIDTH="100" BORDER="1" HEIGHT="60"> 1	1

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

   原始码	呈现结果
   ALIGN=CENTER>1	1

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

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

   原始码	呈现结果
   VALIGN=TOP>1	1

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

中，可以指定“一列”的背景颜色：

【表格背景、底色设定】 那么表格可以设定底色吗？可以的不但表格可以，您也可以指定某栏或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色码"就行了。底下是指定整格表格背景颜色的方法： 原始码 呈现结果 BGCOLOR=#FFCC33> 1 2 3 4 1 2 3 4 将BGCOLOR="颜色码"加在

原始码	呈现结果
BGCOLOR=#FFCC33> 1 2 3 4	1 2 3 4

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

原始码	呈现结果
BGCOLOR=#FFCC33>1 2 3 4	1 2 3 4

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

原始码	呈现结果
BGCOLOR=#FFCC33> 1 2 3 4	1 2 3 4

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

原始码	呈现结果
BGCOLOR=#FFCC33>1 2 3 4	1 2 3 4

【表格框线设定】

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

   原始码	呈现结果
   BORDER=5> 1	1

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

   原始码	呈现结果
   BORDERCOLOR="#0080FF"> 1	1

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

   原始码	呈现结果
   BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> 1	1

【表格栏距设定】

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

   原始码	呈现结果
   CELLPADDING="10"> 1 2	1 2

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

   原始码	呈现结果
   CELLSPACING="5"> 1 2	1 2

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

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

4.11 表单标签 <回细说索引>

【表单的用途】 对于一般的网页设计初学者而言，表单功能其实并不常用，因为表单通常必须配合着CGI、JAVA Script程式或是ASP程式来运作，不然表单单独存在的意义并不大。不过，一旦有机会将表单运用到网页中时，您的网页将摆脱单向呈现，而开始迈入和使用者互动的阶段喔！ 本单元纯粹以介绍各式表单为主，至于一些CGI或ASP观念在此我就不提出了，因为提供零碎的观念，倒不如去看看专门介绍CGI的书籍来的妥当。 【各种输入类型】 文字输入列：每个表单之所以会有不同的类型，原因就在于TYPE="表单类型"设定的不同而已，我们就先来看看第一个类型：文字输入列。文字输入列的形态就是TYPE="TEXT，其使用方法如下： 呈现结果 姓名： 原始码 姓名：TEXT" NAME="NAME" SIZE="20"> 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称，程式中常会用到。 SIZE="数值"，是设定此一栏位显现的宽度。 VALUE="预设内容"，是设定此一栏位的预设内容。 ALIGN ="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对 齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、 ABSBOTTOM（绝对置下）等。 MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。 单选核取表单：利用TYPE="RADIO"就会产生单选核取表单，单选核取表单通常是好几个选项一起摆出来供使用者点选，一次只能从中选一个，故为单选核取表单。 呈现结果 性别：男 女 原始码 性别： 男 RADIO" NAME="SEX" VALUE="BOY"> 女 RADIO" NAME="SEX" VALUE="GIRL"> 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称，程式中常会用到。 VALUE="内容"，是设定此一栏位的内容、值或是意义。 ALIGN ="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对 齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、 ABSBOTTOM（绝对置下）等。 CHECKED，是设定此一栏位为预设选取值。 复选核取表单：利用TYPE=" CHECKBOX "就会产生复选核取表单，复选核取表单通常是好几个选项一起摆出来供使用者点选，一次可以同时选好几个，故为复选核取表单。 呈现结果 喜好： 电影 看书 原始码 喜好： CHECKBOX" NAME="SEX" VALUE="MOVIE">电影 CHECKBOX" NAME="SEX" VALUE="BOOK">看书 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称，程式中常会用到。 VALUE="内容"，是设定此一栏位的内容、值或是意义。 ALIGN ="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对 齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、 ABSBOTTOM（绝对置下）等。 CHECKED，是设定此一栏位为预设选取值。 密码表单：利用TYPE=" PASSWORD "就会产生一个密码表单，密码表单和文字输入表单长得几乎一样，差别就在于密码表单在输入时全部会以星号来取代输入的文字，以防他人偷窥。 呈现结果 请输入密码： 原始码 请输入密码：PASSWORD" NAME="INPUT"> 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称，程式中常会用到。 SIZE="数值"，是设定此一栏位显现的宽度。 VALUE="预设内容"，是设定此一栏位的预设内容，不过呈现出来仍是星号。 ALIGN ="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对 齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、 ABSBOTTOM（绝对置下）等。 MAXLENGTH="数值"，是设定此一栏位可设定输入的最大长度。 送出按钮：通常我们表单填完之后，都会有一个送出按钮以及清除重写的按钮，分别是利用TYPE=" SUBMIT "及TYPE=" RESET "来产生，相当的简单易用。 呈现结果 原始码 SUBMIT" VALUE="送出资料"> RESET" VALUE="重新填写"> 其有下列可设定之属性： NAME="名称"，是设定此一按钮的名称。 VALUE="文字"，是设定此一按钮上要呈现的文字，若是没有设定，浏览器也会自动替您加上“送出查询”、“重设”等字样。 ALIGN ="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对 齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、 ABSBOTTOM（绝对置下）等。 按钮元件：表单中或是JAVA SCRIPT常会用到按钮来作一些效果，因此，我们可以利用TYPE=" BUTTON "来产生一个按钮，相当简单。 呈现结果 请按下按钮： 原始码 请按下按钮：BUTTON" NAME="OK" VALUE="我同意"> 其有下列可设定之属性： NAME="名称"，是设定此一按钮的名称。 VALUE="文字"，是设定此一按钮上要呈现的文字。 ALIGN ="对齐方式"，是设定此一栏位的对齐方式，其值有：TOP（向上对齐）、MIDDLE（向中对齐）、BOTTOM（向下对齐）、RIGHT（向右对 齐）、LEFT（向左对齐）、TEXTTOP（向文字顶部对齐）、BASELINE（向文字底部对齐）、ABSMIDDLE（绝对置中）、 ABSBOTTOM（绝对置下）等。 隐藏栏位：表单中有时有些东西因为某些因素，不想让使用者看到，但因程式需要却又不得不存在，此时，我们就可以利用TYPE=" HIDDEN "来产生一个隐藏的栏位。 呈现结果 隐藏栏位： 原始码 隐藏栏位：HIDDEN" NAME="NOSEE" VALUE="看不到"> 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称。 VALUE="文字"，是设定此一栏位的值、文字或意义。 【大量文字输入元件】 有时候我们会希望让使用者输入比较大量的文字，此时，文字输入列就显得不敷使用，因此我们就可以利用来产生一个可以输入大量文字的元件，夹在两个标签中的文字会出现在框框中，可作为预设文字。 呈现结果 请输入您的意见： 原始码 请输入您的意见： <TEXTAREA NAME="TALK" COLS="20" ROWS="3"> 其有下列可设定之属性： NAME="名称"，是设定此一栏位的名称。 WRAP ="设定值"，是设定此一栏位的换行模式。设定值有三种：OFF（输入文字不会自动换行）、VIRTUAL（输入文字在萤幕上会自动换行，不过若是使用者 没有自行按下ENTER换行，送出资料时，也视为没有换行）、PHYSICAL（输入文字会自动换行，送出资料时，会将萤幕上的自动换行，视为换行效果送 出）。 COLS="数值"，是设定此一栏位的行数（横向字数）。 ROWS="数值"，是设定此一栏位的列数（垂直字数）。 【下拉式选单】 下拉式选单令整个网页看起来有很专业的感觉，我们只要利用便可以产生一个下拉式选单，另外，还需要配合标签来产生选项，这样才算完整喔！ 呈现结果 您喜欢看书吗？： 非常喜欢 还算喜欢 不太喜欢 非常讨厌 原始码 您喜欢看书吗？： 非常喜欢 还算喜欢 不太喜欢 非常讨厌 其有下列可设定之属性： SIZE="数值"，是设定此一栏位的大小，预设值为1，若是您的选项有四个，然后您将SIZE设成4，那么，下拉式选单便会变成选项方块，将四个选项一起呈现在方块中。 MULTIPLE，是设定此一栏位为复选，可以一次选好几个选项。

4.12 框架标签 <回细说索引>

【框架的基本概念】 首先，各位先看看右手边这张图，我将利用这张图来作解说，这样子，讲起来可能会清楚一点。 OK！我们可以看见，右边的这个视窗，一共分为 1 、 2 、 3 三个框架，每一个框架，各有其显示的内容分别是a.htm、b.htm、c.htm三个档案。然而左下角的那个 index.htm 是做什么用的呢？ 原来，左下角的这个档案 index.htm，就是要告诉电脑，我们要将画面分割成这样，也就是说，所有Frame的标签，其实都只摆在 index.htm 这个档案里。（当然，不是档名一定要叫做 index.htm 取其他档名也是可以的。） 这样明白了吗？总之，您要分割几个框框，就一定会有几个对应的html档案（假如您要分割100个框框，就要有100个html档就对了。），另外，还会多一个档案是来告诉电脑要如何分割的。（也就是例中的 index.htm 档啦！） 【开始分割】 别急、别急，分割视窗可是一门学问，要分割也是要一步一步来的。看看刚刚那例子，想像画面是一个蛋糕，你要怎么割，才能割成那样呢？ 原始码 呈现结果 各位会发现， 奇怪，在上面的语法中，怎么都没见到熟悉的身影？呵呵...没错，它已经被待会儿要加进去的< FRAMESET>标签给取代了！也就是说，如果我们要分割画面，就要先用标 签告诉电脑说：‘喂！我要开始分割了！’此时，是派不上用场的，所以躲到一旁凉快去了！ 现在开始动手割割看啰！我们先将画面分成左右两边（左边就是框窗 1 了，右边就暂定为 2 等一下还要分割呢！），如下图： 原始码 呈现结果 　 　 在中，我们要告诉电脑到底是要左右分（COLS）？还是上下分（ROWS）。一开始我们是左右分，所以我们写成。COLS="120,*" 就是说，左边那一栏强制定为 120点，右边则随视窗大小而变。除了直接写点数外，我们亦可用百分比来表示，例如COLS="20%,80%"也是可以的。 然后，再将右边的框窗再割成上下两个画面（也就是框窗 2 和 3 了）。如下图： 原始码 呈现结果 　 　 　　 　　 　 看见了没？原本的（在第 3 点的语法中）被另一组所取代了！所以要注意喔！第二组是被第一组所包围起来的喔！（乱七八糟了对不对？） 呵呵...不知不觉就大功告成了，其实只要将最后完成的那些语法存成 index.htm，然后再准备三个档 a.htm 、b.htm 、c.htm那么就完工啰！当然，这是一个最阳春的分割法，我会再将一些进阶的标签在底下一一说明。 【其他标签参数说明】 COLS="120,*" 就是垂直切割画面啦！你可以一次切成左右两个画面，当然也可以切成三个，很简单只要写成 COLS="30,*,50" （数字随便您自己调整啦！），依此类推，四个以上当然就是四组数字啦！ ROWS="120,*" 就是横向切割画面，也就是将画面上下分开，切法同上。 frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。 framespacing=5 表示框架与框架间的保留空白的距离，以免看起来太挤。   SRC="a.htm" 设定此框架中要显示的网页名称，每个框架一定要对应一个网页，否则就会产生错误，这里就是要您填入对应网页的名称。（如果该网页在不同目录，记得路径要写清楚） NAME="1" 设定这个框架的名称，这样才能指定框架来作连结，所以一定要设定喔！当然名称随你高兴取名。 frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 就是不要边框， 1 就是要显示边框。边框是无法调整粗细的。 scrolling="no" 设定是否要显示卷轴，YES是要显示卷轴，NO是无论如何都不要显示，AUTO是视情况显示。 noresize 设定不让使用者可以改变这个框框的大小，如果没有设定这个参数，使用者可以很容易的拉动框架，改变其大小。 marginhight=2 表示框架高度部份边缘所保留的空间。 marginwidth=2 表示框架宽度部份边缘所保留的空间。 【相关用法】 ◆ 使用方法：请换有支援Frame功能的浏览器 标签解说：有些浏览器较为老旧，无法显示Frame的功能，因此，就要使用此标签，让这些网友知道，该换换浏览器了。或者，你也可以在这标签中，摆上没有Frame语法的网页标签，那么，没有支援Frame功能的浏览器，便会自动显示没有Frame语法的网页。 ◆ target=框窗名称 使用方法： target=3>显示内容 标签解说：常常有一个情况是，我想在框窗 1 的地方按下连结，但是希望他的内容出现在框窗 3 中（请参照上面那个图），那应该如何写呢？就像上面加个 target=框窗名称 就行啦！ ◆ target=_top 使用方法： target=_top>奇摩站 标签解说：有时候，在框窗里会连结到别的站，却发现，新连结的这个站，竟然被框窗包住了，不但难看，而且可能会吃上官司说！所以，这时候你必需加入 target=_top这个参数，那么，这个新连到的网站，就会重新占据整个萤幕啦！

4.13 其他技巧 <回细说索引>

■ 网页配色及背景音乐

首先是网页的底色，通常是白白的，要怎么做变化呢？可以做自己的背景图片。

要注意一点，如果背景和文字颜色一样～或者颜色相近，天啊～那谁知道你在写什么呀？最好文字与背景颜色有对比，像敝人当初，网页背景是黑的，字是白的红的，就可以很明显的突显出文字。如果图片中有文字，也要尽量淡化，否则影响内容就不好啰！

内容的东西颜色要配的适宜（除非你想要有奇怪的风格），不然像背景大红大红，太刺眼了，有人会想去吗？剩下的就让您自己配配看吧！

然后是音乐，有人喜欢用bgsound标签

可是用NetScape看就没有声音了最好用embed标签

这样就可以正常播放了唷～

■ 首页应有的特质及重要性

1. About Open Page：打开browser看到网站的第一个部份，有人称之为Open Page(通常是首页的一半或三分之一)，这个部份应该包含网站的主功能(亦即使用者上这个网站最希望或者最可能做的事)，ex. 一进入Allproducts.com即可看到“Key word search”及“Search by category”，应该尽量避免让使用者还要使用mouse上下左右拉才能看到他(她)所想要的功能或资讯，有时资讯太多，在不得已的情况下，页面可以往下沿申，但切忌右左划面过大，不符一般人的使用习惯，也会造成列印上的困扰。
   
   
2. 主题明确：Open Page应包含公司Logo、网站主题(最好是一段简短的Slogan，让使用者一看就知道这个网站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)
   
   
3. Navigation： 让使用者很明确了解他(她)目前在网站的什么地方(或功能)，首页上应该有主要功能的连结，各个icon如果可能的话，尽可能加上一些纯文字的说明及 link；至于icon或者link的摆放亦应有其相对应的逻辑，如与整个网站或大架构较为相关的，放在较外层，与目前执行的功能或页面较为相关的 link应该放在内层；另外，最好能在首页上提供Site Map的连结，让使用者可以很快了解网站的架构；所有的link应该把握 intuitive , obvious , fast的原则。
   
   
4. Color or image：对于颜色的采用，应该考虑到该网站的特性及与其它相关网站的区别，特别是首页的颜色配置，应该让使用者感觉很舒服、没有压迫感，但又不失其专 业性，但切忌过度追求美感而牺牲其功能性，就公司目前的网站设计理念，应该是功能性的考量优于纯美术的考量，首页的设计最好设定在60k以内，而且不要用 太多层的table。
   
   
5. Meta tag：该部份不会出现在前端的页面上，但网站规划时应该将该部份一并考量，做为网站登录时使用，网站上线时务必将相关资料加入。
   
   
6. 其它：首页上应该有service account 及 联络资料

■ Meta Tag 的简介

一般常用的格式如下：

• 
  这虽说不是meta的一部份，但是也不可忽略，总长度不要超过85个Character (约10个字)。
  
  
• 
  说明网站的格式及编码方式，另外这个功能也可以拿来说明网站的名称。
  
  
• 
  铲明整个网站的关键字，关键字间用逗点隔开，总长度最好不要超过1000个Character (约44个字)。
  
  
• 
  铲明整个网站为何吸引人的地方，可用逗点隔开，总长度最好不要超过200个Character (约15个字)，若文章真的太长，可以切割成两个部分，较不重要的部分置入下一个Description。
  
  
• 
  此功能是要给搜寻引擎使用的，是要用来告诉Spider哪些网页是要去撷取的或不用去撷取的，一般都设定成All(内定值)。