Dave Ragget写作的HTML入门系列教程

【 tulaoshi.com - Web开发 】

　　什么是HTML？它是一种被浏览器使用来呈现文本和图形的特殊文本文档。 文本包含像p一类的标记来修饰一个段落的开始，/p则修饰一个段落的结束。 “HTML文档”通常也被称作“网页”。 浏览器从Web服务器请求网页，由于因特网，它能传播到世界各个角落。

　　许多人仍然使用像Linux™平台上的Kate、Geany、VIM[1]，Mac™平台上的TextEdit，Windows™平台上的NotePad工具来亲手编写HTML。这篇指南会手把手教您这些。 即使您不是打算直接编辑HTML，而是计划使用像Netscape Composer，或W3C的Amaya这样的HTML编辑器， 这份指南一样能帮助您充分明白更好地利用这些工具和如何制作能在更多种类浏览器上访问的HTML文档。 当您掌握HTML基础后，您可能会想学习如何使用CSS添加一个样式，与及从《HTML进阶》学习更多，体验更多HTML特性。

　　译注[1]：英文原文没有提及Linux™平台，第一句笔者略作修改

　　值得一提的是，通过点击“查看”菜单，然后点击“页面源代码”，查看别人是如何编写他们的HTML页是一个很好的学习方式。 在一些浏览器上，您操作可能是点击“文件”，然后点击“查看”。尝试查看当前页源代码，了解我在下面解释的意图。

　　[2]对于Linux™/类Unix™用户，如果在GNOME桌面环境，推荐使用Geany编辑器，如果在KDE，推荐使用Kate编辑器， 如果使用其它其它桌面环境或者窗口管理器可以尝试VIM或者Emacs。 它们都有非常人性化功能：

　　语法着色

　　自动补全

　　显示行号

　　代码块折叠

　　译注[2]：英文原文没有提及Linux平台，该段内容为笔者添加

　　对于Mac™用户，在保存一个为扩展名是“.html”的文件前，您需要确保您的文档已经格式化为纯文本。 对于TextEdit，您能通过“格式“菜单“制作纯文本”选项设定。

　　对于Windows™用户，使用cpp是一个不错的选择[3]

　　译注[3]：此句为笔者添加

　　这个页面会教您如何：

　　开始一个主题

　　添加标题和段落

　　为您的文本添加斜体字

　　添加图像

　　添加指向其它页面的链接

　　使用多种列表

　　如果您想学习更多其它知识，请查看《HTML进阶》

　　开始一个主题

　　每一个HTML文档都需要一个主题。您需要输入这些：

　　title我的第一个HTML文档/title

　　可以更改“我的第一个HTML文档”来满足您自己的需要。 这个title文本被以title为开始标记，相应的/title为结束标记。 该主题应该写在您文档的开始部分。

　　要试验它，可以在文本编辑器里面输入上面的代码并保存文件为“test.html”，然后在一个浏览器中查看这个文件。 如果该文件的扩展名是“.html”或者“.htm”，浏览器会把它当作HTML。大部分浏览器会在窗口标题栏显示该主题。 除了一个主题，浏览器将显示一个空白页。别着急，下一节将说明如何添加可显示的内容。

　　添加标题和段落

　　如果您使用过微软的Word，您会觉得很像为不同级别强制性标题设置样式。 在HTML中有六种级别的标题。H1表示最高强调，H2较前者略减，依次到强调性最弱的H6。

　　下面是如何添加一个强调标题

　　h1一个强调的标题/h1

　　这里是一个次于最高级别强调的标题：

　　h2一个次于最高级别强调的标题/h2

　　您编写的每一个段落都应该使用一个p标记开始，/p是可选的，跟标题元素结束标记不一样[4]。例如：

　　译注[4]：笔者认为

　　标记都是以？和/？的形式包含文本，本文内容按需求而定

　　标记具体名称（？中的“？”）不一样，但是大体结构上一样。却都有和，起始是？，结束是/？

　　p这是第一段。/p

　　p这是第二段。/p添加一些斜体字

　　您能使用em标记斜体化一个或多个字。实例：

　　这确实是一个 em有趣的/em 话题！添加图象令您的页面更有趣

　　使用图象不但能令您的网页有特色，还有助于理解您想表达的信息。添加图象的一个简单方法是使用img标记。 我们假定您有一个名为“peter.jpg”图象文件与您的HTML文件在同一个文件夹／目录里。它200象素宽，150象素高。

　　img src="peter.jpg" width="200" height="150"

　　src属性为图象文件名。宽度和高度并不严格需要，但加上它有助于加快显示您的网页。有些仍是不可见的。 人们看不见图象时需要一个替代描述。您可以添加一个像下面的简短描述：

　　img src="peter.jpg" width="200" height="150" alt="我的朋友彼得"

　　在这个“我的朋友彼得”例子里，alt属性被使用来添加一个简短的描述。对于复杂图象，您也许还需要提供一个详细描述。 假定已经把它写入“peter.html”文件，您可以像下面一样使用longdesc属性添加一个：

　　img src="peter.jpg" width="200" height="150" alt="我的朋友彼得" longdesc="peter.html"

　　您可以通过多种方式创建图象，比如从一部数码相机扫描一张，或者绘画或绘图程序创建。 大部分浏览器识别GIF和JPEG图象格式，比较新的浏览器可以识别PNG图象格式。通过网络下载图象时，您应该避免使用大图象文件以免慢长延时。

