HTML入门教程、使用指南、技巧、心得、经验
一、基本标志
1.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对)，因此在Html文档中这样的标志对都必须是成对使用的。在此教程中，我先讲一下Html的基本标志：
1.<html></html>
<html>标志用于Html文档的最前边，用来标识Html文档的开始。而</html>标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。
2.<head></head>
<head>和</head>构成Html文档的开头部分，在此标志对之间可以使用<title></title>、<script></script>等等标志对，这些标志对都是描述Html文档相关信息的标志对，<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。
3.<body></body>
<body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性：
|
属性 |
用途 |
示例 |
| <body bgcolor="#rrggbb"> | 设置背景颜色。 | <body bgcolor="red">红色背景 |
| <body text="#rrggbb"> | 设置文本颜色。 | <body text="#0000ff">蓝色文本 |
| <body link="#rrggbb"> | 设置链接颜色。 | <body link="blue">链接为蓝色 |
| <body vlink="#rrggbb"> | 设置已使用的链接的颜色。 | <body vlink="#ff0000"> |
| <body alink="#rrggbb"> | 设置正在被击中的链接的颜色。 | <body alink="yellow"> |
| 说明:以上各个属性可以结合使用，如<body bgcolor="red" text="#0000ff">。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色，如#ff0000对应的是红色。此外，还可以使用Html语言所给定的常量名来表示颜色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal，如<body text="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。 | ||
4.<title></title>
使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入您要显示的文本即可。注意：<title></title>标志对只能放在<head></head>标志对之间。
下面是一个综合的例子，仔细阅读，您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。
例1 Html文档中基本标志的使用
<html>
<head>
<title>显示在浏览器最上边蓝色条中的文本</title>
</head>
<body bgcolor="red" text="blue">
<p>红色背景、蓝色文本</p>
</body>
二、格式标志
1.<p></p>
2.<br>
3.<blockquote></blockquote>
4.<dl></dl><dt></dt><dd></dd>
5.<ol></ol><ul></ul><li></li>
6.<div></div>
上一个教程中我们讲了Html文档的基本标志，但我们还不知道怎样在浏览器中显示文本之类的东西，这正是我们在教程二中将要谈到的。在学习之前，必须强调一下，我们这个教程中所讲的格式标志统统都是用于<body></body>标志对之间的。
1.<p></p>
<p></p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，<p>标志还可以使用align属性，它用来说明对齐方式，语法是：<p align=""></p>。Align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如<p align="Center"></p>表示标志对中的文本使用居中的对齐方式。
2.<br>
<br>是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行，这么一说我想您该会使用了吧。在<br>的使用上还有一定的技巧，如果您把<br>加在<p></p>标志对的外边，将创建一个大的回车换行，即<br>前边和后边的文本的行与行之间的距离比较大，若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小，您不妨试试看。
3.<blockquote></blockquote>
在<blockquote></blockquote>标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。
4.<dl></dl><dt></dt><dd></dd>
<dl></dl>用来创建一个普通的列表，<dt></dt>用来创建列表中的上层项目，<dd></dd>用来创建列表中最下层项目，<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了：
例2 创建一个普通列表
<html>
<head>
<title>一个普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中国城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>广州 </dd>
<dt>美国城市</dt>
<dd>华盛顿 </dd>
<dd>芝加哥 </dd>
<dd>纽约 </dd>
</dl>
</body>
</html>
此例在浏览器中的显示如下:
- 中国城市
- 北京
- 上海
- 广州
- 美国城市
- 华盛顿
- 芝加哥
- 纽约
5.<ol></ol><ul></ul><li></li>
<ol></ol>标志对用来创建一个标有数字的列表；<ul></ul>标志对用来创建一个标有圆点的列表；<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用，此标志对用来创建一个列表项，若<li></li>放在<ol></ol>之间则每个列表项加上一个数字，若在<ul></ul>之间则每个列表项加上一个圆点。请看下边的例子：
例3 标有数字或圆点的列表
<html>
<head>
<title></title>
</head>
<body text="blue">
<ol>
<p>中国城市 </p>
<li>北京 </li>
<li>上海 </li>
<li>广州 </li>
</ol>
<ul>
<p>美国城市 </p>
<li>华盛顿 </li>
<li>芝加哥 </li>
<li>纽约 </li>
</ul>
</body>
</html>
此例在浏览器中的显示如下:
- 北京
- 上海
- 广州
中国城市
- 华盛顿
- 芝加哥
- 纽约
美国城市
6.<div></div>
<div></div>标志对用来排版大块Html段落，也用于格式化表，此标志对的用法与<p></p>标志对非常相似，同样有align对齐方式属性，读者可以自己试试看。
三、文本标志
1.<pre></pre>
2.<h1></h1>……<h6></h6>
3.<b></b><i></i><u></u>
4.<tt></tt><cite></cite><em></em><strong></strong>
5.<font></font>
上一个教程中我们已经讲了如何在浏览器中输出文本，以及文本输出的格式，这个教程中我们将谈一谈文本输出的字体，如斜体、黑体字、下加一划线等等。在本教程的最后给出了一个文本标志的综合示例，希望读者能认真阅读。
1.<pre></pre>
<pre></pre>标志对用来对文本进行预处理操作。
2.<h1></h1>……<h6></h6>
Html语言提供了一系列对文本中的标题进行操作的标志对：<h1></h1>……<h6></h6>，即一共有六对标题的标志对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也即是标志中 h 后面的数字越大标题文本就越小。如果您的Html文档中需要输出标题文本的话，便可以使用这六对标题标志对中的任何一对。
3.<b></b><i></i><u></u>
经常使用 WORD 的人对这三对标志对一定很快就能掌握。<b></b>用来使文本以黑体字的形式输出；<i></i>用来使文本以斜体字的形式输出；<u></u>用来使文本以下加一划线的形式输出。后边将会有一个综合的例子，所以此处就不再作详细讲解了。
4.<tt></tt><cite></cite><em></em><strong></strong>
这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。<tt></tt>用来输出打字机风格字体的文本；<cite></cite>用来输出引用方式的字体，通常是斜体；<em></em>用来输出需要强调的文本(通常是斜体加黑体)；<strong></strong>则用来输出加重文本(通常也是斜体加黑体)。这些标志对的示例也将在后边综合的例子中出现。
5.<font></font>
<font></font>是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。size属性用来改变字体的大小，它可以取值：-1、1和+1；而color属性则用来改变文本的颜色，颜色的取值是我们在教程一中讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。具体用法请看下边综合的例子。
例4 文本标志的综合示例
<html>
<head>
<title>文本标志的综合示例</title>
</head>
<body text="blue">
<h1>最大的标题</h1>
<h3>使用h3的标题</h3>
<h6>最大的标题</h6>
<p><b>黑体字文本</b> </p>
<p><i>斜体字文本</i> </p>
<p><u>下加一划线文本</u> </p>
<p><tt>打字机风格的文本</tt></p>
<p><cite>引用方式的文本</cite></p>
<p><em>强调的文本</em></p>
<p><strong>加重的文本</strong></p>
<p><font size="+1" color="red">size取值“+1”、color取值“red”时的文本</font></p>
</body>
</html>
本例在浏览器中显示的结果如下：
最大的标题
使用h3的标题
最大的标题
黑体字文本
斜体字文本
下加一划线文本
打字机风格的文本
引用方式的文本
强调的文本
加重的文本
size取值“+1”、color取值“red”时的文本
四、图像标志
1.<img>
2.<hr>
再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，Html语言也专门提供了<img>标志来处理图像的输出。
1.<img>
<img>标志并不是真正地把图像给加入到Html文档中，而是将标志对的src属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到您的文档中。您可能并不知道什么是相对路径，我现在就来讲一讲相对路径。所谓相对路径是指您所要链接或嵌入到当前Html文档的文件与当前文件的相对位置所形成的路径。假如您的Html文件与图形文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成<img src="logo.gif">；假如您的图形文件放在当前的Html文档所在目录的一个子目录(子目录名假设是images)下，则代码应为<img src="images/logo.gif">；假如您的图形文件放在当前的Html文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“../”表示您的网站，然后在后边紧跟文件在您的网站中的路径，假设home是您的网站下的一个目录，则代码应为<img src="../home/logo.gif">，若home是您的网站下的目录king下边的一个子目录，则代码应该变为<img src="../king/home/logo.gif">了。现在您对相对路径应该有所了解了吧！
必须强调一下，src属性在<img>标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，<img>标志还有alt、align、border、width和height属性。align是图像的对齐方式，在前边的教程中已经讲了很多了，这里就不再提了。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和Height属性是图像的宽和高，默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本。
2.<hr>
<hr>标志是在Html文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。想必大家对color属性已经很熟悉了，在此就不再用多讲。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。
下面是本教程的一个综合例子。
例5 图像标志举例
<html>
<head>
<title>图像标志的综合示例</title>
</head>
<body>
<p align="center"><a href="http://www.k688.com/" target="_blank"><img src="http://w5.k688.com/adv.gif" alt="网页制作" WIDTH="468" HEIGHT="60" border="0"></a></p>
<hr width="600" size="1" color="#0000FF">
</body>
</html>
本例在浏览其中的显示结果如下：
五、表格标志
1.<table></table>
2.<tr></tr><td></td>
3.<th></th>
表格标志对于制作网页是很重要的，我希望您能记住这一点，现在很多很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。但愿您也能熟练使用表格来制作您的主页。
1.<table></table>
<table></table>标志对用来创建一个表格。它有以下属性：
|
属性 |
用途 |
| <table bgcolor=""> | 设置表格的背景色。 |
| <table border=""> | 设置边框的宽度，若不设置此属性，则边框宽度默认为0。 |
| <table bordercolor=""> | 设置边框的颜色。 |
| <table bordercolorlight=""> | 设置边框明亮部分的颜色(当border的值大于等于1时才有用)。 |
| <table bordercolordark=""> | 设置边框昏暗部分的颜色(当border的值大于等于1时才有用)。 |
| <table cellspacing=""> | 设置表格格子之间空间的大小。 |
| <table cellpadding=""> | 设置表格格子边框与其内部内容之间空间的大小。 |
| <table width=""> | 设置表格的宽度，单位用绝对像素值或总宽度的百分比。 |
| 说明:以上各个属性可以结合使用。有关宽度、大小的单位用绝对像素值。而有关颜色的属性使用十六进制RGB颜色码或Html语言给定的颜色常量名(如 Silver 为银色) | |
2.<tr></tr><td></td>
<tr></tr>标志对用来创建表格中的每一行。此标志对只能放在<table></table>标志对之间使用，而在此标志对之间加入文本将是无用的，因为在<tr></tr>之间只能紧跟<td></td>标志对才是有效的语法，<td></td>标志对用来创建表格中一行中的每一个格子，此标志对也只有放在<tr></tr>标志对之间才是有效的，您想要输入的文本也只有放在<td></td>标志对中才有效(即才能够显示出来)。<table></table>、<tr></tr>和<td></td>标志对的关系如下所示：
| 最外层,创建一个表格--> | <table> | ||
| 创建一行--> | <tr> | ||
| 创建一个格子(这里总共创建了三个格子)--> | <td>要输出的文本只能放在此处</td> | ||
| <td>要输出的文本只能放在此处</td> | |||
| <td>要输出的文本只能放在此处</td> | |||
| </tr> | |||
| 最外层--> | </table> | ||
此外，<tr>还有align和valign属性。align是水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)；而valign是垂直对齐方式，取值为top(*顶端对齐)、middle(居中间对齐)或bottom(*底部对齐)。<td>具有width、colspan、rowspan和nowrap属性。width是格子的宽度，单位用绝对像素值或总宽度的百分比；colspan设置一个表格格子跨占的列数(缺省值为1)；rowspan设置一个表格格子跨占的行数(缺省值为1)；nowrap禁止表格格子内的内容自动断行。
3.<th></th>
<th></th>标志对用来设置表格头，通常是黑体居中文字。
看一看下边的例子就明白以上标志对的用法了。
例6 表格标志的综合示例
<html>
<head>
<title>表格标志的综合示例</title>
</head>
<body>
<table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"
bordercolorlight="#7D7DFF" bordercolordark="#0000A0">
<tr>
<th width="33%" colspan="2" valign="bottom">意大利</th>
<th width="36%" colspan="2" valign="bottom">英格兰</th>
<th width="36%" colspan="2" valign="bottom">西班牙</th>
</tr>
<tr>
<td width="16%" align="center">AC米兰</td>
<td width="16%" align="center">佛罗伦萨</td>
<td width="17%" align="center">曼联</td>
<td width="17%" align="center">纽卡斯尔</td>
<td width="17%" align="center">巴塞罗那</td>
<td width="17%" align="center">皇家社会</td>
</tr>
<tr>
<td width="16%" align="center">尤文图斯</td>
<td width="16%" align="center">桑普多利亚</td>
<td width="17%" align="center">利物浦</td>
<td width="17%" align="center">阿申纳</td>
<td width="17%" align="center">皇家马德里</td>
<td width="17%" align="center">……</td>
</tr>
<tr>
<td width="16%" align="center">拉齐奥</td>
<td width="16%" align="center">国际米兰</td>
<td width="17%" align="center">切尔西</td>
<td width="17%" align="center">米德尔斯堡</td>
<td width="17%" align="center">马德里竞技</td>
<td width="17%" align="center">……</td>
</tr>
</table>
</body>
</html>
本例在浏览器中显示的结果如下：
| 意大利 | 英格兰 | 西班牙 | |||
|---|---|---|---|---|---|
| AC米兰 | 佛罗伦萨 | 曼联 | 纽卡斯尔 | 巴塞罗那 | 皇家社会 |
| 尤文图斯 | 桑普多利亚 | 利物浦 | 阿申纳 | 皇家马德里 | …… |
| 拉齐奥 | 国际米兰 | 切尔西 | 米德尔斯堡 | 马德里竞技 | …… |
六、链接标志
1.<a href=""></a>
2.<a ></a>
教程六的内容不是很多，而且很简单。链接是Html语言的一大特色，正因为有了它，我们对内容的浏览才能够具有灵活性和网络性。
1.<a href=""></a>
本标志对的属性href是无论如何不可缺少的，标志对之间加入需要链接的文本或图像(链接图像即加入<img src="">标志)。href的值可以是URL形式，即网址或相对路径，也可以是mailto:形式，即发送E-Mail形式。对于第一种情况，语法为<a href="URL"></a>，这就能创建一个超文本链接了，例如：
<a href="http://free.2259.com">一个网站教学网站</a>
对于第二种情况，语法为<a href="mailto:EMAIL"></a>，这就创建了一个自动发送电子邮件的链接，mailto:后边紧跟想要制动发送的电子邮件的地址(即E-Mail地址)，例如：
<a href="mailto:123456@263.net">这是我的电子信箱(E-Mail信箱)</a>
此外，<a href=""></a>还具有target属性，此属性用来指明浏览的目标帧，我们将在讲帧标志时作详细的说明，这里您只要知道如果不使用target属性，当浏览者点击了链接之后将在原来的浏览器窗口中浏览新的Html文档，若target的值等于“_blank”，点击链接后将会打开一个新的浏览器窗口来浏览新的Html文档。例如：
<a href="www.caoyee.bokee.com" target="_blank">一个网站教学网站</a>
2.<a ></a>
<a ></a>标志对要结合<a href=""></a>标志对使用才有效果。<a ></a>标志对用来在Html文档中创建一个标签(即做一个记号)，属性name是不可缺少的，它的值也即是标签名，例如：
<a >此处创建了一个标签</a>
创建标签是为了在Html文档中创建一些链接，以便能够找到同一文档中的有标签的地方。要找到标签所在地，就必须使用<a href=""></a>标志对。例如要找到“标签名”这个标签，就要编写如下代码：
<a href="#标签名">点击此处将使浏览器跳到“标签名”处</a>
注意：href属性赋的值若是标签的名字，必须在标签名前边加一个“#”号。
下面是本教程的一个综合示例：
例7 链接标志的综合示例
<html>
<head>
<title>链接标志的综合示例</title>
</head>
<body>
<p align="center" style=" font-size:9pt;color:yellow;background:black"><br>
<a ><font color="red">创建标签处</font></a><br>
<br>
<br>
欢迎想要学习网页制作的同学访问以下网站<br>
<a href="http://www.caoyee.bokee.com" target="_blank"><font color="lime">http://www.blog98.cn</font></a><br>
<br>
<a href="http://www.caoyee.bokee.com" target="_blank"><img src="http://www.caoyee.bokee.com/adv.gif"
alt="网站空间 域名注册" border="0" width="468" height="60"></a><br>
<br>
本网站的主要内容<br>
<br>
<a href="http://www.blog98.cn" target="_blank">Html教程</a><br>
<br>
<a href="http://www.blog98.cn" target="_blank">网页特效</a><br>
<br>
<br>
欢迎给我来信，我的E-Mail是：
<a href="mailto:caoyee@263.net"><font color="lime">caoyee@263.net</font></a><br>
<br>
<a href="#Top"><font color="lime">点击此处回到标签处</font></a><br>
<br>
</p>
</body>
</html>
本例没有演示
七、帧标志
1.<frameset></frameset>
2.<frame>
3.<noframes></noframes>
帧是由英文Frame翻译过来的，它可以用来向浏览器窗口中装载多个Html文件。即每个Html文件占据一个帧，而多个帧可以同时显示在同一个浏览器窗口中，它们组成了一个最大的帧，也即是一个包含多个Html文档的Html文件(我称它为主文档)。帧通常的使用方法是在一个帧中放置目录(即可供选择的链接)，然后将Html文件显示在另一个帧中。
1.<frameset></frameset>
<frameset></frameset>标志对放在帧的主文档的<body></body>标志对的外边，也可以嵌在其他帧文档中，并且可以嵌套使用。此标志对用来定义主文档中有几个帧并且各个帧是如何排列的。它具有rows和cols属性，使用<frameset>标志时这两个属性至少必须选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管，<frameset></frameset>标志对也就没有起到任何作用了。rows用来规定主文档中各个帧的行定位，而cols用来规定主文档中各个帧的列定位。这两个属性的取值可以是百分数、绝对像素值或星号(“*”)，其中星号代表那些未被说明的空间，如果同一个属性中出现多个星号则将剩下的未被说明的空间平均分配。同时，所有的帧按照rows和cols的值从左到右，然后从上到下排列。示例如下：
| <frameset rows="*,*,*"> | 总共有三个按列排列的帧,每个帧占整个浏览器窗口的1/3 |
| <frameset cols="40%,*,*"> | 总共有三个按行排列的帧,第一个帧占整个浏览器窗口的40%,剩下的空间平均分配给另外两个帧 |
| <frameset rows="40%,*" cols="50%,*,200"> | 总共有六个帧,先是在第一行中从左到右排列三个帧,然后在第二行中从左到右再排列三个帧,即两行三列,所占空间依据rows和cols属性的值,其中200的单位是像素 |
2.<frame>
<frame>标志放在<frameset></frameset>之间，用来定义某一个具体的帧。<frame>标志具有src和name属性，这两个属性都是必须赋值的。src是此帧的源Html文件名(包括网络路径,即相对路径或网址)，浏览器将会在此帧中显示src指定的Html文件；name是此帧的名字，这个名字是用来供超文本链接标志<a href="" target="">中的target属性用来指定链接的Html文件将显示在哪一个帧中。例如定义了一个帧，名字是main，在帧中显示的Html文件名是jc.htm，则代码是<frame src="jc.htm" >，当您有一个链接，在点击了这个链接后，文件new.htm将要显示在名为main的帧中，则代码为<a href="new.htm" target="main">需要链接的文本</a>。这样一来，就可以在一个帧中建立网站的目录，加入一系列链接，当点击链接以后在另一个帧中显示被链接的Html文件。
此外，<frame>标志还有scrolling和noresize属性，scrolling用来指定是否显示滚动轴，取值可以是“yes”(显示)、“no”(不显示)或“auto”(若需要则会自动显示,不需要则自动不显示)。noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个帧的大小。
3.<noframes></noframes>
<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间，用来在那些不支持帧的浏览器中显示文本或图像信息。在此标志对之间先紧跟<body></body>标志对，然后才可以使用我们在教程七以前讲过的任何标志。
下边是一个综合示例：
例8 帧标志的综合示例
主文档：
<html>
<head>
<title>帧标志的综合示例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" >
<frame src="page1.htm" scrolling="auto" >
<noframes>
<body>
<p>对不起，您的浏览器不支持“帧”！</p>
</body>
</noframes>
</frameset>
</html>
menu.htm
<html>
<head>
<title>目录</title>
</head>
<body>
<p><font color="#FF0000">目录</font></p>
<p><a href="page1.htm" target="Main">链接到第一页</a></p>
<p><a href="page2.htm" target="Main">链接到第二页</a></p>
</body>
</html>
page1.htm
<html>
<head>
<title>第一页</title>
</head>
<body>
<p align="center"><font color="#8000FF">这是第一页！</font></p>
</body>
</html>
page2.htm
<html>
<head>
<title>第二页</title>
</head>
<body>
<p align="center"><font color="#FF0080">这是第二页！</font></p>
</body>
</html>
若想看此例在浏览器中显示的结果请自己动手试试吧。
=================================================================================================
HTML语法大全
跑马灯
<marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction=left></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定卷动距离
<marquee scrolldelay=300>...</marquee>设定卷动时间
字体效果
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大
连结格式
<base href=地址>(预设好连结路径)
<a href=地址></a>外部连结
<a href=地址 target=_blank></a>外部连结(另开新窗口)
<a href=地址 target=_top></a>外部连结(全窗口连结)
<a href=地址 target=页框名></a>外部连结(在指定页框连结)
字体
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大
区断标记
<hr>水平线
<hr size=9>水平线(设定大小)
<hr width=80%>水平线(设定宽度)
<hr color=ff0000>水平线(设定颜色)
<br>(换行)
<nobr>...</nobr>水域(不换行)
<p>...</p>水域(段落)
<center>...</center>置中
贴图/音乐
<img src=图片地址>贴图
<img src=图片地址 width=180>设定图片宽度
<img src=图片地址 height=30>设定图片高度
<img src=图片地址 alt=提示文字>设定图片提示文字
<img src=图片地址 border=1>设定图片边框
<bgsound src=MID音乐文件地址>背景音乐设定
表格语法
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)
分割窗口
<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*">分割左右两个框架
<frameset cols="20%,*,20%">分割左中右三个框架
<分割上下两个框架
<frameset rows="20%,*,20%">分割上中下三个框架
<A HREF TARGET> 指定超级链接的分割窗口
<A HREF=#锚的名称> 指定锚名称的超级链接
<A HREF> 指定超级链接
<A 被连结点的名称
<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址
<B> 粗体字
<BASE TARGET> 指定超级链接的分割窗口
<BASEFONT SIZE> 更改预设字形大小
<BGSOUND SRC> 加入背景音乐
<BIG> 显示大字体
<BLINK> 闪烁的文字
<BODY TEXT LINK VLINK> 设定文字颜色
<BODY> 显示本文
<BR> 换行
<CAPTION ALIGN> 设定表格标题位置
<CAPTION>...</CAPTION> 为表格加上标题
<CENTER> 向中对齐
<CITE>...<CITE> 用于引经据典的文字
<CODE>...</CODE> 用于列出一段程序代码
<COMMENT>...</COMMENT> 加上批注
<DD> 设定定义列表的项目解说
<DFN>...</DFN> 显示"定义"文字
<DIR>...</DIR> 列表文字卷标
<DL>...</DL> 设定定义列表的卷标
<DT> 设定定义列表的项目
<EM> 强调之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 设定字体大小
<FORM ACTION> 设定户动式窗体的处理方式
<FORM METHOD> 设定户动式窗体之资料传送方式
<FRAME MARGINHEIGHT> 设定窗口的上下边界
<FRAME MARGINWIDTH> 设定窗口的左右边界
<FRAME NAME> 为分割窗口命名
<FRAME NORESIZE> 锁住分割窗口的大小
<FRAME SCROLLING> 设定分割窗口的滚动条
<FRAME SRC> 将HTML文件加入窗口
<FRAMESET COLS> 将窗口分割成左右的子窗口
<FRAMESET ROWS> 将窗口分割成上下的子窗口
<FRAMESET>...</FRAMESET> 划分分割窗口
<H1>~<H6> 设定文字大小
<HEAD> 标示文件信息
<HR> 加上分网格线
<HTML> 文件的开始与结束
<I> 斜体字
<IMG ALIGN> 调整图形影像的位置
<IMG ALT> 为你的图形影像加注
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入图片并预设图形大小
<IMG HSPACE> 插入图片并预设图形的左右边界
<IMG LOWSRC> 预载图片功能
<IMG SRC BORDER> 设定图片边界
<IMG SRC> 插入图片
<IMG VSPACE> 插入图片并预设图形的上下边界
<INPUT TYPE NAME value> 在窗体中加入输入字段
<ISINDEX> 定义查询用窗体
<KBD>...</KBD> 表示使用者输入文字
<LI TYPE>...</LI> 列表的项目 ( 可指定符号 )
<MARQUEE> 跑马灯效果
<MENU>...</MENU> 条列文字卷标
<META CONTENT URL> 自动更新文件内容
<MULTIPLE> 可同时选择多项的列表栏
<NOFRAME> 定义不出现分割窗口的文字
<OL>...</OL> 有序号的列表
<OPTION> 定义窗体中列表栏的项目
<P ALIGN> 设定对齐方向
<P> 分段
<PERSON>...</PERSON> 显示人名
<PRE> 使用原有排列
<SAMP>...</SAMP> 用于引用字
<SELECT>...</SELECT> 在窗体中定义列表栏
<SMALL> 显示小字体
<STRIKE> 文字加横线
<STRONG> 用于加强语气
<SUB> 下标字
<SUP> 上标字
<TABLE BORDER=n> 调整表格的宽线高度
<TABLE CELLPADDING> 调整数据域位之边界
<TABLE CELLSPACING> 调整表格线的宽度
<TABLE HEIGHT> 调整表格的高度
<TABLE WIDTH> 调整表格的宽度
<TABLE>...</TABLE> 产生表格的卷标
<TD ALIGN> 调整表格字段之左右对齐
<TD BGCOLOR> 设定表格字段之背景颜色
<TD COLSPAN ROWSPAN> 表格字段的合并
<TD NOWRAP> 设定表格字段不换行
<TD VALIGN> 调整表格字段之上下对齐
<TD WIDTH> 调整表格字段宽度
<TD>...</TD> 定义表格的数据域位
<TEXTAREA NAME ROWS COLS> 窗体中加入多少列的文字输入栏
<TEXTAREA WRAP> 决定文字输入栏是自动否换行
<TH>...</TH> 定义表格的标头字段
<TITLE> 文件标题
<TR>...</TR> 定义表格美一行
<TT> 打字机字体
<U> 文字加底线
<UL TYPE>...</UL> 无序号的列表 ( 可指定符号 )
<VAR>...</VAR> 用于显示变量
精彩文章链接：博客教程、方法、技巧 http://hzh918.blog.163.com/blog/static/456196200712745728722
