belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

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

HTML >>>

1.6. Атрибуты и их значения

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

Универсальных атрибутов 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>
		Зато при отсутствии 'глюков' я получаю фокус при нажатии<br>
		комбинации клавиш браузера + 
		<span style="color: green">'s'</span>.<br>
		В firefox 'глюка' точно не будет.
	</p>
	
	<p tabindex="1" title="Показано не все содержимое!!!">
		<span hidden>А я показан не буду.</span>
		<span>Наведите на меня курсор и подождите)))</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', хотя при использовании их в качестве атрибутов, присутствие приставки обязательно.

Контрольные вопросы и задания

  1. Какие атрибуты называют универсальными? Перечислите их.
  2. Для чего предназначены атрибуты class, id, title, hidden?
  3. В какой последовательности передается фокус между элементами,
    у которых указан атрибут tabindex?
  4. Для чего используются атрибуты-события?

Словарь новых английских слов

hypertext [ˈhʌɪpətɛkst] – гипертекст.
mark [mɑ:k] – отмечать, маркировать, метка.
language [ˈlaŋɡwɪdʒ] – язык.
wide [waɪd] – широкий.
web [web] – паутина, сетка.
width [wɪtθ] – ширина.
height [haɪt] – высота.
head [hed] – заголовок, голова.
body [ˈbɔdɪ] – тело.
footer [ˌfutə] – нижний колонтитул, 'подвал'.
article [ˈɑːtɪk(ə)l] – статья.
navigation [,nævi'gei∫ən] – навигация, передвижение.
charset [ˈtʃɑ:set] – кодировка.
inline [inˈlaɪn] – строчный.
block [blɔk] – блок, блочный.
background [ˈbakɡraʊnd] – фон, задний план.
title ['taitl] – заглавие, название, надпись.
edit ['edit] – редактировать, правка, редактирование.
content [kənˈtɛnt] – содержимое, содержание.
check [tʃɛk] – проверять, проверка, галочка, птичка.
sheet [ʃiːt] – лист, страница, таблица.
span [spæn] – интервал.
window [ˈwɪndəʊ] – окно.
code [kəʊd] – код.
example [ɪɡˈzæmpl] – пример, образец.
aside [ə'said] – в стороне, отдельно, кроме.
color [ˈkʌlər] – цвет, краска.
blue [blu:] – синий, голубой.
yellow ['jeləu] – желтый.
red [red] – красный.
green [gri:n] – зеленый.
grey [grei] – серый.
black [blæk] – черный.
white [wait] – белый.
orange ['ɔrindʒ] – оранжевый.
violet ['vaiəlit] – фиолетовый.
hidden ['hidn] – скрытый, скрывать, прятать.
access [ˈækses] – доступ.
key [ki:] – ключ, клавиша, идентификатор.
translate [transˈleɪt] – переводить.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх