Использование атрибутов элементов
Вы можете настраивать элементы с помощью атрибутов. В листинге 3-6 показан атрибут, который относится к элементу. Этот элемент позволяет создать гиперссылку, и если на нее нажать, то загрузится другой HTML документа.
Листинг 3-6: Использование атрибута элемента
I like <a href="/apples.html">apples</a> and oranges.Атрибуты могут быть добавлены только в открывающие или одинарные теги — они никогда не могут быть добавлены в закрывающие теги. У атрибутов есть имя и значение, как показано на рисунке 3-4.
Рисунок 3-4: Применение атрибутов к HTML элементам
Есть целый ряд глобальных атрибутов, которые могут быть применены к любому HTML элементу: я опишу их далее в этой главе. В дополнение к этим глобальным атрибутам элементы могут определять свои собственные атрибуты, которые предоставляют информацию о конфигурации, относящейся к специфической роли элемента. Атрибут href является локальным для элемента a, и он устанавливает URL, который указывает гиперссылку. Элемент a определяет ряд специфических атрибутов, которые я описал в главе 8.
Совет
Я использовал двойные кавычки ("myvalue") для разделения значений атрибутов в листинге, но вы также можете использовать одинарные кавычки ('myvalue'). Если вы хотите указать значение атрибута, который сам по себе должен содержать кавычки, можно использовать оба стиля ("my'quoted'value" или 'my"quoted"value').
Добавление к элементу нескольких атрибутов
Элементу можно добавить несколько атрибутов, разделяя их одним или несколькими пробелами. В листинге 3-7 содержится пример.
Листинг 3-7: Определение нескольких атрибутов для одного элемента
I like <a class="link" href="/apples.html" id="firstlink">apples</a> and oranges.Порядок расположения атрибутов не имеет значения, и вы можете свободно смешивать глобальные атрибуты с теми, которые предназначены только для конкретного элемента, что я и сделал в данном листинге. Атрибуты class и id являются глобальными. (Я объясню эти атрибуты далее в этой главе).
Использование булевых атрибутов
Некоторые атрибуты являются булевыми атрибутами. Вы не должны указывать значение для этих атрибутов, просто добавьте имя атрибута к элементу, как показано в листинге 3-8.
Листинг 3-8: Булевский атрибут
Enter your name: <input disabled>В данном примере disabled булев атрибут, и я только добавили имя атрибута к элементу. Элемент input обозначает для пользователя, что он должен ввести данные в HTML форму (о чем я расскажу в главе 12). Добавление (disabled) атрибута не дает пользователю ввести данные. Булевы атрибуты немного странные, потому что их суть заключается в присутствии атрибута, который настраивает элемент, а не в значении, которое вы присваиваете атрибуту. Я не стал уточнять, что disabled="true", я просто добавил слово disabled. Того же результата можно достичь, если назначить пустую строку ("") или установить, что значение должно быть именем атрибута, как показано в листинге 3-9.
Листинг 3-9: Булеву атрибуту присвоено пустое строковое значение
Enter your name: <input disabled="">
Enter your name: <input disabled="disabled">Использование пользовательских атрибутов
Вы можете определить свои собственные атрибуты, если имена ваших атрибутов будут начинаться с data-. В листинге 3-10 показано использование таких атрибутов.
Листинг 3-10: Применение к элементу пользовательских атрибутов
Enter your name: <input disabled="true" data-creator="adam" data-purpose="collection">Настоящее название этих атрибутов – атрибуты, определенные автором, которые иногда также называют expando атрибутами, но я предпочитаю более широко используемый термин пользовательский атрибут.
Пользовательские атрибуты являются формальным определением широко используемой техники HTML4, где браузеры игнорируют любой атрибут, который не могут распознать. Вы ставите перед этими атрибутами data-, чтобы избежать столкновения с именами атрибутов, которые могут быть созданы в будущих версиях HTML. Пользовательские атрибуты полезны при работе с CSS (глава 4) и JavaScript (глава 5).
