15. 水平线 hr 与预格式化 pre

本节目标：理解 hr 的主题分隔语义，掌握 pre 保留空白格式的能力和典型用法。

hr 标签：主题分隔

<hr> 在页面中画一条水平线。但它不只是装饰——它表示内容的主题发生了变化。

<h2>第一章：HTML 基础</h2>
<p>HTML 是网页的骨架……</p>

<hr>

<h2>第二章：CSS 样式</h2>
<p>CSS 让网页变得好看……</p>

视觉上是一条横线，语义上是”从这里开始，话题变了”。

hr 不是装饰线

如果你只是想画一条线来美化页面，用 CSS 的 border 或 hr 的样式。<hr> 只用在内容主题真正切换的地方。

不同浏览器给 <hr> 的默认样式略有不同。通常是一条灰色的凹陷线条。

你可以用 CSS 重新定义它的外观：

<hr>

hr {
  border: none;
  border-top: 2px solid #ddd;
  margin: 30px 0;
}

<pre> 是 preformatted（预格式化）的缩写。它会原样保留代码里的空格、换行和缩进。

<pre>
function hello() {
    console.log("Hello, World!");
    return true;
}
</pre>

在浏览器里，这段代码会保持四个空格缩进和换行，字体也会变成等宽字体。

展示代码：

<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;我的页面&lt;/title&gt;
  &lt;/head&gt;
&lt;/html&gt;
</pre>

注意：在 <pre> 里，< 和 > 仍然要写成 < 和 >，否则浏览器会当成标签解析。

展示 ASCII 艺术：

<pre>
  /\_/\  
 ( o.o ) 
  > ^ <
</pre>

展示文本文件内容：

<pre>
姓名    年龄    城市
张三    25      北京
李四    30      上海
</pre>

<pre> 默认使用等宽字体（monospace），比如 Consolas、Courier New。

等宽字体每个字符宽度相同，特别适合对齐文本。

展示代码时，通常把 <code> 放在 <pre> 里面：

<pre><code>
function add(a, b) {
    return a + b;
}
</code></pre>

<code> 表示”这是代码”，<pre> 保留格式。两个配合使用，语义更准确。