Тег HTML <span> - жизненно важный инструмент в наборе инструментов HTML. Этот тег помогает группировать, стилизовать и управлять встроенными элементами на веб-странице во время разработки и выполнения.

Это краткое руководство поможет вам узнать больше о теге HTML <span> и его распространенном использовании.

Что такое HTML-тег <span>?

По сути, тег <span> в HTML является встроенным контейнером для встроенных элементов. Он не начинает новую строку и занимает столько места, сколько требуется. Он не может содержать никаких блочных элементов и не вызывает видимых изменений на экране.

<span> - парный тег. Синтаксис HTML-тега <span> следующий:

<span> Any Inline Element </span>!!

Вот пример -

<span> Hello  World!! </span>

Тег HTML <span> не имеет обязательных атрибутов. Общие атрибуты, такие как id, class, style, отлично работают с ним, но вы также можете использовать его даже без каких-либо атрибутов.

Все основные браузеры поддерживают использование HTML-тега <span>. Примеры включают Chrome, Internet Explorer, Edge, Safari, Opera.

В следующих нескольких разделах вы узнаете, как максимально эффективно использовать этот тег.

Как использовать <span> для стилизации встроенного элемента с помощью CSS

Вы можете использовать HTML-тег <span> для применения встроенного CSS к встроенному элементу.

Представьте, что вам нужно изменить цвет слова в предложении.

Чтобы решить эту задачу, вы можете использовать это слово в HTML-теге span и добавить к нему любой CSS-код.

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

<!DOCTYPE html>
<html>
   <body>

     <p> The <span style="color:red; font-weight:bold">sun</span> rises in the east </p>
      
    </body>
</html>

В результате слово «солнце» станет красным и будет выделено жирным шрифтом.

Как использовать селектор классов CSS с тегом HTML <span>

Если вы не хотите использовать встроенные стили CSS, вы можете добавить класс CSS в тег <span> и использовать селектор классов CSS.

Исходный код HTML

<!DOCTYPE html>
<html>
   <body>

     <p> The <span class="textChange">sun</span> rises in the east </p>
      
    </body>
</html>

Исходный код CSS

.textChange {
  color: red; // Changes font color to red
  font-width: bold; // Makes the font bold
}

Здесь мы присвоили CSS-класс textChange тегу HTML <span>, который обертывает слово« солнце ». Затем исходный код CSS находит слово с помощью селектора класса textChange и выделяет его красным и жирным шрифтом.

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

Как использовать <span> для управления встроенным элементом с помощью JavaScript

Тег HTML <span> - отличный помощник, который вы можете использовать с JavaScript для изменения элементов пользовательского интерфейса во время выполнения.

Тег <span> позволяет связать встроенный элемент с селектором CSS. Затем вы используете JavaScript для управления элементом во время выполнения. Примерами таких селекторов CSS являются id или class.

Вот простой пример, который поможет вам быстро понять концепцию.

Допустим, у вас есть фраза: «Он сильный, храбрый и, главное, добрый». Вам нужно изменить слово «храбрый», чтобы все символы были прописными. Это изменение должно произойти во время выполнения.

В приведенном ниже примере кода показано, как вы можете решить эту проблему. Он использует JavaScript и HTML-тег <span>.

Исходный код HTML

<!DOCTYPE html>
<html lang="en">
   <head>
  
    <title> A Sample Web Page </title>
    
   </head>
   <body>
    
   <p>He is strong, <span class="uCase">brave</span> and, above all, kind</p>
    
    <script src="/script.js"></script>
  </body>
</html>

Исходный код JavaScript

//Accessing the inline element using a class
var obj = document.querySelector(".uCase");

//Applying the style on the inline element
obj.style.textTransform = "uppercase";

Техническое объяснение и ожидаемый результат

В этом примере мы добавили назначение CSS-класса uCase тегу HTML <span>. Когда браузер загружает HTML, он запускает исходный код JavaScript. Исходный код JavaScript находит слово с помощью класса uCase и меняет его символы на символы верхнего регистра с помощью obj.style.textTransform = "uppercase".

Вот что вы увидите в браузере:

He is strong, BRAVE and, above all, kind

Заключение

Напомним, что вы узнали о теге HTML <span> в этом руководстве:

  • Вы можете использовать HTML-тег <span> в качестве контейнера для встроенных элементов.
  • HTML-тег сам является встроенным элементом
  • Этот тег помогает вам стилизовать или манипулировать внутренними встроенными элементами или их частями.
  • Вы можете применить CSS или JavaScript к тегу HTML <span>, чтобы внести эти изменения во время разработки или выполнения.

Я показал вам несколько примеров того, как вы можете использовать <span>. Но это все теория, пока не сделаешь сам! Продолжайте и закрепляйте все, что вы узнали, на практике.

Получите мою бесплатную электронную книгу, чтобы подготовиться к техническому собеседованию, или начните Учить Full-Stack JavaScript