HTML: 简易入门 | Linux Journal

HOWTOs (操作指南)

作者：Eric Kasten

于 1995 年 7 月 1 日

超文本标记语言 (HTML) 是一种简单的语言，用于表示文档格式样式以及指向其他文档或媒体类型（如图像或录音）的链接。HTML 可以用于创建包含样式（如带下划线或粗体文本）的文档。它还可以用于将文本、图像和声音混合到单个文档中，这些文档的各个元素可能位于世界各地地理位置分散的系统中。

HTML 旨在为万维网创建文档，它有助于确定当您使用您最喜欢的 WWW 浏览器浏览文档时显示的内容。您可以使用它来创建您的主页或欢迎页面，或者创建研究文档、文章或书籍。然后可以在本地查看此文档，或者通过使用 WWW 服务器（例如 NCSA 或 CERN 的 httpd 守护程序）使其可供其他网络冲浪者查看。本文向您介绍 HTML 基础知识，以便您可以开始创建自己的 HTML 文档。

文档标签

您可以使用您喜欢的文本编辑器来创建 HTML 文档。文档将由文本（将直接显示给用户）和标记标签组成，这些标签用于修改文本的外观或将图像或声音合并为文档的一部分。标签也用于引用其他文档或文档内的不同位置。文档引用被称为 超文本链接 或简称为“链接”。

用于指示特定格式开始的标签表示为一对尖括号括起来的标签名称。要指示格式的终止，标签名称以 / 为前缀。例如，斜体 将以斜体格式显示单词“斜体”。让我们检查一个简单的 HTML 文档。

<HEAD>
<TITLE>Sample Document</TITLE>
</HEAD>
<BODY>
<H1>A Sample HTML Document</H1>
Here is some <B>Bold text</B>,
and here is some <I>Italic text</I>.
</BODY>

这使用了几个基本标签。<HEAD> 和 </HEAD> 标签之间的文本是文档标题。标题包含一个 <TITLE> 标签，它指示文档标题标签的开始，并由 </TITLE> 终止。标题通常不会作为文档文本的一部分显示在大多数浏览器中，而是显示在特殊位置。例如，Mosaic 将标题显示在浏览器窗口顶部的标题框中。

标题之后是文档的主体，它包含在 <BODY> 和 </BODY> 标签之间。在主体内部，<H1> 表示一级文档标题的开始。标题共有六个级别。级别每增加一级，标题显示的突出程度就会降低。例如，您可能希望使用 H1 标题在文档文本中显示文档标题，然后使用 H2 表示子标题。

现在可能是提及标签不区分大小写的好时机。因此 <TITLE> 和 <title> 是相同的标签；但是，为了清晰起见，我将继续大写文档标签。

物理格式样式标签

物理格式样式用于指示显示文本的具体物理外观。以下是物理格式标签的列表

文本: 以粗体显示文本。
文本: 以斜体显示文本。
文本: 以下划线显示文本。
<TT>文本</TT>: 使用打字机字体显示文本。

物理格式的问题在于，不能保证特定的浏览器会按预期显示文本。用户可以修改浏览器使用的字体，或者浏览器甚至可能没有指定的字体样式。例如，如果使用文本模式浏览器显示文档，则斜体文本很可能根本无法显示。为了避免与物理格式显示相关的歧义，您可以使用逻辑格式标签。事实上，通常建议您尽可能使用逻辑格式标签，而不是物理格式标签。

逻辑格式样式标签

我已经向您介绍了一种逻辑格式。H1 到 H6 标题样式是标题的逻辑格式。如果 HTML 中存在物理标题样式，您将必须为每个标题指定特定的字体和字体大小（例如，30 磅 Courier 字体）。以下是一些更常见的逻辑格式样式的列表

<CITE>文本</CITE>: 当文本是创意作品（如书籍）的标题时使用。
<CODE>文本</CODE>: 当文本是一段计算机代码时使用。
文本: 以强调方式显示文本。
<SAMP>文本</SAMP>: 当文本是一段示例输出时使用。
文本: 以强烈强调方式显示文本。

特别值得注意的是，在样式实践中，最好使用 EM 逻辑样式代替斜体物理样式，并使用 STRONG 逻辑样式代替粗体物理样式。

分页符、水平线和预格式化文本

回车符和空格通常在 HTML 中被忽略。这样做是因为不同的浏览器具有不同的显示能力。一个浏览器可能能够显示 100 个字符的行，而另一个浏览器可能无法显示。当需要强制换行时（例如在段落之间），这就成了一个问题。创建了特殊标签，以便作者可以在文档中强制换行。以下是可以用于强制文档换行的标签列表

: 强制段落换行。
 : 强制换行。
<HR>: 强制换行并带有水平线。

