Мастерство в HTML-зачеркнутых текстах

Введение

HTML тег del используется для указания удаленного текста в документе. Используя тег del, мы можем отобразить удаленный текст с зачеркнутым его. Эта лабораторная работа покажет, как использовать HTML тег del для создания зачеркнутого текста.

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

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

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

Прежде чем начать, создайте HTML-файл с именем index.html. В этом файле мы создадим зачеркнутый текст с использованием HTML-тега del.

Для создания зачеркнутого текста следуйте шагам:

Откройте файл index.html в вашем редакторе кода.
Добавьте HTML-тег (<del>) к тексту, который вы хотите зачеркнуть.
```
<p>The <del>quick</del> brown fox jumps over the lazy dog.</p>
```
В приведенном выше примере слово quick будет отображаться зачеркнутым.
Сохраните файл index.html и откройте его в браузере.

Использование атрибутов HTML-тега del

HTML-тег del имеет два важных атрибута: 'cite' и 'datetime'. В этом шаге мы рассмотрим, как использовать эти атрибуты.

Добавление атрибута Cite - Используйте атрибут Cite, чтобы указать URL документа, который описывает удаленный текст.
```
<p>
  <del cite="http://www.example.com/reason-for-deletion.html"
    >The quick brown fox jumps over the lazy dog.</del
  >
</p>
```
Добавление атрибута Datetime - Используйте атрибут Datetime, чтобы указать время, когда текст был удален.
```
<p>
  <del datetime="2022-09-03T17:12:02Z"
    >The quick brown fox jumps over the lazy dog.</del
  >
</p>
```

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

Часто, когда мы удаляем какой-то текст с веб-страницы, мы можем захотеть вставить вместо него другой текст. В этом шаге мы рассмотрим, как использовать тег ins для отображения вставленного текста.

Откройте файл index.html в вашем редакторе кода.
Добавьте HTML-тег ins к вставленному тексту, который заменяет удаленный текст.
```
<p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>
```
В приведенном выше примере слово ‘quick’ будет отображаться зачеркнутым, а ‘brown’ будет отображаться как вставленный текст.

Добавление CSS-стиля к HTML-тегу del

По умолчанию CSS-стиль для HTML-тега del - это зачеркнутый текст. Вы можете изменить CSS-стиль в соответствии с вашими требованиями.

Добавьте следующий CSS-код в ваш HTML-файл, чтобы изменить стандартный стиль тега del.
```
<style>
  del {
    color: red;
    text-decoration: line-through;
  }
</style>
```

В приведенном выше примере цвет тега del был изменен на красный.

Резюме

Создание зачеркнутого текста с использованием HTML-тега del простой процесс. В этом практическом занятии вы узнали, как использовать HTML-тег del для создания зачеркнутого текста, добавлять атрибуты к тегу del, использовать тег ins для вставки и изменять CSS-стили тега del.

HTML удаленный текст