HTML-тег Span | Руководства по веб-разработке

Введение

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

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

Добавление HTML-кода

В файле index.html добавьте следующий код внутри тега <body>:

<p>This is a <span>simple</span> example of using the span tag.</p>

Здесь мы создали абзац с словом "simple", обернутым внутри тега . Это поможет нам понять практическое применение этого тега.

Стилизация элемента Span

Теперь посмотрим, как стилизовать содержимое, которое обернуто внутри тега . Например, если мы хотим добавить цвет к слову "simple", мы можем использовать свойство color в CSS.

Добавьте следующий CSS-код внутри тега <head>:

<style>
  span {
    color: red;
  }
</style>

Этот CSS-код изменяет цвет всего содержимого, обернутого внутри тега , на красный. Поскольку мы обернули слово "simple" внутри тега , оно будет напечатано в красном цвете.

Использование Span с другими HTML-тегами

Тег  также можно использовать с другими HTML-элементами. Посмотрим, как его можно использовать с тегом <a>.

Добавьте следующий HTML-код внутри тега <body>:

<p>
  This is a <span><a href="#">link</a></span> example.
</p>

Это создает абзац с словом "link", обернутым внутри тега  и связанным с URL-адресом #.

Стилизация гиперссылки

Теперь посмотрим, как мы можем стилизовать ссылку. Добавьте следующий CSS-код внутри тега <head>:

<style>
  span a {
    color: green;
    text-decoration: none;
  }
</style>

Этот CSS-код устанавливает цвет текста внутри тега <a> в зеленый и убирает подчеркивание.

Добавление атрибутов событий

Тег  поддерживает как глобальные, так и атрибуты событий. Посмотрим, как мы можем использовать глобальный атрибут class для применения стилей.

Добавьте атрибут class к тегу , который оборачивает слово "simple", как показано ниже:

<p>
  This is a <span class="example"><a href="#">link</a></span> example.
</p>

Добавьте следующий CSS-код внутри тега <head>:

<style>
  .example {
    font-size: 20px;
  }
</style>

Этот CSS-код увеличивает размер шрифта содержимого внутри тега , у которого есть класс example.

Использование тегов Span для семантики

Хотя тег  не имеет собственной смысловой нагрузки, его можно использовать для передачи семантики текста, который он оборачивает. Например, можно использовать его для оборачивания даты или процента, чтобы показать, что текст внутри имеет особое значение.

Например, добавьте следующий код в файл index.html:

<p>My final score is <span class="score" aria-label="90 percent">90</span>.</p>

В этом примере 90 обернуто внутри тега  и присвоено имя класса score. Таким образом, мы передали, что текст внутри тега  имеет особое значение. Кроме того, мы добавили атрибут aria-label, чтобы предоставить информацию о доступности для экрана читателя.

Резюме

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

Стилизация элементов с использованием HTML Span