作为一般说明，最好以保持文档设备独立性的方式使用换行命令以及其他 HTML 指令。您的读者使用的浏览器可能会以不同的行长格式化文档。如果您在纸质文档中找到的每个换行符处使用 BR 指令将其转换为 HTML，则浏览器也可能会插入额外的换行符。这可能会导致文档看起来断断续续，可能交替出现长行和短行。

请注意，这些换行标签没有关联的结束标签。例如，  没有关联的 。

如果您确实想要完全按照键入的方式显示某些内容，HTML 提供了一个标签来保留预格式化文本的格式。<PRE>文本</PRE> 指令指示浏览器完全按照文档中键入的方式显示文本。再次强调，请记住，某些浏览器的特性可能会使其难以按照您期望的确切格式显示文本。

列表和定义

HTML 提供了项目符号列表和编号列表。以下是 HTML 代码的示例，它将生成项目符号或无编号的项目列表

<UL>
<LI>Apples
<LI>Oranges
<LI>Pears
</UL>

<UL> 标签表示无编号列表的开始。列表中的每个项目都以 <LI> 标签开头，以指示列表中新项目的开始。请注意，<LI> 标签没有结束标签，并且在显示时，每个列表项将由回车符分隔。

要将此列表更改为编号列表，只需将 <UL> 和 </UL> 标签更改为 <OL> 和 </OL> 标签。编号列表将在列表中显示每个项目，并在其前面加上数字而不是项目符号。

另一种类型的列表是定义或描述列表。以下是演示如何编写定义列表的 HTML 代码片段

<DL>
<DT>Apple
<DD>A red colored fruit
<DT>Orange
<DD>An orange colored fruit
</DL>

<DL> 标签开始一个定义列表，</DL> 标签结束列表。<DT> 表示要定义的术语，而 <DD> 表示术语定义。当浏览器格式化列表时，每个术语和定义将在单独的一行上：术语通常是左对齐的，定义直接在其下方缩进。

示例文档

让我们看一个示例文档，其中包含我刚刚解释的许多文本标记。示例文档的 HTML 源代码列在下面，格式化的文档（由 Mosaic 显示，如我配置的那样）显示在下面的图 1 中。

图 1。

<TITLE>Example Document 1</TITLE>
</HEAD>
<BODY>
<H1>Example Document 1</H1>
<HR>
<H2>A Few Physical Styles</H2>
<I>This is in italics</I><BR>
<B>This in in Bold face</B><BR>
<U>This is underlined</U><BR>
<H2>A Couple Logical Styles</H2>
<EM>This is text is displayed with
        emphasis</EM><BR>
<STRONG>This text has strong emphasis</STRONG><P>
<H2>An Unnumbered List</H2>
<UL>
<LI>Apples can be red
<LI>Oranges can be orange
</UL><P>
<H2>A Definition List</H2>
<DL>
<DT>Term One
<DD>This is a short definition.
<DT>Term Two
<DD>This is a much longer definition, which
demonstrates what happens when a definition is
carried over to more than one line.
</DL>
</BODY>

请注意浏览器如何显示此文档的一些有趣之处。标记为带下划线的文本未显示为下划线。这证明了物理样式的危险之一——某些浏览器可能不支持或可能无法按预期显示物理样式。另请注意，斜体文本看起来像强调文本，粗体文本看起来像强文本。请注意 BR 和 P 换行标签的使用，以及多行定义的显示。

URL

统一资源定位符 (URL) 旨在提供一种标准格式，通过该格式指向文件。该文件可能存在于浏览器可以访问的任何网络可访问的机器上，并且可以使用各种协议访问文件。URL 的通用格式为：协议://主机.域名[:端口]/路径/文件名

协议指示浏览器应如何与请求文件的主机通信。可能最常见的协议是 http、file、gopher 和 ftp。http 协议指示浏览器应使用超文本传输协议联系服务器，该协议由旨在服务 HTML 文档的服务器使用。file 协议用于从本地目录检索文件。许多浏览器还支持 ftp 协议，用于使用匿名 ftp 检索非本地文件。gopher 协议用于从 gopher 服务器检索文档。

主机.域名 是远程服务器的主机名和域名，以便联系以检索文档。如果文档在本地系统上，您可以创建一个不指定 主机.域名 的部分 URL。为此，您需要从 URL 中省略 //主机.域名。在 主机.域名 之后是可选的（如“[ ]”字符所示，不应输入）端口，用于连接以检索文档。此选项通常被省略，因为大多数远程服务将在远程系统上的众所周知的端口上提供。例如，http 协议通常在端口 80 上找到，而 gopher 在端口 70 上找到。省略端口时，也省略“:”字符。

路径用于指示所需文档的目录位置。文件名 规范指示文档存储在服务器上的文件名。

例如，如果您想查看文档 foo.html，您知道它位于服务器 remote.host.name 的目录 /docs/ 中，您可以使用 URL

http://remote.host.name/docs/foo.html

然后您的浏览器将显示 foo.html 文档。值得注意的是，许多浏览器将使用文件扩展名来帮助确定如何显示文档。例如，.html 通常用于 html 文档，而 .text 用于文本文档。因此，通常最好将标准扩展名附加到您的文档，以帮助确保它们能够正确显示。您可能需要参考浏览器上的文档，以确定支持哪些文件扩展名，尽管现在许多浏览器都在参考 mailcap 文件以帮助确定特定扩展名的解释。

引用

我们为什么要关心 URL？URL 用于引用您可能想要包含或具有超文本链接的图像、声音和其他媒体文件。URL 也用于创建指向其他文档的链接。让我们看一个如何在文档中包含内联图像的示例。

<IMG SRC="http://remote.host.name/gifs/foo.gif">

IMG 标签有一个属性，一个规范，指示标签的特定特征。在这种情况下，SRC 属性指示标签引用的图像。假设您的浏览器能够显示内联 GIF，则 foo.gif 将与包含 IMG 引用的文档文本一起显示。请记住为图像引用使用正确的文件扩展名。浏览器将使用扩展名来确定如何正确显示图像。例如，.gif 用于 GIF 图像，而 .xbm 用于 X 位图。

要创建指向另一个 HTML 文档的超文本链接，您可以使用以下 HTML 指令

<A HREF="http://remote.host.name/docs/foo.html">Foodocument</A>

这是一个锚点的示例。锚点使用 A 标签指定，该标签通常具有 HREF 属性。与 IMG 标签不同，锚点必须使用 </A> 终止。在此示例中，“Foo document”将在文档中显示为指向 foo.html 的超文本链接或锚点。许多浏览器将使用彩色文本或其他指示来显示此锚点，表明该文本表示链接。当读者选择这样的锚点时，浏览器将尝试检索 HREF 属性指定的文档。

超文本链接也可能指向使用外部查看器查看的图像或在选择链接时播放的声音。图像可以用作链接，而不是使用文本。以下代码演示了如何执行此操作

<A HREF="http://remote.host.name/docs/foo.html"></A>
<IMG SRC="http://remote.host.name/gifs/foo.gif"></A>

在此示例中，IMG 标签用作 foo.html 的锚点。这有效地使内联 foo.gif 成为用户选择的锚点。作为图像的锚点提出了另一个问题。文本模式浏览器将如何呈现图像？如果它无法呈现图像，用户将如何选择链接？幸运的是，HTML 为 IMG 标签提供了额外的属性。ALT 属性可用于指定文本字符串作为显示图像的替代方案。可以按如下方式完成此操作

<IMG SRC="http://remote.host.name/gifs/foo.gif" ALT="FOO">

ALT 属性对于提供文本浏览器可以使用的方法来显示内联徽标或一些不一定是超文本链接的其他图像也很有用。

第二个示例文档

现在让我们看第二个示例文档，其中包含内联图像和锚点。第二个示例文档的 HTML 源代码如下所示。图 2 显示了 Mosaic 可能如何显示此文档。

<TITLE>Example Document 2</TITLE>
</HEAD>
<BODY>
<H1>The Second Example Document</H1>
<HR>
<IMG SRC="http://remote.host.name/gifs/foo.gif"> An inline image
<HR>
 This is an <A HREF="http://remote.host.name/docs/foo.html">
anchor</A> to the foo.html document.
<HR>
<A HREF="http://remote.host.name/docs/foo.html">
<IMG SRC="http://remote.host.name/gifs/foo.gif" ALT="FOO!!!"></A>
This image is also an anchor to the foo.html
document.
</BODY>

请注意锚点 anchor 如何嵌入到文档文本中，内联图像也是如此。此外，文档文本与图像底部对齐。可以通过使用 IMG 标签的 ALIGN 属性来更改此设置。这是一个将文本与图像中心对齐的示例

<IMG ALIGN=middle SRC="http://remote.host.name/gifs/foo.gif">

top 和 bottom 也是 ALIGN 属性的有效选项。

在线 HTML 参考资料

进一步探索的内容

本文仅旨在向您介绍 HTML。HTML 包括其他未涵盖的逻辑样式，并提供了显示特殊字符的方法。HTML 可以用于构建表单，用户可以填写表单并通过表单与服务器交互。简而言之，有许多比我在这篇文章中有空间介绍给您的途径要多。享受使用 HTML 制作您自己的 WWW 浪潮吧！

Eric Kasten 自 1989 年以来一直是一名系统程序员。目前，他正在密歇根州立大学攻读计算机科学硕士学位，他的研究重点是网络和分布式系统。经过深思熟虑的评论和问题可以发送至 tigger@petroglyph.cl.msu.edu。您也可以访问他的主页 petroglyph.cl.msu.edu/~tigger。

加载 Disqus 评论