1.2 常用标签：标题、段落、列表

学会了页面骨架，接下来就是往 <body> 里填内容。HTML 有上百个标签，但日常最常用的就那么十几个。这一节带你认识它们——你会发现，每个标签都对应一种“内容的类型”。

下面的实验是一个“标签速览器”：点任意一个标签，就能看到它的写法和实际渲染效果。先玩一玩，再往下读。

正在加载交互实验...

标题：从 h1 到 h6

HTML 有六级标题，<h1> 最大最重要，<h6> 最小：

html

<h1>文章大标题</h1>
<h2>小节标题</h2>
<h3>更小的标题</h3>

注意

别用标题来“调字号”。 标题表达的是层级关系（哪个是大节、哪个是小节），不是“我想要大字”。想让字变大应该用 CSS。一个页面通常只有一个 <h1>。

段落与换行

<p> 表示一个段落，段落之间浏览器会自动留出间距。

<br> 表示一个换行（它是“自闭合”标签，不需要闭标签）。

<hr> 表示一条水平分隔线。

html

<p>第一段文字。</p>
<p>第二段文字，和上一段之间有间距。</p>
<p>同一段里<br>强制换行。</p>
<hr>

强调：strong 与 em

html

<p>这件事<strong>非常重要</strong>，请<em>务必</em>记住。</p>

<strong> 表示“重要”，浏览器默认显示为加粗。

<em> 表示“强调”，浏览器默认显示为斜体。

注意：它们表达的是语气和含义，不只是样式。屏幕阅读器会用不同语调读出来。

列表：有序与无序

列表是网页里极其常见的结构。分两种：

html

<!-- 无序列表：带圆点 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<!-- 有序列表：带数字 -->
<ol>
  <li>打开冰箱</li>
  <li>放进大象</li>
  <li>关上冰箱</li>
</ol>

记忆口诀：

<ul> = unordered list（无序，圆点）

<ol> = ordered list（有序，数字）

<li> = list item（每一项）

两种列表里，每一项都用 <li> 包起来。<li> 必须放在 <ul> 或 <ol> 里面。

正在加载概念检查...

常用标签速查表

标签	含义	成对？
`<h1>`–`<h6>`	六级标题	是
`<p>`	段落	是
`<strong>`	重要（加粗）	是
`<em>`	强调（斜体）	是
`<ul>` / `<ol>` / `<li>`	列表与列表项	是
`<br>`	换行	否（自闭合）
`<hr>`	分隔线	否（自闭合）

正在加载本节练习...

1.2 常用标签：标题、段落、列表

下面的实验是一个“标签速览器”：点任意一个标签，就能看到它的写法和实际渲染效果。先玩一玩，再往下读。

正在加载交互实验...

标题：从 h1 到 h6

HTML 有六级标题，<h1> 最大最重要，<h6> 最小：

html

<h1>文章大标题</h1>
<h2>小节标题</h2>
<h3>更小的标题</h3>

注意

段落与换行

<p> 表示一个段落，段落之间浏览器会自动留出间距。

<br> 表示一个换行（它是“自闭合”标签，不需要闭标签）。

<hr> 表示一条水平分隔线。

html

<p>第一段文字。</p>
<p>第二段文字，和上一段之间有间距。</p>
<p>同一段里<br>强制换行。</p>
<hr>

强调：strong 与 em

html

<p>这件事<strong>非常重要</strong>，请<em>务必</em>记住。</p>

<strong> 表示“重要”，浏览器默认显示为加粗。

<em> 表示“强调”，浏览器默认显示为斜体。

注意：它们表达的是语气和含义，不只是样式。屏幕阅读器会用不同语调读出来。

列表：有序与无序

列表是网页里极其常见的结构。分两种：

html

<!-- 无序列表：带圆点 -->
<ul>
  <li>苹果</li>
  <li>香蕉</li>
</ul>

<!-- 有序列表：带数字 -->
<ol>
  <li>打开冰箱</li>
  <li>放进大象</li>
  <li>关上冰箱</li>
</ol>

记忆口诀：

<ul> = unordered list（无序，圆点）

<ol> = ordered list（有序，数字）

<li> = list item（每一项）

两种列表里，每一项都用 <li> 包起来。<li> 必须放在 <ul> 或 <ol> 里面。

正在加载概念检查...

常用标签速查表

标签	含义	成对？
`<h1>`–`<h6>`	六级标题	是
`<p>`	段落	是
`<strong>`	重要（加粗）	是
`<em>`	强调（斜体）	是
`<ul>` / `<ol>` / `<li>`	列表与列表项	是
`<br>`	换行	否（自闭合）
`<hr>`	分隔线	否（自闭合）

正在加载本节练习...