组织文本：标题、段落和列表

学会用标题、段落和列表的层级结构来组织文本。

7 分钟 · 3 题

翻开一本菜谱书：里面有书名、章节标题，然后是每道菜的标题。HTML 提供了同样的层级结构，共有六级标题，从 <h1> 到 <h6>。h 代表 heading（标题）。<h1> 是页面的主标题，<h2> 是章节标题，<h3> 是小节标题，依此类推，一直到 <h6>。

<h1>My recipe notebook</h1>
<h2>Starters</h2>
<h3>Carrot soup</h3>
<h2>Desserts</h2>
<h3>Apple pie</h3>

对于普通文本，你使用上一课学过的 <p> 标签。有一个重要的细节：在你的文件里按回车键不会在屏幕上产生新段落。浏览器会忽略换行和重复的空格。要分隔两个想法，你必须写出两个不同的 <p> 元素。

<h2>Apple pie</h2>
<p>A simple recipe, perfect for beginners.</p>
<p>Allow 30 minutes of preparation in total.</p>

要列举条目，HTML 提供了两种列表。<ul> 标签（unordered list，无序列表）显示为项目符号：非常适合购物清单，因为顺序无关紧要。<ol> 标签（ordered list，有序列表）显示为数字：非常适合菜谱的步骤。两种情况下，列表里的每一项都用 <li> 标签（list item，列表项）来写。

<ul>
  <li>3 apples</li>
  <li>1 pie crust</li>
  <li>2 spoonfuls of sugar</li>
</ul>
<ol>
  <li>Preheat the oven to 180 degrees.</li>
  <li>Cut the apples into slices.</li>
  <li>Bake for 35 minutes.</li>
</ol>

知识检测

确认你已牢记本课的重点内容。

1. 页面的主标题使用哪个标签？
   • <h6>
   • <h1>
   • <p>
   • <heading>
2. 哪个标签创建一个编号列表？
   • <ul>
   • <ol>
   • <li>
3. 如何在屏幕上显示两个不同的段落？
   • 在文件里按两次回车
   • 写出两个独立的 <p> 元素
   • 在句子之间加空格