A атрибуты html – HTML-атрибуты data-* для хранения параметров и получения их в js / Habr

Универсальные атрибуты | HTML | WebReference

Универсальные атрибуты применяются практически ко всем элементам HTML, поэтому выделены в отдельную группу, чтобы не повторять их для каждого элемента.

accesskey

Позволяет получить доступ к элементу с помощью заданного сочетания клавиш.

class

Определяет имя класса, которое позволяет связать элемент со стилевым оформлением.

contenteditable

Сообщает, что элемент доступен для редактирования пользователем.

contextmenu

Устанавливает контекстное меню для элемента.

data-*

Позволяет создавать свои атрибуты для хранения произвольной информации.

dir

Задаёт направление и отображение текста — слева направо или справа налево.

draggable

Указывает, можно ли перетаскивать элемент используя Drag and Drop API.

dropzone

Определяет, что делать с перетаскиваемыми пользователем данными — скопировать их, перетащить или связать.

hidden

Скрывает содержимое элемента от просмотра.

id

Указывает имя стилевого идентификатора.

itemid

Определяет уникальный глобальный идентификатор элемента для микроданных.

itemprop

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

itemref

Связывает свойства элемента с атрибутом itemscope.

itemscope

Задаёт область действия словаря в структуре данных.

itemtype

Указывает адрес словаря, который будет применяться для определения свойств элемента в структуре данных.

lang

Браузер использует значение атрибута для правильного отображения некоторых национальных символов.

spellcheck

Указывает браузеру проверять или нет правописание и грамматику в тексте.

style

Применяется для определения стиля элемента с помощью правил CSS.

tabindex

Устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.

title

Описывает содержимое элемента в виде всплывающей подсказки.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.01.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Значения атрибутов HTML — Как создать сайт

Типы значений у атрибутов HTML

Атрибуты HTML
Значения атрибутов

Схема HTML-тега с атрибутом и значением, выглядит следующим образом:

Схема парного тега:


<имяТега атрибут="значение"> </имяТега>

Схема одиночного тега:


<имяТега атрибут="значение">

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

  • Значения атрибутов событий,
  • Значения атрибутов форматирования,
  • Значения атрибутов селекторов,
  • Значения атрибута стиля,
  • Значения атрибутов указания пути (адреса, URL),
  • Значения атрибутов описания.

Значения атрибутов событий

В качестве значений атрибута события, выступает функция или JavaScript-код, их мы будем рассматривать при изучении языка программирования JavaScript и клиентской веб-технологии DOM.

Примеры, использования значений атрибутов событий:
onclick="alert()" — в качестве значения, выступает встроенная функция JavaScript,

onclick="myFunction()" — в качестве значения, выступает пользовательская функция JavaScript,
onmouseover="document.getElementById('nameID').style.color='#008800';" — в качестве значения, выступает технология DOM.

Значения атрибутов форматирования

Вместо атрибутов форматирования и их значений, сейчас используют CSS-свойства. Однако если вам всё же захочется добавить в HTML-теги атрибуты форматирования, то вы можете это сделать.

Значения атрибутов форматирования, делятся на три вида:

а) Значение размера,
б) Значение цвета,
в) Ключевое слово.

а) В качестве значений размера выступают пиксели px или проценты %, более подробно об этом вы можете прочитать в статье Единицы измерения в HTML

Примеры использования значений размера атрибутов форматирования:
height="100px" — высота элемента 100 пикселей,
width="50%" — ширина элемента 50 процентов.

б) В качестве значений цвета могут выступать слова на английском языке (например red) или числа в шестнадцатеричном формате (например

#ff0000), более подробно об этом вы можете прочитать в статье Цвета в HTML

Примеры использования значений цвета атрибутов форматирования:
color="red" — красный цвет шрифта, задан английским словом,
bgcolor="#ff0000" — красный цвет фона элемента, задан в шестнадцатеричном формате,
bordercolor="green" — зелёный цвет рамки элемента, задан английским словом.

в) В качестве значений ключевого слова выступают слова которые уже встроены в язык HTML, например right, top, _blank и т.д.

Примеры использования значений ключевого слова, в атрибутах:
align="right" — выравнивает элемент по правому краю,
valign="bottom" — выравнивает элемент по нижнему краю,
target="_blank" — открывает страницу в новом окне (не является атрибутом форматирования).

Значения атрибутов селекторов

В качестве значений атрибутов селекторов выступает любое слово которое можно набрать английскими буквами, более подробно об этом вы можете прочитать в статье Селекторы CSS

Примеры использования значений атрибутов селекторов:
class="имяКласса" — значение имени селектора класса,
id="имяУникальногоИдентификатора" — значение имени селектора уникального идентификатора.

Значение атрибута стиля

В качестве значения атрибута стиля выступает CSS-код, более подробно об этом вы можете прочитать в учебнике по языку CSS, в статье Внедрение атрибута style

Примеры использования значений атрибута style=" ":
style="color: green;" — присвоить шрифту зелёный цвет green,
style="font-family: Arial;" — присвоить шрифту имя Arial.

Значения атрибутов указания пути

В качестве значений атрибутов указания пути (адреса) выступает адрес сайта, страницы или файла, например:

http://site.ru — абсолютный путь,
http://site.ru/stranitsa.html — абсолютный путь,

../stranitsa.html — относительный путь,
/img/myPicture.html — относительный путь.

Более подробно об адресах в HTML, а также относительных и абсолютных путях можно прочитать в статье Адреса в HTML

