Спан тег: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Теги HTML — Тег SPAN

Браузер	Internet Explorer				Netтscape		Опера				Safari			Mozilla Firefox
Версия	5.5	6.0	7.0	8.0	8.0	9.0	7.0	8.0	9.2	9.5	1.3	2.0	3.1	1.5	2.0	3.0
Поддерживается	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да	Да

ШТМЛ:

3.2

XШТМЛ:

1.0

1.1

Описание

Тег <SPAN> предназначен для определения встроенных элементов объекта.

В отличие от блочных элементов, таких как <TABLE>, <P> или <DIV>, с помощью тега <SPAN> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри параграфа (тега <P>) можно изменить цвет и размер первой буквы, если добавляем начальный и конечный тег <SPAN> и определить для него стиль контента. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавляем параметр class или id с именем селектора.

Синтаксис

Закрывающий тег

Обязателен.

Пример 1. Использование тега <SPAN>

ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег SPAN</title>
  <style type="text/CSS (ЦСС)">
    BODY { 
     font-family: Arial, sans-serif; /* Рубленый шрифт */ 
    }
    .
  letter { 
     color: red; /* Красный цвет символов */ 
     font-size: 200%; /* Размер шрифта в процентах */ 
     font-family: serif; /* Шрифт с засечками */ 
     position: relative; /* Относительное позиционирование */ 
     top: 5px; /* Сдвиг сверху */ 
    }
  </style> 
 </head>
 <body>
 
  <p><Span>L</Span>orem ipsum dolor 
  sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt 
  ut lacreet dolore magna aliguam erat volutpat.</p>
  <p><Span>U</Span>t wisis enim ad 
  minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl 
  ut aliquip ex ea commodo consequat.</p> 
 </body>
</html>

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

Рис. 1. Вид контента, оформленного с помощью тега <SPAN> и стилей

Span Класс (Windows.UI.Xaml.Documents) — Windows UWP applications

Ссылка

Определение

Пространство имен:: Windows. UI.Xaml.Documents

Важно!

Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

Изменить

Группировка других встроенных элементов содержимого. Родительский класс для полужирного, гиперссылок, курсивного и подчеркивания.

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Inlines")]
class Span : Inline

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata. MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Inlines")]
public class Span : Inline

Public Class Span
Inherits Inline

<Span .../>
-or-
<Span ...>
  oneOrMoreInlines
</Span>
-or-
<Span ...>
  mixedContent
</Span>

Наследование: Object IInspectable DependencyObject TextElement Inline Span

Производный

Windows.UI.Xaml.Documents.Bold

Windows.UI.Xaml.Documents.Hyperlink

Windows.UI.Xaml.Documents.Italic

Windows.UI.Xaml.Documents.Underline

Атрибуты: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Требования к Windows

