创建简单网页

是时候让我们动手了！（从某种意义上说。）

文本结构

在第一章中，我们阐述了学习本课程的要求，并提供了一个简单的练习，让您创建第一个简单的网页。如果您还没有完成该练习，请现在去做。

输入文本编辑器并保存到硬盘或其他存储介质的文本通常称为“纯文本文件”。纯文本文件通常提供三种简单的方法来分隔文本。制表符和空格用于分隔单词，回车用于分隔段落。

人们已经找到了使用这些简单的标记方法来制作复杂布局的创造性方法。然而，在网页中，这种布局文本的方法行不通。网页浏览器会将所有连续的空格、制表符和回车折叠成一个空格或软回车，具体取决于单词在行上的位置。HTML 采用完全不同的布局方式，我们将在后面讨论。

当您构建文本时，通常是为了使其更容易消化和阅读。通过使章节和标题更加突出，您允许读者浏览文本，直到找到特别感兴趣的部分。通过使用引言和摘要，您可以让读者决定是否对该文本感兴趣。您可以使用插图，因为有时人们在看到发生的事情时更容易理解。

HTML（网页超文本标记语言）及其后继者 XHTML（可扩展超文本标记语言）允许您对纯文本文档施加结构。它用自己的方法取代了纯文本允许的几种简单的标记方法。（注意：XHTML 已被 HTML5 取代。）

HTML 通过允许您将文本的某些部分标记为标题、段落、图像、表格、列表等来实现这一切。HTML 不支持某些结构，因为它是一种相对简单的标记语言。例如，没有用于引言或导语的元素。读者必须从文本中的位置推断出引言、导语或摘要。

HTML 文档的每个部分称为元素。元素通过一种称为标签的标签彼此分隔。

一个例子

 <p>This is an <em>important</em> example.</p>

您在上面看到的是一个包含嵌入式强调元素的段落元素。段落元素以<p>标签开头，以</p>标签结尾。强调元素以<em>标签开头，以</em>标签结尾。

网页的另一个名字...

HTML 标准有几个版本。最新的版本是 HTML5。但是，网页浏览器也应该支持标准的旧版本，因此像“要求”章节中给出的示例这样的示例被认为是有效的 HTML 文档。

每个网页都必须包含一个title元素（在 HTML 的旧版本中，这是唯一必需的元素）

 <title>My webpage</title>

标题是浏览器窗口用来命名的文本。它是出现在浏览器窗口顶部的文本，也是浏览器使用的书签（或收藏夹）的默认名称。它也是搜索引擎用来列出页面的标题。

找到一个描述性的标题。您页面的标题通常就可以了。本章的标题是“创建简单的网页”，因此它的标题可以是相同的文本。由于此网页向您解释如何创建简单的网页，因此这是一个绝佳的标题。

互联网上充斥着糟糕的标题。例如，一家公司可能会将其页面命名为

 <title>Big Fridge Manufacturer Inc.</title>

如果您幸运，他们甚至会添加一些与您访问的网页相关的资料，例如

 <title>Big Fridge Manufacturer Inc. - Manual of the Cool 3000 ice box</title>

对于访问者来说，更好的是

 <title>Manual of the Cool 3000 ice box - Big Fridge Manufacturer Inc.</title>

毕竟，访问者更有可能访问此页面是为了寻找手册，而不是寻找公司资料。

因此，教训是：始终将重要信息放在首位。通常，您在书签菜单、搜索引擎列表或窗口标题栏中只有有限的字符可用；请最大限度地利用这些空间。

只有标题元素的 HTML 文档没什么用。我们现在将向您介绍一些元素，让您能够充分利用网络 90% 的功能。

一个简单的链接网页

title: 页面的名称。
h1: 页面上最重要的标题（通常与标题相同）。
h2: 副标题。
p: 段落。
a: 链接。

使用这些元素，我们可以制作以下简单的网页

<!DOCTYPE html>
<html>
 <head>
  <title>Friends and family of Clemence Wylie</title>
 </head>
 <body>
  <h1>Friends and family</h1>
  <p>The following are links to the websites of my friends and family</p>
  <h2>Friends</h2>
  <p><a href="http://www.tomsawyer.us">Tom Sawyer</a></p>
  <h2>Family</h2>
  <p><a href="http://www.tantejeanette.ca">Aunt Jeanette</a></p>
 </body>
</html>

练习 2-1

将上面的示例代码复制到您的文本编辑器中。将其保存为 exercise2-1.html。在网页浏览器中打开它。它显示得像您预期的那样吗？

答案

有关答案，请参阅问题和练习答案.

创建链接

前面示例中的a标签具有特殊用途。它们创建锚点。（锚点通常被称为“链接”。）它们包含具有附加值的属性。属性是标签的一部分，它向浏览器提供有关元素的附加信息。每个属性后面都跟着一个等号（=）和一个用引号（"）括起来的値。

a标签有几个可能的属性。最重要的属性是href和id。href是定义 URL（统一资源定位符）或 URI（统一资源标识符）（通常称为“地址”）的属性。这是链接指向的目的地：另一个文档，或同一个文档中的某个位置。通常，地址称为 URL；但是，这种做法已经过时，现在建议您使用更广泛的术语“URI”，而不是 URL。^[1]

