Руководство по HTML5

Руководство по HTML5

Адам Фриман

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

Ранее в этой главе я показал вам, как настраивать элементы, используя атрибуты. Каждый элемент может определить свои собственные атрибуты: они известны как локальные атрибуты. Когда я начну описание элементов в главе 6, я дам вам список всех локальных атрибутов, которые определяет элемент, и покажу, как их использовать. Каждый локальный атрибут дает вам возможность контролировать некоторые аспекты поведения, которые являются уникальными для элемента.

Существует вторая категория атрибутов – глобальные атрибуты. Они настраивают поведение элементов, которое является общим для всех элементов. Вы можете применить каждый глобальный атрибут к каждому элементу, хотя это не всегда приводит к значимому или полезному изменению поведения. В следующих разделах я опишу каждый из глобальных атрибутов и приведу наглядные примеры. Некоторые из этих атрибутов связаны с более широкими возможностями HTML, о которых я расскажу более подробно далее в этой книге. В таких случаях я даю ссылки на соответствующие главы.

Атрибут accesskey

Атрибут accesskey позволяет указать одну или несколько клавиш, которые будут выбирать элемент на странице. В листинге 3-14 показано использование этого атрибута в простой форме. Формы являются темой глав с 12 по 14, так что вы можете вернуться к этому примеру после прочтения этих глав.

Листинг 3-14: Использование атрибута accesskey
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<form>
		Name: <input type="text" name="name" accesskey="n" />
		<p />
		Password: <input type="password" name="password" accesskey="p" />
		<p />
		<input type="submit" value="Log In" accesskey="s" />
	</form>
</body>
</html>

В этом примере я добавил атрибут accesskey для трех элементов ввода. (Я описываю элементы ввода в главах 12 и 13). Идея состоит в том, чтобы позволить пользователям, которые являются постоянными посетителями страницы или сайта, использовать сочетания клавиш для переключения между часто используемыми элементами. Комбинации клавиш, необходимые для запуска настройки accesskey, различны для разных платформ; для Windows это клавиша Alt и значение accesskey, нажатые вместе. Вы можете увидеть результат использования атрибута accesskey на рисунке 3-5. Я нажимаю Alt + N, чтобы оказаться на первом элементе input и ввести свое имя. Затем я нажимаю Alt + P, чтобы перейти ко второму элементу input и ввести свой пароль. Alt + S нажимает кнопку Log In, которая отправляет форму.

Рисунок 3-5: Результат использования атрибута accesskey

Атрибут class

Атрибут class используется для классификации или категоризации элементов. Вы обычно его применяете таким образом, что можете найти элементы в документе, которые относятся к данному классу, или применить стиль CSS. В листинге 3-15 показано, как можно применять атрибут class.

Листинг 3-15: Применение атрибута class
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<a class="class1 class2" href="http://apress.com">Apress web site</a>
	<p />
	<a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
</body>
</html>

Можно применить несколько классов к каждому элементу, разделяя имена классов пробелом. Имена классов, которые вы создаете, могут быть произвольными, но лучше всего, чтобы они несли смысловую нагрузку, особенно если у вас есть документ, который содержит много классов. Сам по себе атрибут class не делает ничего. На рисунке 3-6 показан отображенный в браузере HTML. Как вы видите, тут всего лишь пара гиперссылок.

Рисунок 3-6: Пара элементов, к которым был применен атрибут class

Во-первых, вы можете воспользоваться атрибут class для создания стиля, предназначенного для одного из нескольких классов, которые вы определили. В листинге 3-16 представлен пример.

Листинг 3-16: Определение стиля, который опирается на классы
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<style type="text/css">
		.class2 {
			background-color: grey;
			color: white;
			padding: 5px;
			margin: 2px;
		}

		.class1 {
			font-size: x-large;
		}
	</style>
</head>
<body>
	<a class="class1 class2" href="http://apress.com">Apress web site</a>
	<p />
	<a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
</body>
</html>

В этом примере я использовал элемент style для определения двух стилях: первый применяется к элементам, которые относятся к class2, а второй – к элементам, принадлежащим class1.

Я объясняю элемент style в главе 7, и я введу вас в курс дела по стилям и по тому, какими способами они могут быть использованы для целевых элементов, в главе 4.

Когда вы загружаете HTML в браузер, стили применяются к элементам. Результат показан на рисунке 3-7. Преимуществом использования классов для назначения стилей является то, что вы не должны дублировать те же настройки стиля для каждого элемента.

Рисунок 3-7: Использование атрибута class для применения стилей

Другим способом использования атрибута class является применение его в скрипте. В листинге 3-17 представлен пример.

Листинг 3-17: Использование атрибута class в скрипте
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<a class="class1 class2" href="http://apress.com">Apress web site</a>
	<p />
	<a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
	<script type="text/javascript">
		var elems = document.getElementsByClassName("otherclass");
		for (i = 0; i < elems.length; i++) {
			var x = elems[i];
			x.style.border = "thin solid black";
			x.style.backgroundColor = "white";
			x.style.color = "black";
		}
	</script>
