Мастерство в использовании HTML предварительно отформатированного текста

Введение

В HTML тег <pre> используется для отображения предварительно отформатированного текста. Он отображается на веб-странице так, как он представлен в HTML-файле. Пробелы, используемые внутри этого тега, отображаются в том виде, в котором они написаны. Текст, написанный между тегами <pre>, отображается в моноширном шрифте. Рекомендуется использовать тег <pre> в случае необычного форматирования или, если вы хотите написать фрагмент компьютерного кода.

В этом лабе вы научитесь использовать тег <pre> для отображения предварительно отформатированного текста на веб-странице.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку 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="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>

Стилизация блока предварительно отформатированного текста

Добавьте следующий CSS-код между тегами <head>, чтобы стилизовать блок предварительно отформатированного текста.

<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.

HTML Предварительно отформатированный текст