id是链接的唯一名称，其他链接可以使用它来引用该链接。

（注意：以前的 HTML 版本使用name而不是id。）

URI 通常具有以下形式

protocol://domain/path#named_anchor

例如

https://www.example.com/books.html#section2

网页的协议通常是http（超文本传输协议）或其安全变体https。在本例中，链接将带您到www.example.com域上的books.html文档的section2部分，使用https。

但是，请注意，这其中的大多数部分是可选的，具体取决于您希望如何使用 URI。URI 可以是相对的，也可以是绝对的。绝对 URI 将包含域作为地址的一部分。（www.example.com部分。）

一个href可以只是一个相对路径（例如wines/french/red/bordeaux.html）：在这种情况下，地址将根据包含链接的页面计算得出。

href 也可以只是一个域名：http://www.example.com/ 将链接到该地址的网站；该网站的 Web 服务器应该弄清楚你想要哪个文档。这通常默认为 index.html 或 default.htm。

元素分解

一个 HTML 文档由元素组成。这些元素的构建方式如下

<tag>;contents</tag>

开始标签可以包含属性。属性通常具有值。

<tag attribute1="value" attribute2="value2" attribute3>

关闭元素的标签与开始标签相同，只是在名称前有一个斜杠，并且不能包含属性

</tag>

有些元素不能包含其他元素。HTML 标准定义了哪些元素可以被某个元素包含。允许的组合在不同的版本中有所不同。

元素要么是块级元素，要么是内联元素。对于块级元素，浏览器会在自己的“块”中设置元素。它在元素前后都放置一个回车符。一些示例包括标题（h1、h2、h3 等）、段落（p）和列表项（li）。内联元素不会以这种方式处理，因此（例如）它们可以插入到段落中而不会破坏段落的流程。这方面的一些好例子包括锚点（a）、强调（em）和图像（img）。

块级元素可以包含内联元素，但内联元素不能包含块级元素。

例如，以下 HTML 是有效的

 <h1><a>Valid HTML</a></h1>

但这不行

无效：<a>

无效 HTML

</a>

</syntax>

有效性

术语“有效 HTML”已经提到过几次。由于网页是由人编写的，而人会犯错，因此 Web 浏览器往往对这些错误非常宽容。他们甚至会尝试纠正你的错误。

尽管如此，仍然有几个理由让你应该尝试用有效的 HTML 来标记网页

不同的浏览器可能会以不同的方式纠正你的错误
未来的浏览器可能不会像现在这样宽容
有效的 HTML 更容易阅读和维护
在尝试纠正错误的标记时，如果你没有被其他可能的错误所困扰，这将很有帮助

负责维护 HTML 标准的组织是万维网联盟。它运行着一个验证服务，你可以用它来检查你的 HTML 是否有效。你可以在 http://validator.w3.org 找到它。使用此服务验证你的 HTML 是一个好习惯。

一个常见的错误是忘记在每个文档开头使用 DOCTYPE。没有 DOCTYPE 的文档会自动失效 (HTML 版本信息)。注意：许多文本错误地指出 DOCTYPE 是可选的。所有主要浏览器都会容忍 DOCTYPE 的缺失，但这并不意味着页面有效。如果省略了 DOCTYPE，页面的外观可能会在不同的浏览器之间明显不同，因为每个浏览器在渲染此类页面时都有自己的特殊之处。

练习

是时候玩一玩了。以下练习将让你制作一些简单的网页和网站。目标是教你多种链接方式的力量。

练习 2-2

将上面的示例网页复制到剪贴板，然后打开 http://validator.w3.org。将示例粘贴到“通过直接输入验证”部分，然后单击“检查”。示例有效吗？

练习 2-3

如果你有一个锚点 <a id="anchor1"></a>，那么 <a href="#anchor1">link</a> 将链接到它。这意味着当你激活链接时，网页将从锚点开始显示（而不是像往常一样从顶部开始）。

复制你在练习 2-1 中创建的网页，并将其保存为 exercise2-3.html。更改此文件以在顶部包含一个“菜单”锚点，这些锚点链接到不同部分（家庭、朋友）的标题。

练习 2-4

有一种混合了书籍和游戏的形式，叫做“你自己选择冒险”（CYOA）。在这类游戏书中，你会像阅读普通书籍一样阅读一些文字，但过了一会儿，你就可以选择如何继续。

例如

你坐在浴缸里，泡澡放松。你的橡胶鸭子高兴地喋喋不休，突然一条梭子鱼从下面抓住它，把它拖了下去。

- 如果你潜入水中救鸭子，请转到第 89 页

- 如果你拔掉塞子排掉浴缸里的水，请转到第 24 页

在这个练习中，你将编写一个简短的 CYOA，其中的选择由锚点表示，这些锚点将引导你到继续该选择的文字。每个“章节”都必须是一个单独的网页。

保持简洁，不要花太多时间在这个上面。十到二十个网页就足够了。故事不需要很好或完整。

提示：创建一个模板 HTML 文件，你可以使用它作为所有后续章节的基础。

练习 2-5

创建一个网页，并将其保存为“exercise2-5.html”。该网页应该包含关于你选择主题的简短、信息丰富的文本。它应该包含至少三个指向有关该主题的外部网站的有效链接。

答案

有关答案，请参阅问题和练习答案.

图像

使用 img 元素在网页上包含图像。img 属于一类称为“自闭合”的元素。自闭合元素没有结束标签。相反，它们以 /> 结束。（在 HTML5 中，斜杠是可选的；但是，建议将其包含在内。）

img 元素有两个必填属性：src 和 alt。

src 以 URI 作为其值。在这种情况下，URI 将是图像的“地址”（位置）。

由于 URI 可以是相对的，如果图像位于与包含它的网页相同的文件夹中，则 URI 可以仅包含图像的文件名。更常见的是，图像会与其他图像一起位于名为 img 的目录中。建议将图像保存在单独的目录中，因为这将使你的网站更有条理。

alt 属性包含一个文本描述，该描述在无法显示图像时出现。例如，如果图像是一张带有城堡的湖泊照片，你可以使用以下代码

<img src="img/lakecastle.jpeg" alt="湖泊和城堡的照片" />

当图像的目的是装饰性时，你可能想要使用空的 alt 值。这样，当页面显示时，“装饰性”文本不会中断页面主要文本的流程。

<img src="img/prettypattern.jpeg" alt="" />

但是，当图像在网页上具有功能时，alt 文本的存在对于无法看到图像的访问者非常重要。例如，许多网页都使用链接菜单构建导航，其中链接由图像表示。如果图像无法显示，并且没有 alt 文本，用户将无法使用导航。

<a href="family.html"><img src="img/button-family.png" alt="家庭" /></a>

img 元素允许你在页面上嵌入图像。当然，你也可以链接到不想在页面上显示的图像，因为它在页面上没有作用。例如，如果你想让人们有机会下载你拍摄的照片，你可以提供指向这些照片的链接。为此，你使用与我们一直在用来链接到其他网页的相同 a 元素

<a href="img/lakecastle-large.jpeg">湖泊和城堡的照片（JPEG，512 KiB）</a>

请注意，你可以创建指向可以使用 URL 定位的每个文件的链接。通过指出照片存储在 JPEG 格式（照片中非常常见的格式）中，并指出文件大小，我们让访问者有机会决定他们 A）是否可以使用这种格式的文件，以及 B）是否愿意下载此大小的文件。

预格式化文本

HTML 包含许多其他元素（例如，HTML 4.01 包含 91 个不同的元素），但现在我们只讨论一个，然后再继续讨论网页写作的风格。

pre 元素允许您保留纯文本格式（正如本章开头简要讨论的那样）。这意味着在元素内部，连续空格、制表符和硬回车不会折叠成单个空格或软回车。

这个元素几乎没有用。它阻止文本在浏览器宽度缩小或扩展时整齐地重新流动，导致访问者水平滚动，而网页浏览者通常不喜欢这样做。HTML 及其配套布局语言 CSS 有很多选项来显示换行符和缩进。此外，在非可视化浏览器中它几乎没有意义。

但是，当您想从其他文档中复制预格式化文本时，在您有时间标记该文本之前，使用 pre 元素可能会很方便。

示例

<pre>1  2    4        8</pre>

进一步阅读

在本课程的后面，我们将讨论更多元素。但是，本课程的意图不是让你精通 HTML；而是让你精通网页创作。

一般来说，要完全理解某件事，你需要先完全理解它的形式。如果你不能完成各种动作，你就不能成为一个成功的空手道家。如果你没有掌握法语的语法和词汇，你就不能成为一个成功的说法语的人。然而，知道所有打人的方法并不能让你成为一个优秀的空手道家，知道法语的所有单词和规则也不能阻止你在下次需要说法语时变成一个结结巴巴的猩猩。

要完全理解网页创作，你需要超越你用来编写它们的语言。这就是我们在本书的大部分后续章节中要做的。

世界互联网联盟的官方 HTML5 建议可以在这里找到。虽然这份文档有时可能很难阅读，但它代表了关于什么是有效的 HTML5 以及什么不是的最后结论。

此外，HTML 4.01 建议的作者之一戴夫·拉格特编写了几本关于 HTML 及其配套布局语言 CSS 的实用指南，您可以在 http://www.w3.org/MarkUp/#tutorials 找到它们。如果您在本节以及后续章节中发现有您不完全理解的部分，那么研究戴夫的文本可能是一个不错的选择。它们的清晰度远远超过官方规范，而且篇幅足够短，可以与本文本一起学习。

参考资料

↑ “URL 和 URI 之间的区别”。Daniel Miessler。 https://danielmiessler.com/study/url-uri/

上一步：简介 - 上一级：目录 - 下一步：如何为网页写作

[1] “URL 和 URI 之间的区别”。Daniel Miessler。 https://danielmiessler.com/study/url-uri/

[1]

网页创作/创建简单页面