</body>
</html>

Скрипт в этом примере находит все элементы, которые были назначены классу otherclass, и применяет некоторые стили. Я объясняю элемент script в главе 7, каждое из свойств стиля в главах с 19 по 24, и то, как найти элементы в документе, в главе 26. Результат выполнения этого скрипта показан на рисунке 3-8.

Рисунок 3-8: Использование атрибута class в скрипте

Атрибут contenteditable

Атрибут contenteditable является новым в HTML5, он позволяет пользователю менять содержимое страниц. В листинге 3-18 представлен простой пример.

Листинг 3-18: Использование атрибута contenteditable
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<p contenteditable="true">It is raining right now</p>
</body>
</html>

Я применил атрибут contenteditable к элементу p (который я описал в главе 9). Если установить значения атрибута на true, то пользователь может редактировать содержимое элемента, а если установить на false, то эта функция будет отключена. (Если вы не укажете значение, элемент наследует настройки для этого свойства от своего родителя.) Вы можете увидеть результат использования этого атрибута на рисунке 3-9. Пользователь кликает на текст и начинает печатать.

Рисунок 3-9: Включение редактирования при помощи атрибута contenteditable

Атрибут contextmenu

Атрибут contextmenu позволяет определить контекстное меню для элементов. Эти меню появляются тогда, когда пользователь запускает их (например, когда пользователь Windows PC кликает правой кнопкой мыши). На момент написания этой книги ни один браузер не поддерживал атрибут contextmenu.

Атрибут dir

Атрибут dir определяет направление текста элемента. У него есть два значения: ltr (для текста слева направо) и rtl (для текста справа налево). В листинг 3-19 показано, как используются оба эти значения.

Листинг 3-19: Использование атрибута dir
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<p dir="rtl">This is right-to-left</p>
	<p dir="ltr">This is left-to-right</p>
</body>
</html>

Результат использования атрибута dir можно увидеть на рисунке 3-10.

Рисунок 3-10: Изображение текста, написанного слева направо и справа налево

Атрибут draggable

Атрибут draggable является частью HTML5 поддержки для «drag and drop», и он используется, чтобы указать, какой элемент может быть «перетянут». Я расскажу о «drag and drop» в главе 37.

Атрибут dropzone

Атрибут dropzone является частью HTML5 поддержки для «drag and drop». Он является дополнением к атрибуту draggable, который я только что описал. Я расскажу об обоих атрибутах в главе 37.

Атрибут hidden

Атрибут hidden является булевым атрибутом, указывающим элемент, который в настоящее время не актуален. Браузеры интерпретируют этот атрибут таким образом, что скрывают элемент из поля зрения. В листинге 3-20 представлен пример использования атрибута hidden.

Листинг 3-20: Использование атрибута hidden
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script>
		var toggleHidden = function () {
			var elem = document.getElementById("toggle");
			if (elem.hasAttribute("hidden")) {
				elem.removeAttribute("hidden");
			} else {
				elem.setAttribute("hidden", "hidden");
			}
		}
	</script>
</head>
<body>
	<button onclick="toggleHidden()">Toggle</button>
	<table>
		<tr>
			<th>Name</th>
			<th>City</th>
		</tr>
		<tr>
			<td>Adam Freeman</td>
			<td>London</td>
		</tr>
		<tr id="toggle" hidden>
			<td>Joe Smith</td>
			<td>New York</td>
		</tr>
		<tr>
			<td>Anne Jones</td>
			<td>Paris</td>
		</tr>
	</table>
</body>
</html>

Я сделал этот пример несколько сложнее, чем он должно быть. Я определил элемент table, содержащий элемент tr (который представляет собой строку в таблице), для которых присутствует атрибут hidden. Я также определил элемент button, при нажатии которого вызывается JavaScript функция toggleHidden, определенная в элементе script. Этот скрипт удаляет атрибут hidden, если он присутствует, или же добавляет его в обратном случае. На данный момент не беспокойтесь о том, как все это работает. Я объясню элементы table, tr, th и td в главе 11, элемент script в главе 7, а события в главе 30.

Я создал этот пример, чтобы показать, что происходит, когда применяется атрибут hidden. Результат от нажатия кнопки можно увидеть на рисунке 3-11.

Рисунок 3-11: Удаление и добавление скрытого элемента

Когда атрибут hidden применяется к элементу, браузер абсолютно не воспринимает его. Это как если бы его вообще не было в HTML, так что таблица отображается с уменьшенным числом строк.

Атрибут id

Атрибут id используется для присвоения элементу уникального идентификатора. Эти идентификаторы обычно используются для применения стилей к элементу или для того, чтобы выбрать элемент при помощи JavaScript. Листинг 3-21 показывает, как применять стиль, основываясь на значении атрибута id.

Листинг 3-21: Использование атрибута id
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<style>
	#w3clink {
		background: grey;
		color: white;
		padding: 5px;
		border: thin solid black;
	}
</style>
<body>
	<a href="http://apress.com">Apress web site</a>
	<p />
	<a id="w3clink" href="http://w3c.org">W3C web site</a>
</body>
</html>

Чтобы применить стиль, основываясь на значение атрибута id, вы при определении стиля ставите перед id символ # (в виде префикса). Я дам более подробную информацию о CSS селекторах в главах 17 и 18; и я опишу различные стили в главах с 19 по 24. Результат применения стиля можно увидеть на рисунке 3-12.

Рисунок 3-12: Применение стиля на основании значения атрибута id элемента

Совет

Атрибут id может также использоваться для того, чтобы перейти к конкретному разделу в документе. Если представить себе документ под названием example.html, который содержит элемент со значением атрибута id равным myelement, то можно перейти непосредственно к этому элементу, запросив example.html#myelement. Эта последняя часть URL (# плюс элемент id) известна как идентификатор фрагмента URL.

Атрибут lang

Атрибут lang используется для определения языка содержимого элемента. Листинг 3-22 показывает, как использовать этот атрибут.

Листинг 3-22: Использование атрибута lang
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<p lang="en">Hello - how are you?</p>
	<p lang="fr">Bonjour - comment êtes-vous?</>
	<p lang="es">Hola - ¿cómo estás?</p>
</body>
</html>

Значение атрибута lang должно быть действительным языковым ISO кодом. Вы можете получить полную информацию о том, как указать языки, на http://tools.ietf.org/html/bcp47. Однако, будьте осторожны: работа с языками может быть комплексным и технически сложным делом.

Атрибут lang предназначен для того, чтобы позволить браузеру настроить свой подход к отображению элементов. Это может обозначать, например, изменение кавычек, или настройку того, как правильно произносить текст, когда используется инструмент перевода «текст в речь» (или другая возможность).

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

Атрибут spellcheck

Атрибут spellcheck используется для того, чтобы определить, должен ли браузер проверять орфографию содержимого элемента. Использовать этот атрибут имеет смысл только тогда, когда он применяется к элементу, который пользователь может редактировать, как показано в листинге 3-23. Я описываю элемент textarea в главе 14.

Листинг 3-23: Использование атрибута spellcheck
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<textarea spellcheck="true">This is some mispelled text</textarea>
</body>
</html>

Допустимыми значениями атрибута spellcheck являются true (проверка орфографии включена) и false (проверка орфографии отключена). Браузеры различными способами применяют проверку орфографии. На рисунке 3-13 вы можете увидеть, как Google Chrome обрабатывает эту функцию: это подход «проверяете-когда-набираете». Другие браузеры требуют, чтобы пользователь явно выполнял проверку орфографии.

Рисунок 3-13: Проверка орфографии, реализованная в Chrome

Внимание

Текущая реализация проверки орфографии в наиболее часто используемых браузерах игнорирует атрибут lang, который я только что описал. Проверка орфографии будет осуществляться на языке, определенном операционной системой пользователя или отдельными настройками браузера.

Атрибут style

Атрибут style позволяет определить стиль CSS непосредственно для элемента (в отличие от элемента style или внешней таблицы стилей). В листинге 3-24 представлен пример.

Листинг 3-24: Использование атрибута style
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<a href="http://apress.com" style="background: grey; color: white; padding: 10px">
		Visit the Apress site
	</a>
</body>
</html>

Я описываю CSS стили более подробно в главе 5, и вы можете узнать о различных вариантах доступных стилей в главах с 19 по 24.

Атрибут tabindex

Атрибут tabindex позволяет контролировать порядок, в котором клавиша табуляции (Tab) перемещает фокус по HTML странице, заменяя стандартный порядок. Листинг 3-25 показывает, как использовать этот атрибут.

Листинг 3-25: Использование атрибута tabindex
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<form>
		<label>Name: <input type="text" name="name" tabindex="1" /></label>
		<p />
		<label>City: <input type="text" name="city" tabindex="-1" /></label>
		<p />
		<label>Country: <input type="text" name="country" tabindex="2" /></label>
		<p />
		<input type="submit" tabindex="3" />
	</form>
</body>
</html>

Первый элемент, который будет выбран, это тот элемент, который имеет значение tabindex равное 1. Когда пользователь нажимает клавишу табуляции, тогда будет выбран элемент со значением tabindex равным 2, и так далее. Значение tabindex равное -1 гарантирует, что элемент не будет выбран, когда пользователь нажимает клавишу табуляции. Результат использования tabindex в листинге заключается в том, что при нажатии клавиши табуляции фокус смещается с первого элемента input к третьему input элементу, а затем на кнопку Submit, как показано на рисунке 3-14.

Рисунок 3-14: Управление перемещением фокуса при помощи атрибута tabindex

Атрибут title

Атрибут title предоставляет дополнительную информацию об элементе, которая обычно используется браузером для отображения информации всплывающей подсказки. В листинге 3-26 показано, как используется атрибут title.

Листинг 3-26: Использование атрибута title
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a>
</body>
</html>

На рисунке 3-15 показано, как это значение обрабатывается в Google Chrome.

Рисунок 3-15: Значение атрибута title, отображенное в виде всплывающей подсказки
или RSS канал: Что новенького на smarly.net