学习网页制作基础入门教程(1—7)
用记事本编写代码
1.首先打开“记事本”程序（方法是「开始」-「程序」-「附件」-「记事本」）
2.将下面代码复制好粘贴到记事本上，如图-1所示。（按鼠标右键选择粘贴就可以了！）




这里是放置网页内容的文本区域



【图-1说明】利用鼠标右键的“粘贴”或者按 CTRL+V 都可以将复制的内容粘贴上的。

【图-2说明】点击“文件”里的“保存”就可以文件保存了。将文件保存了，就大功告成了！ （在硬盘下建立建一个子目录，我们就在E:盘下建立一个 myweb 的子目录，并将我们的网页保存为 myfirst.htm 就可以了。）

【图-3说明】网页文件的扩展名是htm或是html，所以千万记得，请输入完整的文件名，否则记事本将存为.txt的文本文件，那么浏览器就浏览不出效果来了。
标签解释：
1.以上看到的就是一个最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的整理，就便成了美丽漂亮的网页了。
2.简单而言，通常一份完整的网页包含了二个部分：头部（HEAD）、文件主体（BODY）。也就是大家在上面所看到的 以及 。
3.在头部里面 中，另有一组标签 。打在 这里的文字会出现在浏览器窗口的最上面兰色部分里，当作一个网页的主题。
4.您可能会发现，为什么一直没有提到 这一组标签呢，恩！因为它可有可无。这一组标签是告诉浏览器：我是一份 HTML 文件！也就是说它是一个网页的格式！通常都包在网页的最上下两端，将所有的原始码都包起来了。
浏览刚做好的网页
1.刚刚保存了文件了，我们存的网页文件在 e:\myweb\myfirst.htm 。
2.在您的浏览器的地址栏内输入 e:\myweb\myfirst.htm 或是file:///e|/myweb\myfirst.htm 吧！（因为每个浏览器打开硬盘中文件的方式都不太一样，所以用这样的方法比较一致。）
3. 如何，看到您的第一个网页了吧！

【图-4说明】要浏览我们刚做网页是非常简单的，首先我们打开浏览器，然后输入我们刚刚保存的文件 e:\myweb\myfirst.htm 看看，看是否能正确显示无误。您也可以按网页范例【myfirst.htm】，立即看看这篇网页的样子。
制作网页的规则
1.一般而言，一个网站的首页名称为 index.htm 或是 index.html 一定要小写，只要一进该网站，浏览器便会自动的找出 index.htm 这个文件，并且自动的去浏览 index.htm 的內容。
2.文件大小写一定要注意，没事的话，文件名最好全部用「英文小写字母」来命名，因为，在我们的电脑中，INDEX.HTM 和 index.htm 是一样的文件，但是上了网络之后，网站服务器可是会认为这是不同的两个文件，此时，若是没注意，那可就............！
3.你发现了吗？同一个标签，好象都有两个，唯一不同的是，后面的那一个多了一个“ / ”，如：。前面的 是开始标签，后面的 是结束标签。大部分的标签都是两个一组，不过也有单一的，这在以后给大家讲解。
学习网页制作基础入门教程(2)
文字上的分隔标签
1. 使用方法：强制断行标签
、强制分段标签

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

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

看出来了吗？网页教学网这是一个分段的例子
看出来了吗？网页教学网
文字置左、置中、置右
1.使用方法：老实说，刚刚我们学习过分段标签

再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：
2.标签解说：秘诀就在于「ALIGN=对齐位置」而已！ALIGN是分段标签

的属性之一，这个属性将会常常在不同标签中看到，它的功能是专门在设定「水平对齐位置」，其常见的设定值有三个，也就是置左（ALIGN="LEFT"）、置中（ALIGN="CENTER"）、置右（ALIGN="RIGHT"）。
3. 使用范例：
原始代码
显示结果

文字靠左

文字靠左

文字置中

文字置中

文字靠右

文字靠右
置中标签
1. 使用方法：这是置中
2. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的内容都可以置中！
3. 使用范例：
原始代码
显示结果
这是中间这是中间
向右缩排标签
1. 使用方法：

要缩排的文字

2. 标签解说：利用

这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两个单位，依此类推。
3. 使用范例：
原始代码
显示结果

缩排1单位

缩排1单位

缩排2单位

缩排2单位
保存原始格式标签
1. 使用方法：< PRE> 文字內容
2. 标签解说： 利用

这个标签可以将其包起来的文字排版、格式，原封不动的显示出来。算是相当好用的标签之一。
3. 使用范例：
原始代码
显示结果

 文 字 格 式 

文 字 格 式
分隔线标签
1. 使用方法： 上一段文字內容

---

下一段文字內容
2. 标签解说： 利用

---

这个标签便可产生一条横分隔线。另外，其有些属性分別说明如下：
3. 使用范例：
一般用法
尚未加任何属性。
原始代码
普通分隔

---

显示结果
普通分隔线
颜色属性
用法：

---

原始代码
橘色分隔线

---

显示结果
橘色分隔线
宽度属性
用法：

---

，其单位为px（像素），宽度也可用百分比来作设定，如50%即意为宽度占屏幕的50%。
原始代码
宽度为300px的分隔线

---

显示结果
普通分隔线
厚度属性
用法：

---

原始代码
厚度为 10 的分隔线< HR SIZE="10">
显示结果
厚度为 10 的分隔线
位置属性
用法：

---

，其设定值有三个，也就是置左ALIGN="LEFT"、置中ALIGN="CENTER"、置右ALIGN="RIGHT"
原始代码
靠右的分隔线

---

显示结果
靠右的分隔线
阴影属性
用法：

---

，无设定值，只要将 NOSHADE 加入即可，通常会配合颜色设定，效果较佳。
原始代码
实心分隔线（无阴影)

---

显示结果
实心分隔线（无阴影）
学习网页制作基础入门教程(3)
标题标签
1. 使用方法：

标题內容

2. 标签解释：标题的大小一共有六种，两个标签一组，也就是从

到

，

最大，

最小。使用标题标签时，该标签会将字体变为粗体字，并会自成一行。
3. 使用范例：
原始碼
呈現結果

标题1

标题1

标题2

标题2

标题3

标题3

标题4

标题4

标题5

标题5

标题6

标题6
设定字体大小标签
1. 使用方法：文字內容
2. 标签解释：标题的大小一共有七种，也就是（最小）到 （最大），另外，还有一种写法： 文字內容 ，其意思就是说：比预设字大一级。当然也可以 FONT SIZE=+2（比预设字大二级），或是 FONT SIZE=-1（比预设字小一级），以一般而言，预设字体多为 3。
3. 使用范例： 本网页就是
字型变化标签
1. 使用方法：文字內容
2. 标签解释：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如『强调』、『原始码』...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上『原始码』的标签。
3. 使用范例：
原始代码
显示结果
粗体粗体
斜体斜体
底线底线
^上标上标
_下标下标
打字机打字机
闪烁闪烁
强调强调
加强加强
范例范例
原始码
原始码
参数参数
定义定义
引用引用

所在地址

所在地址
文字颜色设定
1. 使用方法：文字颜色
2. 标签解释： 文字也可以设定颜色！
3. 使用范例：
原始代码
显示结果
红色 红色
橙色 橙色
黃色 黃色
绿色 绿色
蓝色 蓝色
紫色 紫色
黑色 黑色
文字字型设定
1. 使用方法： 文字
2. 标签解释： 网页上也可以使用字型！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是默认字体(默认字体为宋体)。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显示，不过这并没有关系，看不到特殊的字型时，浏览器仍会以默认字体显示，所以不用怕会一团乱。
3. 使用范例：
原始代码
显示结果
宋体 宋体
特殊字元
1. 使用方法：试打 " "
2. 标签解释：很多特殊符号是需要特别处理的，比如说" < "、" > "这两个符号若想要显示在网页上是没有办法直接打" < "的，要显示" < "必须输入编码表示法。
3. 使用范例：
原始代码
显示结果
  ( 代表一个不断行空白)
< <
> >
& &
" "
学习网页制作基础入门教程(4)
图象标签
1. 使用方法：
2. 标签解释：目前常见的网页图形式有两种就是 GIF 及 JPG 两种格式。GIF 格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而 JPG 格式的图象是全彩色失真压缩，比较适合一大堆颜色的图片，如照片就较适合用JPG格式来表现。
3. 使用范例：
基本用法用法：
显示图片最基本的方法（就是不加任何属性啦！）其中 test.gif 就是图片的文件名。
原始代码我是网页教学网模特儿！
显示结果我是网页教学网模特儿！
长宽设定用法：设图片的大小，其实不用设也可以，但是设置了更好，可以加快浏览速度，因为浏览器就不用在那边花时间算你的图片有多大啦！此外你也可以自己随意设定图片大小。
原始代码
显示结果
加上说明用法：
鼠标移到图片上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段文字代替，让使用者知道这个未显示出来的图片究竟是干什么用的，web标准强烈建议大家加上这个说明。
原始代码移到图上看看。
显示结果移到图上看看。
图片位置用法：
图片位置设定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成“文绕图”的效果。
原始代码我往右边靠！
显示结果我往右边靠！
原始代码我往右边靠！
显示结果我往左边靠！
原始代码文字对齐我头顶！
显示结果文字对齐我头顶！
原始代码文字对齐我脚底！
显示结果文字对齐我脚底！
原始代码文字对齐我中间！
显示结果文字对齐我中间！
边框设定用法：
设定边框大小，通常都设成 0 感觉比较美观！因为內定的框框实在是不怎么漂亮....。尤其在加连接时，设边框简直就是...。
原始代码
显示结果
左右间距用法：
离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
原始代码左边的字右边的字
显示结果左边的字右边的字
上下间距用法：
离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
原始代码上面的字

下面的字
显示结果上面的字

下面的字
网页图象的重要概念
1. 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻找到你的路径去到该有的图片，所以，我们来看看该如何正确使用路径。有些人并不喜欢将网页及图片通通放在同一个目录下，比如说有人将图片放在 c:\image 里，而网页文件放在 c:\demo 里，这样的话，我们该如何正确的写图片的路径呢？几种常见的情况整理成下表：
HTML文件位置图片的位置写法情形说明
c:\democ:\demo图文均在同一目录
c:\democ:\demo\image图在网页下一层目录
c:\democ:\图在网页上一层
c:\democ:\image图文在同一层但不同目录
或许有人看到不明白，先说明一下，「../」是回到上一层目录的意思。「image/」则是进入下一层目录image之意，而「../../image/」的意思就是，回到上一层目录，然后再进入目录image中。以上我们使用的均为“相对路径”的概念。
2. 图象单位：或许你常常看到px这个单位，没错，这是我们在制作网页时最常用的一个单位了。这个单位完整的写法是“Pixels”，我们称之为“像素”。像素，是屏幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，屏幕本身十五寸，不会因为你的任何设定而变成十七寸。但是，其解析度是可以改变的，我们常见的解析度有以下几种：「640 ×480」、「800 ×600」、「1024 ×768」等。举其中之一的 640 ×480 来说，其代表的就是在屏幕上有宽 640 个光点，高有 480 光点，若是我们将解析度调整为 800 ×600 其宽势必要从 640 变成 800 个光点。
3. 图象格式：网页用的图片目前只有 GIF 格式（即扩展名为gif的图片，如：bg.gif）以及JPG格式（即扩展名为jpg的图片，如：bg.jpg）为一般的浏览器所接受。其他如 bmp 格式或是 pcx 格式都是无法在网页上使用的，若非得要用，那就利用图象处理软件来制作格式的转换吧！
学习网页制作基础入门教程(5)
背景标签
1. 使用方法：
2. 标签解释：这个标签其实应该老早就要讲了，毕竟它是制作网页不可或缺的基本要素之一，我们背景颜色或图片的设定以及连接字体的颜色，统统都放在 这个标签里面。解释：
背景颜色
用法：设定背景颜色。有人会说：“我已经设定了背景图片，那背景颜色还有用吗？”当然有用！当使用者连接到贵站时，若背景图象还没有显示全，就会先显示背景颜色，您说，是不是比一片灰灰的好看多了呢！
原始代码