Примеры использования значений атрибутов указания пути:
href="http://site.ru" — ссылка на сайт,
src="/img/myPicture.jpg" — ссылка на файл изображения.

Значения атрибутов описания

В качестве значений атрибутов описания выступает произвольный текст описывающий тот или иной элемент страницы.

Примеры использования значений атрибутов описания:
alt="Это фотография моего кота" — описание изображения,
title="Нажав на ссылку вы перейдёте на крутой сайт" — описание ссылки с помощью глобального атрибута title.

Читать далее: Шпаргалка по HTML


Дата публикации поста: 5 февраля 2016

Дата обновления поста: 16 октября 2014


Навигация по записям

HTML-атрибуты. Полный список атрибутов HTML

Атрибут Значение
accesskey Содержит перечень клавиш на клавиатуре, которые применяются для доступа к этому элементу. Как правило применяется к таким элементам: <a>, <area>, <button>, <input>, <label>, <legend>, <textarea>.
Значение: перечень клавиш
class Используется для задания имени класса, чтобы в последствии через CSS можно было задать стиль к этому классу. Значение: имя класса.
contenteditable Позволяет пользователю редактировать любой элемент, если присвоить этому атрибуту значение true. Если false, то соответственно элемент становится нередактируемым.
Значение: true/false.
contextmenu Служит для добавления к элементу контекстного меню, которое задается с помощью тега <menu>.
Значение: атрибут id элемента <menu>.
dir Позволяет определить направление текста  контента в элементах <bdo> и <bdi>.
Значение: ltr/rtl/auto.
draggable Используется для назначения элементу свойства перетаскивания (drag’n’drop), если установить в true, то элемент можно перетаскивать.
Значение: true/false/auto.
dropzone Служит для определении области, куда можно как бы бросить перетаскиваемые элементы.
Значения:
copy —  перемещаемый элемент будет  скопирован в область.
move —  перемещаемый элемент будет перемещен в  область.
link —  при перемещении перемещаемого элемента будет создана ссылка на первичные данные элемента.
hidden Применяется для скрытия элемента, таким образом элемент может быть полностью скрыт.
Значение: hidden.
id Задает уникальный идентификатор элемента. Этот идентификатор должен быть уникальным у каждого элемента. Он нужен для задания стилей или для привязки JavaScript сценариев к элементу.
Значение: id — идентификатор элемента.
lang Задает код языка содержимого элемента.
Значение: код языка.
spellcheck Может указываться требуется или нет проверка элемента на наличие грамматических и синтаксических ошибок. Если установлено значение true, то проверка включена.
Значение: true/false.
style Используется для задания  внутреннего стиля к элементу. Например <h2 style=»color: red;»>Zagolovok</h2>
Значение: код CSS.
tabindex Позволяет задать порядковый номер элемента когда пользователь перемещается по элементам, например формы с помощью клавиши Tab.
Значение: номер.
title Используется для задания подсказки описания элемента, когда пользователь подводит мышь на элемент.
Значение: текст. подсказки
translate Для задания разрешения или запрета на перевод текста внутри элемента.
Значение: yes/no.

Глобальные атрибуты | htmlbook.ru

Наряду с атрибутами, характерными для конкретных тегов, в HTML5 существует и ряд атрибутов, который можно добавлять к любым тегам, поэтому входящие в эту группу атрибуты называются глобальными или универсальными. Ниже они перечислены с кратким описанием. По ссылке доступно подробное описание атрибута.

accesskey

Атрибут accesskey позволяет активировать ссылку с помощью некоторого сочетания клавиш с заданной в коде ссылки буквой или цифрой. Браузеры при этом используют различные комбинации клавиш. Например, для accesskey="s" работают следующие сочетания.

  • Internet Explorer: Alt + S
  • Chrome: Alt + S
  • Opera: Shift + Esc, S
  • Safari: Alt + S
  • Firefox: Shift + Alt + S

class

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

contenteditable

Сообщает, что элемент доступен для редактирования пользователем — допускается удалять текст, и вводить новый. Также работают стандартные команды вроде отмены, вставки текста из буфера и др.

contextmenu

Устанавливает контекстное меню для элемента. В качестве значения указывается идентификатор меню созданного с помощью тега <menu>.

dir

Задает направление и отображение текста — слева направо или справа налево. Браузеры обычно самостоятельно различают направление текста, если он задан в кодировке Юникод, но с помощью атрибута dir можно указать, в каком направлении отображать текст. Для арабских и еврейских символов приоритетным является направление, заложенное в Юникод, поэтому на них атрибут dir действовать не будет.

draggable

Позволяет перетаскивать элемент для дальнейшего манипулирования с ним.

dropzone

Указывает, что делать с перетаскиваемым элементом.

hidden

Скрывает содержимое элемента от просмотра. Такой элемент не отображается на странице, но доступен через скрипты.

id

Задаёт идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

itemid, itemprop, itemref, itemscope, itemtype

Группа атрибутов, предназначенная для работы с микроданными.

lang

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

spellcheck

Указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм (<input>, <textarea>), а также редактируемых элементов (у них установлен атрибут contenteditable).

style

Применяется для определения стиля элемента с помощью правил CSS.

tabindex

Атрибут tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. Переход происходит от меньшего значения к большему, например от 1 к 2, затем к 3 и так далее. При этом строгая последовательность не важна, допускается пропускать какие-то числа и начинать с любой цифры. Если значения tabindex у элементов совпадают, тогда учитывается их порядок появления в коде.

title

Создаёт всплывающую текстовую подсказку, которая появляется при наведении курсора на элемент. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *