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

Введение

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

Примечание: Вы можете практиковать программирование в 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/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70796{{"Выделенный текст в HTML"}} html/head_elems -.-> lab-70796{{"Выделенный текст в HTML"}} html/lang_decl -.-> lab-70796{{"Выделенный текст в HTML"}} html/text_head -.-> lab-70796{{"Выделенный текст в HTML"}} html/para_br -.-> lab-70796{{"Выделенный текст в HTML"}} html/layout -.-> lab-70796{{"Выделенный текст в HTML"}} html/inter_elems -.-> lab-70796{{"Выделенный текст в HTML"}} end

Настройка 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-стилей, вы можете легко привлечь внимание читателей к важным частям вашего текста.