HTML-атрибут

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

Атрибуты HTML — это специальные слова, используемые внутри открывающего тега для управления поведением элемента. Атрибуты HTML — это модификатор типа элемента HTML . Атрибут либо изменяет функциональность по умолчанию типа элемента, либо предоставляет функциональность определенным типам элементов, которые не могут работать правильно без них. В синтаксисе HTML атрибут добавляется к открывающему тегу HTML .

Были распознаны несколько основных типов атрибутов, в том числе: (1) обязательные атрибуты , необходимые определенному типу элемента для правильной работы этого типа элемента; (2) необязательные атрибуты , используемые для изменения функциональности типа элемента по умолчанию; (3) стандартные атрибуты , поддерживаемые многими типами элементов; и (4) атрибуты событий , используемые для того, чтобы типы элементов указывали сценарии, которые должны запускаться при определенных обстоятельствах.

Некоторые типы атрибутов функционируют по-разному при использовании для изменения различных типов элементов. Например, имя атрибута используется несколькими типами элементов, но имеет немного разные функции в каждом из них. ^[1]

Описание

Атрибуты HTML обычно отображаются в виде пар «имя-значение» , разделенных символом =, и записываются в начальном теге элемента после имени элемента:

<element attribute= "value" > содержимое элемента </element>  

Где elementимена — тип элемента HTML, а attribute— имя атрибута, заданное для предоставленного value. Значение может быть заключено в одинарные или двойные кавычки, хотя значения, состоящие из определенных символов, можно оставить без кавычек в HTML (но не в XHTML). ^{[2] [3]} Оставление значений атрибутов без кавычек считается небезопасным. ^[4]

Хотя большинство атрибутов представлены в виде парных имен и значений, некоторые влияют на элемент просто своим присутствием в начальном теге элемента ^[5] (например, ismapатрибут для imgэлемента ^[6] ).

Элемент аббревиатуры, abbr, может использоваться для демонстрации следующих различных атрибутов:

< abbr  id = "anId"  class = "aClass"  style = "color:blue;"  title = "Язык гипертекстовой разметки" > HTML </ abbr >

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

< div  style = "text-align: center;" > Центрированный текст </ div >

В этом другом примере ваш текст будет выглядеть так:

Центрированный текст

Большинство элементов также принимают атрибуты, связанные с языком lang, и dir.

Общие атрибуты

Обычно элементы HTML могут принимать любой из нескольких наиболее распространенных стандартных атрибутов (см. полный список):

• Атрибут idпредоставляет уникальный идентификатор элемента на уровне документа. ^{[7] [8] [9]} Он может использоваться как селектор CSS для предоставления презентационных свойств, браузерами для привлечения внимания к определенному элементу или скриптами для изменения содержимого или представления элемента. Присоединенный к URL-адресу страницы, URL-адрес напрямую указывает на определенный элемент в документе, обычно на подраздел страницы. Например, идентификатор «Атрибуты» в http://en.wikipedia.org/wiki/HTML_attribute/HTML#Attributes(для ссылки на раздел «Атрибуты» на странице «HTML»).
• Атрибут classпредоставляет способ классификации похожих элементов. Можно добавлять несколько имен классов, разделяя их пробелами. ^{[10] [11]} Семантически, например, классы используются в микроформатах . Кроме того, авторы таблиц стилей могут создавать селекторы , которые сопоставляют элементы по классу для целей стилизации. Например, документ HTML может использовать обозначение class="notation", чтобы указать, что все элементы с этим значением класса подчинены основному тексту документа. Такие элементы могут быть собраны вместе в виде сносок на странице — вместо того, чтобы появляться в месте, предложенном их положением в исходном коде HTML. Автор таблицы стилей может также определить правило с селектором .notationи определить свойство font-size: small;.
• Атрибут styleпредоставляет способ применения правил стиля, специфичных для элемента. Можно добавить несколько объявлений стилей , разделив их точкой с запятой и необязательным пробелом, где каждое объявление включает имя свойства CSS и значение, разделенное двоеточием и необязательным пробелом (пример: style="color: red; text-align: center;"). ^{[12] [13] [14]} Атрибут styleможно использовать в любом элементе HTML (он будет верифицирован в любом элементе HTML; однако это не обязательно полезно). Считается лучшей практикой добавлять информацию о стиле в таблицу стилей , часто выполняемую с помощью селекторов, которые соответствуют классу или идентификатору элемента. Однако иногда предпочтение отдается встроенным стилям, когда таблицы стилей считаются слишком громоздкими для простой и конкретной или специальной спецификации стиля.
• Атрибут titleиспользуется для присоединения подтекстового объяснения к элементу. В большинстве браузеров этот атрибут отображается как то, что часто называют подсказкой .

Разновидности

Атрибуты HTML обычно классифицируются как обязательные атрибуты , необязательные атрибуты , стандартные атрибуты и атрибуты событий :

• Обычно обязательные и необязательные атрибуты изменяют определенные элементы HTML.
• В то время как стандартные атрибуты могут быть применены к большинству элементов HTML. ^[15]
• Атрибуты событий, добавленные в HTML версии 4, позволяют элементу указывать сценарии , которые будут запускаться при определенных обстоятельствах. ^[16]

Обязательно и необязательно

Используется двумя элементами

• <a> и <область> :
  • coords — координаты <области> или <ссылки> внутри нее.
  • shape — форма <area> или <link> внутри нее. Значения: default, rect, circle, poly.
• <a> и <ссылка> :
  • hreflang — Код языка связанного документа. ( <a> , <link> )
  • rel — Характер связанного документа (относительно отображаемой в данный момент страницы). Свободный текст для <a> , но <link> использует набор терминов (альтернатива, приложение, закладка, глава, содержание, авторское право, глоссарий, справка, главная, индекс, следующая, предыдущая, раздел, начало, таблица стилей, подраздел).
  • rev — Характер текущей отображаемой страницы (относительно связанного документа). Изменяется для <a> и <link> как для rel.
• <апплет> и <объект> :
  • архив — URL-адрес(ы) архива ( <applet> , <object> )
  • codebase — базовый URL ( <applet> , <object> )
• <базовый шрифт> и <шрифт> :
  • цвет — цвет текста (устарело) ( <basefont> , <font> )
  • face — семейство шрифтов (устарело) ( <basefont> , <font> )
• <col> и <colgroup> :
  • span — количество охватываемых столбцов ( <col> , <colgroup> )
• <del> и <ins> :
  • datetime — дата и время удаления или вставки текста .
• <форма> и <вход> :
  • принять — типы файлов, принимаемые при загрузке <form> или <input>
• <фрейм> и <iframe> :
  • frameborder — значение (0 или 1) указывает, отображать ли рамку вокруг <frame> или <iframe> .
  • marginheight — верхнее и нижнее поля в пикселях вокруг <frame> или <iframe> .
  • прокрутка — значение (да, нет, авто) указывает, отображать ли полосы прокрутки вокруг <frame> или <iframe> .
  • marginwidth — левое и правое поля в пикселях вокруг <frame> или <iframe> .
• <frameset> и <textarea> :
  • cols — количество видимых столбцов в <frameset> или <textarea> (некоторые вариации)
  • rows — количество видимых строк в <frameset> или <textarea> (некоторые вариации)
• <img> и <object> :
  • usemap — указывает имя элемента карты для использования с <img> или URL-адрес карты изображения для использования с <object> .
• <input> и <textarea> :
  • readonly — указывает текст только для чтения для <input> и <textarea> .
• <ссылка> и <стиль> :
  • media — указывает устройство отображения для <link> и <style> . Значения: все, слуховой, Брайль, портативный, печать, проекция, экран, tty, ТВ.
• <optgroup> и <option> :
  • label — текст описания для <optgroup> или <option> .
• <td> и <th> :
  • abbr — сокращенная версия ячейки таблицы или заголовка .
  • ось — название категории для ячейки таблицы или заголовка .
  • colspan — количество столбцов, охватываемых ячейкой таблицы или заголовком .
  • nowrap — (устарело) предотвращает перенос ячейки или заголовка таблицы .
  • rowspan — количество строк, охватываемых ячейкой или заголовком таблицы .
  • область действия — не влияет на обычное отображение браузера, но отмечает ячейку таблицы или заголовок как логический заголовок для других ячеек. Значения: col, colgroup, row, rowgroup.

Используется несколькими элементами

• выровнять — <applet> , <col> , <colgroup> , <object> , <tbody> , <td> , <tfoot> , <th> , <thead>

• align также устарело в <caption> , <div> , <h1> to <h6> , <hr> , <iframe> , <img> , <input> , <legend> , <p> , <table>

