HTML — атрибуты


Оглавление

    Показать оглавление

Мы видели несколько тегов HTML и их использование, например теги заголовков.

<h1>
<h2>,

тег абзаца

<p>

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

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

  • имя — это свойство, которое вы хотите установить. Например, абзац

    <p>

    Элемент в примере содержит атрибут с именем align, который можно использовать для указания выравнивания абзаца на странице.

  • value — это то, что вы хотите, чтобы значение свойства было установлено и всегда заключалось в кавычки. В приведенном ниже примере показаны три возможных значения атрибута align: по левому краю, по центру и по правому краю.

Имена атрибутов и значения атрибутов нечувствительны к регистру. Однако консорциум 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
  • title
  • class
  • style

Атрибут идентификатора

Атрибут id тега HTML можно использовать для уникальной идентификации любого элемента на странице HTML. Есть две основные причины, по которым вы можете захотеть использовать атрибут 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"

Атрибут стиля

Атрибут стиля позволяет указать правила каскадной таблицы стилей (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.

  • dir
  • lang
  • xml:lang

Атрибут dir

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

Значение атрибута:

ltr

Значение: Слева направо (значение по умолчанию).

Значение атрибута:

rtl

Значение: Справа налево (для таких языков, как иврит или арабский, которые читаются справа налево)

Пример


<!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 используется в теге , он определяет, как текст будет представлен во всем документе. При использовании внутри другого тега он управляет направлением текста только для содержимого этого тега.

Атрибут 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.

Атрибут:

align

Параметры :

right, left, center

Функция: Горизонтальное выравнивание тегов


Атрибут:

valign

Параметры :

top, middle, bottom

Функция: вертикальное выравнивание тегов в элементе HTML.


Атрибут:

bgcolor

Параметры: числовые, шестнадцатеричные, значения RGB.

Функция: помещает цвет фона позади элемента


Атрибут:

background

Параметры :

URL

Функция: Помещает фоновое изображение за элементом


Атрибут:

id

Варианты: Определяется пользователем

Функция: Именование элемента для использования с каскадными таблицами стилей.


Атрибут:

class

Варианты: Определяется пользователем

Функция: Классифицирует элемент для использования с каскадными таблицами стилей.


Атрибут:

width

Параметры: Числовое значение.

Функция: задает ширину таблиц, изображений или ячеек таблицы.


Атрибут:

height

Параметры: Числовое значение.

Функция: задает высоту таблиц, изображений или ячеек таблицы.


Атрибут:

title

Варианты: Определяется пользователем

Функция: "Всплывающий" заголовок элементов.


Мы увидим соответствующие примеры, когда приступим к изучению других HTML-тегов. Полный список тегов HTML и связанных с ними атрибутов см. в разделе Список тегов HTML.