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

Универсальные атрибуты. Вы можете использовать любой из этих атрибутов с любым HTML-тегом.

Ядро

id

Атрибут:  id.
Описание: идентифицирует уникальный элемент. Значение id может использоваться CSS или JavaScript для ссылки на этот элемент. Ссылки также могут указывать непосредственно на элемент с определённым id.
Возможные значения: текст, исключая пробелы. Значение id атрибута должно быть уникальным.

class

Атрибут: class.
Описание: используется для ссылок на элементы, например, с помощью CSS. Любое количество элементов может иметь одинаковое значение (в отличие от id).
Возможные значения: текст. Можно применять несколько классов, разделяя их пробелами.

title

Атрибут: title.
Описание: добавляет дополнительную справочную информацию к элементу.
Возможные значения: текст.

style

Атрибут: style.
Описание: применяет встроенный CSS.
Возможные значения: пояснения к CSS.

Пример:

<style>
    .question { color: blue }
    #global { color: red }
</style>
<!-- stuff -->
<p class="question"><a href="#global"> Что такое глобальные атрибуты?</a></p>
<!-- more stuff -->

<p id="global">Атрибуты, которые можно использовать со всеми <abbr title="Язык разметки гипертекста">HTML</abbr> тегами.</p>

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

Интернационализация

lang

Атрибут: lang.
Описание: язык текста в элементе.
Возможные значения: код языка (такой как en или es).

dir

Атрибут: dir.
Описание: направление текста в элементе.
Возможные значения:
ltr ─ слева направо,
rtl ─ справа налево,
auto ─ автоматически.

translate

Атрибут: translate.
Описание: следует ли переводить текст при локализации документа.
Возможные значения:
yes ─ да,
no ─ нет.

Пример:

<p dir="ltr" translate="no">Blackadder: <q lang="de">Schnell! Schnell! Kartoffelkopf.</q></p>

Взаимодействие с пользователем

accesskey

Атрибут: accesskey.
Описание: связывает сочетание клавиш с элементом.
Возможные значения: список символов, разделённых пробелами.

tabindex

Атрибут: tabindex.
Описание: явно указывает, где элемент отображается в порядке табуляции страницы.
Возможные значения: целое число.

hidden

Атрибут: hidden.
Описание: указывает, что элемент не имеет отношения к странице. Обычно используется в сочетании с JavaScript для программного скрытия или отображения элементов в зависимости от действий пользователя.
Возможные значения: значение не требуется.

contenteditable

Атрибут: contenteditable.
Описание: указывает, доступно ли содержимое элемента для редактирования пользователем или нет.
Возможные значения:
true,
false.

spellcheck

Атрибут: spellcheck.
Описание: указывает, следует ли проверять правописание вводимого пользователем текста или нет.
Возможные значения:
true,
false.

draggable

Атрибут: draggable.
Описание: указывает, является ли элемент перетаскиваемым, обычно используется для облегчения перетаскивания. Всегда должен сопровождаться title атрибутом в качестве соображения доступности.
Возможные значения:
true,
false,
отсутствуют (автоматически).

dropzone

Атрибут: dropzone.
Описание: указывает, что, когда что-то перетаскивается на элемент, он должен копировать данные, перемещать данные в своё местоположение или ссылаться на данные. Не поддерживается широко.
Возможные значения:
copy,
move,
link.

Примеры:

<ul>
    <li><a tabindex="2" accesskey="h" href="here/">Здесь </a></li>
    <li><a tabindex="3" accesskey="t" href="there/">Там</a></li>
    <li><a tabindex="1" accesskey="b" href="butHereFirst/"> Но сначала здесь </a></li>
    <li hidden><a href="notHereThough/"> Но не здесь </a></li>
</ul>
<p contenteditable="true" spellcheck="true"> Эй, чувак, покопайся в моем блоге.</p>

Меню

contextmenu

Атрибут: contextmenu.
Описание: явно присваивает элементу контекстное меню. Значение связывает элемент с элементом menu с соответствующим id. Широко не поддерживается.
Возможные значения: текст.

Пример:

<form>
    <label>JG Ballard: <input contextmenu="ballard"></label>
    <menu type="popup" id="ballard">
        <menuitem label="High Rise">
        <menuitem label="Concrete Island">
        <menuitem label="The Drowned World">
    </menu>
</form>

Страницы в тему:

 

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