Атрибуты тегов

Атрибуты тегов

Coursme
12-15 мин
30 янв. 2024

HTML-атрибуты это специальные слова, которые управляют поведением HTML-элемента. Они добавляют дополнительную функциональность, либо меняют поведение элемента по умолчанию. Атрибуты элемента выражаются внутри начального тега элемента.

Атрибут имеет имя и значение. Имена атрибутов должны состоять из одного или нескольких символов, кроме управляющих, таких как пробел, ", ', >, / и =. Имена и значения атрибутов не чувствительны к регистру, но, тем не менее, рекомендуется набирать их в нижнем регистре.

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

Атрибуты могут быть указаны четырьмя различными способами:

  • имя атрибута, например, disabled
  • значение атрибута без кавычек, например, autocapitalize=sentences
  • значение атрибута в одинарных кавычках, например, type='checkbox'
  • значение атрибута в двойных кавычках, например, class="external icon-link"

Приведем пример:

Например тег <img> позволяет добавить картинку в разметку. Его мы и используем, но не всё так просто. Сам по себе <img> не имеет смысла.

Чтобы этот тег был действительно нам полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src:

<img src="coursme.png">

Значение атрибута указывается с помощью знака равно и заключается в кавычки. У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

<тег атрибут1="значение1" атрибут2="значение2">

Например, картинке при желании можно задать размеры:

<img src="coursme.png" width="200" height="100">

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

Глобальные атрибуты, приведенные в таблице ниже, могут быть использованы для любого HTML-элемента, хотя некоторые из них могут не оказывать на элементы никакого влияния.

АтрибутОписание, принимаемое значение
accesskey

Значение атрибута используется браузером в качестве руководства для создания сочетания клавиш, которое активирует или фокусирует элемент. Состоит из разделенного пробелами списка символов. Браузер в первую очередь выбирает те клавиши, которые существуют на раскладке клавиатуры.

Синтаксис: accesskey="A"accesskey="N @ 1"

autocapitalize

Дает подсказку браузеру, каким образом вводимый текст будет автоматически писаться с заглавной буквы при вводе/редактировании пользователем. Атрибут не влияет на поведение при наборе текста на физической клавиатуре, только на поведение других механизмов ввода, таких как виртуальные клавиатуры на мобильных устройствах и голосовой ввод. Атрибут autocapitalize никогда не приводит к автоматическому включению заглавных букв для элемента <input> типа url, email или password.

Разрешенные значения:off или none — все буквы по умолчанию в нижнем регистре.

on или sentences — первая буква каждого предложения по умолчанию заглавная; все остальные буквы по умолчанию в нижнем регистре.

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

characters — все буквы по умолчанию должны быть в верхнем регистре.

Синтаксис: autocapitalize="sentences"

autofocus

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

Синтаксис: autofocus

class

Представляет собой разделенный пробелом список классов элемента с учетом регистра. Классы позволяют CSS и Javascript выбирать и получать доступ к элементам с помощью селекторов классов или функций, таких как метод DOM document.getElementsByClassName.

Синтаксис: class="toc"

class="external icon-link"

contenteditable

Указывает, может ли элемент быть доступным для редактирования пользователем. Цвет курсора в области редактирования можно изменить с помощью CSS-свойства caret-color.

Разрешенные значения:true или пустая строка — элемент доступен для редактирования.

false — элемент недоступен для редактирования.

Синтаксис: contenteditable="false"

data-*

Создает пользовательские атрибуты данных, которые позволяют сценариям обмениваться информацией между HTML и его представлением DOM. Доступ к ним дает свойство HTMLElement.dataset.

Символ * может быть заменен любым именем в соответствии с правилом создания имен XML со следующими ограничениями:имя не должно начинаться с xml (без учета регистра).имя не должно содержать двоеточие :.имя не должно содержать заглавных букв.

Синтаксис: <img class="spaceship cruiserX3" src="shipX3.png"data-ship-id="324" data-weapons="laserI laserII" data-shields="72%"data-x="414354" data-y="85160" data-z="31940"onclick="spaceships[this.dataset.shipId].blasted()">

dir

Указывает направление текста элемента. Является обязательным для элемента <bdo>.

Разрешенные значения:ltr — слева направо и должно использоваться для языков, которые пишутся слева направо (например, английский).

rtl — справа налево и должно использоваться для языков, которые пишут справа налево (например, арабский).

auto — позволяет браузеру использовать базовый алгоритм, который анализирует символы внутри элемента, пока не найдет символ с сильной направленностью, а затем применяет эту направленность ко всему элементу.

Синтаксис: dir="auto"

draggable

Указывает, можно ли перетаскивать элемент либо с помощью собственного поведения браузера, либо с помощью HTML Drag and Drop API.

Разрешенные значения:true — элемент можно перетаскивать.

false — элемент нельзя перетащить.

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

Синтаксис: draggable="true"

enterkeyhint

Указывает, какой текст или значок должен отображаться на клавише ввода виртуальной клавиатуры.

Разрешенные значения:enter — символ новой строки.

done — текст, означающий, что больше нечего вводить, и редактор метода ввода (IME) будет закрыт.

go — текст, означающий, что пользователь должен перейти к цели введенного им текста.

next — текст, означающий, что пользователь должен перейти к следующему полю, которое будет принимать текст.

previous — текст, означающий, что пользователь должен перейти в предыдущее поле, которое будет принимать текст.

search — текст, означающий, что пользователь должен перейти к результатам поиска введенного им текста.

send — текст, означающий, что пользователь должен отправить введенный текст.

Синтаксис: enterkeyhint="go"

Атрибуты выделены бирюзовым цветом- это атрибуты, добавленные в спецификацию HTML5.

Больше атрибутов вы можете найти по ссылке Справочная информация по HTML атрибутам - HTML | MDN (mozilla.org)

Заключение

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

Назад
Следующий тест
Комментарии
Чтобы оставлять комментарии — надо авторизоваться
Комментариев еще нет
Будьте первым
Главная
Кабинет
Курсы
Меню