html基础篇，精心整理的，新手必看。。。。-领先建站CMS提供服务商我们专注于CMS建站产品的研发

14861 查看	11 回复

主题：html基础篇，精心整理的，新手必看。。。。 [收藏主题]

转到：

killer007 当前离线

34 主题	0 广播	0 粉丝

级别:学前班

用户积分:32 分
登录次数:21 次
注册时间:2012/3/10
最后登录:2013/2/24

killer007 发表于：2012/3/24 7:09:00 | 只看该作者查看该作者主题楼主

一分钟快速开通线上知识店铺

HTML 入门教程

第 1 课：开始学习

在这第一课中，我们简要介绍制作网站所需的工具。

需要哪些工具？需要哪些工具？

十之八九，你已经拥有所需的全部工具了。 “浏览器（browser）”你有了，它是用于浏览网站的程序。你现在就是通过浏览器在观看本页面的。游览器有很多可供选择，最普及的浏览器当属微软（Microsoft）公司的 Internet Explorer（俗称“IE”），其他的一些浏览器包括 Opera、Mozilla Firefox（俗称“火狐狸”或“火狐”）等。这些浏览器的基本功能都是浏览网页，因此具体使用哪个浏览器是无所谓的。也许你听说过、甚至用过一些网页制作工具，比如 Microsoft FrontPage、 Macromedia Dreamweaver、Microsoft Word 等。现在可以忘掉这些程序了！它们对你学习网页制作没有什么帮助。相反，你需要的是一个简易的文本编辑器。如果你正在使用 Windows （微软视窗）操作系统的话，你可以使用它自带的记事本（Notepad）程序。你可以依次点击 “开始菜单→程序→附件”找到该程序。

如果你用的是其他操作系统，那么也有类似的简易文本编辑器可以使用，比如 Linux 上的 Pico 或 Mac（苹果机）上的 Simple Text。记事本是一个非常简单的文本编辑程序，用它编写程序非常好，因为它不会干涉你所输入的任何内容，给予你完全的控制权。而许多网页制作工具的问题在于，它们提供了许多标准功能供你选择。这样的缺点是，你只能按照这些标准功能来制作网页。所以，这类工具常常不能创建正合你意的网页。或者，更令人讨厌的是，它们会修改你手工编写的代码。而使用记事本（Notepad）或其他简易文本编辑器的话，全部代码均由你自己编写。浏览器和记事本程序（或类似的简易文本编辑器）便是你所需的全部工具，有了它们，你就可以完成本教程，并制作自己的网站了。

需要连上因特网么？

你无需连上因特网（Internet），浏览本教程和制作网站都可以离线完成。如果你想要离线阅读本教程，你可以将它打印出来，或者在阅读教程期间断开与因特网的连接。你可以先在自己的计算机上制作网站，待网站制作完毕再上传到因特网上。

接下来学习什么？

下一课将介绍 HTML 是什么，然后从第三课开始学习有趣的 HTML。

第 2 课：HTML 是什么？

这一课将为你简要介绍你的新朋友——HTML。

HTML 是什么？

HTML 是浏览器的“母语”。长话短说，HTML 是由一名叫 Tim Berners-Lee 的科学家发明的。他发明 HTML 的目的，是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。HTML 取得了的巨大成功，大大超出了 Tim Berners-Lee 的原本预计。通过发明 HTML，他为我们今天所认识的万维网奠定了基础。 HTML 是一门语言，它令我们可以在因特网上展示信息（例如科学研究信息）。你所看到的网页，是浏览器对 HTML 进行解释的结果。要查看一个网页的 HTML 代码，只需在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。

对于生手来说，HTML 代码看似很复杂，不过本教程将帮助你弄清楚它们的含义。

HTML 能用来做什么？

如果你要制作网站的话，学习 HTML 是不可避免的。即使你用 Dreamweaver 等工具来制作网站，了解基本的 HTML 知识也会令你在网站制作过程中倍感轻松，并有利于制作出更好的网站。好在 HTML 容易被学会和使用。通过下面两课的学习，你将学会如何制作自己的第一个网站。是用来制作网站的。就这么简单！ HTML 是用来制作网站的。就这么简单！

这四个字母代表什么呢？好，明白了，那 HTML 这四个字母代表什么呢？明白了，

HTML 是“HyperText Mark-up Language（超文本标记语言）”的缩写——其实目前你不必了解这些，不过，为了迁就学习次序，我就详细解释一下吧。

•超（Hyper）是相对于线性（linear）来说的。在很久以前，那时计算机 Hyper）程序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行，这行结束后，继续下移，依次类推。但 HTML 则不同，你可以在任何时候跳转到任何地方。比方说，你在浏览 chinahtml.com 之前，不必先去浏览 MSN.com。文本（Text）文本（Text）意味着它是自解释的（self-explanatory）。标记（Markup）标记（Markup）指的是你怎么处理文本。对文本作标记的方式，跟你在文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。语言（Language）语言（Language）。HTML 就是一种语言，它使用了许多英文单词。

在本教程中，你将会学习到 XHTML（可扩展超文本标记语言）。简单地说，它是一种新的、更加结构良好的 HTML。 现在，你知道了 HTML（和 XHTML）代表什么意思，下面我们将开始有关网站制作的学习。

第 3 课：元素与标签

现在你要学习的是 HTML 的重要成分——元素（element）。 元素用于结构化 HTML 文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。

“标签”是什么？标签”是什么？

标签（tag）指示元素的起始与结束。 所有标签都具有相同的格式：以小于号“<”开头，以大于号“>”结尾。 一般说来，有两种标签——首标签（start tag）（如<html>）和尾标签（end tag）（如</html>）。它们唯一的区别在于，尾标签多一条斜杠“/。你通过把内容放在首标签和尾标签之

间来对内容进行标记。 HTML 主要就是各种各样的元素，所以，学习 HTML，就是学习使用各种元素。

可以举些例子么？可以举些例子么？

没问题。比如，b 元素的作用是，告诉浏览器介于标签<b>和</b>之间的文本应以粗体显示。（这里的“b”是“粗体（bold）”的意思。）

例 1：

<b>这句话应显示为粗体。</b>

该例在浏览器中将显示如下：这句话应显示为粗体。这句话应显示为粗体。 h1、 h3、 h5 及 h6 元素的作用是显示标题 h2、 h4、 （这里的 h 是“标题（heading） ” 的意思）。其中 h1 是一级标题，字体最大；h2 是二级标题，字体比一级标题略小；而 h6 是六级标题，它是最后一级标题，字体也最小。例 2：<h1>这是标题</h1> <h2>这是子标题</h2>

