本节书摘来自华章社区《Web前端工程师修炼之道（原书第4版）》一书中的网页结构，作者Jennifer Niederst Robbins，更多章节内容可以访问云栖社区“华章社区”公众号查看

网页结构

我们对浏览器窗口中的网页外观都很熟悉，但是背后究竟发生了什么呢？在图2-3的上部，你可以看到显示在图形化浏览器中的一个简单的网页。虽然你可以把它当做一个整体页面，但是实际上这个页面由四个分离的文件组成：一个HTML文件（index.html）一个样式表（kitchen.css）和两个图像文件（foods.gif和spoon.gif）。HTML文件控制了整个展示。HTML文件当知道我们在Web看到的图像丰富并且互动性强的页面是由简单的纯文本文件生成的时，你一定会感到惊讶。这种文本文件指的是源文件。看一看index.html，它是Jen抯 Kitchen网页的源文件。你可以看到它包含的只是文本内容，再加一些描述了页面上的每个文本元素的特殊标记（用<>表示）。在文本文件上加入描述性标签称为“标记”文件。网页使用的是超文本标记语言，简称HTML，HTML是专门为使用超文本链接的文件创建的。HTML定义了很多文本元素，这些元素组成了文件，如标题、段落、强调文本以及链接。还有一些 HTML元素用来添加关于文件的信息（如标题），还可以在页面上添加多媒体信息，如图片、视频以及用于表格输入的小部件等。值得注意的是，实际上使用的HTML有多种。其中应用最为广泛的是HTML 4.01版和 XHTML 1.0版。你可能听说过Web是如何随着设计的HTML 5而广泛应用的。我会在第10章给你揭示所有的HTML版本和使它们变得独特的原因。同时我们还要介绍关于HTML的一些基础性的知识。HTML标记简介由于你在第二部分会详细学习HTML，所以我们现在不会讲述太多细节，这里我先告诉你HTML是如何工作的，以及浏览器是如何处理HTML的。通读图2-3中的HTML文件，并且与浏览器中的结果对比。很容易就可以看出源文件中用HTML标记的元素是如何与浏览器窗口中的显示对应的。

首先，你会注意到尖括号中的文本（如

）并没有显示在最终页面上。浏览器只显示标记之间的元素的内容，而标记反而隐藏了。标记提供了HTML元素的名字——通常是一个缩写，如“h1”表示“一级标题（heading level 1）”、“em”表示“强调文本（emphasized text）”。 其次，你会看到大多数HTML标记是成对出现的，它们之间就是元素的内容。在HTML文件中，表示接下来的文本是一级标题；表示标题结束。有些元素称为空元素，它没有任何内容。在这个例子中，

---

标记表示一个空元素，它告诉浏览器“在这里画一条水平线”（大多数浏览器显示主题划分时使用一条水平线，这也是hr命名的缘由）。 因为我不熟悉计算机编程，当我第一次开始写HTML时，我把标签和文本当做“一串字符”，而由浏览器按顺序来逐字对它们进行解释。例如，当浏览器遇到一个左括号（<）时，它假定接下来所有的字符都是标记的一部分，直到找到右括号（>）。同样，它假定所有开头的内容都是一个标题，直到遇到 h1>标记。这就是浏览器解析HTML文档的方式。了解浏览器的解析方式有助于解决不规范的HTML文档中存在的问题。