| HTML | WebReference
- Содержание
- Синтаксис
- Закрывающий тег
- Атрибуты
- Пример
- Спецификация
- Браузеры
Универсальный строчный элемент <span> (от англ. span — охватывать) предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей. Например, внутри абзаца (<p>) можно изменить цвет и размер первого слова, если его выделить с помощью элемента <span> и задать для него желаемый стиль.
Синтаксис
<span>...</span>
Закрывающий тег
Обязателен.
Атрибуты
Для этого элемента доступны универсальные атрибуты и события.
Пример
<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>SPAN</title> <style> span { color: red; /* Красный цвет символов */ } </style> </head> <body> <p>Разумные люди приспосабливаются к окружающему миру.
Результат данного примера показан ниже.
Рис. 1. Вид текста, оформленного с помощью <span> и стилей
Спецификация
Спецификация | Статус |
---|---|
WHATWG HTML Living Standard | Живой стандарт |
HTML5 | Рекомендация |
HTML 4.01 Specification | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Браузеры
3 | 12 | 1 | 3.5 | 1 | 1 |
1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- Знакомство с HTML
- Элементы <div> и <span>
Рецепты
- Как выделить цветом фрагмент текста?
- Как изменить цвет маркеров в списке?
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 10.10.2018
Редакторы: Влад Мержевич
Тег в HTML, что это такое и для чего нужен, применение в CSS
Главная » HTML » Справочник HTML
Справочник HTMLВремя чтения 2 мин.Просмотры 371Опубликовано Обновлено
Тег <span>
span
и для него указан красный цвет в style.See the Pen
span red by Андрей (@adlibi)
on CodePen.
По умолчанию тег имеет свойство display: inline
. Он легко стилизуется через CSS. Вы можете присвоить ему class
или id
и затем указать для этого селектора нужный набор свойств. На примере два фрагмента текста обернуты тегом span
и для них определен синий цвет.
See the Pen
span style by Андрей (@adlibi)

Таким образом, к тексту можно применить любые свойства: начертание, фон, размер шрифта и т.д.
Особенности применения
- Является строчным элементом, с его помощью можно задать стиль для фразы, одного слова или буквы.
- Не занимает всю доступную ширину контейнера, как
div
, а подстраивается под ширину своего содержимого. - Поддерживается всеми браузерами без исключения.
- Для него, как для строчного элемента, не работают вертикальные внешние отступы (
margin
), а также выравнивание по центру черезmargin:auto
. При этом работаю отступы по сторонам. - Для строчного элемента не работает свойство
width
.
Теги div
и span
– это основные контейнеры, используемые в верстке. При этом:
Div
– это блочный элемент HTML, с помощью которого обычно формируют структуру страницы, аspan
это строчный элемент, который нужен, как правило, для стилизации фрагментов текста.- По умолчанию в начале и в конце
div
образуются переводы строки, в то время какspan
встраивается в строку. - Для
span
неприменимы вертикальные отступыmargin
иmargin:auto
. Div
растягивается на всю ширину родительского блока, аspan
только на ширину размещенного в нем текста.
Примеры использования элемента Span в коде
Код добавлен в буфер обмена!
Время чтения 1 мин
Опубликовано 29 июня 2017 г.
Обновлено 11 сентября 2019 г.
Содержание
- 1. HTML SPAN: Основные советы
- 2. Использование
- 3. Поддержка Броузера
2020202020202 HTML span: Основные советы
- Элемент HTML
span
представляет собой встроенный контейнер . Вы можете использовать его, чтобы связать встроенных элементов (т. е. для стилизации). - Теги
span
сами , а не производят визуальные изменения. Вы можете управлять стилем с помощью JavaScript или CSS. - Тег HTML
span
не имеет каких-либо определенных атрибутов, но поддерживает глобальных . - Необходимо использовать оба открывающих тега и закрывающий тег .
Плюсы
- Упрощенный дизайн (без лишней информации)
- Высококачественные курсы (даже бесплатные)
- Разнообразие функций
Основные функции
- Программы Nanodegre Плюсы
- Простота навигации
- Никаких технических проблем
- Кажется, что заботятся о своих пользователях
Основные характеристики
- Огромное разнообразие курсов
- 30-дневная политика возврата
- Бесплатные сертификаты о завершении
до 12,99 $
Pros
- Отличный пользовательский опыт
- предлагает Caffice
- .
- Бесплатные сертификаты об окончании
- Акцент на навыки работы с данными
- Гибкий график обучения
- Главная
- О нас
- Свяжитесь дел>
- Главная
- О нас
- Свяжитесь дел>
Основные характеристики
СКИДКА 75%
Использование
Теги HTML
Пример
У нее электрические сапоги
>Комбинезон из мохера
Вы знаете, я прочитал это в журнале
Попробуйте в прямом эфире. Учитесь на Udacity
Примечание. Элемент HTML span похож на
. Однако это встроенный элемент, в то время какотносится к блочному уровню .Поддержка браузера
Chrome
All
Edge
All
Firefox
1+
IE
9000
78 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 900088870181 Mobile Browser SupportChrome
All
Firefox
4+
Opera
All
Safari
All
Previous Topic Next Topic
Related Code Examples
Divs, Spans, Ids, и классы
разделов, интервалов, идентификаторов и классовНазад на страницу третьего класса »
Теги HTML
div
иspan
сами по себе не имеют презентационного значения.Это означает, что если вы поместите это в свой HTML, они фактически ничего не отобразят.
Эти теги в основном используются в качестве «крючков» для вашего CSS. Вы используете их, чтобы разделить или пометить свой HTML (когда другой, более семантический тег не будет работать) и использовать селекторы CSS для их таргетинга.
Класс и идентификатор являются атрибутами HTML. Они также используются в качестве хуков CSS.
Блочные и встроенные HTML-элементы
Из Стайлинг с CSS Чарльза Вайк-Смита:
…большинство тегов XHTML по способу отображения на странице делятся на две большие категории: блочные и встроенные. Элементы уровня блока, такие как заголовки с
по
и абзацы
, будут располагаться вниз по странице без разрывов строк. У них даже есть заданные поля для создания пространства между ними. Строковые элементы не имеют таких полей и располагаются бок о бок на странице, переносясь на следующую строку только в том случае, если для них недостаточно места, чтобы расположиться рядом друг с другом.
(стр. 18)
Тег раздела
Тег div является HTML-элементом блочного уровня. Он используется для разделения
Прекрасным примером использования тега div является обозначение списка навигации:
<дел> <ул>
Тег диапазона
Тег
span
— это встроенный элемент HTML, который используется для группировки набора встроенных элементов. Вообще говоря, вы используете span для перехвата текста или группы тегов, стиль которых вы хотите изменить. Однако часто вы можете сделать это более семантически, используя другие элементы, такие какem
илиstrong
.Хорошим примером правильного использования span является заголовок, который вы хотите разделить на две части.
Comm 244:
Дизайн для WWWАтрибут идентификатора
Атрибутid
используется для маркировки разделов или частей вашего HTML-документа. Вы можете использовать один и тот же идентификатор только один раз на странице, поэтому сохраните его для важных основных разделов вашей страницы. Кроме того, селектор id в CSS имеет высокий уровень специфичности и, следовательно, переопределяет другие вещи (например, селектор класса).<дел> <ул>
Атрибут класса
Если на странице было несколько фрагментов боковой панели, мы могли бы захотеть создать один класс, чтобы использовать CSS для стилизации каждого фрагмента с помощью одного правила.<дел>
Заголовок боковой панели
текст на боковой панели Lorem ipsum dolor sit amet,
consectetur adipisicing elit.