该例在浏览器中将显示如下：

这是标题

这是子标题

首标签和尾标签总是必须的吗？

常言道，凡事均有例外。在 HTML 中，也有例外的情况，即有些元素没有尾标签。这些没有尾标签的元素被称作空元素（empty element），它们与具体文本内容无关，比如像下面这个换行标签：<br />。

标签中的字母应该大写还是小写？

大多数浏览器不介意标签是大写还是小写，或者混合大小写。所以<HTML>、 <html> 或<HtMl>在浏览器上的显示效果都一样。但是，正确的写法是采用小写字母来书写标签。所以，要养成用小写字母书写标签。

把标签放在哪里？

你应该在 HTML 文档里书写标签。一个网站可能包含多个 HTML 文档。上网的过程，其实就是打开不同 HTML 文档的过程。这一课就到这里。如果花 10 分钟时间继续学习下一课的话，你将能够制作自己的第一个网站。

第 4 课：制作自己的第一个网站

有了从前面几课的基础，现在只需再花几分钟时间，你就能学会如何制作自己的第一个网站了。

如何做呢？

通过第一课，我们知道制作一个网页需要有浏览器和记事本程序（或者类似的文本编辑器）。既然你现在已经在用浏览器阅读本教程了，那么请再打开一个窗口 ——这样你就可以一边阅读本教程，一边欣赏你的新网页了。另外，请打开记事本程序（Notepad）：依次选择“开始→菜单→程序→附件→记事本”即可。

现在一切就绪了！

然后呢？然后呢？