这里是本文区域


显示结果
单击这里查看演示效果
背景图象
用法： 设定背景图象。图片可以是 JPG 或 GIF 格式的图片，强烈建议：图象不要太大，否则网页加载时会很慢的。
原始代码





这里是本文区域


显示结果
单击这里查看演示效果
网页内容、连接文字颜色设定
1. 使用方法： 设定一般文字颜色，也就是说，若没有特別去设定文字颜色的话，浏览器就会显示你所设定的颜色。
原始代码





这里是本文区域


显示结果
单击这里查看演示效果
连接颜色
用法： 设定“连接”的颜色。只要是有连接的地方就会出现你指定的颜色，当然，如果点击连接后，那又会变成另一种颜色了，下面会说明。
原始代码





连接文字


显示结果
单击这里查看演示效果（设定连接为橘色）
连接时颜色
用法： 设定“点击连接”的颜色，也就是当你鼠标点击那个连接的瞬间所显示的颜色。
原始代码





连接文字


显示结果
单击这里查看演示效果（鼠标点击连接瞬间才会出现我们现在设定的蓝色）
已连接颜色
用法： 设定“点击连接后”的颜色，也就是如果该连接已经被点击过了，那么就显示的颜色。如此的做法，是要让使用者容易识别到底哪些连接已经去过了，哪些连接没有点击过。
原始代码





连接文字


显示结果
单击这里查看演示效果（设定已点击过的连接以红色显示）
学习网页制作基础入门教程(6)
背景标签
1. 使用方法：
2. 标签解释：这个标签其实应该老早就要讲了，毕竟它是制作网页不可或缺的基本要素之一，我们背景颜色或图片的设定以及连接字体的颜色，统统都放在 这个标签里面。解释：
背景颜色
用法：设定背景颜色。有人会说：“我已经设定了背景图片，那背景颜色还有用吗？”当然有用！当使用者连接到贵站时，若背景图象还没有显示全，就会先显示背景颜色，您说，是不是比一片灰灰的好看多了呢！
原始代码





这里是本文区域


显示结果
单击这里查看演示效果
背景图象
用法： 设定背景图象。图片可以是 JPG 或 GIF 格式的图片，强烈建议：图象不要太大，否则网页加载时会很慢的。
原始代码





这里是本文区域


显示结果
单击这里查看演示效果
网页内容、连接文字颜色设定
1. 使用方法： 设定一般文字颜色，也就是说，若没有特別去设定文字颜色的话，浏览器就会显示你所设定的颜色。
原始代码





这里是本文区域


显示结果
单击这里查看演示效果
连接颜色
用法： 设定“连接”的颜色。只要是有连接的地方就会出现你指定的颜色，当然，如果点击连接后，那又会变成另一种颜色了，下面会说明。
原始代码





连接文字


显示结果
单击这里查看演示效果（设定连接为橘色）
连接时颜色
用法： 设定“点击连接”的颜色，也就是当你鼠标点击那个连接的瞬间所显示的颜色。
原始代码





连接文字


显示结果
单击这里查看演示效果（鼠标点击连接瞬间才会出现我们现在设定的蓝色）
已连接颜色
用法： 设定“点击连接后”的颜色，也就是如果该连接已经被点击过了，那么就显示的颜色。如此的做法，是要让使用者容易识别到底哪些连接已经去过了，哪些连接没有点击过。
原始代码





连接文字


显示结果
单击这里查看演示效果（设定已点击过的连接以红色显示）
学习网页制作基础入门教程(7)
表格单元格对齐位置设定
1. 首先我们来看一个最简单的表格：
原始代码显示结果