• alt — <applet> , <area> , <img> , <input>
• bgcolor — <body> , <table> , <td> , <th> , <bgcolor>
• граница — <img> , <object> , <table>
• char — <char> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
• charoff — <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
• набор символов — <a> , <link> , <script>
• цитировать — <blockquote> , <del> , <ins> , <q>
• компактный — <dir> , <menu> , <ol> , <ul>
• отключено — <button> , <input> , <optgroup> , <option> , <select> , <textarea>
• высота — <applet> , <iframe> , <img> , <object> . Также устарело в <td> , <th>
• href — <a> , <область> , <база> , <ссылка>
• hspace — <applet> , <object> . Также устарело в <img>
• longdesc — <frame> , <iframe> , <img>
• имя — <a> , <applet> , <button> , <form> , <frame> , <iframe> , <input> , <map> , <meta> , <object> , <param> , <select> , <textarea>
• размер — <basefont> , <font> , <hr> , <input> , <select>
• src — <frame> , <iframe> , <img> , <input> , <script>
• цель — <a> , <область> , <база> , <форма> , <ссылка>
• тип — <button> , <input> , <li> , <link> , <object> , <ol> , <param> , <script> , <style> , <ul>
• valign — <col> , <colgroup> , <tbody> , <td> , <tfoot> , <th> , <thead> , <tr>
• значение — <button> , <input> , <li> , <option> , <param>
• vspace — <applet> , <img> , <object>
• ширина — <applet> , <col> , <colgroup> , <hr> , <iframe> , <img> , <object> , <pre> , <table> , <td> , <th>

Стандартные атрибуты

Стандартные атрибуты также известны как глобальные атрибуты и функционируют с большим количеством элементов. ^[17] Они включают в себя основные стандартные атрибуты: к ним относятся accesskey, class, contenteditable, contextmenu, data, dir, hidden, id, lang, style, tabindex, title . Есть также некоторые экспериментальные. Оба xml:lang и xml:base устарели. Несколько атрибутов aria-* улучшают доступность. ^[17] Атрибуты обработчика событий перечислены далее.

Технически все стандартные атрибуты должны приниматься всеми элементами, хотя они не будут работать с некоторыми элементами. ^[18] В таблице ниже перечислены некоторые общие стандартные атрибуты и некоторые элементы, с которыми они могут работать.

Атрибуты события

Стандартные атрибуты включают атрибуты обработчика событий . Все они имеют префикс on-: ^[17]

• аборт
• onautocomplete
• onautocompleteerror
• наблюр
• наотмену
• oncanplay
• oncanplaythrough
• onchange
• onclick
• назакрытие
• oncontextmenu
• oncuechange
• ondblclick
• ондраг
• ондрагенд
• ондрагентер
• ondrageexit
• ondragleave
• ондраговер
• ondragstart
• ondrop
• ondurationchange
• опустел
• одноконечный
• onerror
• в фокусе
• навход
• недействительный
• onkeydown
• onkeypress
• onkeyup
• загрузка
• загруженные данные
• загруженныеметаданные
• onloadstart
• onmousedown
• onmouseenter
• onmouseleave
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• наколесо мыши
• напаузе
• наигрывать
• наигрывая
• onprogress
• onratechange
• насброс
• onresize
• прокрутить
• искомый
• ищущий
• onselect
• на шоу
• онсорт
• установлен
• на отправку
• onsuspend
• ontimeupdate
• ontoggle
• onvolumechange
• в ожидании

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

Смотрите также

• HTML-элемент

Ссылки

1. "Индекс атрибутов HTML 4". W3C . Получено 13 февраля 2015 г.
2. "О SGML и HTML". World Wide Web Consortium . Получено 16 ноября 2008 г.
3. "XHTML 1.0 – Различия с HTML 4". World Wide Web Consortium . Получено 16 ноября 2008 г.
4. Корпела, Юкка (6 июля 1998 г.). "Почему значения атрибутов всегда должны быть заключены в кавычки в HTML". Cs.tut.fi . Получено 16 ноября 2008 г.
5. "Теги, используемые в HTML". World Wide Web Consortium. 3 ноября 1992 г. Получено 16 ноября 2008 г.
6. «Объекты, изображения и апплеты в документах HTML». World Wide Web Consortium. 24 декабря 1999 г. Получено 16 ноября 2008 г.
7. Однако к одному и тому же элементу могут применяться несколько идентификаторов; в частности, элемент может находиться внутри другого элемента, каждый из которых имеет идентификатор.
8. "HTML id". W3Schools . Архивировано из оригинала 27 апреля 2020 г. Получено 27 апреля 2020 г. .
9. "HTML Global id Attribute". W3Schools . Получено 2020-04-27 .
10. "HTML Classes". W3Schools . Получено 2020-04-27 .
11. "HTML Global class Attribute". W3Schools . Получено 2020-04-27 .
12. "Стили HTML". W3Schools . Получено 2023-05-12 .
13. "Атрибут глобального стиля HTML". W3Schools . Получено 2023-05-12 .
14. "CSS Syntax". W3Schools . Получено 2023-05-12 .
15. «Глобальные атрибуты HTML». W3Schools.
16. "Атрибуты событий HTML". W3Schools.
17. "Глобальные атрибуты – HTML (язык гипертекстовой разметки)". MDN Web Docs . Получено 2015-02-12 .
18. "HTML reference – HTML (HyperText Markup Language)". MDN Web Docs . Получено 13 февраля 2015 г.