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

Введение

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

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Создайте базовый 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> идеально подходит для обозначения текста, который уже не актуален или не имеет отношения к контексту, и может быть полезен при редактировании документов.

HTML Зачеркнутый текст