第1章　网页的构造块

本章内容

  • 基本HTML页面
  • 语义化HTML：有含义的标记
  • 标记：元素、属性和值
  • 网页的文本内容
  • 链接、图像和其他非文本内容
  • 文件名
  • URL
  • 要点回顾

尽管网页变得越来越复杂，但是其底层结构依然相当简单。你应当知道的第一件事就是，创建网页都离不开HTML。你即将了解到，HTML会包围内容并说明这些内容表示什么，Web浏览器则会将HTML包着的内容呈现给用户。

一个网页主要包括以下三种成分。

  • 文本内容（text content）：在页面上让访问者了解页面内容的纯文字，比如关于你的业务、产品、家庭度假等内容。

  • 对其他文件的引用（references to other files）：这些文件加载图像、音频、视频、SVG1文件等，指向其他HTML页面和资源，以及样式表（用于控制页面的布局）和JavaScript文件（用于为页面增加行为）。

1 SVG是Scalable Vector Graphic（可缩放矢量图形）的简称。——译者注

  • 标记（markup）：对文本内容进行描述并使引用正确地工作。（HTML一词中的字母M就代表标记。）

需要注意的是，网页的这些成分都仅由文本构成。这意味着网页可以保存为纯文本格式，可以在任何平台（无论是台式机、手机、平板电脑还是其他平台）上用任何浏览器查看，从而保证万维网的普适性。同一页面在不同的设备上看起来可能并不一样，不过这没关系。重要的是，第一步要让内容对所有用户都是可访问的，而HTML可以做到这一点。

除了上述三种主要成分，网页还包括一些其他HTML，它们提供关于页面本身的信息，比如网页内容的主要语言（英语、法语等）、字符编码（通常为UTF-8）等。这些HTML主要是为浏览器和搜索引擎准备的，用户通常是看不见它们的。

本章会带你创建一个基本的HTML页面，讨论一些最佳实践，并分别阐述上述三种主要成分。

注意：正如在前言中提到的，本书使用HTML泛指这门语言本身。如果需要突出HTML某一版本独有的特殊属性，则使用它们各自的名称。例如，“HTML5引入了一些新的元素，并重新定义或删除了一些先前存在于HTML 4和XHTML 1.0中的元素。”更详细的说明参见前言中的“如何使用本书”。