掌握 HTML 预格式化文本

介绍

在 HTML 中，<pre> 标签用于显示预格式化的文本。它会按照 HTML 文件中的格式原样显示在网页上。该标签内的空白字符会按照书写的方式显示。写在 <pre> 标签之间的文本会以等宽字体显示。如果你需要展示不常见的格式或计算机代码，建议使用 <pre> 标签。

在本实验中，你将学习如何使用 <pre> 标签在网页中显示预格式化的文本。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在 8080 端口上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

创建 HTML 文件

在你选择的文本编辑器中创建一个 index.html 文件，并添加以下基本的 HTML 代码。

<!doctype html>
<html>
  <head>
    <title>Using the HTML Pre Tag</title>
  </head>
  <body>
    <h1>Using the HTML Pre Tag</h1>
  </body>
</html>

向网页添加内容

在 <body> 标签之间添加以下代码，使用 <pre> 标签创建一个预格式化的文本块。

<pre>
This text
will be
displayed
in a
fixed-width font
</pre>

使用 cols 属性

在 <pre> 标签之间添加以下代码，使用 cols 属性设置预格式化文本块中每行的首选字符数。

<pre cols="20">
This text will be
displayed in a
fixed-width font
</pre>

使用 width 属性

在 <pre> 标签之间添加以下代码，使用 width 属性设置预格式化文本块中每行的首选字符数。

<pre width="20">
This text will be
displayed in a
fixed-width font
</pre>

使用 wrap 属性

在 <pre> 标签之间添加以下代码，使用 wrap 属性指示文本应换行到下一行。

<pre wrap="hard">
This text will wrap to the
next line in the
preformatted text block
</pre>

向网页添加计算机代码

在 <pre> 标签之间添加以下代码，以在预格式化文本块中显示一段计算机代码。

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Using the HTML Pre Tag&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Using the HTML Pre Tag&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

设置预格式化文本块的样式

在 <head> 标签之间添加以下 CSS 代码，以样式化预格式化文本块。

<style>
  pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    border: 1px solid black;
    padding: 10px;
  }
</style>

保存对 index.html 文件的更改，并在网页浏览器中打开以预览结果。

总结

恭喜你，你已经成功完成了实验，并学会了如何使用 <pre> 标签在网页中显示预格式化文本。你学会了如何使用 cols 和 width 属性设置预格式化文本块中每行的首选字符数，以及如何使用 wrap 属性指示文本应换行到下一行。你还学会了如何向预格式化文本块中添加一段计算机代码，以及如何使用 CSS 样式化预格式化文本块。