Выделенный текст с использованием тега Mark

Введение

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

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

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

Настройка HTML-файла

Для начала создайте файл index.html и настройте базовую структуру HTML-файла. Вставьте следующий код:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Highlighted Text with Mark Tag</title>
  </head>
  <body></body>
</html>

Добавление текста в разметку

Внутри тегов <body> добавьте некоторый текст. В этом примере мы будем выделять текст "Brown fox" в предложении.

<body>
  <p>The quick <mark>brown fox</mark> jumped over the lazy dog.</p>
</body>

Добавление CSS-стиля для изменения стандартного цвета

По умолчанию выделенный текст будет иметь желтый фон и черный цвет текста. Вы можете изменить эти цвета, добавив CSS в тег . Например, чтобы изменить цвет фона выделения на красный и цвет текста на белый, добавьте следующий CSS-стиль:

<style>
  mark {
    background-color: red;
    color: white;
  }
</style>

(по желанию): Добавление селектора класса для стилизации

Если на странице есть несколько экземпляров выделенного текста и вы хотите стилизовать их одинаково, вы можете добавить класс в тег  и добавить CSS-селектор класса. В следующем примере мы добавим класс с именем highlight в тег  и затем стилизуем его с использованием CSS.

<body>
  <p>
    The quick <mark class="highlight">brown fox</mark> jumped over the lazy dog.
  </p>
  <p>The <mark class="highlight">sun</mark> is a star.</p>
</body>

<style>
  .highlight {
    background-color: green;
    color: white;
  }
</style>

Резюме

Вот и все! Вы узнали, как создавать выделенный текст с использованием тега  в HTML. Используя тег  и несколько CSS-стилей, вы можете легко привлечь внимание читателей к важным частям вашего текста.

Выделенный текст в HTML