我们先从简单的做起吧。先试着做一个显示如下内容的网页：“哇！这是我的第一个网站。”继续学习，就你就知道这是多么容易了。 HTML 简单易学。浏览器读 HTML 就跟你读书一样，也是从上往下，从左到右进行就跟你读书一样，也是从上往下，浏览器读的。所以，HTML 文档的开始和结束便对应于网页的头和尾。你首先要做的是告诉浏览器，你们将采用 HTML 语言来“对话”。这是通过<html> 标签来实现的（这是容易理解的）。所以，在做所有其他事之前，先在记事本的第一行敲入“<html>”。也许你记得前面课程中我们说过，这里的<html>是首标签，在 HTML 文档结尾处必须有相应的尾标签与之对应。好的，为了防止最后忘记写这个尾标签，我们现在就输入“</html>”，然后在<html>和</html>之间留些空行，用于书写其余代码。下面，我们需要为 HTML 文档写一个“头部（head）”，它提供关于当前文档的信息；然后写一个“主体（body）”，它提供文档的内容。HTML 最重要的就是简单——在这里，我们只需把头部（<head>和</head>）放到主体(<body>和 </body>）的前面就行了。如下所示：

注意我们是如何用换行（用 Enter 键）与缩进（用 Tab 键）令代码具有层次感的。理论上，你如何书写 HTML 文档，这无关紧要。但为了便于阅读代码，和保持良好的概貌，我们强烈建议你采用换行与缩进来层次化 HTML 代码代码，就像上面的例子一样。

上面这个文档便构成了你的第一个网站——它只包含一个网页，而且内容很单调，可能与你的想象相去甚远，但在一定程度上它仍是一个网站。你可以将它用作其他 HTML 文档的基本模版。

不错不错，但我如何添加更多内容？不错不错，但我如何添加更多内容？

前面我们学到过，HTML 文档有两个部分：头部（head）和主体（body）。你在你在头部（head）提供关于网页的信息，你在主体（body）头部（head）提供关于网页的信息，你在主体（body）部分提供网页的具体内容。比如，如果你要指定 HTML 文档的网页标题（title）（它将显示在浏览器窗口顶部），你就要在头部（head）提供有关信息。用 title 元素来指定网页标题：即在首标签<title>与尾标签</title>之间写上网页标题：

<title>我的第一个网站</title>

注意，网页标题（title）不是显示在网页里，而是显示在浏览器窗口的标题栏上的。网页里显示的所有内容都必须放在 body 元素里。比如，我们要在网页里显示“哇！这是我的第一个网站。”这行文字，它属于主体（body）部分，所以我们在 body 元素里输入：

<p>哇！这是我的第一个网站。</p>

标签<p>里的 p 是“段落（paragraph）”的意思，也就是一个文本段落。 现在，你的 HTML 文档应该是这样：

<html> <head> <title>我的第一个网站</title> </head> z <body> <p>哇！这是我的第一个网站。</p> </body> </html>

搞定！你已经完成了自己第一个真正的网站（尽管它只包含一个网页）！接着，你需要将它保存到你的硬盘上，然后在浏览器中打开它：

在记事本的“文件”菜单下选择“另存为...”。这时会弹出一个对话框，在“保存类型”右边的下拉菜单里选择“所有文件”。这一点很重要——否则，它将被保存为文本文档，而不是 HTML 文档。现在将这个文档保存为“page1.htm”（后缀名“htm”表明它是一个 HTML 文档。后缀名用“html”也可以，但我比较习惯使用“htm”，你可以根据自己的喜好选用二者中的任一个）。将 HTML 文档保存在硬盘上的哪个文件夹无关紧要——只要你记得保存位置，并能再次找到它就行。

现在打开浏览器：

在“文件”菜单下选择“打开”。在弹出的对话框中点击“浏览”按钮。现在，请找到你的 HTML 文档，然后点击“打开”。

这时，浏览器中应显示“哇！这是我的第一个网站。”。恭喜！如果你迫切希望自己的杰作能被全世界看到，你可以先去第 14 课学习一下如何把自己的网页上传到因特网（Internet）上。如果你不着急的话，那么请继续往下学习。

乐趣才刚刚开始。始终以上一课中的基本模版为起点制作新网页：

</html> <head> <title></title> </head> <body> </body> </html>

网页标题（title）写在 head（头部）里：<title>网页标题写在这里</title>。注意，网页标题将显示在浏览器窗口的标题栏上：

网页标题（title）尤其重要，因为搜索引擎（比如 Google）要用它来索引网页，并显示在搜索结果里。

网页的实际内容写在 body（主体部分）里。你已经掌握一些最重要的元素了：

<p>用于段落</p> <b>显示粗体文本</b> <h1>标题</h1> <h2>子标题</h2> <h3>子子标题</h3>

记住，学习 HTML 要反复尝试才行。别担心，即时出错也不会损坏你的计算机或因特网。所以，可以放心继续操练——这是获取经验的最好办法。

学会这些就可以成为高手了吗？学会这些就可以成为高手了吗？

要成为一名网页制作高手，仅学习本教程是不够的。因为本教程只涉及 HTML 成分的基本用法——要成为高手，你必须灵活运用这些成分才行。那么，要独自面对困难，并学会自立了。。。或许如此，不过也未必。试试看，把已经学过的内容操练一下吧。

下面做什么？下面做什么？

自己尝试创建一些网页。比如：做一个网页，为它设置网页标题（title），并写一些标题（heading）、文本、子标题等。刚开始，你可以通过查阅本教程来帮助你制作网页。但是后面，你要试着离开本教程自己独立完成。

第 6 课：学习更多元素

你有没有独立完成过一些网页？如果还没有，请看下面的例子：

</html>。 <head> <title>我的网站</title> </head> <body> <h1>标题</h1> <p>一些文字。。。</p> <h2>子标题</h2> <p>一些文字。。。。</p> </body> </html>

看完了，然后呢？看完了，然后呢？

现在要学习七个新元素。前面学过，你可以通过用<b>和</b>把文本括起来，把文本设为粗体；类似地，你可以通过用<i>和</i>把文本括起来，把文本设为斜体。没错，这里的“i”是 “斜体（italic）”的意思。例 1：

<i>这句话应显示为斜体</i>

该例在浏览器中将显示如下：

这句话应显示为斜体

同样，你可以用 small 标签把文本设为小字体：

例 2：

<small>这句话应显示为小字体</small>

该例在浏览器中将显示如下：

这句话应显示为小字体

我可以同时应用多个标签吗？我可以同时应用多个标签吗？

你可以同时应用多个标签，只要你能避免标签交错起来最好通过一个例子来说明：

例 3：如果你希望一段文本即是粗体又是斜体，你可以这样做：

<b><i>既是粗体又是斜体</i></b>

注意不能这样：

<b><i>既是粗体又是斜体</b></i>

二者区别在于： 在前一个例子中，首先打开的标签最后关闭。 这样可以避免混淆。

学习更多元素！学习更多元素！

正如第 3 课中提到的，有些元素是没有尾标签（end tag）的。这种元素被称作空元素（empty element），它们不与特定文本段落相关。一个例子是<br />，它的作用是插入一个换行符。例 4：

写一些文字<br />重起一行再写一些文字

该例在浏览器中将显示如下：写一些文字重起一行再写一些文字注意上面的空元素<br />：它没有尾标签，并且在首标签名称的后面加了空格和斜杠。另一个空元素是<hr />，它的作用是画一条水平线。这里的“hr”是“水平线（horizontal rule）”的意思。例 5：

<hr />

该例在浏览器中将显示如下：

HTML 中的空元素还包括 ul、ol 和 li，这三个元素用于制作列表。 ul 代表“无序列表（unordered list）”，它的作用是为每个列表项显示一个粗点。ol 代表“有序列表（ordered list）”，它的作用是显示每个列表项的序号。用<li>元素把多个列表项组织为一个列表，其中的 li 代表“列表项（list item）。感觉有些迷糊？那么，请看下面的例子：

例 7：

<ul> <li>一个列表项</li> <li>另一个列表项</li> </ul>

该例在浏览器中将显示如下：

一个列表项另一个列表项

例 8：

<ol>

<li>第一个列表项</li> <li>第二个列表项</li> </ol>

该例在浏览器中将显示如下： 1. 第一个列表项 2. 第二个列表项

哟！就这些啊？就这些啊？

嗯，这一课就学这么多。再次重申，请反复实验本课所学的元素，并在制作自己的网页时使用它们。

<i>斜体</i> <small>小字体</small> <br /> 换行 <hr /> 水平线 <ul>无序列表<ul> <ol>有序列表<ol> <li>列表项</li>

第 7 课：属性

许多元素都可以设置属性。

属性是什么？

也许你还记得，HTML 通过标签告诉浏览器如何展示网页（比如<br />告诉浏览器显示一个换行）。你可以为某些元素附加一些信息，这些

附加信息被称为属性（attribute）。例 1：

属性应写在元素的首标签上。具体写法是：属性名称（attribute name）后紧跟一个等号（“=”），后面写上用双引号括起来的属性值

（attribute value）。

对于 style 属性的值，可以用分号（“;”）来分隔多个样式指令。这个后面会介绍。

这里涉及什么知识点？这里涉及什么知识点？

属性有许多，我们首先学习的是 style 属性，它用于为网页设定样式 它用于为网页设定样式，比如它用于为网页设定背景颜色等。

例 2：

该例将在浏览器中显示一个全是红色的页面——自己动手试试看。稍后我们会详细讲解颜色设置的原理。注意，一些元素和属性的名称采用的是美式拼写，比如 color （而不是 colour）。请留意本教程中元素与属性名称的拼写，千万不要写错——否则浏览器将无法理解你的代码。而且，别忘了用双引号把属性值（attribute value）括起来。

为什么上面那个页面全是红的？为什么上面那个页面全是红的？

在上例中，我们将网页的背景颜色设置为“#ff0000”，这个十六进制代码（HEX）代表红色。每个颜色都有其对应的十六进制代码每个

颜色都有其对应的十六进制代码。下面是一些例子：每个颜色都有其对应的十六进制代码

白色：黑色：红色：兰色：绿色：黄色：

#ffffff #000000 #ff0000 #0000ff #00ff00 #ffff00

十六进制代码由“#”打头，后面跟六位数字或字母。由于这样的十六进制代码太多，不便记住哪个代码对应哪个特定颜色。为此，我们为

最常用的 216 个颜色制作了一张表，供大家参阅：216 个网页安全颜色表。

216 Web Safe Colour Chart

FFFFFF FFCCFF FF99FF FF66FF FF33FF FF00FF FFFFCC FFCCCC FF99CC FF66CC FF33CC FF00CC FFFF99 FFCC99 FF9999 FF6699 FF3399 FF0099 FFFF66 FFCC66 FF9966 FF6666 FF3366 FF0066 FFFF33 FFCC33 FF9933 FF6633 FF3333 FF0033 FFFF00 FFCC00 FF9900 FF6600 FF3300 FF0000 CCFFFF CCCCFF CC99FF CC66FF CC33FF CC00FF CCFFCC CCCCCC CC99CC CC66CC CC33CC CC00CC CCFF99 CCCC99 CC9999 CC6699 CC3399 CC0099 CCFF66 CCCC66 CC9966 CC6666 CC3366 CC0066 CCFF33 CCCC33 CC9933 CC6633 CC3333 CC0033 CCFF00 CCCC00 CC9900 CC6600 CC3300 CC0000 99FFFF 99CCFF 9999FF 9966FF 9933FF 9900FF 99FFCC 99CCCC 9999CC 9966CC 9933CC 9900CC 99FF99 99CC99 999999 996699 993399 990099 99FF66 99CC66 999966 996666 993366 990066 99FF33 99CC33 999933 996633 993333 990033 99FF00 99CC00 999900 996600 993300 990000 66FFFF 66CCFF 6699FF 6666FF 6633FF 6600FF 66FFCC 66CCCC 6699CC 6666CC 6633CC 6600CC 66FF99 66CC99 669999 666699 663399 660099 66FF66 66CC66 669966 666666 663366 660066 66FF33 66CC33 669933 666633 663333 660033 66FF00 66CC00 669900 666600 663300 660000

33FFFF 33CCFF 3399FF 3366FF 3333FF 3300FF 33FFCC 33CCCC 3399CC 3366CC 3333CC 3300CC 33FF99 33CC99 339999 336699 333399 330099 33FF66 33CC66 339966 336666 333366 330066 33FF33 33CC33 339933 336633 333333 330033 33FF00 33CC00 339900 336600 333300 330000 00FFFF 00CCFF 0099FF 0066FF 0033FF 0000FF 00FFCC 00CCCC 0099CC 0066CC 0033CC 0000CC 00FF99 00CC99 009999 006699 003399 000099 00ff66 00cc66 009966 006666 003366 000066 00FF33 00CC33 009933 006633 003333 000033 00FF00 00CC00 009900 006600 003300 000000 除此以外，对于一些最常用的颜色（比如白色、黑色、红色、兰色、绿色及黄色等），你还可以使用它们的英语名称。

例 3：

关于颜色就讲这么多了。让我们继续学习属性。

哪些元素可以使用属性？

不同元素使用不同的属性。不同元素使用不同的属性有些元素（比如 body 等）被添加属性的机会比较大，而有些元素（比如 br 等）则较小、甚至不会被添加属性。 HTML 里有很多元素，同样也有很多属性。有些属性仅用于个别元素，有些属性可用于很多元素。反之亦然：有些元素只能使用个别属性，有些元素可以使用较多的属性。听起来这也许很令人困惑，不过一旦你熟悉了各个属性，就会感到很简单，并觉得它们很有用处。

本教程将介绍大多数重要属性。

一个元素包括哪些部分？

一般来说，一个元素包括一个首标签（start tag）零或多个属性、（attribute）、一些内容和一个尾标签（end tag）。就这么简单，参见下图。

第 8 课：链接

在这一课，你将学习如何在网页之间做链接。

如何做链接？

做链接也是通过元素（element）实现的。做链接只需一个元素和一个属性就行做链接只需一个元素和一个属性就行了。下面是一个例子，它是一个指向chinahtml.com 的链接：

例 1：：

<a href="http://www.chinahtml.com/">这是一个指向 chinahtml.com 的链接 </a>

该例在浏览器中将显示如下：

这是一个指向 chinahtml.com 的链接

元素 a 代表“链接（anchor）”；属性 href 代表“超文本引用（hypertext reference）”，它用于指定链接指向何处——通常是一个因特网地址或者一个文件名。在上例中，属性 href 的值为“http://www.chinahtml.com”，这是 chinahtml.com 网站的完整地址，也被称作 URL（统一资源定位符）。注意，在 URL 里必须包含 “http://”。“这是一个指向 chinahtml.com 的链接”是这个链接在浏览器中显示出来的文本。记得在元素结尾处写上</a>。

如何在同一网站的网页之间添加相互链接？

如果你要在同一网站的不同网页间做链接，那就不必拼写出网页的完整 URL。举个例子，假如你有两个网页（比如说 page1.htm 和 page2.htm），而且它们被存放在同一个文件夹中，那么你在做链接的时候，只要写出文件名就行了。这样， page1.htm 到 page2.htm 的链接将如下所示：

例 2：：

<a href="page2.htm">点击这里转到第 2 页</a>

如果 page2.htm 被放在下一级文件夹中（比如“subfolder”），那么链接将是这样：

例 3：：

<a href="subfolder/page2.htm">点击这里转到第 2 页</a>

反过来，从 page2.htm（在下级文件夹中）到 page1.htm 的链接将是这样：

例 4：：

“../”代表当前位置（即该链接所在文件所处的文件夹）的上一级文件夹。同理，当前位置的上上级文件夹可用“../../”表示。明白其中的规则了吗？当然，如果给出完整 URL 也行。

如果要在一个网页内做链接怎么办呢？如果要在一个网页内做链接怎么办呢？做链接怎么办呢

你也可以在一个网页的内部做链接——比如在网页开始处提供一个目录，在其中列出指向下面各章的链接。这可以通过使用 id 属性和“#”符号来实现。 用 id 属性标出要被指向的元素。

例如：

然后通过在链接中利用“#”来指向那个元素。 “#”后面必须紧跟着一个 id 属性的值，表明链接指向该 id 属性被定义的地方。例如：

来看一个例子就明白了：

例 5：：

该例在浏览器中将显示如下（你可以试试看点击这两个链接）：转到标题 1 转到标题 2

标题 1

一些文字。。。

标题 2

一些文字。。。（注：id 属性必须以字母开头）

除了网页，链接还能指向什么？除了网页，链接还能指向什么？

你还可以为 e-mail 地址做链接，方法跟为网页做链接差不多：

例 6：：

<a href="mailto:nobody@chinahtml.com">给 nobody@chinahtml.com 发电子邮件</a>

该例在浏览器中将显示如下：给 nobody@chinahtml.com 发电子邮件与指向网页的链接的唯一区别在于： 指向 e-mail 地址的链接必须以 mailto:开头，然后紧接着写 e-mail 地址。当点击这个链接的时候，缺省的e-mail 程序将新建一封邮件，其中的收件人地址为链接中指定的 e-mail 地址。注意：这一功能仅当你的计算机安装了e-mail程序后才起作用。试试看吧！

有其他我需要知道的属性吗？

创建链接总要用到 href 属性。另外，你也可以在链接上使用 title 属性：

例 7：：

<a href="http://www.chinahtml.com/" title="上 chinahtml.com 网站学习 HTML">chinahtml.com</a>

该例在浏览器中将显示如下： chinahtml.com title 属性用于为该链接输入一个简短描述。当你把鼠标光标停留在该链接上（别点击它）时，提示文字“上 chinahtml.com 网站学习 HTML”便会出现。

第 9 课：图像

假如能把影歌两栖传奇人物 David Hasselhoff 的图像放到自己的网页上，那就太好了。

这貌似有点难度。。。

也许是有点难度，但其实也不难，一个元素就可以搞定：例 1：

该例在浏览器中将显示如下：

你要做的只是：首先告诉浏览器你要插入一张图片（img），接着给出这张图片的存放位置（src，代表“来源（source）”）就行了。准备好图片了吗？ 注意：img 元素没有尾标签，它与<br />一样，不与特定的文本相关。 “david.jpg”是要插入的图片的文件名，其中的“jpg”表明图片类型。就像后缀名“htm”代表文件是 HTML 文档一样，后缀名“jpg”表明文件是一个图片文件。有三种类型的图片文件可被插入网页中：

GIF（Graphics Interchange Format，图形交换格式） JPG 或 JPEG（Joint Photographic Experts Group，联合图像专家组） PNG（Portable Network Graphics，可移植网络图像）

一般来说，GIF是图形和图画的最佳格式，而 JPEG 格式则更适合存放照片 因有二：第一，GIF 格式只支持 256 色，而 JPEG 格式支持数百万色；第二，GIF 格式擅长于压缩简单图像，而 JPEG 则更适于压缩复杂图像。压缩率越高，图像文件就越小，页面加载速度就越快。也许你也有同感，包含太多无用内容的网页是很不受欢迎的。过去，GIF 和 JPEG 是两大主要的图像格式，但是最近 PNG 格式也开始流行起来（主要是在取代 GIF 格式）。PNG 格式拥有许多 JPEG 与 GIF 的共同优点： PNG 数百万色，且压缩效果好。

图片从何处获得？

要制作自己的图像，需要有一个图像编辑程序。图像编辑程序是从事美观的网页图像编辑程序是从事美观的制作所需的重要工具之一。不幸的是 Windows 或其他操作系统都没有自带比较好的图片编辑程序。所以，也许你得买一个 Paint Shop Pro、PhotoShop 或者 Macromedia Fireworks，这三个是目前市场上最好的图像编辑软件。不过还是那句话，完成本教程的学习不需要购买任何昂贵的软件。你可以先下载一个 Irfan View 用，这是一个很不错的图像编辑软件。因为是自由软件，所以你可以免费使用它。或者，你也可以从我们 chinahtml.com 网站下载一些图片来用，但请注意不要违反有关版权规定。具体下载方法如下： 1. 右击网页中的图像。 2. 在菜单中选择“图片另存为...”。 3. 选择图片的存放位置，然后点击“保存”。按此方法将下面的图片保存到你的 HTML 文档所在目录。（注意：将它保存为 PNG 文件，文件名为 logo.png）：

现在你可以把这个图片插入到自己的网页里。自己试试看。

关于图像就这么多吗？

关于图像，还有一些是需要介绍的。首先，你可以轻易地把存放在其他文件夹、甚至其他网站的的图片插入到自己的网页中。例 2：

例 3：

其次，图片也可以作为链接：例 4：

该例在浏览器中将显示如下（你可以试试看点击这个图像）：

有什么属性需要了解的吗？

你总要用 src 属性来告诉浏览器图片的存放位置。除此以外，还有一些有用的属性。 alt 属性用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。对于有视力障碍的人士来说，或者当网页打开很慢的时候，这一特性显得尤为重要。所以说，始终记得写 alt 属性：例 5：

有些浏览器会在鼠标光标移到图像上时显示出 alt 属性的文本。但是，在使用 alt 属性时请注意，该属性的目的是为图片提供一个替用描述，有视力障碍的人士会利用 alt 属性来听取有关图片的描述，所以不要将该属性用于显示文本提示 ——那是 title 属性的功能。例 6：

该例在浏览器中将显示如下：

如果你把鼠标光标停留在该图片上（别点击它），提示文字“上 chinahtml.com 网站学习 HTML”便会出现。另外两个重要的属性是 width 和 height：例 7：

该例在浏览器中将显示如下：

width 和 height 属性分别用于设置图像的宽度和高度，以像素为单位。像素（pixel）是用于测量屏幕分辨率的计量单位。（目前大多数屏幕分辨率是 1024×768 或更高）。像素跟公分不同，像素是一种相对计量单位，一个像素的实际大小跟屏幕分辨率有关。在高分辨率显示模式下，差不多 25 个像素等于 1 公分；而在低分辨率显示模式下，同样的 25 个像素大约等于 1.5 公分。

如果你没有为图像设置宽度和高度，它将按原始尺寸显示。但是如果设置了的话，你就可以控制它的显示尺寸：例 8：

该例在浏览器中将显示如下：

但是值得注意的是，虽然可以通过设置高度和宽度来控制图片的显示尺寸，但图片文件的实际大小不会因此而发生变化。所以，不要指望通过设置图片的宽度和不要指望通过设置图片的宽度和高度来减小图片文件的大小。你应该在图像编辑程序中来调整图片文件的高度来减小图片文件的大小以加快页面加载速度。不过 width 和 height 属性还是有用的，它们可以在图片被完全下载之前令浏览器知道该用多大的空间来显示图片。这令浏览器可以更快显示出美观的页面。关于图像就说这么多了。

第 10 课：表格

表格用来显示“表列数据(tabular data)”，表格用来显示“表列数据(tabular data)” 也就是那些逻辑上以行和列显示的信息。

表格难学吗？

对于初学者来说，在 HTML 中创建表格似乎比较复杂，不过只要耐心细致地观察，你就会发现表格实际上与其它 HTML 元素相似，也具有严格的逻辑结构。

例 1：

</tr> <tr> <td>单元格 3</td> <td>单元格 4</td> </tr> </table>

该例在浏览器中将显示如下：

单元格

单元格 2 单元格 3

3单元格 4

<tr>和<td>有什么区别？上例可能是到目前为止你见过的最复杂的 HTML 例子，现在让我们来逐一解释其中的各个标签的含义：用于创建表格的 3 个基本元素是：

首标签<table>和尾标签</table>分别表示一个表格的开始与结束。这是不难理解的。 tr 是“table row（表格行）”的缩写，用于表示一行的开始和结束。这 t 也容易理解。 td 是“table data 表格数据）（ ”的缩写，用于表示行中各个单元格（cell） t 的开始和结束。这些都是容易理解的。

下面是对例 1 的详细解释。表格以<table>开始，其后的<tr>表明一个新行的开始，这一行中有两个单元格：<td>单元格 1</td>和<td>单元格 2</td>。该行以</tr>结束，然后紧接着以<tr>另起一行。该行也包含两个单元格，最后整个表格以</table> 结束。直观地讲：行是横向的单元格，列是从纵向的单元格单元格 1 单元格 2 单元格 3 单元格 4 在该表格中，单元格 1 和单元格 2 构成一行，单元格 1 和单元格 3 构成一列。虽然上例中的表格只有两行和两列，但实际上，一个表格的行列数是没有限制的。

例 2：<table> <tr> <td>单元格 1</td> <td>单元格 2</td> <td>单元格 3</td> <td>单元格 4</td> </tr> <tr> <td>单元格 5</td> <td>单元格 6</td> <td>单元格 7</td> <td>单元格 8</td> </tr> <tr> <td>单元格 9</td> <td>单元格 10</td> <td>单元格 11</td> <td>单元格 12</td> </tr> </table>

该例在浏览器中将显示如下：

单元格 1 单元格 2 单元格 3 单元格 4

单元格 5 单元格 6 单元格 7 单元格 8

单元格 10单元用的格 11单元格 12 属性

表格当然有属性。比如属性 border 用于指定表格四周边框的厚度：

例 3：

<table border= "1"> <tr> <td>单元格 1</td> <td>单元格 2</td> </tr> <tr> <td>单元格 3</td> <td>单元格 4</td> </tr> </table >

该例在浏览器中将显示如下：单元格 1 单元格 2 单元格 3 单元格 4 表格边框的厚度是以象素（pixels）（参见第九课）为单位来指定的。与设定图像的显示宽度类似，象素和屏幕百分比也可以用于设定表格宽度：

例 4：

该例将在浏览器中显示一个表格，其宽度是屏幕宽度的 30％，你可以自己试一下。

表格还有其它属性吗？表格还有其它属性吗？性吗

表格有很多属性，比如下面这两个：

align：指定整个表格、某行或某个单元格里内容的水平对齐方式，比如左对齐、居中或右对齐。 valign：指定某个单元格里内容的垂直对齐方式，比如靠上、置中或靠下。

例 5：

可以往表格中插入什么？

理论上，你可以往表格中插入任何东西，诸如文本（text）、链接(links)和图像(images)等等。但是，表格是用来显示表列数据的（也就是那些以行和列显但是示来体现意义的数据），因此，不要仅仅因为你想把某些内容放在一起而使用表格。在因特网的初期（也就是几年以前），表格经常被用作网页布局的工具。但是，如果你要控制文本和图像的显示，还有更酷的方式（提示：即 CSS），有关内容将在后面作详细介绍。现在，该是你动手实践刚才所学内容的时候了，试试看设计几个具有不同尺寸、属性和内容的表格。这也许要令你忙上几个小时。

第 11 课：表格的高级特性

“表格的高级特性”这一标题听起来可能感觉挺枯燥的。但从积极的一面看，当你精通表格后，就再也没有其他有关 HTML 的内容能难住你了。

表格还有哪些相关属性？表格还有哪些相关属性？

colspan 和 rowspan 这两个属性用于创建特殊的表格。 colspan 是“column span（跨列）”的缩写。colspan 属性用在属性用在<td>标签中，来指定单元格横向跨越的列数

例 1：

该例在浏览器中将显示如下：单元格 1 单元格 2 单元格 3 单元格 4 该例通过把 colspan 设为“3”, 令所在单元格横跨了三列。如果我们将 colspan 设为“2”，则该单元格将只跨越两列，于是有必要在第一行插入另外一个单元格，以确保两行占据相同的列数。

例 2：

该例在浏览器中将显示如下： 3单元格 4单元格 5 rowspan

单元格1 单元格 2

单元格 3单元格 4

rowspan 是什么？

可能你已经猜到，rowspan 的作用是指定单元格纵向跨越的行数的作用是指定单元格纵向跨越的行数。

例 3：

该例在浏览器中将显示如下：单元单元格 2 格 3 单元格 4 1， rowspan 被设为“3”，其这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格 1 和单元格 2 在同一行，而单元格 3 和单元格 4 形成独立的两行。

上例中的单元格

上例中的单元格 1，其 rowspan 被设为“3”，这表示该单元格必须跨越三行（本身一行，加上另外两行）。因此，单元格 1 和单元格 2 在同一行，而单元格 3 和单元格 4 形成独立的两行。感觉有些迷糊？这确实比较复杂，而且容易出错。因此，在进行 HTML 编码之前，你最好先在纸上把表格设计好。明白了？那么你就自己试着用 colspan 和 rowspan 来创建几个表格吧。

页面布局（CSS）

第 12 课：页面布局（CSS）

如果能为页面实现理想的布局，岂不妙哉？

是啊，但如何实现呢？

你可以使用级联样式表（ Sheets， CSS）你可以使用级联样式表（Cascading Style Sheets，简称 CSS）为网站设计页面布局。本课将对 CSS 作简单介绍。如需从头开始全面学习 CSS 知识，可以使用我布局们提供的 CSS 教程。因此，请将本课当作 CSS 的预备课。 CSS 是 HTML 的搭档。在编码过程中，它们发挥不同的作用：HTML 负责网页的具 HTML 体内容（结构），而 CSS 则修饰网页的表现形式（布局）。正如第 7 课所讲，可以用 style 属性将 CSS 内联到网页中。

例如，你可以采用下面的方法来设置文字的字体类型和大小：例 1：

<p style="font-size:20px;" style="font-size:20px;">这里的文字大小为 20</p> <p style="font-family:黑体;" style="font-family:黑体;">这里的文字字体为黑体</p> 黑体;" <p style="font-size:20px; font-family:黑体;" style="fontfont-family:黑体;">这里是文字大小为 20、采用黑体;" 黑体的文字</p>

该例在浏览器中将显示如下：

这里的文字大小为 20

这里的文字字体为黑体

这里是文字大小为 20、采用黑体的文字

在上例中，我们使用了 style 属性来指定字体类型（font-family）和字体大小（font-size）。在最后一段中，我们同时进行了字体类型与字体大小的设置，请注意用分号将它们隔开。

页面布局似乎挺繁琐的？

CSS 有一个优越的特性，即它可以对页面布局进行集中管理在每个标签里都使用 style 属性；相反，你可以只声明一次，浏览器便会按相应的页面布局效果来显示文本。

例 2：

<html> <head> <title>我的第一个 CSS 页面</title> <style type="text/css"> {fontfont-family:宋体宋体;} h1 {font-size:30px; font-family:宋体;} {fontfont-family:黑体黑体;} h2 {font-size:15px; font-family:黑体;} {fontfont-family:"隶书隶书";} p {font-size:8px; font-family:"隶书";} </style> </head> <body> <h1>我的第一个 CSS 页面</h1> <h2>欢迎参观我的第一个 CSS 页面</h2> <p>你可以在这里了解 CSS 的原理</p> </body> </html>

在上例中，我们在文档的头部（head）插入了 CSS，它将应用于整个页面我们在文档的头部（head） CSS，它将应用于整个页面。要将我们在文档的头部 CSS 嵌入文档，你只需通过标签<style type="text/css">告诉浏览器该段为 CSS 即可。在例 2 中，所有一级标题（h1）采用宋体，字体大小为 30（象素）；所有二级标题（h2）采用黑体，字体大小为 15（象素）；普通段落文字（p）采用隶书，字体大小为 8（象素）。另一种使用 CSS 的方法，是将 CSS 代码单独作为一个文档保存。通过把 CSS 文档通过把独立出来，你就可以同时对多个页面的布局进行集中管理。独立出来，你就可以同时对多个页面的布局进行集中管理如果你要对一个大型网站上的大量网页作字体类型或大小的修改，那么这个方法绝对是最佳选择。在此，我们不对 CSS 作更深的讨论，我们的 CSS 教程最就此作详细介绍。

CSS 具有哪些其他功能？

CSS 的作用不仅仅是指定字体类型和大小，它还可以用于许多其它方面，比如设置颜色和背景等。

你可以试试下面的例子：

<p style="color:green;" >绿色的文字</p> <h1 style="background-color:blue;" style="background-color:blue;">兰色背景的标题</h1>

<body style="background-image:url('http://www.chinahtml.com/logo.png');"> style="background-image:url('http://www.chinahtml.com/logo.png');"

你可以试一下将这些示例代码插入自己的网页中，你可以采用两种方法：（1）使用 style 属性；（2）把 CSS 放在文档的头部（head）。

CSS 仅仅用于设置颜色和字体吗？

CSS 除了用于设置颜色与字体等布局之外，还可以控制页面设置与表现形式 (边距，漂浮，对齐，宽度，高度等）。通过为不同元素设置不同的 CSS，你可以令页面布局精密而美观。

例 3：

该例在浏览器中将显示如下：

我爱 CSS

float 属性用以定义元素的漂浮方式：靠左还是靠右。下例展示了该属性的用法：

例 4：

<img src="bill.jpg" alt="Bill Gates" style= "float:left;" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...</p>

该例在浏览器中将显示如下：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat... In the example, one element (the image) floats to the left and the other element (the text) fills the hole. With the property position, you can place an element exactly where you want it in your page:

例 5： <img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" /> 在该例中，图像被放置在浏览器中位于距底端 50 象素、距右边界 10 象素的位置。这里只是一个例子，实际上你可以把它放在你所期望的任何位置上。试一试吧！挺容易，而且很酷，是吧？

确实很酷。但不容易吧？

当然，你不可能在十分钟内学会 CSS。以后，你可以从我们提供的 CSS 教程中学到更多 CSS 知识。现在，让我们先把精力集中于 HTML，继续学习下一课，在那里你将学到如何在因特网上发布自己的网站，让全世界都能看到你的网站。

第 13 课：上传网页

到目前为止，只有你自己能够欣赏到你的网页。现在该让世界上其他人看看你的杰作了。

客观条件具备了吗？

客观条件均已具备——很快你也将准备完毕。只要你有一些服务器空间和一个工具就可以在因特网上发布自己的网站了。 FTP 工具

如果你已开通上网业务，因特网服务提供商（ISP）可能会赠送免费的网页空间，比如它可能具有类似这样的网址：http: //home.provider.com/~usernumber。 不过，有可能你需要先将它激活。请从因特网服务提供商（ISP）处获得有关如何激活和使用该空间的信息。如果因特网服务提供商（ISP）不提供免费网页空间，那么另外一种选择是自己上网获取免费网页空间。就像可以在 Hotmail 上申请免费 e-mail 信箱一样，你也可以在网上申请免费的网页空间。有一些公司提供这样的服务，比如Angelfire（点击“Sign Up”，并选择“free membership”即可）申请过程只需几分钟。要访问服务器，你需要知道主机名（比如 ftp.angelfire.com）以及用户名、密码即可。

需要其它工具吗？

为了能够访问服务器并上传网页，你还需要一个 FTP 工具。你可能还没有这样的工具，但幸运的是，可以免费下载到 FTP 工具。 FTP 工具有许多选择，FileZilla 是较好的 FTP 工具之一，它是完全免费的。可以从 filezilla.sourceforge.net 下载 FileZilla。

如何上传网页？

下面讲述如何通过 FileZilla 上传网页到 Angelfile 提供的免费空间。尽管针对的是个例，但这里的步骤对于其他网页空间提供商或 FTP 工具来说都是大同小异的。在计算机连接上因特网之后，打开 FTP 工具。在 Address 框里输入主机名（这里是“ftp.angelfire.com”），在 User 框里输入用户名，在 Password 框里输入密码，然后点击“QuickConnect”按钮。你现在就应该可以访问服务器了。

现在，你可以在左侧（“Local Site”）查看本地计算机上的文件，在右侧（“Remote Site”）查看服务器上的文件。

你先在左侧（“Local site”里）找到你要上传的 HTML 文档及图像，然后双击它们，将它们传到服务器（“Remote site”）上。现在全世界的人都可以看到你的网站啦！（比如，通过类似这样的网址 http: //www.angelfire.com/folk/htmlnet/page1.htm 来浏览）。如果你将一个网页文件命名为“index.htm”（或者“index.html”），那么它将自动成为站点的首页。也就是说，当你在浏览器中输入网址 http://www.angelfire.com/folk/htmlnet（未指定文件名）时，实际上打开的将是网页 http:

//www.angelfire.com/folk/htmlnet/index.htm。从长远来看，你最好购买自己的域名（www.your-name.com），而不是使用由因特网服务提供商（ISP）或者网页空间提供商免费提供的冗长而难记的网址。你可以从 Speednames 或

NetworkSolutions 等公司选购你所喜欢的域名。

第 14 课：Web 标准及验证

在这一课，你将了解一些有关 HTML 的偏理论的知识。

关于 HTML，还有什么要了解的？

你可以以多种不同的方式来编写 HTML；同时，浏览器也可以以多种不同的方式来理解 HTML。你可以认为 HTML有很多种方言。这就是为什么某些网站会在不同的浏览器上显示出不同效果的原因。

为了解决这一问题， Berners先生创办了万维网联盟为了解决这一问题， HTML 发明人 Tim Berners-Lee 先生创办了万维网联盟 World （ Consortium，W3C）标准。但这是一条漫长 Wide Web Consortium，W3C）来致力于制订通用的 HTML 标准而艰难的路程。

过去，在浏览器都要收费的年代里，Netscape 曾是占据统治地位的浏览器。那时的 HTML 标准是 2.0 和 3.2。但是，作为市场份额达 90%以上的 Netscape，它不必、同时也没有太在意通用标准。相反地，Netscape 创造了自己特有的元素，这些元素在其它浏览器上将不起作用。在很长一段时间内，微软几乎完全忽略了因特网。但不久之后，微软开始与 Netscape 竞争，并推出了 IE 浏览器。

尽管 IE 浏览器（Internet Explorer）的早期版本在支持 HTML 标准方面比不上 Netscape，但由于它是免费提供的（免费总是很受欢迎的），所以 IE 很快便成为最流行的浏览器。微软从 IE 的第 4 版和第 5 版开始致力于对 W3C HTML 标准作更多支持。 Netscape 而则没有设法开发新版浏览器，只是继续供应已经过时的第 4 版浏览器。其余的事，大家都知道，就不必提了。今天， HMTL 标准已经发展到 4.01 版和 XHMTL。现在，占据市场 90%以上的份额的是 IE 浏览器了。IE 也有自己特有的元素，但它也支持 W3C HTML 标准。同样地，其它的浏览器，比如 Mozilla、 Opera 和 Netscape 等，都是既有自己特有的元素，也同时支持 W3C HTML 标准。

因此， HTML，因此，只要你遵循 W3C 标准来编写 HTML，你的网页将永远能在所有浏览器上显示出来。幸运的是，你在本教程学到的是 XHTML，它是最新的、更严格、更纯正你在本教程学到的是 XHTML，它是最新的、更严格、示出来版本。的 HTML 版本信息？酷！如何向别人透露 HTML 的版本信息？

HTML 有很多不同种类，所以你需要告诉浏览器，你的 HTML 使用的是哪种“方言” （比如 XHTML）。具体做法是采用文档类型声明。文档类型声明应写在 HTML 文档的开头部分：例 1：

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>网页标题</title> </head> <body> <p>一些文字</p> </body> </html>

除了要给出文档类型声明以外（上例中第一行，它告诉浏览器这个文档是 XHMTL）还需要在 html 标签中加入一些信息，，也就是添加两个属性 xmlns 和 lang。 xmlns 是“XML-Name-Space”（XML 名称空间）的缩写，其值固定为 http://www.w3.org/1999/xhtml。关于名称空间，你只需了解这么多。但如果 http://www.w3.org/1999/xhtml 你希望作更多了解的话，可以登录 W3C 网站阅读有关名称空间（namespaces）的内容。 lang 属性用于指定当前文档所使用的语言，其值采用 ISO 639 标准中列出的世界各国语言代码。上例中，我们指定文档采用的语言为英语（对应的属性值为 “en”）。通过 HTML 文档头部的文档类型声明，浏览器可以知道如何读取和显示你的 HTML。今后，可以使用上例作为模板来编写你的 HTML 文档。

此外，文档类型声明在验证网页时也很有用。

验证？为什么要验证文档？如何验证呢？

你可以用 W3C 的免费验证器（validator）来检查你的 HTML 文档是否符合你在文档类型声明中所指定的类型。为了测试如何验证文档，请编写一个网页并将它上传到因特网上，现在，打开网页 validator.w3.org，在网页里输入你网页的网址（URL），然后验证它。如果你的 HTML 没有错误，将显示成功信息。否则，你将会得到错误报告，它会详细告诉你出错的位置和原因。你可以在网页里故意制造一些错误，看看会返回什么样的结果。这个验证器不仅仅对找错有帮助。有些浏览器会尽量修复 HTML 中的错误，按照它们推测的正确结果去显示网页。使用这样的浏览器，你会忽视网页中存在的错误。而该网页在其它的浏览器上看到的效果可能会截然不同，甚至根本无法显示。所以，可以用验证器帮你找到可能被你忽视的错误。请始终坚持验证你的网页，以确保它们能正确地显示。

第 15 课：最后提示

祝贺！你已经进入最后一课了！

我已经学到全部知识了？

你已经学到了很多关于 HTML 的知识，并且完全有能力创建自己的网站！不过，你所学到的只是基础知识，还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。在最后这一课中，我们将给予一些最后提示：

首先，在 HTML 文档中，应保持正确的顺序与结构。令你的 HTML 文档具有良好的顺序与结构，不仅可以展示你的 HTML 技能，而且也方便自己阅读。遵循标准，并且坚持验证网页。值得反复强调的是：确保编写纯正的 XHTML，采用文档类型声明，并在 validator.w3c.org 上验证网页。丰富网页的内容。记住，HTML 只是为你提供在因特网上展示信息的途径，而具体信息应由你来提供。尽管漂亮的页面令人赏心悦目，但大多数人希望在因特网上获得有用的信息。避免在网页里嵌入过多图片等花哨的东西。它们会降低网页的打开速度，并且有可能令浏览者感到不知所措。如果一个网页的打开时间超过 20 秒，那么它将失去高达 50％的访问者。

记得把你的网站加入到搜索引擎/目录里，这样可以让更多人找到并欣赏你的网站。一般来说，你可以在各大搜索引擎（最主要的是 Google，不过也有其它的，比如 DMOZ、Yahoo、AltaVista、AlltheWeb 和 Lycos 等） 首页找到登录网站的链接。在本教程中，你已经学会使用记事本来编辑 HTML，它是一个简单易用的编辑器。不过也许你会发现使用更高级的编辑器更有助于编写 HTML，因为它们能够提供较好的视图和更多的功能。你可以从 Download.com 网站上找到对不同编辑器的简要介绍及评论。

如何进一步学习？

首先，继续实践本教程所讲的内容是非常重要的。第二，研究别人的网站，你可以通过“查看源文件”（在浏览器的菜单栏上点击“查看”，然后选择“源文件”）来了解别人的网页是如何编写的。

第三，在因特网上搜索 HTML 的示例与文章。网上有许多站点都有非常好的 HTML 内容。第四，在众多网上讨论版上学习并提问。两个最好的去处是：Newsgroups 和 Experts Exchange。在那里，你会遇到真正的专家，并能从他们那里学到很多东西。最后一点，但也同样重要，你应当在适当的时候继续学习我们提供的 CSS 教程。最后就是祝你与你的新朋友 HTML 相处愉快。。

Let It Be!

一分钟快速开通线上知识店铺