HTML5和CSS课程(6)
导语
从今日起计划推出系列课程《HTML5和CSS课程》。内容来源于《HTML5与CSS3基础教程（第8版）》。如果你喜欢看书，请购买正版书籍。以下内容均来源于对该本书的解读。
创建分级标题
HTML 提供了六级标题用于创建页面信息的层级关系。使用 h1、 h2、 h3、 h4、 h5 或h6 元素对各级标题进行标记，其中 h1 是最高级别的标题， h2 是 h1 的子标题， h3 是 h2 的子标题，以此类推。当你在编写网页内容时，会根据需要为内容的每个主要部分指定一个标题和任意数量的子标题（以及子子标题，等等）。
<!DOCTYPE html><html>
<head> <meta charset="UTF-8" /> <title>这是标题</title></head>
<body> <h1>h1标题</h1> <h2>>h2标题</h2> <h3>>h3标题</h3> <h4>>h4标题</h4> <h5>>h5标题</h5> <h6>>h6标题</h6></body></html>
01
分级标题的重要性
对任何页面来说，分级标题都可以说是最重要的 HTML 元素。由于标题通常传达的是页面的主题，因此，对搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重，尤其是等级最高的 h1（这并不是说页面中的 h1 越多越好，搜索引擎还是足够聪明的）。
<!DOCTYPE html><html>
<head> <meta charset="UTF-8" /> <title>这是标题</title></head>
<body> <h1>Product User Guide</h1> <h2>Setting it up</h2> <h2>Basic Features</h2> <h3>Video Playback</h3> <h4>Basic Controls</h4> <h4>Jumping to Markers</h4> <h3>Recording Video</h3> <h4>Manual Recording</h4> <h4>Scheduling a Recording</h4> <h2>Advanced Features</h2> <h3>Sharing Video</h3> <h3>Compressing Video</h3></body>
</html>
提 示
在这个例子中，产品指南有三个主要的部分，每个部分都有不同层级的子标题。标题之间的空格和缩进只是为了让层级关系更清楚一些，它们不会影响最终的显示效果。在实践中我通常不会添加这样的空格和缩进，如果你想添加可以这样做。
02
使用标题对网页进行组织的步骤
在 HTML 的 body 部分，输入 <hn>，其中 n 是 1 ～ 6 的数字，此数字取决于要创建的标题的级别。 h1 是最重要的标题，而 h6则是最不重要的标题。
输入标题的内容 。
输入 </hn>，其中 <n> 是与第 (1) 步中相同的数字。
提 示
在默认情况下，浏览器会从 h1 到 h6逐级减小标题的字号，如图 3.3.3 所示。（在有的浏览器里，嵌套在特定元素中的 h1 和 h2
在默认情况下看起来是一样的。）不过别忘了要依据内容所处的层次关系选择标题级数，而不是根据你希望文字应该显示的大小。可
以按照你希望的样子为标题添加样式，包括字体、字号、颜色等。
提 示
创建分级标题时，要避免跳过某些级别，如从 h3 直接跳到 h5。不过，允许从低级别跳到高级别的标题。
提 示
不要使用 h1 ～ h6 标记副标题、标语以及无法成为独立标题的子标题。例如，假设有一篇新闻报道，它的主标题后面紧跟着一个副标题，这时，这个副标题就应该使用段落或其他非标题元素。
提 示
先 前， HTML5 包 含 了 一 个 名 为hgroup 的元素，用于将连续的标题组合在一起， W3C将这个元素从HTML5规范中移除了。
好，今天的课程就到这里！！！
