Четверг, 24 Января 2013 16:49

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

Written by 
Оцени эту запись
(1 Голос)

Глобальные атрибуты применимы к любым HTML элементам. Они делятся на основные атрибуты и атрибуты событий. Рассмотрим их подробно.

 

Основные атрибуты HTML

 

accesskey - задаем элементу горячую клавишу для получения фокуса. В HTML5 данный атрибут применим ко всем HTML элементам, а в HTML4 только к элементам a, area, input, button, label, legend и textarea. Значением атрибута может быть цифра 0-9 или латинская буква A-Z. При задании данного атрибута со значением "a" элементу, он получит фокус при нажатии Alt+A(Chrome, Safari, IE) или Shift+Alt+A(Firefox).

 

class - задает одно или несколько имен класса, при помощи которых можно стилизировать данный элемент в CSS. Хоть чаще всего классы элементов используются для оформления, иногда их используют для обращения к элементу через JavaScript. В HTML5 классы можно задавать любому элементу, в HTML4 классы запрещается задавать html, head, script, style, meta, title. Значением атрибута может быть слово или несколько слов, которые начинаются в буквы a-z или A-Z. Далее могут идти латинские символы, подчеркивание, дефис и цифры.

 

contenteditable - задает редакритуемость содержимого элемента. Значение атрибута true или false. Например, если блоку с текстом задать атрибут contentaditable="true", то можно будет редактировать текст внутри блока. Данный атрибут появился только в HTML5.

 

contextmenu - позволяет задавать контекстное меню элементу при нажатии на нем на правую клавишу мыши. Значением атрибута является идентификатор меню, которое должно появляться. Данный атрибут новый в HTML5 и пока не поддерживается браузерами.

 

dir - задает направление текста в элементе. Может принимать значения ltr(left-to-right) и rtl(right-to-left). 

 

draggable - указывает, можно ли элемент перетаскивать. Может принимать значения true, false, auto. Атрибут новый в HTML5. Поддерживается всеми основными браузерами и IE начиная с 9 версии. Ссылки и картинки по умолчанию считаются перетягиваемыми.

 

dropzone - указывает будут перетаскиваемые элементы скопированы(значение атрибута copy), перенесены(значение move) или дадут ссылку на перетаскиваемые данные(link). Новый атрибут в HTML5, не поддерживается браузерами.

 

hidden - скрывает элемент, которые еще или уже не актуален. Принимает значения true и false, можно задавать без значения. Поддерживается всеми браузерами, кроме IE. Обычно используется для скрытия данных, пока не будет выполнено некоторое условие.

 

id - задает идентификатор элемента, поддерживается всеми браузерами. Идентификатор должен быть уникальным (единственным) на странице. Используется для обращения к элементу из JavaScript и CSS(реже). Значение атрибута должно содержать хотя бы одну букву, не должно содержать пробелы и является чувствительным к регистру.  

 

lang - указывает на язык контента элемента. Значением атрибута должен быть код языка, например, "en". В HTML5 может применяться к любому элементу, в HTML4 не может применяться к элементам br, hr, frame, iframe, frameset, param, script

 

spellcheck -  поддерживается Chrome, Safari и Opera, указывает нужно ли проверять грамматику контента элемента. Принимает значения true и false. Применим к textarea, input(кроме password) и редактируемым текстовым элементам.

 

style - атрибут задает инлайновые стили элемента. Атрибут поддерживается всеми браузерами и по HTML5 применим к любому элементу. Стили заданные в атрибуте style перебьют другие стили элемента.

 

tabindex - задает элементу порядковый номер в очереди получения фокуса при помощи клавиши Tab. Значение атрибута - целое положительное число. Чем меньше значение атрибута tabindex элемента, тем раньше он получит фокус при перемещении по странице клавишей Tab. Поддерживается всеми браузерами, кроме Safari. По HTML5 применим к любому элементу, по HTML4 применим только к a, area, textarea, input, select, button.

 

title - задает подсказку элементу, которая отображается при наведении. Значение атрибута - текст, описывающий элемент. Работает атрибут во всех браузерах. По HTML5 применим ко всем элементам, по HTML4 не применим к скрытым элементам - html, head, script, style, meta, title. 

 

Атрибуты событий

 

Атрибуты событий можно добавлять HTML элементам, чтобы задавать определять действия на события. Атрибут задает событие, а его значение в виде скрипта JavaScript задает действие при этом событии. Например, при клике на элемент всплывает окошко - onclick="alert('Message')".

 

