Мы видели несколько тегов HTML и их использование, таких как теги заголовков <h1>, <h2>, тег абзаца <p> и другие теги. Мы использовали их до сих пор в их простейшей форме, но большинство тегов HTML также могут иметь атрибуты, которые являются дополнительными битами информации.
Атрибут используется для определения характеристик элемента HTML и помещается внутри открывающего тега элемента. Все атрибуты состоят из двух частей — имени и значения
-
Имя — это свойство, которое вы хотите установить. Например, элемент абзаца <p> в этом примере содержит атрибут с именем align , который можно использовать для указания выравнивания абзаца на странице.
-
Значение — это то, что вы хотите, чтобы значение свойства было установлено и всегда помещалось в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right .
Имя — это свойство, которое вы хотите установить. Например, элемент абзаца <p> в этом примере содержит атрибут с именем align , который можно использовать для указания выравнивания абзаца на странице.
Значение — это то, что вы хотите, чтобы значение свойства было установлено и всегда помещалось в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: left, center и right .
Имена и значения атрибутов нечувствительны к регистру. Однако Консорциум World Wide Web (W3C) рекомендует использовать строчные атрибуты / значения атрибутов в своих рекомендациях по HTML 4.
пример
<!DOCTYPE html> <html> <head> <title>Align Attribute Example</title> </head> <body> <p align = "left">This is left aligned</p> <p align = "center">This is center aligned</p> <p align = "right">This is right aligned</p> </body> </html>
Это покажет следующий результат —
Основные атрибуты
Четыре основных атрибута, которые можно использовать в большинстве элементов HTML (хотя и не во всех):
- Я бы
- заглавие
- Учебный класс
- Стиль
Атрибут Id
Атрибут id тега HTML можно использовать для уникальной идентификации любого элемента на странице HTML. Существует две основные причины, по которым вы можете захотеть использовать атрибут id для элемента:
-
Если элемент содержит атрибут id в качестве уникального идентификатора, можно идентифицировать только этот элемент и его содержимое.
-
Если у вас есть два элемента с одинаковыми именами на веб-странице (или в таблице стилей), вы можете использовать атрибут id, чтобы различать элементы с одинаковыми именами.
Если элемент содержит атрибут id в качестве уникального идентификатора, можно идентифицировать только этот элемент и его содержимое.
Если у вас есть два элемента с одинаковыми именами на веб-странице (или в таблице стилей), вы можете использовать атрибут id, чтобы различать элементы с одинаковыми именами.
Мы обсудим таблицу стилей в отдельном уроке. А пока давайте используем атрибут id, чтобы различать два элемента абзаца, как показано ниже.
пример
<p id = "html">This para explains what is HTML</p> <p id = "css">This para explains what is Cascading Style Sheet</p>
Атрибут заголовка
Атрибут title дает рекомендуемый заголовок для элемента. Их синтаксис для атрибута title аналогичен объяснению для атрибута id —
Поведение этого атрибута будет зависеть от элемента, который его несет, хотя он часто отображается как всплывающая подсказка, когда курсор находится над элементом или во время загрузки элемента.
пример
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
Это даст следующий результат —
Теперь попробуйте навести курсор на «Пример заголовка с заголовком», и вы увидите, что любой заголовок, который вы использовали в своем коде, появляется как подсказка курсора.
Атрибут класса
Атрибут class используется для связывания элемента с таблицей стилей и определяет класс элемента. Вы узнаете больше об использовании атрибута класса, когда вы изучите каскадную таблицу стилей (CSS). Так что сейчас вы можете избежать этого.
Значением атрибута также может быть разделенный пробелами список имен классов. Например —
class = "className1 className2 className3"
Атрибут стиля
Атрибут style позволяет указать правила каскадной таблицы стилей (CSS) внутри элемента.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
Это даст следующий результат —
На данный момент мы не изучаем CSS, поэтому давайте продолжим, не беспокоясь о CSS. Здесь вам необходимо понять, что такое атрибуты HTML и как их можно использовать при форматировании контента.
Атрибуты интернационализации
Существует три атрибута интернационализации, которые доступны для большинства (хотя и не для всех) элементов XHTML.
- реж
- языки
- XML: языки
Атрибут dir
Атрибут dir позволяет вам указать браузеру направление, в котором должен передаваться текст. Атрибут dir может принимать одно из двух значений, как вы можете видеть в следующей таблице:
| Значение | Имея в виду |
|---|---|
| л | Слева направо (значение по умолчанию) |
| РТЛ | Справа налево (для языков, таких как иврит или арабский, которые читаются справа налево) |
пример
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>
Это даст следующий результат —
Когда атрибут dir используется в теге <html>, он определяет, как текст будет представлен во всем документе. При использовании внутри другого тега он контролирует направление текста только для содержимого этого тега.
Атрибут lang
Атрибут lang позволяет указать основной язык, используемый в документе, но этот атрибут был сохранен в HTML только для обратной совместимости с более ранними версиями HTML. Этот атрибут был заменен атрибутом xml: lang в новых документах XHTML.
Значения атрибута lang представляют собой стандартные двухсимвольные коды языка ISO-639. Проверьте языковые коды HTML: ISO 639 для полного списка языковых кодов.
пример
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>
Это даст следующий результат —
Атрибут xml: lang
Атрибут xml: lang является заменой XHTML для атрибута lang . Значение атрибута xml: lang должно быть кодом страны ISO-639, как упоминалось в предыдущем разделе.
Общие атрибуты
Вот таблица некоторых других атрибутов, которые легко использовать со многими тегами HTML.
| атрибут | Опции | функция |
|---|---|---|
| выравнивать | правый, левый, центр | Горизонтально выравнивает теги |
| VALIGN | верх, середина, низ | Вертикально выравнивает теги в элементе HTML. |
| BGCOLOR | числовые, шестнадцатеричные, значения RGB | Размещает цвет фона позади элемента |
| фон | URL | Размещает фоновое изображение за элементом |
| Я бы | Определяемые пользователем | Называет элемент для использования с каскадными таблицами стилей. |
| учебный класс | Определяемые пользователем | Классифицирует элемент для использования с каскадными таблицами стилей. |
| ширина | Числовое значение | Определяет ширину таблиц, изображений или ячеек таблицы. |
| рост | Числовое значение | Определяет высоту таблиц, изображений или ячеек таблицы. |
| заглавие | Определяемые пользователем | «Всплывающее» название элементов. |
Мы увидим похожие примеры и продолжим изучение других HTML-тегов. Полный список тегов HTML и связанных с ними атрибутов см. В разделе «Список тегов HTML» .