第1章 HTML标记与文档结构

这是一本讲CSS的书，所以，第1章要先讲讲HTML（Hypertext Markup Language，超文本标记语言）。

之所以从HTML讲起，是因为CSS的用途就是为HTML标记添加样式。所以，你首先得知道怎么编写和构造HTML标记，才能让CSS更方便地为它添加样式。每个网页在呱呱坠地时都只包含HTML标记，因为用HTML来标记内容是做任何网页的头一件事。所谓内容，就是你想要传达给读者的那些东西，比如文字、图片、音频和视频。

用HTML标记内容的目的是为了赋予网页语义（semantic）。换句话说，就是要给你的网页内容赋予某些用户代理（user agent）能够理解的含义。我们平常用的浏览器、给视障用户朗读网页的屏幕阅读器，以及搜索引擎放出的Web爬虫都是用户代理，它们需要显示、朗读和分析网页。HTML规定了一组标签，用来给内容打上不同的标记。每个标签都是对它所包含内容的一种描述。最常用的HTML标签描述的是标题 、段落、链接和图片。目前，HTML一共有114个标签，但按照80/20原则，使用其中25个左右的标签就可以满足80%的标记需要。要想知道和了解HTML标签，可以看看本书网站：http://www.stylinwithcss.com。

在给内容都打上标记之后，就可以使用CSS来给标签添加样式了。添加样式的根据有标签名、标签属性（如id和class），以及标签与其他标签在标记中的相对位置关系，等等。HTML标签也会构成一个层次化的文档，从而可以通过CSS来设置网页的布局，为每个元素应用你想要的样式。

HTML最新的版本HTML5，又新规定了一批结构化标签，用于对相关内容的标签进行分组，从而更好地规范网页的整体结构。这些新标签包括<header>、<nav>（即navigation，导航）、<article>、<section>、<aside>和<footer>。比如，对于一组可以让用户导航到网站中其他页面的链接，就可以使用<nav>标签把它们独立地标记出来。而在<article>里，则可以组织起来一篇既包含多个标题，又包含文本段落的博客文章。

在HTML5标准出现之前，创建页面的结构只能使用一些几乎没有什么语义的标签，比如<div>和<span>。而现在，我们有了一套专门的结构化标签。

为了进一步说明上述思想，接下来我们就看一看到底怎么给内容加标记，并展示怎么用HTML创建出一种标签层次，以便应用CSS和JavaScript。