1.1　基本HTML页面

1.1　基本HTML页面

来看一个基本的HTML页面，大概了解一下本章及后面的内容。图1.1.1显示了图1.1.2中HTML代码在桌面浏览器中显示出来的样子。我们会讲解图1.1.2中代码的基础知识。不过，即便你现在不能完全理解这些代码也不必担心，这只是让你初步了解HTML，本书接下来的部分会介绍更多的HTML知识。

1.1　基本HTML页面 - 图1

图1.1.1　页面典型的默认呈现效果。虽然这是页面在Firefox中显示的效果，但该页面在其他浏览器中的效果也是相似的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Blue Flax (Linum lewisii)</title>
</head>
<body>
    <article>
      <h1>The Ephemeral Blue Flax</h1>
      <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)"/>
      <p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>
    </article>
</body>
</html>

图1.1.2　这是基本HTML页面的代码。我对HTML进行了突出显示，这样你就能把它们与页面中的文本内容区分开来。如图1.1.1中显示的那样，包围文本内容的HTML并没有在浏览器中显示出来。不过，你将了解到，这些标记是非常重要的，因为它们描述内容的含义。同时，请注意，每行之间都通过回车符分开了，但这并不是必需的，它们并不影响页面的呈现效果

你或许可以猜出某些代码的含义，特别是body部分的一些代码。首先看看body之前的那一部分代码。

在图1.1.3中，开始标记¹以上的代码是为浏览器和搜索引擎准备的指导信息。每个网页都以DOCTYPE声明开头。该声明用以告诉浏览器这个页面的HTML版本。

^{1 开始标记指的是开启一个非空元素的一段代码（此处为），与结束标记对应（对应的结束标记为），参见1.3节。——译者注}

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8" />
     <title>Blue Flax (Linum lewisii) </title>
</head>

图1.1.3　title元素中的文本是HTML文档代码顶端部分中唯一用户可见的部分。其余有关页面的信息是为浏览器和搜索引擎准备的

应当始终使用HTML5的DOCTYPE，即。代码不区分大小写，但DOCTYPE通常全部使用大写。无论如何，页面一定要包含DOCTYPE（更多信息参见3.1节中的“改进后的HTML5 DOCTYPE”）。

从一直到之间的部分对用户来说是不可见的，除了一处例外，即和之间的文字——Blue Flax(Linum lewisii)。这部分文字会作为标题显示在浏览器窗口顶端和标签页，如图1.1.1所示。此外，它们还通常是浏览器书签或收藏夹的默认名称，对搜索引擎来说也是很有价值的信息。第3章会解释页面顶部其他部分的作用。

网页的内容（即对用户可见的部分）位于和之间。最后，结束标记标志着页面的结束，如图1.1.4所示。

<!DOCTYPE html>
<html lang="en">
. . . [文档头部] . . .
<body>
    <article>
       <h1>The Ephemeral Blue Flax</h1>
       <img src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
       <p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.org/ wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax"> Blue Flax</a> that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>
    </article>
</body>
</html>

图1.1.4　网页的内容位于body元素的开始标记和结束标记之间，文档以结尾

代码的缩进与其是否为有效HTML毫无关系。它也不会影响内容在浏览器中的显示效果（第4章会讲到，pre元素是一个例外）。不过，对嵌套在父元素里面的代码进行缩进是一种惯例，这样做会让你在阅读代码时更容易看出元素之间的层级关系。本章随后部分会讲到更多有关父元素和子元素的知识，以及更多有关浏览器默认显示的详细说明。

首先，让我们讨论一下编写语义化HTML是什么意思，以及为什么它是有效网站的基石。

1.1 基本HTML页面