1

1
2. 利用这个标签来告诉浏览器，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组 是设定一行的开始位置。一组 则是设定一个单元格。当然，文字就是要放在这里面。
3. 现在我们再来增加两个单元格：
原始代码显示结果

1

2

3

123
4. 看见了吧，没有增加，却增加了两组。那如果我要再加上一列呢？很简单，就像这样：
原始代码显示结果

1	2	3
4	5	6

123
456
合并表格单元格
1. 并非所有的表格都是规规矩矩的只有几行、几列而已，有时候，我们还会希望能够“合并单元格”，让表格更美观、更实用一点，而谈到“合并单元格”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是行列间的合并），一种是左右合并（也就是行间的合并），这两种合并方式各有不同的属性设定方法。
2. 左右合并：基本上，你的表格已经学会了！接下来，咱们就来看看，如何将 1、2、3 单元格合并为一个大格：
原始代码显示结果

1
4	5	6

1
456
你应该会发现，怎么2、3都消失了？只剩下1，而且该行的标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右合并”的属性，COLSPAN="3"的意思就是“这个行左右横跨了3个单元格”，也正因如此，本来的两个都可以省掉了，因为都被合并掉了！
3. 上下合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4单元格通通合并成一个大格：
原始代码显示结果

1	2	3
	5	6

123
56
有了上一次的经验后，我们就知道，要合并单元格就一定有些单元格的属性“牺牲”掉（也就是那些被合并的单元格！），这次我们要“上下合并”，我们将1与4合并为一个单元格，那么就要牺牲哪一个单元格呢？没错就是下面那一个倒霉的4，我们看看上图，果然4已经被刪掉了，而在1的 标签中则多了个生面孔ROWSPAN，这就是“上下单元格合并”的属性，ROWSPAN=2 的意思就是“这个单元格上下连跨2个单元格”，其结果如上所士。
表格单元格对齐位置设定
1. 我可以自己设定表格的大小吗？当然可以，你可以自由设定表格的“宽”及“高”！我们来制作一个宽100、高60的表格，做法如下：
原始代码显示结果

1

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

1

1
此外，利用 ALIGN=RIGHT可以让表格中元素置右、利用 ALIGN=LEFT可以让表格中元素置左（默认值），至于为什么要加在中呢？因为，是一个单元格的意思，我们要指定在这个单元格中的元素要置中或置左置右，就必须将ALIGN加在中。
3. 既然可以置中，那么也可以控制表格內文字靠上、靠下吗？可以的，只要利用 VALIGN=TOP 这个属性即可让表格內元素靠上方对齐。
原始代码显示结果

1

1
利用VALIGN=MIDDLE可以让表格中元素垂直置中（默认值），VALIGN=BOTTOM可以让表格中元素靠下方。
表格背景、底色设定
1. 表格可以设定底色吗？可以的不但表格可以，你也可以指定某行或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色代码"就行了。下面是指定整个表格背景颜色的方法： 原始代码显示结果

1	2
3	4

12
34
将BGCOLOR="颜色代码"加在中，可以指定“一行”的背景颜色：
原始代码显示结果

1	2
3	4

12
34
将BGCOLOR="颜色代码"加在中，可以指定“一个单元格”的背景颜色：
原始代码显示结果

1	2
3	4

12
34
2. 表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要將BACKGROUND="图片名称" 加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，你也可以指定某行或某列的背景图片：
原始代码显示结果

1	2
3	4

12
34
表格边框线的设定
1. 如何设定表格粗细？只要利用BORDER="粗细值"就行了。
原始代码显示结果

1

1
2. 如何设定表格颜色？只要利用BORDERCOLOR="颜色代码"就行了。
原始代码显示结果

1

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

1

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

1

2

12
2. 我们可以利用CELLSPACING属性设定表格单元格边线之间的距离。一般而言默认值为2，不过建议设置为 0 。
原始代码显示结果

1

2

12