HTML 预格式化文本

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/text_dir("`Text Direction`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70817{{"`HTML 预格式化文本`"}} html/head_elems -.-> lab-70817{{"`HTML 预格式化文本`"}} html/text_head -.-> lab-70817{{"`HTML 预格式化文本`"}} html/text_dir -.-> lab-70817{{"`HTML 预格式化文本`"}} html/doc_flow -.-> lab-70817{{"`HTML 预格式化文本`"}} html/inter_elems -.-> lab-70817{{"`HTML 预格式化文本`"}} html/custom_attr -.-> lab-70817{{"`HTML 预格式化文本`"}} end

创建 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> 标签在网页中显示预格式化文本。你学会了如何使用 colswidth 属性设置预格式化文本块中每行的首选字符数,以及如何使用 wrap 属性指示文本应换行到下一行。你还学会了如何向预格式化文本块中添加一段计算机代码,以及如何使用 CSS 样式化预格式化文本块。

您可能感兴趣的其他 HTML 教程