爱华网【学习网页制作基础入门教程(1)】
用记事本编写代码
1.首先打开“记事本”程序（方法是「开始」-「程序」-「附件」-「记事本」）
2.将下面代码复制好粘贴到记事本上，如图-1所示。（按鼠标右键选择粘贴就可以了！）
<head>
<title>这里是标题</title>
</head>
<body>
这里是放置网页内容的文本区域
</body>
</html>
【图-1说明】利用鼠标右键的“粘贴”或者按 CTRL+V 都可以将复制的内容粘贴上的。
【图-2说明】点击“文件”里的“保存”就可以文件保存了。将文件保存了，就大功告成了！ （在硬盘下建立建一个子目录，我们就在E:盘下建立一个myweb 的子目录，并将我们的网页保存为 myfirst.htm 就可以了。）
【图-3说明】网页文件的扩展名是htm或是html，所以千万记得，请输入完整的文件名，否则记事本将存为.txt的文本文件，那么浏览器就浏览不出效果来了。
标签解释：
1.以上看到的就是一个最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的整理，就便成了美丽漂亮的网页了。
2.简单而言，通常一份完整的网页包含了二个部分：头部（HEAD）、文件主体（BODY）。也就是大家在上面所看到的 <HEAD></HEAD >以及 <BODY></BODY> 。
3.在头部里面 <HEAD></HEAD> 中，另有一组标签 <TITLE></TITLE> 。打在 <TITLE></TITLE> 这里的文字会出现在浏览器窗口的最上面兰色部分里，当作一个网页的主题。
4.您可能会发现，为什么一直没有提到 <HTML></HTML> 这一组标签呢，恩！因为它可有可无。这一组标签是告诉浏览器：我是一份 HTML 文件！也就是说它是一个网页的格式！通常都包在网页的最上下两端，将所有的原始码都包起来了。
浏览刚做好的网页
1.刚刚保存了文件了，我们存的网页文件在 e:mywebmyfirst.htm 。
2.在您的浏览器的地址栏内输入 e:mywebmyfirst.htm 或是 file:///e|/mywebmyfirst.htm 吧！（因为每个浏览器打开硬盘中文件的方式都不太一样，所以用这样的方法比较一致。）
3. 如何，看到您的第一个网页了吧！
【图-4说明】要浏览我们刚做网页是非常简单的，首先我们打开浏览器，然后输入我们刚刚保存的文件 e:mywebmyfirst.htm 看看，看是否能正确显示无误。您也可以按网页范例【myfirst.htm】，立即看看这篇网页的样子。
制作网页的规则
1.一般而言，一个网站的首页名称为 index.htm 或是 index.html 一定要小写，只要一进该网站，浏览器便会自动的找出 index.htm 这个文件，并且自动的去浏览 index.htm 的內容。
2.文件大小写一定要注意，没事的话，文件名最好全部用「英文小写字母」来命名，因为，在我们的电脑中，INDEX.HTM 和 index.htm 是一样的文件，但是上了网络之后，网站服务器可是会认为这是不同的两个文件，此时，若是没注意，那可就............！
3.你发现了吗？同一个标签，好象都有两个，唯一不同的是，后面的那一个多了一个“ / ”，如：<BODY></BODY>。前面的 <BODY> 是开始标签，后面的 </BODY> 是结束标签。大部分的标签都是两个一组，不过也有单一的，这在以后给大家讲解。
【学习网页制作基础入门教程(2)】
文字上的分隔标签
1. 使用方法：强制断行标签<BR> 、强制分段标签<P>
2. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<BR> ），或是在写完某一段的时候便会分段（<P>），制作网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。
3. 使用范例：
原始代码
显示结果
这是一个断行的例子 <BR> 看出来了吗？网页教学网 这是一个断行的例子
看出来了吗？网页教学网
这是一个分段的例子 <P> 看出来了吗？网页教学网 这是一个分段的例子
看出来了吗？网页教学网
文字置左、置中、置右
1.使用方法：老实说，刚刚我们学习过分段标签 <P> 再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：
2.标签解说：秘诀就在于「ALIGN=对齐位置」而已！ALIGN是分段标签 <P>的属性之一，这个属性将会常常在不同标签中看到，它的功能是专门在设定「水平对齐位置」，其常见的设定值有三个，也就是置左（ALIGN="LEFT"）、置中（ALIGN="CENTER"）、置右（ALIGN="RIGHT"）。
3. 使用范例：
原始代码
显示结果
<P ALIGN="LEFT">文字靠左</P>
文字靠左
<P ALIGN="CENTER">文字置中</P>
文字置中
<P ALIGN="RIGHT">文字靠右</P>
文字靠右
置中标签
1. 使用方法：<CENTER>这是置中</CENTER>
2. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的内容都可以置中！
3. 使用范例：
原始代码
显示结果
<CENTER>这是中间</CENTER> 这是中间
向右缩排标签
1. 使用方法：<BLOCKQUOTE> 要缩排的文字 </BLOCKQUOTE>
2. 标签解说：利用 <BLOCKQUOTE></BLOCKQUOTE> 这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两个单位，依此类推。
3. 使用范例：
原始代码
显示结果
<BLOCKQUOTE>缩排1单位</BLOCKQUOTE> 缩排1单位
<BLOCKQUOTE><BLOCKQUOTE>缩排2单位</BLOCKQUOTE></BLOCKQUOTE> 缩排2单位
保存原始格式标签
1. 使用方法：< PRE> 文字內容 </PRE>
2. 标签解说： 利用 <PRE></PRE> 这个标签可以将其包起来的文字排版、格式，原封不动的显示出来。算是相当好用的标签之一。
3. 使用范例：
原始代码
显示结果
<PRE> 文 字 格 式 </PRE>
文 字 格 式
分隔线标签
1. 使用方法： 上一段文字內容 <HR> 下一段文字內容
2. 标签解说： 利用 <HR> 这个标签便可产生一条横分隔线。另外，其有些属性分別说明如下：
3. 使用范例：
一般用法
尚未加任何属性。
原始代码
普通分隔<HR>
显示结果
普通分隔线
颜色属性
用法： <HR COLOR="颜色代码或颜色名称">
原始代码
橘色分隔线<HR COLOR="#FF8000">
显示结果
橘色分隔线
宽度属性
用法：<HR WIDTH="宽度">，其单位为px（像素），宽度也可用百分比来作设定，如50%即意为宽度占屏幕的50%。
原始代码
宽度为300px的分隔线 <HR WIDTH="300">
显示结果
普通分隔线
厚度属性
用法：<HR SIZE="厚度">
原始代码
厚度为10 的分隔线< HR SIZE="10">
显示结果
厚度为10 的分隔线
位置属性
用法：<HR ALIGN="水平对齐位置">，其设定值有三个，也就是置左ALIGN="LEFT"、置中ALIGN="CENTER"、置右ALIGN="RIGHT"
原始代码
靠右的分隔线<HR ALIGN="RIGHT">
显示结果
靠右的分隔线
阴影属性
用法：<HR NOSHADE>，无设定值，只要将 NOSHADE 加入即可，通常会配合颜色设定，效果较佳。
原始代码
实心分隔线（无阴影) <HR NOSHADE>
显示结果
实心分隔线（无阴影）
【学习网页制作基础入门教程(3)】
标题标签
1. 使用方法：<H1>标题內容</H1>
2. 标签解释：标题的大小一共有六种，两个标签一组，也就是从 <H1> 到 <H6> ， <H1> 最大，<H6>最小。使用标题标签时，该标签会将字体变为粗体字，并会自成一行。
3. 使用范例：
原始碼
呈現結果
<H1>标题1</H1>
标题1
<H2>标题2</H2>
标题2
<H3>标题3</H3>
标题3
<H4>标题4</H4>
标题4
<H5>标题5</H5>
标题5
<H6>标题6</H6>
标题6
设定字体大小标签
1. 使用方法：<FONT SIZE="尺寸">文字內容</FONT>
2. 标签解释：标题的大小一共有七种，也就是<FONT SIZE=1>（最小）到 <FONT SIZE=7>（最大），另外，还有一种写法：<FONT SIZE=+1> 文字內容 </FONT>，其意思就是说：比预设字大一级。当然也可以 FONT SIZE=+2（比预设字大二级），或是 FONT SIZE=-1（比预设字小一级），以一般而言，预设字体多为 3。
3. 使用范例： 本网页就是 <FONT SIZE = 9pt>
字型变化标签
1. 使用方法：<B>文字內容</B>
2. 标签解释：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如『强调』、『原始码』...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上『原始码』的标签。
3. 使用范例：
原始代码
显示结果
<B>粗体</B> 粗体
<I>斜体</I> 斜体
<U>底线</U> 底线
<SUP>上标</SUP> 上标
<SUB>下标</SUB> 下标
<TT>打字机</TT> 打字机
<BLINK>闪烁</BLINK> 闪烁
<EM>强调</EM> 强调
<STRONG>加强</STRONG> 加强
<SAMP>范例</SAMP> 范例
<CODE>原始码</CODE>
原始码
<VAR>参数</VAR> 参数
<DFN>定义</DFN> 定义
<CITE>引用</CITE> 引用
<ADDRESS>所在地址</ADDRESS> 所在地址
文字颜色设定
1. 使用方法：<FONT COLOR="#000000">文字颜色</FONT>
2. 标签解释： 文字也可以设定颜色！
3. 使用范例：
原始代码
显示结果
<FONT COLOR="#ff0000">红色</FONT> 红色
<FONT COLOR="#ff8000">橙色</FONT> 橙色
<FONT COLOR="#ffff00">黃色</FONT> 黃色
<FONT COLOR="#00ff00">绿色</FONT> 绿色
<FONT COLOR="#0080ff">蓝色</FONT> 蓝色
<FONT COLOR="#8000ff">紫色</FONT> 紫色
<FONT COLOR="#000000">黑色</FONT> 黑色
文字字型设定
1. 使用方法： <FONT FACE="字型名称">文字</FONT>
2. 标签解释： 网页上也可以使用字型！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是默认字体(默认字体为宋体)。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显示，不过这并没有关系，看不到特殊的字型时，浏览器仍会以默认字体显示，所以不用怕会一团乱。
3. 使用范例：
原始代码
显示结果
<FONT FACE="宋体">宋体</FONT> 宋体
特殊字元
1. 使用方法：试打 " "
2. 标签解释：很多特殊符号是需要特别处理的，比如说" < "、" > "这两个符号若想要显示在网页上是没有办法直接打" < "的，要显示" < "必须输入编码表示法。
3. 使用范例：
原始代码
显示结果
(代表一个不断行空白)
< <
> >
& &
" "
【学习网页制作基础入门教程(4)】
图象标签
1. 使用方法：<IMG SRC="test.gif" ALT="本站特约模特儿" ALIGN=RIGHT BORDER=0 HSPACE=2 VSPACE=2 HEIGHT=56 WIDTH=32>
2. 标签解释：目前常见的网页图形式有两种就是 GIF 及 JPG 两种格式。GIF 格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而 JPG 格式的图象是全彩色失真压缩，比较适合一大堆颜色的图片，如照片就较适合用JPG格式来表现。
3. 使用范例：
基本用法 用法：<IMG SRC="图象名称、路径">
显示图片最基本的方法（就是不加任何属性啦！）其中 test.gif 就是图片的文件名。
原始代码 <IMG SRC="test.gif">我是网页教学网模特儿！
显示结果 我是网页教学网模特儿！
长宽设定 用法：<IMG SRC="图象名称、路径"HEIGHT="高度"WIDTH="宽度">设图片的大小，其实不用设也可以，但是设置了更好，可以加快浏览速度，因为浏览器就不用在那边花时间算你的图片有多大啦！此外你也可以自己随意设定图片大小。
原始代码 <IMG SRC="test.gif" HEIGHT=30 WIDTH=30>
显示结果
加上说明 用法：<IMG SRC="图片"ALT="说明文字">
鼠标移到图片上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段文字代替，让使用者知道这个未显示出来的图片究竟是干什么用的，web标准强烈建议大家加上这个说明。
原始代码 <IMG SRC="test.gif" ALT="网页教学网">移到图上看看。
显示结果 移到图上看看。
图片位置 用法：<IMG SRC="图片"ALIGN="位置">
图片位置设定！可以靠左放：ALIGN=LEFT、靠上ALIGN=TOP、靠下ALIGN=BOTTOM、垂直置中ALIGN=MIDDLE，其中靠左放可以造成“文绕图”的效果。
原始代码 <IMG SRC="test.gif" ALIGN=RIGHT>我往右边靠！
显示结果 我往右边靠！
原始代码 <IMG SRC="test.gif" ALIGN=LEFT>我往右边靠！
显示结果 我往左边靠！
原始代码 <IMG SRC="test.gif" ALIGN=TOP>文字对齐我头顶！
显示结果 文字对齐我头顶！
原始代码 <IMG SRC="test.gif" ALIGN=BOTTOM>文字对齐我脚底！
显示结果 文字对齐我脚底！
原始代码 <IMG SRC="test.gif" ALIGN=MIDDLE>文字对齐我中间！
显示结果 文字对齐我中间！
边框设定 用法：<IMG SRC="图片"BORDER="边框粗细">
设定边框大小，通常都设成 0 感觉比较美观！因为內定的框框实在是不怎么漂亮....。尤其在加连接时，设边框简直就是...。
原始代码 <IMG SRC="test.gif" BORDER="4">
显示结果
左右间距 用法：<IMG SRC="图片"HSPACE="离左右元素的距离">
离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
原始代码 左边的字<IMG SRC="test.gif" HSPACE="15">右边的字
显示结果 左边的字 右边的字
上下间距 用法：<IMG SRC="图片"VSPACE="离上下元素的距离">
离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
原始代码 上面的字<BR><IMG SRC="test.gif" VSPACE="15"><BR>下面的字
显示结果 上面的字
下面的字
网页图象的重要概念
1. 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻找到你的路径去到该有的图片，所以，我们来看看该如何正确使用路径。有些人并不喜欢将网页及图片通通放在同一个目录下，比如说有人将图片放在 c:image 里，而网页文件放在 c:demo 里，这样的话，我们该如何正确的写图片的路径呢？几种常见的情况整理成下表：
HTML文件位置 图片的位置 写法 情形说明
c:demo c:demo <img src="test.gif"> 图文均在同一目录
c:demo c:demoimage <img SRC="../../images/test.gif"> 图在网页下一层目录
c:demo c: <img src=" ../test.gif"> 图在网页上一层
c:demo c:image <img src=" ../../images/test.gif"> 图文在同一层但不同目录
或许有人看到不明白，先说明一下，「../」是回到上一层目录的意思。「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. 使用方法：<BODY BGCOLOR="#ffffff" BACKGROUND="bg.jpg">
2. 标签解释：这个标签其实应该老早就要讲了，毕竟它是制作网页不可或缺的基本要素之一，我们背景颜色或图片的设定以及连接字体的颜色，统统都放在 <BODY> 这个标签里面。解释：
背景颜色
用法：<BODY BGCOLOR="颜色代码">设定背景颜色。有人会说：“我已经设定了背景图片，那背景颜色还有用吗？”当然有用！当使用者连接到贵站时，若背景图象还没有显示全，就会先显示背景颜色，您说，是不是比一片灰灰的好看多了呢！
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY BGCOLOR="#F9E6A2">
这里是本文区域
</BODY>
</HTML>
显示结果
单击这里查看演示效果
背景图象
用法：<BODY BACKGROUND="图片名称、路径"> 设定背景图象。图片可以是 JPG 或 GIF 格式的图片，强烈建议：图象不要太大，否则网页加载时会很慢的。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY BACKGROUND="bg.jpg">
这里是本文区域
</BODY>
</HTML>
显示结果
单击这里查看演示效果
网页内容、连接文字颜色设定
1. 使用方法：<BODY TEXT="#000000" LINK="#0000ff" VLINK="#ff00ff" ALINK="#ff0000>
2. 标签解释：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色內定值该如何修改，这个<BODY>标签中，便有设定网页内容、连接等文字的颜色內定值功能。用法如下：
网页内容颜色
用法：<BODY TEXT="颜色代码"> 设定一般文字颜色，也就是说，若没有特別去设定文字颜色的话，浏览器就会显示你所设定的颜色。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY TEXT="#0906A2">
这里是本文区域
</BODY>
</HTML>
显示结果
单击这里查看演示效果
连接颜色
用法：<BODY LINK="颜色代码"> 设定“连接”的颜色。只要是有连接的地方就会出现你指定的颜色，当然，如果点击连接后，那又会变成另一种颜色了，下面会说明。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY LINK="#FF6600">
<A HREF="http://www.webjx.com">连接文字</A>
</BODY>
</HTML>
显示结果
单击这里查看演示效果（设定连接为橘色）
连接时颜色
用法：<BODY ALINK="颜色代码"> 设定“点击连接”的颜色，也就是当你鼠标点击那个连接的瞬间所显示的颜色。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY ALINK="#BLUE">
<A HREF="http://www.webjx.com">连接文字</A>
</BODY>
</HTML>
显示结果
单击这里查看演示效果（鼠标点击连接瞬间才会出现我们现在设定的蓝色）
已连接颜色
用法：<BODY VLINK="颜色代码"> 设定“点击连接后”的颜色，也就是如果该连接已经被点击过了，那么就显示的颜色。如此的做法，是要让使用者容易识别到底哪些连接已经去过了，哪些连接没有点击过。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY VLINK="RED">
<A HREF="http://www.webjx.com">连接文字</A>
</BODY>
</HTML>
显示结果
单击这里查看演示效果（设定已点击过的连接以红色显示）
【学习网页制作基础入门教程(6)】
背景标签
1. 使用方法：<BODY BGCOLOR="#ffffff" BACKGROUND="bg.jpg">
2. 标签解释：这个标签其实应该老早就要讲了，毕竟它是制作网页不可或缺的基本要素之一，我们背景颜色或图片的设定以及连接字体的颜色，统统都放在 <BODY> 这个标签里面。解释：
背景颜色
用法：<BODY BGCOLOR="颜色代码">设定背景颜色。有人会说：“我已经设定了背景图片，那背景颜色还有用吗？”当然有用！当使用者连接到贵站时，若背景图象还没有显示全，就会先显示背景颜色，您说，是不是比一片灰灰的好看多了呢！
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY BGCOLOR="#F9E6A2">
这里是本文区域
</BODY>
</HTML>
显示结果
单击这里查看演示效果
背景图象
用法：<BODY BACKGROUND="图片名称、路径"> 设定背景图象。图片可以是 JPG 或 GIF 格式的图片，强烈建议：图象不要太大，否则网页加载时会很慢的。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY BACKGROUND="bg.jpg">
这里是本文区域
</BODY>
</HTML>
显示结果
单击这里查看演示效果
网页内容、连接文字颜色设定
1. 使用方法：<BODY TEXT="#000000" LINK="#0000ff" VLINK="#ff00ff" ALINK="#ff0000>
2. 标签解释：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色內定值该如何修改，这个<BODY>标签中，便有设定网页内容、连接等文字的颜色內定值功能。用法如下：
网页内容颜色
用法：<BODY TEXT="颜色代码"> 设定一般文字颜色，也就是说，若没有特別去设定文字颜色的话，浏览器就会显示你所设定的颜色。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY TEXT="#0906A2">
这里是本文区域
</BODY>
</HTML>
显示结果
单击这里查看演示效果
连接颜色
用法：<BODY LINK="颜色代码"> 设定“连接”的颜色。只要是有连接的地方就会出现你指定的颜色，当然，如果点击连接后，那又会变成另一种颜色了，下面会说明。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY LINK="#FF6600">
<A HREF="http://www.webjx.com">连接文字</A>
</BODY>
</HTML>
显示结果
单击这里查看演示效果（设定连接为橘色）
连接时颜色
用法：<BODY ALINK="颜色代码"> 设定“点击连接”的颜色，也就是当你鼠标点击那个连接的瞬间所显示的颜色。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY ALINK="#BLUE">
<A HREF="http://www.webjx.com">连接文字</A>
</BODY>
</HTML>
显示结果
单击这里查看演示效果（鼠标点击连接瞬间才会出现我们现在设定的蓝色）
已连接颜色
用法：<BODY VLINK="颜色代码"> 设定“点击连接后”的颜色，也就是如果该连接已经被点击过了，那么就显示的颜色。如此的做法，是要让使用者容易识别到底哪些连接已经去过了，哪些连接没有点击过。
原始代码
<HTML>
<HEAD>
<TITLE>这是标题</TITLE>
</HEAD>
<BODY VLINK="RED">
<A HREF="http://www.webjx.com">连接文字</A>
</BODY>
</HTML>
显示结果
单击这里查看演示效果（设定已点击过的连接以红色显示）
【学习网页制作基础入门教程(7)】
表格单元格对齐位置设定
1. 首先我们来看一个最简单的表格：
原始代码 显示结果
<TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>
1
2. 利用<TABLE>这个标签来告诉浏览器，这是一个表格，至于 BORDER=1 这参数是设定此表格的框线粗细为 1。一组 <TR></TR> 是设定一行的开始位置。一组 <TD></TD> 则是设定一个单元格。当然，文字就是要放在这里面。
3. 现在我们再来增加两个单元格：
原始代码 显示结果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
1 2 3
4. 看见了吧，<TR></TR>没有增加，<TD></TD>却增加了两组。那如果我要再加上一列呢？很简单，就像这样：
原始代码 显示结果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
4 5 6
合并表格单元格
1. 并非所有的表格都是规规矩矩的只有几行、几列而已，有时候，我们还会希望能够“合并单元格”，让表格更美观、更实用一点，而谈到“合并单元格”，我们就必须知道，合并的方向有两种：一种是上下合并（也就是行列间的合并），一种是左右合并（也就是行间的合并），这两种合并方式各有不同的属性设定方法。
2. 左右合并：基本上，你的表格已经学会了！接下来，咱们就来看看，如何将 1、2、3 单元格合并为一个大格：
原始代码 显示结果
<TABLE BORDER=1>
<TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1
4 5 6
你应该会发现，怎么2、3都消失了？只剩下1，而且该行的<TD>标签还多了一个陌生的脸孔COLSPAN="3"，没错，这就是“左右合并”的属性，COLSPAN="3"的意思就是“这个行左右横跨了3个单元格”，也正因如此，本来的两个<TD>都可以省掉了，因为都被合并掉了！
3. 上下合并：学会了左右合并！接下来，咱们就来看看，如何上下合并，将 1、4单元格通通合并成一个大格：
原始代码 显示结果
<TABLE BORDER=1>
<TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
5 6
有了上一次的经验后，我们就知道，要合并单元格就一定有些单元格的属性“牺牲”掉（也就是那些被合并的单元格！），这次我们要“上下合并”，我们将1与4合并为一个单元格，那么就要牺牲哪一个单元格呢？没错就是下面那一个倒霉的4，我们看看上图，果然4已经被刪掉了，而在1的 <TD> 标签中则多了个生面孔ROWSPAN，这就是“上下单元格合并”的属性，ROWSPAN=2 的意思就是“这个单元格上下连跨2个单元格”，其结果如上所士。
表格单元格对齐位置设定
1. 我可以自己设定表格的大小吗？当然可以，你可以自由设定表格的“宽”及“高”！我们来制作一个宽100、高60的表格，做法如下：
原始代码 显示结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE>
1
2. 哎呀！怎么 1 老是在表格的左边呢？可以弄到中间吗？当然可以，只要在<TD>加入 ALIGN=CENTER 这参数即可：
原始代码 显示结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE>
1
此外，利用 ALIGN=RIGHT可以让表格中元素置右、利用 ALIGN=LEFT可以让表格中元素置左（默认值），至于为什么要加在<TD>中呢？因为，<TD>是一个单元格的意思，我们要指定在这个单元格中的元素要置中或置左置右，就必须将ALIGN加在<TD>中。
3. 既然可以置中，那么也可以控制表格內文字靠上、靠下吗？可以的，只要利用 VALIGN=TOP 这个属性即可让表格內元素靠上方对齐。
原始代码 显示结果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE>
1
利用VALIGN=MIDDLE可以让表格中元素垂直置中（默认值），VALIGN=BOTTOM可以让表格中元素靠下方。
表格背景、底色设定
1. 表格可以设定底色吗？可以的不但表格可以，你也可以指定某行或某列的颜色，方法和加背景颜色一样，利用BGCOLOR="颜色代码"就行了。下面是指定整个表格背景颜色的方法： 原始代码 显示结果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
将BGCOLOR="颜色代码"加在<TR>中，可以指定“一行”的背景颜色：
原始代码 显示结果
<TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
将BGCOLOR="颜色代码"加在<TD>中，可以指定“一个单元格”的背景颜色：
原始代码 显示结果
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
2. 表格除了可以设定底色外，也可以用图片来作背景吗？当然可以，方法一样简单，只要將BACKGROUND="图片名称" 加到表格中就行了。和表格背景颜色一样，不但表格可以设定背景图片，你也可以指定某行或某列的背景图片：
原始代码 显示结果
<TABLE BORDER="1" BGCOLOR="/images/bg.gif">
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
1 2
3 4
表格边框线的设定
1. 如何设定表格粗细？只要利用BORDER="粗细值"就行了。
原始代码 显示结果
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
1
2. 如何设定表格颜色？只要利用BORDERCOLOR="颜色代码"就行了。
原始代码 显示结果
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
1
3. 另外，我们也可以设定表格的阴影、亮面颜色，让表格看起来更有立体感！只要利用 BORDERCOLORLIGHT="#颜色代码"（亮面设定） BORDERCOLORDARK="颜色代码"（暗面设定）就行了。
原始代码 显示结果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
1
表格间距设定
1. 我们可以利用CELLPADDING属性自由设定表格内容距离边线的距离，这个属性很好用，保持适当的距离，看起来比较舒服。一般而言內定值为2，不过建议设定为4比较漂亮。
原始代码 显示结果
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
2. 我们可以利用CELLSPACING属性设定表格单元格边线之间的距离。一般而言默认值为2，不过建议设置为 0 。
原始代码 显示结果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
【网页文字颜色搭配技巧】
博客教材
对于做网页 博客 空间的初学者可能更习惯于使用一些漂亮的图片作为自己网页的背景，但浏览一下大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。
一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是教材做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用．博客教材在这里谢谢大家对我的支持，我会做得更好
BgcolorΚ″＃F1FAFA″———做正文的背景色好，淡雅
BgcolorΚ″＃E8FFE8″———做标题的背景色较好
BgcolorΚ″＃E8E8FF″———做正文的背景色较好，文字颜色配黑色
BgcolorΚ″＃8080C0″———上配黄色白色文字较好
BgcolorΚ″＃E8D098″———上配浅蓝色或蓝色文字较好
BgcolorΚ″＃EFEFDA″———上配浅蓝色或红色文字较好
BgcolorΚ″＃F2F1D7″———配黑色文字素雅，如果是红色则显得醒目
BgcolorΚ″＃336699″———配白色文字好看些
BgcolorΚ″＃6699CC″———配白色文字好看些，可以做标题
BgcolorΚ″＃66CCCC″———配白色文字好看些，可以做标题
BgcolorΚ″＃B45B3E″———配白色文字好看些，可以做标题
BgcolorΚ″＃479AC7″———配白色文字好看些，可以做标题
BgcolorΚ″＃00B271″———配白色文字好看些，可以做标题
BgcolorΚ″＃FBFBEA″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃D5F3F4″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃D7FFF0″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃F0DAD2″———配黑色文字比较好看，一般作为正文
BgcolorΚ″＃DDF3FF″———配黑色文字比较好看，一般作为正文
浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字显得非常有效果。
此文只是起一个“抛砖引玉”的作用，大家可以发挥想象力，搭配出更有新意、更醒目的颜色，使网页更具有吸引力。
个人网站建设视频教程下载
常用代码 精美素材 动漫天地 影视下载 猫扑娱乐 美女图片 彩信下载 自助建站
请大家用迅雷工具下载
请右键单击使用迅雷全部连接下载
播放软件下载 Kmplayer播放器
教程下载：
第1集 第2集 第3集 第4集 第5集 第6集 第7集 第8集 第9集 第10集 第11集 第12集 第13集 第14集
常用代码 精美素材 动漫天地 影视下载 猫扑娱乐 美女图片 彩信下载 自助建站
网易博客技巧(日志编辑)
技巧一：快速删除后台“内容”中文章中的所有空行
当你在博客网后台直接编写文章或是将文章从记事本、WORD直接复制到后台的文章撰写或编辑页面的“内容”时，可能会在出现非常多的空行（例如第一行的文字和第二行的文字整整隔了一行空白），倘若逐个消除这样的空行势必非常吃力，下面教大家一个非常简单快捷的方法，可以做到一改全改：
首先，切换到“代码”的模式（就是按一下<>这个按钮），然后按CTRL+A全选，接着按CTRL+C复制。
下面在桌面上新建一个文本文档（鼠标右键－新建－文本文档），打开它（其实也就是打开一个记事本），按CTRL+V键将刚才复制的代码全部粘贴到记事本上。
接下来按CTRL+H激活“替换窗口”，在“查找内容”处输入“</p><p>”（注意，双引号不要输入），在“替换为”处输入“<br>”，然后点击“全部替换”。
最后按CTRL+A全选记事本中的代码，然后按CTRL+C复制，再回到后台撰写（或编辑）中的“代码”模式平台上，按CTRL+V粘贴代码，最后再点击一下<>这个按钮切换回文章正常撰写的模式，你会发现所有的空行已经自行消除，这时点击“保存并发布”就OK了。
技巧二：让后台“内容”中所有没有任何空格的段首自动空两格（前提是所有段首都没有空格）
步骤一：将“内容”中的所有文字粘贴并复制到一个空的记事本中。
步骤二：将记事本的文字全部复制并粘贴至一个新的WORD空白文档中。
步骤三：在该WORD文档里按CTRL+H键弹出“替换”窗口，在“查找内容”处输入“^l”（注意，双引号不要输入），在“替换为”处输入“^p”，然后点击“全部替换”。
步骤四：在该WORD文档中按CTRL+H弹出“替换”窗口，然后在“查找内容”处输入“^p”（注意，双引号不要输入），在“替换为”处输入“^p^s^s^s^s^s^s^s^s”，然后点击“全部替换”，即完成除第一段外每段段首自动空两格。
步骤五：在第一段段首手动按四下空格键，然后把所有文字粘贴回后台“内容”中即可。
技巧三：让后台“内容”中所有没有任何空格的段首自动空两格（无论每段段首有没有空格和空多少格）
步骤一：（如果文章在WORD中每段段首都没有空格时，请跳过此步骤并直接到步骤八）将WORD中的文字全部复制并粘贴至一个空的记事本A中。
步骤二：将记事本A的文字全部复制并粘贴至博客网后台操作的撰写文章或编辑文章的“内容”（此时“内容”处于一般模式，即默认模式）中。
步骤三：在博客网的后台里将“内容”状态切换到“HTML原始码”的模式（就是按一下<>这个按钮），然后将该模式里“内容”里的所有代码复制并粘贴至另一个空的记事本B里，粘贴完毕后删除后台“内容”中的所有代码。
步骤四：将记事本B里的所有代码复制并粘贴回博客网后台的“内容”中（此时“内容”仍处于“HTML原始码”状态）。
步骤五：点击<>这个按钮，使内容切换回一般模式状态，你会发现每段段首已经无任何空格。
步骤六：在该模式中将“内容”中的所有文字粘贴并复制到一个空的记事本C中。
步骤七：将记事本C的文字全部复制并粘贴至另一个新的WORD空白文档D中。
步骤八：在该WORD文档里按CTRL+H键弹出“替换”窗口，在“查找内容”处输入“^l”（注意，双引号不要输入），在“替换为”处输入“^p”，然后点击“全部替换”。
步骤九：在该WORD文档中按CTRL+H弹出“替换”窗口，然后在“查找内容”处输入“^p”（注意，双引号不要输入），在“替换为”处输入“^p^s^s^s^s^s^s^s^s”，然后点击“全部替换”，即完成除第一段外每段段首自动空两格。
步骤十：在第一段段首手动按四下空格键，然后将WORD中的文章内容全部复制并粘贴至后台的“内容”中即可。
技巧四：将文章中的所有普通链接迅速转换成打开一个新窗口的链接
请参考技巧一将代码复制并粘贴到记事本中，按CTRL+H激活“替换窗口”，在“查找内容”处输入“.html">”（注意，双引号不要输入），在“替换为”处输入“.html "target="_blank">”，“全部替换”；或是在“查找内容”处输入“">”（注意，双引号不要输入），在“替换为”处输入“target="_blank">”，然后点击“全部替换”。
最后将代码粘贴回后台撰写（或编辑）中的“HTML原始码”模式平台上，点击“保存并发布”即可。
附录1：介绍一个很酷的博客专用模板网站给大家：
博客模板下载资源站：http://skin.midicn.cn/index.asp
附录2：介绍一个比较全面的CSS学习网站：
CSS教程教材：http://www.85flash.com/Get/css/
网易博客技巧(表格的高级样式)
表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>
二、表格边框和单元格的特殊效果。
普 表
通 格
这是一普通的表格 <table border="1" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td>普</td><td>表</td></tr><tr align="center"> <td>通</td><td>格</td></tr></table>
细 表
线 格
表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同) <table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000"><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">细</td><td bgcolor="#FFFFFF">表</td></tr><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">线</td><td bgcolor="#FFFFFF">格</td></tr></table>
细 表
线 格
这和上面那个可不一样，它用的是CSS，效果却一样。
(对单元格border的定义) <table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td>细</td><td>表</td></tr><tr align="center"> <td>线</td><td>格</td></tr></table>
细 表
线 格
再进一步，把边框变成虚线，同样是CSS的神奇作用。 <table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td>细</td><td>表</td></tr><td>线</td><td>格</td></tr></table>
细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。 <table width="200" border="0" cellspacing="2" cellpadding="0"><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"></td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"></td> </tr> </table></td></tr><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"></td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"></td> </tr> </table></td></tr></table>
立 表
体 格
立体感的表格
(简单的亮暗边框设置，注意只有IE支持这种效果) <table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td></tr><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td></tr></table>
无名表格
给表格加上一个表头
(应用<fieldset>和</legend>标签) <table width="200" cellpadding="0" cellspacing="0"><tr> <td><fieldset align="center"> <legend> 无名表格 </legend> <p align="right"> </fieldset></td></tr></table>
表中表效果Ⅰ
给表头再加个框
(用CSS为<legnd>定义一个边框) <table width="200"" cellspacing="0" cellpadding="0"><tr> <td><fieldset align="center"> <legend> 表中表效果Ⅰ</legend> <br></fieldset></td></tr></table> 表中表效果Ⅱ
看起来和上面的一样，可是这个才是真正的表中表哦。
(在<legnd>中插入一个表格) <table width="200"><tr> <td><fieldset align="center"> <legend> <table width="80" cellspacing="1" cellpadding="0" height="20"><tr> <td><font color=blue>表中表效果Ⅱ</font></td></tr></table></legend><br></fieldset></td></tr></table>
-------------------------------------------------------------------------------------------------------------------
★ 置入博客的方法：
1. 进入编辑→2. 排版→3. 模块→
4. 添加自定义html（显示）（出现在网页左下角）→
5. 复制下列语法後贴上→6. 新增→
7. 将模块移到想显示的位置→8. 再保存（右上角）→
9. 预览我的博客。→10. 就可以看到出现在你的博客上了！
如何在flash上面输入移动文字
给大家一个在flash上面输入移动文字的简单代码，欢迎分享。
<TABLE borderColor=#666666 height=420 width=600 align=center border=0>
<TBODY>
<TR>
<TD><DIV><EMBED align=right src=你喜欢的flash地址代码 width=600 height=420 type=application/x-shockwave-flash ; quality="high" wmode="transparent" allowNetworking="internal" allowScriptAccess="never"></EMBED> 在这里添加<BR>这个换行代码，可以调整文字在flash上面的上下位置。添加多少个<BR>代码，根据你想让文字所在的位置而定。
<MARQUEE scrollAmount=3 scrollDelay=150 direction=up width=580 height=400 ALIGN="MIDDLE">
<P align=center><FONT face=楷体_GB2312 color=#ff8000 size=4><B>在这里输入文字</P></FONT></FONT></A></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE>
演示效果：
