网页制作基础教程
[楼主]
网页架构
网页制作教学
BODY之间则为主要语法所在，也是网页的主要呈现部分。
【标签解说】
以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。
简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的以及。
在抬头的部份中，有另一组标签。打在这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。
您可能会发现，为什么我一直没提到这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。
分隔标签
【文字上的分隔标签】
或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！
使用方法：强制断行标签
、强制分段标签
标签解说：我们在写文章时，有时候在特定的地方会强迫断行（
），或是在写完某一段的时候便会分段（
），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。
使用范例：
原始码
呈现结果
这是一个断行的范例
看出来了吗？
这是一个断行的范例
看出来了吗？
这是一个分段的范例
基本上他会比断行还多空出一行
这是一个分段的范例
基本上分段会比断行还多空出一行
【分隔线标签】
使用方法：上一段文字内容
下一段文字内容
标签解说：利用
这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：
使用范例：
一般用法
尚未加任何属性。
原始码
普通分隔线
呈现结果
普通分隔线
颜色属性
用法：
原始码
橘色分隔线
呈现结果
橘色分隔线
宽度属性
用法：
，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占萤幕50%。
原始码
宽度为240px的分隔线
呈现结果
宽度为240px分隔线
厚度属性
用法：
原始码
厚度为5的分隔线
呈现结果
厚度为5分隔线
位置属性
用法：
，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right"
原始码
靠右的分隔线
呈现结果
靠右的分隔线
阴影属性
用法：
，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。
原始码
实心分隔线（无阴影）
呈现结果
实心分隔线（无阴影）
【文字置左、置中、置右】
使用方法：老实说，刚刚我们学过的分段标签
再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：
原始码
呈现结果
文字靠左
文字靠左
文字置中
文字置中
文字靠右
文字靠右
标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签
的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。
【置中标签】
使用方法：
这是置中
标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！
使用范例：
原始码
呈现结果
这是最中间
这是最中间
【向右缩排标签】
使用方法：
要缩排的文字
标签解说：利用
这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。
使用范例：
原始码
呈现结果
缩排1单位
缩排1单位
缩排2单位
缩排2单位
【保存原始格式标签】
使用方法：
文字内容
标签解说：利用
这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。
使用范例：
原始码呈现结果
文 字
格 式
文 字
格 式
字体标签
【标题标签】
使用方法：标题内容
标签解说：标题的大小一共有六种，两个标签一组，也就是从到，最大，最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。
使用范例：
原始码
呈现结果
标题一
标题一
标题二
标题二
标题三
标题三
标题四
标题四
标题五
标题五
标题六
标题六
【设定字体大小标签】
使用方法：[color=#ff0080][/color]文字内容[color=#ff0080][/color]
标签解说：标题的大小一共有七种，也就是（最小）到（最大），另外，还有一种写法：[color=#ff0080][/color]文字内容[color=#ff0080][/color]，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 3。
使用范例：
原始码
呈现结果
字体一 或是
字体一
[size=1]字体一[/size]
字体二 或是
字体二
[size=2]字体二[/size]
字体三 或是
字体三
字体三
字体四 或是
字体四
字体四
字体五 或是
字体五
字体五
字体六 或是
字体六
字体六
字体七 或是
字体七
字体七
【字型变化标签】
使用方法：文字
标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。
使用范例：
原始码
呈现结果
粗体
粗体
斜体
斜体
底线
底线
上标
上标
下标
下标
打字机
[font=新宋体]打字机[/font]
闪烁（ie没效果）
闪烁
强调
强调
加强
加强
范例
[font=新宋体]范例[/font]
原始码
[font=新宋体]原始码[/font]
变数
变数
定义
定义
引用
引用
所在地址
所在地址
【文字颜色设定】
使用方法：文字颜色
标签解说：文字也可以设定 颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！
使用范例：
原始码
呈现结果
红
红色的字喔！
橙
橙色的字喔！
黄
**的字喔！
绿
绿色的字喔！
蓝
蓝色的字喔！
靛
靛色的字喔！
紫
紫色的字喔！
黑
黑色的字喔！
灰
灰色的字喔！ 【背景标签】
说穿了，背景标签只有这个标签，其余的效果，只要加上一些简单的属性便可做到。
使用方法：>
标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在这标签里面。我就其属性来一一解说：
背景颜色
用法：
设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！
原始码
这是标题
bgcolor="#f9e6a2">
这里是本文区
呈现结果
按下此处观看结果
背景图案
用法：
g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。
原始码
这是标题
background="bg.jpg">
这里是本文区
呈现结果
按下此处观看结果
[color=#0000ff][/color]
【内文、连结文字颜色设定】
使用方法：>
标签解说：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个标签中，便有设定内文、连结等文字的颜色内定值功能。用法如下：
内文颜色
用法：
设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。
原始码
这是标题
text="#0906a2">
这里是本文区
呈现结果
按下此处观看结果
连结颜色
用法：
设定“连结”的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，那又会变成另一个颜色了，这底下会说明。
原始码
这是标题
link="#ff6600">
连结文字
呈现结果
设定连结为橘
连结时颜色
用法：
设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。
原始码
这是标题
alink="#0099ff">
连结中文字
呈现结果
滑鼠点下连结瞬间才会出现我们设定的浅蓝色
已连结颜色
用法：
设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。
原始码
这是标题
vlink="red">
连结文字
呈现结果
设定已执行过的连结以红色显示
- 张帝专集
- 时间: 7月前
- 播放: 40279