　　一般来说，对于相片和其它需要平滑地改变的图象来说，JPEG是最好的选择，但对于色彩单调的区域，线条和文本等艺术图形，GIF和PNG也是一个不错的选择。 三种格式的支持选项不断地改进[4] ！！！

　　译注：[4]

　　添加转到其它页面的链接

　　网络如此有影响力是因为它能定义从一个页面到另一个页面的链接，链接是一个可点击的按钮。一个单一的点击能令您穿越世界！

　　a标记定义链接。让我们定义一个链接，在“peter.html”文件中定义一个链接到页面，与您正在编辑HTML文件在同一个文件夹／目录。

　　这是一个链接到a href="peter.html"彼得的页面/a。

　　a和/a之间的文本为链接的标题。标题通常是带下划线蓝色文本

　　如果您的链接指向的文件在一个父文件夹／目录，您需要在它前面加上“../”，例如：

　　a href="../玛丽.html"玛丽的页面/a

　　如果您的链接指向的文件在一个子目录，您需要在它前面加上一个“/”。

　　a href="friends/sue.html"苏的页面/a

　　使用相对路径允许您通过遍历目录树，链接到一个您需要的文件，例如：

　　a href="../大学/朋友们/约翰.html"约翰的页面/a

　　首先在父目录找到名为“大学”目录，然后在该目录的子目录中找到名为“朋友们”，最后在"firends"目录下找到一个名为“约翰.html”的文件。

　　要链接到另一个网站的一个页面，您需要给出完整网站地址（通常被称为一个“统一资源定位器”，Unite Research Localizer）， 例如链接到www.w3.org，您需要这样写：

　　这个链接到a href="http://www.w3.org/"W3C/a.

　　您可以转换一幅图象为一个超文本链接，例如，允许您通过点击公司标识跳转到主页：

　　a href="/"img src="标识.gif" alt="主页"/a

　　这里使用“/”指向目录树的根目录，也就是主页所在位置。

　　三种列表

　　HTML支持三种列表。第一种是子弹开型列表，通常被称为无序列表。它使用ul和li标记，例如：

ul
　li第一个列表项/li
　li第二个列表项/li
　li第三个列表项/li
/ul

　　注意您始终需要使用/ul结束标记来终止列表，但/li是可选的，它可以自动终止。 第二种列表是一种编号列表，通常被称为有序列表。它使用ol和li标记，例如：

ol
　li第一个列表项/li
　li第二个列表项/li
　li第三个列表项/li
/ol

　　跟子弹型列表一样，您始终需要使用/ol结束标记来终止列表，但/li是可选的，它可以自动终止。

　　第三种也是最后一种是定义列表。它允许您列示项和项的解释。这种列表使用dl标记开始，使用/dl结束， 每一个项使用dt标记开始，第一个解释使用dd开始，例如：

dl
　dt第一个项/dt
　dd它的解释/dd
　dt第二个项/dt
　dd它的解释/dd
　dt第三个项/dt
　dd它的解释/dd
/dl

　　结束标记/dt和/dd是可选的，它可以自动终止。注意列表可以嵌套，一个被另一个包含，例如：

ol
　li第一个列表项/li
　li
　　第二个列表项
　　ul
　　　li第一个嵌套项/li
　　　li第二个嵌套项/li
　　/ul
　/li
　li第三个列表项/li
/ol

　　对于更长的列表项，您还可以充分使用段落和标题等等。

　　HTML有一个标头（head）和一个主体（body）

　　如果您使用网络浏览器的查看源代码特性（留意“查看”或者“文件”菜单），您能看见HTML页面的结构。 该文档一般以一个使用哪个版本HTML的定义为开始，然后跟着的是html标记，接着是head，最后是/html。 html&gtl;……/html就像一个装载文档的容器。head……/head包含标题、关于样式表和脚本信息， body……/body包含标记和可示内容。您可以把这里的一个模板复制粘贴到您的文本编辑器，然后创建您自己页面：

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
　　"http://www.w3.org/TR/html4/loose.dtd"
html
head
　title 替换为您的文档标题 /title
/head
body
替换为您的文档内容
/body
/html

　　整理您的标记

　　有一个很方便的方法自动修复标记错误，那就是使用HTML Tidy[5]， 它能整理标记以便让它容易阅读和编写。 我推荐您定期地运行Tidy整理您正在编写的标记。Tidy对于清理有马虎习惯的人使用编辑工具创作代码非常有效。 TidyLib Sourceforge site上Tidy在多种操作系统可用， 它已经被整合进众多HTML编辑工具。

　　译注[5]：tidy《牛津现代英汉双解词典》的解释是“整整齐齐的房间、 书桌、 花园”，根据语境，可以理解为“整理器”。

　　获取更多信息

　　如果您想学习更多其它知识，我已经准备一些相关资料在《HTML进阶》和 《添加一个样式》

　　W3C关于超文本标记语言 4.0的推荐是HTML的权威规范。 不想纠缠于枯燥的学术性信息，又想掌握HTML，您应该购买一些书，例如，《Raggett on HTML 4》， 扩展超文本标语言 1.0（XHTML 1.0）目前是W3C一个推荐。

　　[6]

　　译注[6]：HTML4.0是过时的，XHTML1.0目前流行、将来更流行的标准，但是学习XHTML1.0需要HTML 4.0的基础。

　　愿您顺利！