0Pricing
HTML Academy · 课时

段落、em、strong、b 与 i

使用语义化强调和粗体标签标记 prose 内容。

段落、em、strong、b 与 i 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

段落元素

<p> 元素将一段文本标记为段落：

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

语义强调：em

<em> 元素用于标记带有重音强调的文本，也就是会改变句子含义的词语：

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

语义重要性：strong

<strong> 元素用于标记非常重要的文本：

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em 与 i

<em> 和 <i> 默认都会呈现为斜体，但含义不同：

  • <em> — 语义上的重音强调（优先使用）
  • <i> — 呈现上的斜体：用于技术术语、标题和外语短语
<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong 与 b

<strong> 和 <b> 默认都会呈现为粗体，但语义不同：

  • <strong> — 语义上的重要性（优先使用）
  • <b> — 吸引注意但不表示重要性：用于关键词和产品名称
<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

嵌套 em 与 strong

您可以嵌套强调元素，以产生组合效果：

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

段落不能嵌套

一个 <p> 元素不能包含另一个 <p>：

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

段落中的行内元素与块级元素

<p> 是块级元素，只能包含行内元素：

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

强调的无障碍性

语义标记对辅助技术很重要，原因如下：

  • 在某些实现中，屏幕阅读器会以变化的语调读出 <em>
  • <strong> 可能会以额外的强调语气读出
  • 仅使用 CSS 实现的粗体或斜体（例如在 span 上使用 font-style: italic）对屏幕阅读器没有语义含义

常见错误

请避免以下常见的文本标记错误：

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

各元素的使用时机

快速决策指南：

  • 一段正文文本 → <p>
  • 强调会改变含义的词语 → <em>
  • 标记关键信息 → <strong>
  • 将标题或技术术语设为斜体 → <i>
  • 突出关键词但不表示重要性 → <b>

快速检查

要将文本标记为至关重要，应使用哪个元素？

回顾：文本语义

文本标记总结：

  • <p> — 正文段落
  • <em> — 重音强调，会改变句子含义
  • <strong> — 非常重要
  • <i> — 呈现上的斜体（标题、术语）
  • <b> — 吸引注意但不表示重要性
  • 绝不要使用 <br><br> 来设置段落间距

常见问题解答

「段落、em、strong、b 与 i」课时是免费的吗？

是的 — 「段落、em、strong、b 与 i」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「段落、em、strong、b 与 i」这节课中我会学到什么？

使用语义化强调和粗体标签标记 prose 内容。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「段落、em、strong、b 与 i」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 标题 h1-h6 及其层级
  2. 段落、em、strong、b 与 i
  3. br、hr、blockquote 与 pre
  4. span 与 div 元素
← 返回 HTML Academy