События окна, задаются элементу body(все, кроме onload, onunload добавлены в HTML5):

 

onafterprint и onbeforeprint - скрипт запускается после и до того, как элемент напечатается

 

onbeforeunload - скрипт запускается до того, как документ будет выгружен

 

onerror - скрипт запускается, когда происходит ошибка

 

onhaschahge - скрипт выполняется, когда документ изменился

 

onload - скрипт выполняется, когда документ полностью загрузился

 

onmessage - скрипт выполняется, когда появляется сообщение

 

onoffline - скрипт выполняется, когда документ становится оффлайновым

 

ononline - скрипт выполняется, когда документ становится онлайновым

 

onpagehide - скрипт выполняется, когда окно становится скрытым

 

onpageshow - скрипт выполняется, когда окно становится видимым

 

onpopstate - скрипт выполняется, когда изменяется история(window's history)

 

onredo - скрипт выполняется, когда документ выполняет повтор

 

onresize - скрипт выполняется, когда изменяется размер окна браузера

 

onstorage - скрипт выполняется, когда изменяется Web Storage

 

onundo - скрипт выполняется, когда на странице происходит отмена

 

onunload - скрипт выполняется, когда страница выгружена или когда окно браузера закрывается

 

 

События форм:

 

onblur - скрипт выполняется, элемент теряет фокус(фокус переходит к другому элементу)

 

onchange - скрипт выполняется, когда изменяется значение элемента (value)

 

oncontextmenu(HTML5) - скрипт выполняется, когда появляется контекстное меню

 

onfocus - скрипт выполняется, когда элемент получает фокус

 

onformchange(HTML5) - скрипт выполняется, когда изменяется форма

 

onforminput(HTML5) - скрипт выполняется, когда форма получает пользовательский ввод

 

oninput(HTML5) - скрипт выполняется, когда элемент получает пользовательский ввод

 

oninvalid(HTML5) - скрипт выполняется, когда элемент недействительный

 

onreset(не поддерживается HTML5) - скрипт выполняется, когда нажата кнопка Reset формы

 

onselect - скрипт выполняется, когда некоторый текст в элементе становится выделенным

 

onsubmit - скрипт выполняется при отправке формы

 

 

События клавиатуры:

 

onkeydown - скрипт срабатывает, когда пользователь нажимает клавишу

 

onkeypress - скрипт срабатывает, когда пользователь зажимает(удерживает) клавишу

 

onkeyup -скрипт срабатывает, когда пользователь отпускает клавишу

 

(При нажатии клавиши клавиатуры срабатывает такая последовательность событий - onkeydown, onkeypress, onkeyup. Кнопка опускается, зажимается, отпускается)

 

 

События мыши:

 

onclick - скрипт срабатывает при клике на элементе

 

ondblclick - скрипт срабатывает при двойном клике на элементе

 

ondrag(HTML5) - скрипт срабатывает, когда элемент перетаскивается

 

ondragend(HTML5) - скрипт срабатывает, когда заканчивается перетаскивание элемента

 

ondragenter(HTML5) - скрипт срабатывает, когда элемент был перемещен в зону цели перемещения

 

ondragleave(HTML5) - скрипт срабатывает, когда элемент покидает зону цели перемещения

 

ondragover(HTML5) - скрипт срабатывает, когда элемент находится над зоной цели перемещения

 

ondragstart(HTML5) - скрипт срабатывает, когда начинается перетаскивание элемента

 

ondrop(HTML5) - скрипт срабатывает, когда перетаскиваемый элемент отпускают

 

onmousedown - скрипт срабатывает, когда на элементе нажимается кнопка мыши

 

onmousemove - скрипт срабатывает, когда над элементом движется курсор мыши

 

onmouseout - скрипт срабатывает, когда курсор мыши уходит с элемента/p>

 

onmouseover - скрипт срабатывает, когда курсор мыши заходит на элемент

 

onmouseup - скрипт срабатывает, когда отпускается кнопка мыши

 

(Последовательность событий такая -- курсор появляется над элементом при onmouseover, перемещается над ним при onmousemove и покидает его при onmouseout. При клике на элементе срабатывают onmousedown(нажимается), потом onmouseup(отпускается))

 

onmousewheel(HTML5) - скрипт срабатывает, когда вращается колесико мыши

 

onscroll(HTML5) - скрипт срабатывает, когда прокручивается полоса прокрутки элемента

 

 

 

 

Additional Info

Еще в этой категории: « Таблица HTML Список HTML »

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов