Тег спан в html: Тег | htmlbook.ru

| 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>Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей.</p> <p>Автор: <span>Бернард Шоу</span></p> </body> </html>

Результат данного примера показан ниже.

Рис. 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) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

31213.511
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • Знакомство с HTML
  • Элементы <div> и <span>

Рецепты

  • Как выделить цветом фрагмент текста?
  • Как изменить цвет маркеров в списке?

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 10.10.2018

Редакторы: Влад Мержевич

Тег в HTML, что это такое и для чего нужен, применение в CSS

Главная » HTML » Справочник HTML

Справочник HTML

Время чтения 2 мин.Просмотры 371Опубликовано Обновлено

Тег <span>

в HTML применяется для выделения строчных элементов, чаще всего, чтобы выделить часть текста с помощью стиля, например, цвета. Ниже показан как раз такой случай, когда несколько слов в тексте обернуты в span и для него указан красный цвет в style.

See the Pen
span red by Андрей (@adlibi)
on CodePen.

По умолчанию тег имеет свойство display: inline. Он легко стилизуется через CSS.  Вы можете присвоить ему class или id и затем указать для этого селектора нужный набор свойств. На примере два фрагмента текста обернуты тегом span и для них определен синий цвет.

See the Pen
span style by Андрей (@adlibi)

on CodePen.

Таким образом, к тексту можно применить любые свойства: начертание, фон, размер шрифта и т.д.

Особенности применения

  1. Является строчным элементом, с его помощью можно задать стиль для фразы, одного слова или буквы.
  2. Не занимает всю доступную ширину контейнера, как div, а подстраивается под ширину своего содержимого.
  3. Поддерживается всеми браузерами без исключения.
  4. Для него, как для строчного элемента, не работают вертикальные внешние отступы (margin), а также выравнивание по центру через margin:auto. При этом работаю отступы по сторонам.
  5. Для строчного элемента не работает свойство width.

Отличие от div

Теги div и span – это основные контейнеры, используемые в верстке. При этом:

  1. Div – это блочный элемент HTML, с помощью которого обычно формируют структуру страницы, а
    span
    это строчный элемент, который нужен, как правило, для стилизации фрагментов текста.
  2. По умолчанию в начале и в конце div образуются переводы строки, в то время как span встраивается в строку.
  3. Для span неприменимы вертикальные отступы margin и margin:auto.
  4. Div растягивается на всю ширину родительского блока, а span только на ширину размещенного в нем текста.
window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: ‘yandex_rtb_R-A-1718778-1’, blockId: ‘R-A-1718778-1’ })})»+»ipt>»;

Примеры использования элемента 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 9000

      8

      8

      8

      70181 Mobile Browser Support
      Chrome

      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-элементом блочного уровня. Он используется для разделения

      или разделов других тегов HTML на значимые группы.

      Прекрасным примером использования тега div является обозначение списка навигации:

       <дел>
        <ул>
          
    • Главная
    • О нас
    • Свяжитесь

    Тег диапазона

    Тег span — это встроенный элемент HTML, который используется для группировки набора встроенных элементов. Вообще говоря, вы используете span для перехвата текста или группы тегов, стиль которых вы хотите изменить. Однако часто вы можете сделать это более семантически, используя другие элементы, такие как em или strong .

    Хорошим примером правильного использования span является заголовок, который вы хотите разделить на две части.

      

    Comm 244:

    Дизайн для WWW

    Атрибут идентификатора

    Атрибут id используется для маркировки разделов или частей вашего HTML-документа. Вы можете использовать один и тот же идентификатор только один раз на странице, поэтому сохраните его для важных основных разделов вашей страницы. Кроме того, селектор id в CSS имеет высокий уровень специфичности и, следовательно, переопределяет другие вещи (например, селектор класса).
     <дел>
      <ул>
        
  • Главная
  • О нас
  • Свяжитесь

Атрибут класса

Если на странице было несколько фрагментов боковой панели, мы могли бы захотеть создать один класс, чтобы использовать CSS для стилизации каждого фрагмента с помощью одного правила.
 <дел>

Заголовок боковой панели

текст на боковой панели Lorem ipsum dolor sit amet,
consectetur adipisicing elit.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *