0Pricing
HTML Academy · 课时

br、hr、blockquote 与 pre

控制换行、主题分隔线、引用和预格式化文本。

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

br 元素

<br> 元素会在文本内容中插入换行：

<p>221B Baker Street<br>
London, NW1 6XE<br>
United Kingdom</p>
<!-- Good use: addresses, poetry, lyrics -->
<!-- Bad use: spacing paragraphs — use margin/padding instead -->

br 的使用时机

只有当换行属于内容本身时，才使用 <br>：

  • 邮政地址
  • 具有特定换行的诗歌
  • 歌词

不要使用 <br> 在段落之间添加视觉间距——这是 CSS 的工作。

hr 元素

<hr> 元素表示内容之间的主题分隔：

<p>Chapter One begins here and introduces the characters.</p>

<hr>

<p>Chapter Two starts a new scene entirely.</p>
<!-- hr = thematic shift in content, not just a visual line -->
<!-- Style with CSS: border, color, margin -->

使用 CSS 设置 hr 样式

可以完全使用 CSS 设置 <hr> 的样式：

<hr style="border: none; border-top: 2px solid #e0e0e0; margin: 2rem 0;">

<!-- Or in CSS: -->
<!--
hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 1.5rem 0;
}
-->

blockquote 元素

<blockquote> 用于标记引用自其他来源的内容：

<blockquote cite="https://example.com/article">
  <p>The best time to plant a tree was 20 years ago.
     The second best time is now.</p>
</blockquote>
<p>— Chinese Proverb</p>
<!-- cite attribute = URL of the source (machine-readable) -->
<!-- cite element inside blockquote = visible attribution -->

使用 q 添加行内引用

对于较短的行内引用，请使用 <q>，而不是 <blockquote>：

<p>She said <q cite="https://example.com">the meeting is at noon</q>.</p>
<!-- Browser adds quotation marks automatically -->
<!-- blockquote = block-level, full quote -->
<!-- q = inline, short quote within a sentence -->

pre 元素

<pre> 会使用等宽字体呈现文本，并完整保留空白字符：

<pre>
function hello() {
    console.log("Hello!");
}
</pre>
<!-- Spaces, tabs, and newlines are preserved -->
<!-- Default font: monospace -->
<!-- Used for code, ASCII art, or text that depends on spacing -->

结合使用 pre 和 code

将 <pre> 与 <code> 结合使用来创建代码块：

<pre><code>
const greet = (name) => {
  return `Hello, ${name}!`;
};
console.log(greet("World"));
</code></pre>
<!-- pre = preserves whitespace -->
<!-- code = semantic: this is computer code -->
<!-- syntax highlighting libraries like Prism target pre > code -->

pre 中的转义

<pre> 中的特殊 HTML 字符仍然必须进行转义：

<pre><code>
<!-- These must be escaped: -->
&lt;div class="box"&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
<!-- &lt; = <   &gt; = >   &amp; = & -->
</code></pre>

空白字符折叠

普通 HTML 会折叠空白字符——多个空格和换行会变成一个空格：

<p>This    has    extra    spaces.</p>
<!-- Renders as: "This has extra spaces." -->

<pre>This    keeps    all    spaces.</pre>
<!-- Renders exactly as written -->

<!-- To preserve whitespace in p without pre: CSS white-space: pre -->
<p style="white-space: pre-wrap">Preserved&#10;newlines</p>

空白字符元素总结

快速参考：

  • <br> — 行内换行（地址、诗歌）
  • <hr> — 主题分隔
  • <blockquote> — 块级引用
  • <q> — 行内引用
  • <pre> — 预格式化文本，保留空白字符
  • <code> — 行内代码片段

快速检查

哪个元素会完整保留按原样书写的所有空白字符，包括空格和换行？

回顾：br、hr、blockquote、pre

空白字符和引用元素：

  • <br> — 内容中的换行（不是用于设置间距）
  • <hr> — 主题内容分隔（具有语义，而不只是视觉效果）
  • <blockquote cite> — 带来源的块级引用
  • <q> — 行内引用
  • <pre><code> — 格式化代码块

常见问题解答

「br、hr、blockquote 与 pre」课时是免费的吗？

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

「br、hr、blockquote 与 pre」这节课中我会学到什么？

控制换行、主题分隔线、引用和预格式化文本。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「br、hr、blockquote 与 pre」课时需要多长时间？

大多数 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