Создание зачеркнутого текста в HTML

Введение

В HTML тег <s> представляет зачеркнутый текст или текст с линией через него. Его можно использовать для отображения неактуального или уже не точного текстового содержания. Для целей редактирования документов необходимо использовать тег <del> вместо тега <s>. В этом лабе вы узнаете, как создавать зачеркнутый текст в HTML с использованием тега <s>.

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") 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-70841{{"HTML Зачеркнутый текст"}} html/head_elems -.-> lab-70841{{"HTML Зачеркнутый текст"}} html/text_dir -.-> lab-70841{{"HTML Зачеркнутый текст"}} html/doc_flow -.-> lab-70841{{"HTML Зачеркнутый текст"}} html/inter_elems -.-> lab-70841{{"HTML Зачеркнутый текст"}} html/custom_attr -.-> lab-70841{{"HTML Зачеркнутый текст"}} end

Создайте базовый HTML-файл

Создайте HTML-файл с именем index.html. Вот, как создать базовую структуру HTML:

<!doctype html>
<html>
  <head>
    <title>Creating a Strikethrough Text in HTML</title>
  </head>
  <body>
    <!-- Ваш HTML-код будет здесь -->
  </body>
</html>

Добавьте зачеркнутый текст

Внутри тега body вашего HTML-файла добавьте тег <s>, представляющий зачеркнутый текст. Вот, как записать базовый синтаксис:

<s>This text has a strikethrough.</s>

В выводе HTML вы увидите вышеуказанный текст с линией через него.

Добавьте атрибут

Хотя тег <s> не имеет никаких конкретных атрибутов, он поддерживает как глобальные, так и событийные атрибуты. Вот, как добавить событийный атрибут к тегу <s>:

<s onclick="alert('This is a strikethrough text.')">Click me!</s>

В коде выше событийный атрибут onclick будет отображать сообщение с предупреждением с текстом, когда вы нажимаете на зачеркнутый текст.

Добавьте стили CSS

Вы также можете добавить пользовательские стили CSS, чтобы изменить внешний вид зачеркнутого текста. Вот, как добавить стили CSS к тегу <s>:

<style>
  s {
    text-decoration: line-through;
    color: red;
    font-size: 20px;
  }
</style>

В коде выше свойство text-decoration создает зачеркнутый текст, свойство color изменяет цвет шрифта на красный, а свойство font-size устанавливает размер шрифта в 20 пикселей.

Резюме

В этом практическом занятии вы узнали, как создавать зачеркнутый текст в HTML с использованием тега <s>. Вы можете настроить внешний вид текста, добавив стили CSS или событийные атрибуты. Тег <s> идеально подходит для обозначения текста, который уже не актуален или не имеет отношения к контексту, и может быть полезен при редактировании документов.