Семейство устройств	Windows 10 (появилось в 10. 0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (появилось в v1.0)

Для включаемого текста можно использовать Span в качестве элемента объекта в XAML. Это обеспечивает аналогичное использование тега

span в HTML. Для этого использования вы задали атрибуты, поддерживаемые TextElement , такие как FontSize или FontFamily, чтобы применить эти решения форматирования текста к заключенному диапазону текста. Выполнение имеет аналогичную функциональность применения свойств TextElement к диапазону текста, но Run не поддерживает смешанное содержимое (его свойство содержимого Run.Text XAML может содержать только текст, а не смешанное содержимое и дополнительные встроенные).

Span поддерживает смешанное содержимое при настройке содержимого в XAML. Это означает, что вы можете смешивать встроенные теги, такие как Run, Bold и т. д., с текстовым содержимым XAML (обычный текст), без ограничений на порядок отображения тегов и текста. Весь текст, будь то обычный текст или вложенный в встроенный тег, отображается в том порядке, в который текст определен в смешанном содержимом. Например, это юридический КОД XAML:

<RichTextBlock>
  <Paragraph>
    <Span>This is <Bold>mixed content</Bold> with multiple text areas <Italic> and inlines</Italic>.</Span>
  </Paragraph>
</RichTextBlock>

При анализе смешанного содержимого из XAML и анализе текстовой объектной модели во время выполнения любая текстовая область, полученная из обычного текста, создает объект Run в соответствующей позиции порядка чтения в классе коллекции InlineCollection , который обеспечивает доступ во время выполнения. Этот элемент Run содержит текст, но в противном случае не имеет набора свойств.

Примечание

Размещение содержимого XAML независимо от того, поддерживаются ли теги или текст непосредственно в элементе Span, так как Span указывает, что его свойство Inlines является свойством содержимого XAML.

Дополнительные сведения о свойствах содержимого XAML см. в разделе «Свойства содержимого XAML» руководства по синтаксису XAML.

Элементы Span обычно используются в качестве элементов в inlineCollection, как дочерние элементы абзаца (становится частью Paragraph.Inlines) или как содержимое другого span (становится частью Span.Inlines).

Производные классы span

Span — это родительский класс для нескольких производных классов, определяющих встроенную текстовую область с определенным соглашением о форматировании:

Полужирный
Гиперссылка
Наклонный
Подчеркиваниегиперссылки обеспечивает поведение щелчка, которое переходит к NavigateUri. Другие производные классы Span можно рассматривать как украшения, относящиеся к классу, к тексту и не добавляя другое взаимодействие.

Конструкторы

Span()

Инициализирует новый экземпляр класса Span .

Свойства

AccessKey	Возвращает или задает ключ доступа для этого элемента. (Унаследовано от TextElement)
AccessKeyScopeOwner	Возвращает или задает исходный элемент, предоставляющий область ключа доступа для этого элемента, даже если он отсутствует в визуальном дереве исходного элемента. (Унаследовано от TextElement)
AllowFocusOnInteraction	Возвращает или задает значение, указывающее, автоматически ли элемент получает фокус при взаимодействии с ним пользователем. (Унаследовано от TextElement)
CharacterSpacing	Возвращает или задает равномерное интервал между символами в единицах 1/1000 em. (Унаследовано от TextElement)
ContentEnd	Возвращает TextPointer , представляющий конец содержимого в элементе. (Унаследовано от TextElement)
ContentStart	Возвращает TextPointer , представляющий начало содержимого в элементе. (Унаследовано от TextElement)
Dispatcher	Возвращает CoreDispatcher , с которым связан этот объект. CoreDispatcher представляет собой объект, который может получить доступ к DependencyObject в потоке пользовательского интерфейса, даже если код инициируется потоком, не относящегося к пользовательскому интерфейсу. (Унаследовано от DependencyObject)
ElementEnd	Получает TextPointer , представляющий позицию сразу после конца элемента. (Унаследовано от TextElement)
ElementStart	Возвращает Объект TextPointer , представляющий позицию непосредственно перед началом элемента. (Унаследовано от TextElement)
ExitDisplayModeOnAccessKeyInvoked	Возвращает или задает значение, указывающее, закрывается ли отображение ключа доступа при вызове ключа доступа. (Унаследовано от TextElement)
FontFamily	Возвращает или задает предпочтительное семейство шрифтов верхнего уровня для содержимого элемента. (Унаследовано от TextElement)
FontSize	Получает или задает размер шрифта для содержимого элемента. (Унаследовано от TextElement)
FontStretch	Возвращает или задает ширину глифа шрифта в семействе для выбора. (Унаследовано от TextElement)
FontStyle	Возвращает или задает стиль шрифта для содержимого в этом элементе. (Унаследовано от TextElement)
FontWeight	Возвращает или задает вес шрифта верхнего уровня для выбора из семейства шрифтов для содержимого в этом элементе. (Унаследовано от TextElement)
Foreground	Возвращает или задает кисть , применяемую к содержимому этого элемента. (Унаследовано от TextElement)
Inlines	Возвращает inlineCollection , содержащий встроенные элементы верхнего уровня, содержащие содержимое Span.
IsAccessKeyScope	Возвращает или задает значение, указывающее, определяет ли элемент собственную область ключа доступа. (Унаследовано от TextElement)
IsTextScaleFactorEnabled	Возвращает или задает значение, указывающее, включено ли автоматическое расширение текста для отражения системного параметра размера текста. (Унаследовано от TextElement)
KeyTipHorizontalOffset	Возвращает или задает значение, указывающее, насколько слева или вправо помещается подсказка клавиши относительно текстового элемента. (Унаследовано от TextElement)
KeyTipPlacementMode	Возвращает или задает значение, указывающее, где находится подсказка клавиши относительно текстового элемента. (Унаследовано от TextElement)
KeyTipVerticalOffset	Возвращает или задает значение, указывающее, насколько далеко вверх или вниз подсказка помещается относительно текстового элемента. (Унаследовано от TextElement)
Language	Возвращает или задает сведения о языке локализации и глобализации, которые применяются к TextElement. (Унаследовано от TextElement)
Name	Возвращает или задает уникальную идентификацию объекта. Имя можно задать только при первоначальном анализе XAML. (Унаследовано от TextElement)
TextDecorations	Возвращает или задает значение, указывающее, какие украшения применяются к тексту. (Унаследовано от TextElement)
XamlRoot	Возвращает или задает xamlRoot, в котором просматривается этот элемент. (Унаследовано от TextElement)

Методы

ClearValue(DependencyProperty)	Очищает локальное значение свойства зависимостей. (Унаследовано от DependencyObject)
FindName(String)	Извлекает объект в графе объектов объектной модели или среды выполнения, ссылаясь на значение атрибута x:Name или Name объекта. (Унаследовано от TextElement)
GetAnimationBaseValue(DependencyProperty)	Возвращает любое базовое значение, установленное для свойства зависимостей, которое будет применяться в случаях, когда анимация не активна. (Унаследовано от DependencyObject)
GetValue(DependencyProperty)	Возвращает текущее действующее значение свойства зависимостей из DependencyObject. (Унаследовано от DependencyObject)
OnDisconnectVisualChildren()	Переопределите этот метод, чтобы реализовать поведение макета и логики при удалении элементов из содержимого класса или дочернего свойства. (Унаследовано от TextElement)
ReadLocalValue(DependencyProperty)	Возвращает локальное значение свойства зависимостей, если задано локальное значение. (Унаследовано от DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	Регистрирует функцию уведомления для прослушивания изменений определенного объекта DependencyProperty в этом экземпляре DependencyObject . (Унаследовано от DependencyObject)
SetValue(DependencyProperty, Object)	Задает локальное значение свойства зависимостей для Объекта DependencyObject. (Унаследовано от DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Отменяет уведомление об изменениях, которое ранее было зарегистрировано путем вызова RegisterPropertyChangedCallback. (Унаследовано от DependencyObject)

События

AccessKeyDisplayDismissed	Происходит при завершении последовательности ключей доступа для уведомления элементов управления о том, что они должны скрывать визуальные элементы ключей доступа. (Унаследовано от TextElement)
AccessKeyDisplayRequested	Происходит при запуске последовательности ключей доступа для уведомления элементов управления о том, что они должны отображать визуальные элементы ключей доступа. (Унаследовано от TextElement)
AccessKeyInvoked	Происходит, когда пользователь завершает последовательность ключей доступа, чтобы уведомить элемент о том, что необходимо вызвать действие ключа доступа. (Унаследовано от TextElement)

Применяется к

См. также раздел

Inline
Paragraph

XHTML >> Теги >> сильный

Синтаксис:: . ..

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

Например, можно использовать базовые атрибуты класса или стиля для применения эффектов каскадирования. Таблицы стилей или вы можете использовать атрибут lang для отображения текста на иностранном языке.

Напротив, вы должны использовать тег div , когда хотите применить атрибуты к блоку кода. Обратите внимание, что поведение Тег div не является встроенным, а является блочным, так как этот тег вызывает разрыв строки должен происходить как до, так и после элемента div .

С появлением каскадных таблиц стилей теги div и span стали важность и полезность.

Отдельный закрывающий тег обязателен.

Примеры

Код:

Пример тега DevGuru XHTML span <тело> Эта линия синего цвета.

Выход:

Эта линия синяя.

Объяснение :

В приведенном выше примере все примеры кода на сайте DevGuru выделены синим цветом. Это делается путем включения примера кода в пару элементов тега span и обозначения класса . атрибут «КОД». В свою очередь, классу «КОД» был присвоен синий цвет текста в файл таблиц стилей (файл .css), который находится в каталоге Include/ на Веб-сайт DevGuru . Таким образом, для определения внешнего вида всего сайта нужен только один файл

Язык(и): XHTML

Код:

<голова> Пример тега span DevGuru XHTML <тело> Эта линия синего цвета.

Выход:

Эта линия синяя.

Объяснение:

Если вы не хотите создавать файл .css, вы все равно можете получить точно такие же результаты, используя стиль атрибут для тега span и таблицы стилей цвет свойство

Язык(и): XHTML

События

onclick

Синтаксис:

Событие onclick связано с одиночным щелчком мыши по выбранному HTML-тегу (элементу). Всякий раз, когда вы один раз щелкаете элемент, выполняется код скрипта onclick . Этот скрипт также может вызывать функции или подпрограммы, которые содержат код, который вы хотите запустить, когда происходит один щелчок.

ondblclick

Синтаксис: ondblclick=»action»

Событие ondblclick связано с двойным щелчком мыши по выбранному элементу HTML. Всякий раз, когда вы дважды щелкаете элемент, выполняется код сценария ondblclick . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при двойном щелчке.

нажатие клавиши

Синтаксис: onkeydown=»действие»

Событие onkeydown связано с нажатием клавиши на клавиатуре, когда мышь находится внутри выбранного HTML-тега (элемента). Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе. Всякий раз, когда вы нажимаете клавишу, выполняется код сценария onkeydown .

нажатие клавиши

Синтаксис:

Событие onkeypress связано с нажатием клавиши на клавиатуре, когда мышь находится внутри выбранного элемента HTML. Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе. Всякий раз, когда вы нажимаете клавишу, код сценария onkeypress выполняется.

onkeyup

Синтаксис: onkeyup=»action»

Событие onkeyup связано с отпусканием клавиши на клавиатуре, когда мышь находится внутри выбранного HTML-тега (элемента). Другими словами, событие нажатия клавиши произошло, когда элемент HTML был в фокусе. Всякий раз, когда вы отпускаете клавишу, выполняется код сценария onkeyup .

onmousedown

Синтаксис: onmousedown=»action»

Событие onmousedown связано с нажатием кнопки мыши, когда мышь находится внутри выбранного HTML-тега (элемента). Другими словами, событие «нажатие мыши» произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы нажимаете кнопку мыши, находясь внутри элемента, выполняется код скрипта onmousedown . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

onmousemove

Синтаксис: onmousemove=»action»

Событие onmousemove связано с перемещением мыши внутри выбранного HTML-тега (элемента). Другими словами, событие перемещения мыши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы перемещаете мышь вокруг элемента, выполняется код скрипта onmousemove . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

onmouseout

Синтаксис:

Событие onmouseout связано с перемещением мыши за пределы выбранного HTML-тега (элемента). Другими словами, событие отсутствия мыши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы перемещаете мышь за пределы элемента, выполняется код скрипта onmouseout . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

при наведении мыши

Синтаксис:

Событие onmouseover связано с перемещением мыши над выбранным HTML-тегом (элементом). Другими словами, событие наведения мыши произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы наводите указатель мыши на элемент, выполняется код скрипта onmouseover . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

onmouseup

Синтаксис: onmouseup=»action»

Событие onmouseup связано с отпусканием части щелчка мыши внутри выбранного HTML-тега (элемента). Другими словами, событие «наведение мыши» произошло, когда элемент HTML был в фокусе. Каждый раз, когда вы отпускаете мышь вверх, находясь в элементе, выполняется код скрипта onmouseup . Этот сценарий также может вызывать функции или подпрограммы, содержащие код, который вы хотите запустить при возникновении этого события.

Тег HTML 5

Тег HTML используется для группировки и применения стилей к встроенным элементам.

Разница между тегом и тегом

заключается в том, что тег используется со встроенными элементами, а тег

используется с содержимым на уровне блоков.

Демо

Атрибуты

HTML-теги

могут содержать один или несколько атрибутов. Атрибуты добавляются к тегу, чтобы предоставить браузеру больше информации о том, как тег должен выглядеть или вести себя. Атрибуты состоят из имени и значения, разделенных знаком равенства (=), при этом значение заключено в двойные кавычки. Вот например стиль="цвет:черный;" .

Существует 3 типа атрибутов, которые вы можете добавить к своим HTML-тегам: специфичные для элемента, глобальные атрибуты и атрибуты содержимого обработчика событий.

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

Специфичные для элемента атрибуты

В следующей таблице показаны атрибуты, характерные для этого тега/элемента.

Атрибут	Описание
Нет

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех тегов HTML 5 (хотя атрибут tabindex не применяется к элементам диалога ).

ключ доступа
автокапитализация
класс
редактируемый контент
данные-*
директор
перетаскиваемый
скрытый
идентификатор
режим ввода
это
идентификатор товара
itemprop
Артикул
предметная область
тип изделия
язык
часть
слот
проверка правописания
стиль
tabindex
Название
перевод

Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

Спан тег: Тег | htmlbook.ru

Теги HTML — Тег SPAN

Описание

Синтаксис

Закрывающий тег

Span Класс (Windows.UI.Xaml.Documents) — Windows UWP applications

Определение

Требования к Windows

Конструкторы

Свойства

Методы

События

Применяется к

См. также раздел

XHTML >> Теги >> сильный

Примеры

Код:

Выход:

Объяснение :

Язык(и): XHTML

Код:

Выход:

Объяснение:

Язык(и): XHTML

События

See Also:

Тег HTML 5

Демо

Атрибуты

Специфичные для элемента атрибуты

Глобальные атрибуты

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

Рубрики