1.6. Универсальные атрибуты и атрибуты-события
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

1.6. Универсальные атрибуты и атрибуты-события

Универсальные атрибуты html-элементов

В HTML 5 присутствует довольно значительное число атрибутов. Все они перечислены в официальной документации на сайте W3C, на который можно перейти здесь или из нашего раздела 'Ссылки'. Осуществив переход по указанному адресу, вы легко найдете четвертый раздел, в котором описываются элементы и соответствующие им атрибуты. Легко заметить, что некоторые атрибуты применимы только к одному тегу, а некоторые сразу к нескольким. Например, атрибут charset применяется только к тегу <meta>, в то время как атрибут loop сразу к двум тегам: <audio> и <video>. Также среди атрибутов встречаются и такие, которые применимы практически ко всем тегам. Их называют универсальными атрибутами.

Универсальных атрибутов 12:

Код с использованием наиболее важных для нас тегов показан в примере 1.5.

<!DOCTYPE html>

<html>
<head>
	<meta charset="utf-8">	
	<!-- Это элемент 'title', а не атрибут -->
	<title>Используем универсальные атрибуты</title>
	</head>
<body>
	<p contenteditable="true" tabindex="5" spellcheck="false">
		Я &ndash; абзац, который можно редактировать.<br>
		Проверка орфографии отключена.
	</p>
	
	<p tabindex="0" accesskey="s">
		Я &ndash; абзaц, который нельзя редактировать, т.к. не <br>указан
		атрибут <span style="color: red">contenteditable</span>.<br>
		Зато в firefox я получаю фокус при нажатии<br>
		спецкомбинации клавиш текущего браузера (см. выше) +  
		<span style="color: green">'s'</span>.
	</p>
	
	<p tabindex="1" title="Мой tabindex равен единице!">
		<span hidden>А я показан не буду.</span>
		Наведите на меня курсор и подождите)))<br>
		Кстати, при нажатии <span style="color: green">'Tab'</span>
		я первым <br>получаю фокус, т.к. у меня наименьшее значение<br>
		<span style="color: red">tabindex</span> из тех, что больше нуля.
	</p>
</body>
</html>	

Пример 1.5. Использование универсальных атрибутов

Одиночный тег <br> формирует пустой элемент разметки 'br', который вставляет в данное место кода принудительный разрыв строки, заставляя браузер продолжить выводить данные на новой строке. А парный тег <span> формирует элемент 'span', который предназначен в основном для выделения небольших текстовых фрагментов строк или изображений. Это универсальный элемент, который никак не изменяет свое содержимое (в качестве примера посмотрите на второе предложение второго абзаца), зато легко приобретает дополнительные свойства объединяясь со стилями CSS через атрибуты class или id.

Что касается атрибута style, то мы в качестве значения атрибута использовали CSS-свойство color (цвет) и значения цвета "red" и "blue". Если бы мы указывали еще какие-нибудь свойства CSS в одном атрибуте style, то пришлось бы разделять их точкой с запятой.

Атрибуты-события

Кроме универсальных атрибутов выделяется еще одна обширная группа так называемых атрибутов-событий, которые используются для вызова специальных скриптов – обработчиков событий. Обработчик события запускается в тот момент, когда происходит событие, которое представляет данный атрибут. Так, например, если в открывающем теге <p> указать атрибут-событие onclick="hidden()", то при клике левой кнопкой мыши по абзацу выполнится некоторая гипотетическая функция hidden(), в результате чего абзац станет невидимым на странице.

Подробно рассматривать атрибуты-события мы будем при изучении JavaScript. Сейчас же только отметим, что ознакомиться с событиями можно на сайте W3C, совершив переход по ссылке здесь или из нашего раздела 'Ссылки'. Посетите указанную страницу и обратите внимание, что в таблице события указываются без приставки 'on', хотя при использовании их в качестве атрибутов, присутствие приставки обязательно.

Видеоуроки по курсу HTML

Быстрый переход к другим страницам
Комментарии (6)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Zulus
Доброе! Не совсем понятна фраза в примере 1.5. второй параграф "при нажатии комбинации клавиш браузера + 's'." и третий параграф при наведении курсора всплывает подсказка Показано не все содержимое!!! а при нажатии Таб появляется только рамка которая выделяет по очереди параграфы так и должно быть?,
№108 от 2018-01-14 13:02:37
Нравится ()
Ответить
Петр Романовский
Zulus
Zulus
Доброе! Не совсем понятна фраза в примере 1.5. второй параграф "при нажатии комбинации клавиш браузера + 's'." и третий параграф при наведении курсора всплывает подсказка Показано не все содержимое!!! а при нажатии Таб появляется только рамка которая выделяет по очереди параграфы так и должно быть?,
2018-01-14 13:02:37
Zulus, спасибо за вопрос. Я дописал описание атрибута accesskey, там представлены и спецкомбинации клавиш для каждого браузера и описание эффекта от использования. Что касается 'Показано не все содержимое!!! ', то это значение title. Я его изменил на 'Мой tabindex равен единице!'.
№109 от 2018-01-14 16:39:58
Нравится ()
Ответить
Николай
Chrome игнорирует атрибут translate. Кстати версия 5.2 вышла. <p lang="en" translate="no"> Enigma. </p>
№103 от 2017-12-27 20:28:37
Нравится ()
Ответить
Петр Романовский
Николай
Николай
Chrome игнорирует атрибут translate. Кстати версия 5.2 вышла. <p lang="en" translate="no"> Enigma. </p>
2017-12-27 20:28:37
Николай, так точно! Новая рекомендация опубликована 14 декабря 2017. Посмотреть ее можно на официальном ресурсе W3C, а перейти из нашего раздела 'Ссылки'->'Официальные'.
№111 от 2018-01-14 18:14:24
Нравится ()
Ответить
Luka StarZzz
Петр Романовский
Петр Романовский
Николай, так точно! Новая рекомендация опубликована 14 декабря 2017. Посмотреть ее можно на официальном ресурсе W3C, а перейти из нашего раздела 'Ссылки'->'Официальные'.
2018-01-14 18:14:24
Петр Романовский, Никак не могу найти такую же таблтцу с элементами и атрибутами, как у вас на видео((( Уже весь сайт перелопатил, он совсем по другому отображается((
№129 от 2018-02-10 03:45:31
Нравится ()
Ответить
Петр Романовский
Luka StarZzz
Luka StarZzz
Петр Романовский, Никак не могу найти такую же таблтцу с элементами и атрибутами, как у вас на видео((( Уже весь сайт перелопатил, он совсем по другому отображается((
2018-02-10 03:45:31
Да, таблицы они уже убрали. Теперь элементы перечислены в 4 разделе, но без таблицы. Универсальных атрибутов, кстати, стало уже 13.
№137 от 2018-04-03 10:59:52
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!