Мастерство в форматировании HTML-кода

Введение

В веб-разработке мы иногда нуждаемся в отображении на наших веб-страницах контента, связанного с программированием или компьютером. Когда мы хотим показать конкретные термины, такие как имя какой-либо функции или любое имя переменной, мы можем использовать тег <code> для их обрамления. Этот тег изменяет семейство шрифтов для вложенного текста на моноширинный шрифт, такой как courier.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") 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-70725{{"HTML код для компьютеров"}} html/text_head -.-> lab-70725{{"HTML код для компьютеров"}} html/doc_flow -.-> lab-70725{{"HTML код для компьютеров"}} html/inter_elems -.-> lab-70725{{"HTML код для компьютеров"}} html/custom_attr -.-> lab-70725{{"HTML код для компьютеров"}} end

Добавьте тег `<code>`

Во - первых, создайте файл index.html в своей локальной системе и откройте его с помощью выбранного вами текстового редактора.

Далее, добавим тег <code> в ваш HTML - файл. Синтаксис этого тега прост. Он имеет начальную и конечную метку, окружающую текст, который вы хотите отобразить.

<body>
  <!-- Add the code tag -->
  <p>This is an example of using the <code>code</code> tag in HTML.</p>
</body>

В вышеприведенном кодовом блоке мы поместили термин code внутри тега <code>. Это делает вложенный текст отображаться в моноширинном шрифте.

Добавьте тег `<pre>` для отображения кода на нескольких строках

Если вам нужно отобразить программистский код на нескольких строках, используйте тег <pre> вместе с тегом <code>. Посмотрим, как это работает, добавив следующий код в файл index.html.

<body>
  <!-- Using the pre tag with the code tag -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Call the function
         multiply(2, 3);
      </code>
   </pre>
</body>

В этом кодовом блоке мы используем тег <pre> для указания, что мы хотим отобразить код в блоковом формате. Внутри тега <pre> мы добавляем тег <code> для указания, что мы заключаем в него программистский код.

Используйте глобальные атрибуты и атрибуты событий

Вы можете использовать глобальные атрибуты и атрибуты событий с тегом <code>.

<body>
  <!-- Using global attributes with the code tag -->
  <p>
    <code class="highlight" style="color: red" title="This is a title"
      >Some code</code
    >
  </p>
</body>

В вышеприведенном кодовом блоке мы используем атрибуты class, style и title с тегом <code>.

Добавьте стандартный стиль CSS

Если вы не указываете никакой стиль для тега <code>, он будет использовать стандартные настройки CSS. Большинство браузеров используют monospace в качестве стандартного семейства шрифтов для тега <code>.

<body>
  <!-- Default CSS style for HTML code tag -->
  <p>
    <code>Default CSS style</code>
  </p>
</body>

Резюме

Тег <code> используется для заключения содержимого, связанного с программированием или компьютером. Используя этот тег, вы можете отобразить вложенный текст в моноширинном шрифте, таком как courier. Также вы можете использовать тег <pre> вместе с тегом <code> для отображения программистского кода на нескольких строках. Тег <code> поддерживает глобальные атрибуты и атрибуты событий. Если вы не указываете никакой стиль для тега <code>, он будет использовать стандартные настройки CSS с monospace в качестве стандартного семейства шрифтов.

HTML код для компьютеров