Атрибут data html: Атрибут data-* | htmlbook.ru

Содержание

Атрибут data-*



Пример

Используйте атрибут data-* для встраивания пользовательских данных:

<ul>
  <li data-animal-type=»bird»>Owl</li>
  <li data-animal-type=»fish»>Salmon</li>
  <li data-animal-type=»spider»>Tarantula</li>
</ul>


Определение и использование

Атрибуты data-* используются для хранения пользовательских данных, закрытых для страницы или приложения.

Атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.

Сохраненные (пользовательские) данные можно затем использовать в JavaScript страницы, чтобы создать более привлекательный пользовательский интерфейс (без вызовов AJAX или запросов к базам данных на стороне сервера).

Атрибуты data-* состоят из двух частей:

  1. Имя атрибута не должно содержать прописных букв и должно быть по крайней мере один символ длиной после префикса «data-«
  2. Значением атрибута может быть любая строка

Примечание: Пользовательские атрибуты с префиксом «data-» будут полностью игнорироваться агентом пользователя.


Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает этот атрибут.

Атрибут
data-* 4.0 5.5 2.0 3.1 9.6

Различия между HTML 4,01 и HTML5

Атрибуты data-* являются новыми в HTML5.


Синтаксис

<element data-*=»somevalue«>

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

Значение Описание
somevalue Задает значение атрибута (в виде строки)

Похожие страницы

HTML Учебник: HTML Атрибуты

HTML DOM Ссылки: HTML DOM getAttribute() Метод


Атрибут data-* HTML — Веб учебники



Пример

Используйте атрибут data — * для внедрения пользовательских данных:

<ul>
  <li data-animal-type=»bird»>Сова</li>
  <li data-animal-type=»fish»>Лосось</li>
  <li data-animal-type=»spider»>Тарантул</li>
</ul>

Попробуйте сами »

Определение и использование

Атрибуты data-* используются для хранения личных данных пользователя на странице или в приложении.

Атрибуты data-* дают нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.

Затем сохраненные (пользовательские) данные можно использовать в JavaScript страницы для создания более привлекательного пользовательского интерфейса (без каких-либо вызовов Ajax или запросов к базе данных на стороне сервера).

Атрибуты data-* состоят из двух частей:

  1. Атрибут name не должн содержать заглавные буквы и должен содержать хотя бы один символ после префикса «data-«
  2. Значением атрибута может быть любая строка

Примечание: Пользовательские атрибуты с префиксом «data-» будет полностью проигнорирован агентом пользователя.


Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.

Атрибут
data-* 4.0 5.5 2.0 3.1 9.6

Различий между HTML 4.01 и HTML5

Атрибуты data-* является новым в HTML5.


Синтаксис

<element data-*=»somevalue«>

Значение атрибута

Value Описание
somevalue Задает значение атрибута (в виде строки)

Связанные страницы

Учебник HTML: Атрибуты HTML

Справочник DOM HTML: Метод getAttribute() DOM HTML


Атрибут data-* | wm-school



Атрибут data-* (от англ. «data» ‒ «данные») является универсальным, так как его можно использовать практически для любых целей. В частности основной задачей данного атрибута является хранение пользовательских данных частной страницы или приложения, для которых больше нет соответствующих атрибутов или элементов.

Данный атрибут условно делится на 2 составляющие:

  1. Приставка data- определяющая данный атрибут;
  2. Следующее за приставкой data- пользовательское имя атрибута, которое может быть задано любым количеством символов, но не менее одного символа после приставки. Можно использовать латинские буквы в нижнем регистре (даже если всё же имя атрибута прописывается заглавными буквами, они все автоматически переводятся в соответствующие символы нижнего регистра), цифры и следующие символы: дефис (-), двоеточие (:), подчёркивание (_).

Синтаксис

Синтаксис прост — любой атрибут, чье имя начинается с data-, является data-* атрибутом. Допустим у вас имеется статья и вы хотите сохранить дополнительную информацию без её визуального представления. Используйте для этого data-атрибуты:

<article
 
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Значения

В качестве значения может указываться любое значение, соответствующее замыслу пользователя.

Значение по умолчанию

Нет.

Применяется к тегам

Атрибут data-* относится к глобальным атрибутам, и может быть использован с любым элементом HTML.

Доступ в JavaScript

Все браузеры позволяют вам получить и изменить data-атрибуты в JavaScript с использованием методов getAttribute и setAttribute.
Но стандарты предоставляют более простой способ — у нас есть API для работы с наборами данных HTML5, которое возвращает объект DOMStringMap. Необходимо помнить, что data-атрибуты трансформируются в переменные, к которым в дальнейшем можно обращаться и получать значения, по следующим правилам:

  • приставка data- удаляется;
  • любой дефис идущий перед буквой удаляется, а буква за ним становится заглавной;
  • другие дефисы остаются неизменными;
  • любые другие буквы остаются неизменными.

Например, атрибут data-date-of-birth преобразуется в переменную dateOfBirth. Для обращения к атрибутам и получения их значений через скрипты применяется метод dataset. Он же используется и для установки нового значения.

значение = элемент.dataset.атрибут
элемент.dataset.атрибут = значение

Здесь имя атрибута — это переменная, полученная путём изменения атрибута по вышеприведённым правилам (dateOfBirth, а не data-date-of-birth или date-of-birth).

Примеры использования:

Доступ к data-атрибутам с использованием метода getAttribute

Пример HTML: Попробуй сам
<ul>
  <li data-animal-type="птица">Сова</li>
  <li data-animal-type="рыба">Лосось</li> 
  <li data-animal-type="паук">Тарантул</li> 
</ul>

Доступ к data-атрибутам с использованием метода dataset

Пример HTML: Попробуй сам
<div data-id="1234567890" 
       data-user="Вася Тёркин" 
       data-date-of-birth="01.07.1990">Пользователь</div>

Спецификации

Поддержка браузерами


Учебник HTML

HTML уроки: HTML Атрибуты



Please enable JavaScript to view the comments powered by Disqus.

Настройка отслеживания значений data-атрибутов с помощью GTM

 

data-атрибуты хранят в себе различные данные элемента. Их может быть любое количество. Начинаются со слова data- и заканчиваться могут чем угодно, на вкус разработчика. Могут присутствовать во многих HTML-тегах: div, span, a и т.д. По спецификации, допускаются только символы нижнего регистра и тире. Например, data-id, data-name, data-item-id, data-article-title, data-product-name и т.п., как душе угодно.

В данной статье разберёмся, как отслеживать значения data-атрибутов с помощью Google Tag Manager и отправлять эти данные в виде событий в системы аналитики.

Для начала необходимо убедиться, что в исходном коде сайта присутствует код ГТМ. Иначе ничего не получится.

В этом примере будем отслеживать атрибут data-item-id, который прописан в ссылке (в теге a). Это будет id товара в интернет-магазине. При клике на кнопку Купить он будет передавать данные в Google Tag Manager.

Переходим в ГТМ в Переменные и создадим там пользовательскую переменную с именем aev — data-item-id. Выберем тип переменной — Переменная автоматического события

и зададим ей следующие параметры:

  • тип переменной — Атрибут элемента
  • название атрибута — data-item-id

Затем переходим в Триггеры и создадим триггер с названием click — addToCart

В настройках триггера выберем тип Клик — Все элементы

и в условиях активации зададим:

 

Click ClassesсодержитaddToCart

так как кнопка имеет классы addToCart, product-buy и js-add-to-cart.

После этого переходим в Теги и создадим тег с названием GA — click — addToCart. Выберем тип Google Аналитика — Universal Analytics

и в Конфигурации тега зададим ему следующие параметры:

  • тип отслеживания — Событие
  • категория — addToCart
  • действие — click
  • ярлык — product id: {{aev — data-item-id}}
  • настройки Google Analytics: {{GA ID}}

и привяжем к нему триггер click — addToCart

Сохраняем и опубликовываем контейнер.

Проверяем:

Сохраняем и опубликовываем контейнер.

Как видно из скриншота выше, тег GA — click — addToCart успешно запустился и передал данные в Google Аналитику

Если необходимо отслеживать несколько data-атрибутов в одном HTML-теге, то создаём переменные аналогично с выше описанными настройками, только с разными данными, и в теге для GA пропишем эти переменные в нужных местах. Главное — чтобы они в нём присутствовали.

Поделиться ссылкой:

 

javascript — что такое атрибут data-реактид в html?

Пока я просматривал HTML некоторых страниц, я заметил, что некоторые из них используют этот атрибут «data-реакцииtid», например:

 <a data-reactid="......" ></a>

Что это за атрибут и какова его функция?

96

Ayman El Temsahi 11 Июл 2013 в 09:37

5 ответов

Лучший ответ

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

Это важно, поскольку приложения React могут отображаться на сервере а> как и клиент. Внутренне React создает представление ссылок на узлы DOM, которые составляют ваше приложение (упрощенная версия приведена ниже).

{
  id: '.1oqi7occu80',
  node: DivRef,
  children: [
    {
      id: '.1oqi7occu80.0',
      node: SpanRef,
      children: [
        {
          id: '.1oqi7occu80.0.0',
          node: InputRef,
          children: []
        }
      ]
    }
  ]
}

Невозможно обмениваться действительными ссылками на объекты между сервером и клиентом, и отправка сериализованной версии всего дерева компонентов является потенциально дорогостоящей. Когда приложение отображается на сервере и React загружается на клиенте, единственными данными, которые у него есть, являются атрибуты data-reactid.

<div data-reactid='.loqi70ccu80'>
  <span data-reactid='.loqi70ccu80.0'>
    <input data-reactid='.loqi70ccu80.0' />
  </span>
</div>

Это должно быть в состоянии преобразовать это обратно в структуру данных выше. Это происходит с помощью уникальных атрибутов data-reactid. Это называется надувать дерево компонентов.

Вы также можете заметить, что если React отрисовывает на стороне клиента, он использует атрибут data-reactid, даже если ему не нужно терять ссылки. В некоторых браузерах он вставляет ваше приложение в DOM с помощью .innerHTML, а затем сразу же раздувает дерево компонентов, что повышает производительность.

Другое интересное отличие заключается в том, что отрендеренные идентификаторы React на стороне клиента будут иметь инкрементный целочисленный формат (например, .0.1.4.3), тогда как для рендеринга на сервере будет добавляться случайная строка (например, .loqi70ccu80.1.4.3). Это связано с тем, что приложение может отображаться на нескольких серверах, и важно, чтобы не было коллизий. На стороне клиента существует только один процесс рендеринга, что означает, что счетчики могут использоваться для обеспечения уникальных идентификаторов.

React 15 использует вместо него document.createElement, поэтому разметка, представленная клиентом, больше не будет включать эти атрибуты.

128

Fred 18 Мар 2020 в 11:31

Это пользовательский атрибут html, но, вероятно, в этом случае он используется библиотекой Facebook React JS.

Посмотрите: http://facebook.github.io/react/

35

Samuel G. P. 14 Окт 2014 в 16:11

Атрибуты данных обычно используются для различных взаимодействий. Как правило, с помощью JavaScript. Они никак не влияют на поведение сайта и являются удобным способом передачи данных для любых целей. Вот статья, которая может прояснить ситуацию:

http://ejohn.org/blog/html-5-data-attributes/

Вы можете создать атрибут данных, добавив префикс data- к любой стандартной безопасной строке атрибута (буквенно-цифровой без пробелов или специальных символов). Например, data-id или в этом случае data-reactid

3

Kai Qing 11 Июл 2013 в 05:40

Атрибут пользовательских данных в HTML5

Хотелось бы процитировать комментарий Яна в моем ответе:

Это просто атрибут (действительный) элемента, который вы можете использовать для хранения данных / информации о нем.

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

reactid — это просто суффикс, здесь вы можете указать любое имя, например: data-Ayman.

Если вы хотите найти разницу, проверьте скрипты в этом ТАКОМ ответе и комментарии.

11

Community 23 Май 2017 в 12:18

Это атрибут данных HTML. Подробнее об этом см .: http://html5doctor.com/html5-custom-data-attributes/

По сути, это просто контейнер ваших пользовательских данных, в то же время делающий HTML верным. Это data- плюс некоторый уникальный идентификатор.

3

Ben Gulapa 11 Июл 2013 в 05:41

Входной и выходной HTML-код на страницах OneNote — Microsoft Graph

  • Чтение занимает 13 мин

В этой статье

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

HTML-код, возвращаемый при получении содержимого страницы, называется выходным HTML-кодом. Выходной HTML-код не совпадает со входным.

API OneNote в Microsoft Graph сохраняют семантическое содержимое и базовую структуру входного HTML-кода, но преобразовывают ее в набор поддерживаемых элементов HTML и свойств CSS. API также добавляют настраиваемые атрибуты, поддерживающие функции OneNote.

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

Элемент body

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

Входные атрибуты
Входной атрибут Описание
data-absolute-enabled Указывает, поддерживают ли во входном тексте элементы с абсолютным положением.
style

Свойства CSS style для основного текста. В выходном HTML-коде входные параметры могут быть встроены в соответствующие дочерние элементы.

В настоящее время цвет фона не поддерживается для элемента body.

Выходные атрибуты
Выходной атрибут Описание
data-absolute-enabled Указывает, поддерживаются ли в тексте элементы с абсолютным положением. В выходном HTML-коде всегда задано значение true.
style Свойства font-family и font-size основного текста.

Элементы div

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

Входные атрибуты
Входной атрибут Описание
data-id Ссылка на элемент.

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

data-render-fallback Резервное действие в случае ошибки извлечения: render (по умолчанию) или none
data-render-method Выполняемый метод извлечения, например
extract.businesscard или extract.recipe
data-render-src Источник контента для извлечения.
style Свойства положения, размера, шрифта и цвета для элемента div:
  • position (только значение absolute), left, top и width (высота элементов Div настраивается автоматически).

    Используется для создания элемента div с абсолютным положением, только если он является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".

    Пример: <div ... />

  • Свойства CSS style элемента. В выходных данных HTML эти значения возвращаются встроенными в соответствующие дочерние элементы.

API OneNote в Microsoft Graph заключают все содержимое основного текста по крайней мере в один элемент div. API создает разделитель по умолчанию (с атрибутом data-id="_default") для содержимого основного текста, если:

  • Входной атрибут data-absolute-enabled элемента body пропущен или для него задано значение false. В этом случае все содержимое основного текста помещается в разделитель по умолчанию.

  • Для входного атрибута data-absolute-enabled элемента body задано значение true, но входной HTML-код содержит непосредственные дочерние элементы div, img или object без абсолютного положения. В этом случае непосредственные дочерние элементы  div, img или object без абсолютного положения помещаются в элементы div по умолчанию.

Выходные атрибуты

Вспомогательные разделители

Если элемент div во входных данных HTML не входит в структуру страницы и не переносит сведения, используемые приложением OneNote, API перемещает содержимое разделителя в родительский или используемый по умолчанию разделитель. Этот процесс показан в приведенных ниже примерах.

Входной HTML-код

Содержит вспомогательный вложенный разделитель.

<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div>
            <p>Some text</p>
            <div>
                <p>More text inside a div that doesn't define page structure</p>
            </div>
        </div>
    </body>
</html>
Выходной HTML-код

Примечание. Содержимое разделителя было перемещено в родительский разделитель, а вложенные теги <div> удалены. Элемент div был бы сохранен, если бы в нем были определены какие-либо семантические сведения, такие как data-id (пример: <div data-id="keep-me">).

<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
    <head>
        <title>Page Title</title>
    </head>
    <body data-absolute-enabled="true">
        <div data-id="_default">
            <p>Some text</p>
            <p>More text inside a nested div</p>
        </div>
    </body>
</html>

Элементы img

Для представления изображений на страницах OneNote используются элементы img. Входной и выходной HTML-код для элемента img может содержать перечисленные ниже атрибуты.

Входные атрибуты
Входной атрибут Описание
alt Предоставленный замещающий текст для изображения.
data-id Ссылка на элемент.

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

data-render-src Должно было задано значение data-render-src или src.

Веб-страница, которая будет отображаться в виде битового изображения на странице OneNote:

data-render-src="https://..." для общедоступного URL-адреса.

data-render-src="name:BlockName" для части изображения в блоке Presentation составного запроса.

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

data-tag Тег заметки для элемента.
style Свойства положения и размера изображения: position (только absolute), left, top, width и height.

Размер можно задать для любого изображения.

Свойства положения используются для создания изображения с абсолютным положением, только если изображение является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".

Пример: <img ... />

В выходном HTML-коде размеры изображения возвращаются по отдельности через атрибуты width и height.

src Должно было задано значение src или data-render-src.

Изображение, отображаемое на странице OneNote:

src="https://...": URL-адрес общедоступного изображения в Интернете.

src="name:BlockName": именованная часть составного запроса, представляющая изображение.

width, height Ширина и высота изображения в пикселях, но без обозначения px. Пример: width="400"

Примечание. API OneNote автоматически определяют тип входного изображения и возвращают его в качестве атрибута data-fullres-src-type в выходном HTML-коде. API также возвращает тип оптимизированного изображения в атрибуте data-src-type.

Выходные атрибуты
Выходной атрибут Описание
alt Предоставленный замещающий текст для изображения.
data-id Ссылка на элемент.

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

data-index Положение изображения. Для поддержки разделения изображений.
data-fullres-src Конечная точка версии изображения, которая была изначально внедрена на странице.
data-fullres-src-type Тип мультимедиа для ресурса data-fullres-src, например image/png или image/jpeg.
data-options Тип источника: printout для PDF-файлов или splitimage для всех остальных. Применяется только к разделенным изображениям, созданным с помощью атрибута data-render-src.
data-render-original-src Исходный URL-адрес источника изображения, если исходное изображение находится в общедоступной части Интернета и создано с использованием атрибута data-render-src.
data-src-type Тип мультимедиа для ресурса src, например image/png или image/jpeg.
data-tag Тег заметки для элемента.
id Уникальный сгенерированный ИД элемента. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.

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

src Конечная точка версии изображения, оптимизированного для веб-браузеров, а также мобильных телефонов и планшетов.
style Свойства позиции изображения.
width, height Ширина или высота изображения в пикселях.

Примеры выходного HTML-кода для изображений

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

<img 
    src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"  
    data-src-type="image/png"
    data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value"  
    data-fullres-src-type="image/png" ... />

В приведенных ниже примерах показаны сведения, которые может содержать элемент img в выходном HTML-коде.

Изображение с ресурсами высокого разрешения для Интернета
<img
    src="{web-ready-image-resource-url}/$value"
    data-src-type="image/{type}"
    data-fullres-src="{high-resolution-image-resource-url}/$value"
    data-fullres-src-type="image/{type}"
    [data-render-original-src="{original-source-url-or-named-part}"]
    [data-id="{image-id}"]
    [alt="supplied alt text"]
    [width="345"] [height="180"]
    [style="..."] />
Изображение, созданное с использованием атрибута
data-render-src
<img
    src="{web-ready-image-resource-url}/$value"
    data-src-type="image/{type}"
    data-fullres-src="{high-resolution-image-resource-url}/$value"
    data-fullres-src-type="image/{type}"
    data-render-original-src="{original-source-url-or-named-part}"
    [data-id="{image-id}"]
    [data-index="{index-of-split-image}"]
    [data-options="{printout-or-splitimage}"]
    [alt="supplied alt text"]
    [width="1024"] [height="1900"]
    [style="..."] />

Разделенные изображения

Изображения, созданные с использованием атрибута data-render-src (из URL-адреса страницы или именованной части), могут быть разделены на несколько компонентов для повышения производительности и удобства отрисовки. Всем компонентам изображения назначается одно и то же значение data-id. У каждого компонента изображения есть атрибут data-index с отсчетом от нуля, определяющий исходную вертикальную компоновку.

Разделенное изображение с тремя компонентами
<div data-id="multi-component-image">
    <img
        src="{image-resource0-url}/$value"
        data-src-type="image/{type}"
        data-fullres-src="{image-resource0-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="0" 
        data-render-original-src="{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
    <img 
        src="{image-resource1-url}/$value" 
        data-src-type="image/{type}" 
        data-fullres-src="{image-resource1-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="1" 
        data-render-original-src="{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
    <img 
        src="{image-resource2-url}/$value" 
        data-src-type="image/{type}" 
        data-fullres-src="{image-resource2-url}/$value" 
        data-fullres-src-type="image/{type}" 
        data-index="2" 
        data-render-original-src=""{original-source-url-or-named-part}"
        data-id="{same-image-id}" ... />
</div>

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

Элементы iframe

Страницы OneNote могут содержать внедренные видео, представленные элементами iframe.

Примечание. Вы также можете вложить видеофайл с помощью элемента object.

Входные атрибуты
Входной атрибут Описание
data-original-src Обязательный. URL-адрес источника видео. См. список поддерживаемых источников видео.

Пример: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"

width, height Ширина или высота элемента iframe в пикселях. Пример: width=300
Выходные атрибуты
Выходной атрибут Описание
data-original-src URL-адрес источника видео.
src Ссылка на видео, внедренное в страницу OneNote.
width, height Ширина или высота элемента iframe в пикселях.

Пример: width=300

Пример выходного HTML-кода для видео

Выходные элементы iframe содержат конечные точки, ссылающиеся на исходную страницу и видео, как показано ниже.

<iframe 
    
    data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8" 
    src="https://www.youtube.com/embed/3Ztr44aKmQ8?feature=oembed&autoplay=true" />

Элементы object

Страницы OneNote могут содержать вложения, представленные элементами object. Входной и выходной HTML-код для элемента object может содержать перечисленные ниже атрибуты.

Примечание. API OneNote также может отображать содержимое файлов в виде изображений на странице, если файл отправлен как изображение и использует атрибут data-render-src. Пример: <img data-render-src="name:part-name" ... />

Входные атрибуты
Входной атрибут Описание
data Обязательный. Имя части, которая представляет файл в составном запросе.
data-attachment Обязательный параметр. Имя файла.
data-id Ссылка на элемент.

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

style Свойства положения и размера объекта: position (только absolute), left, top и width.

Используется для создания объекта с абсолютным положением, только если объект является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".

Пример: <object ... />

type Обязательный.

Стандартный тип файла мультимедиа. Для файлов известных типов на странице OneNote отображается значок, связанный с типом файла. Для файлов неизвестных типов отображается универсальный значок файла.

Выходные атрибуты
Пример выходных данных HTML для объектов

Выходные элементы object содержат конечные точки, ссылающиеся на файловые ресурсы со страницы, как показано ниже. Вы можете отправлять отдельные запросы GET к конечным точкам файловых ресурсов, чтобы получать их двоичное содержимое.

<object
    data="https://graph.microsoft.com/v1.0/me/onenote/resources/{file-id}/$value"
    data-attachment="fileName.pdf" 
    type="application/pdf" 
    [style="..."] />

Абзацы и заголовки

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

Входные атрибуты
Выходные атрибуты

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

Входной HTML-код со стилями, определенными с помощью встроенных стилей знаков, в начальном теге внутри элемента span.
<h2>Heading <i>One</i> text</h2>
<p>Some text</p>
<p>Some <span >more</span> text</p>
Выходной HTML-код со стилем знака
<i> и параметрами шрифта в начальном теге <p>, возвращаемыми в виде встроенных стилей CSS в элементах span.
<h2>Heading <span>One</span> text</h2>
<p><span>Some text</span></p>
<p>Some <span>more</span> text</p>

Списки

Для представления списков используются элементы ol или ul, которые содержат элементы списка, представленные элементами li.

Входной и выходной HTML-код списков и их элементов может содержать перечисленные ниже атрибуты.

Входные атрибуты
Выходные атрибуты

Стили списков

API OneNote в Microsoft Graph поддерживают следующие стили списков:

Упорядоченный список Неупорядоченный список
none none
decimal (по умолчанию)
disc (по умолчанию)
lower-alpha
circle
lower-roman
square
upper-alpha  
upper-roman  

Вы можете применять глобальные стили для списка в элементе ol или ul входных данных HTML, но стили возвращаются в элементах li.

Однородный стиль списка

В этом примере показан входной HTML-код, который задает тип стиля списка в элементе ol и стили CSS для отдельных элементов списка.

<ol>
    <li>Jacksonville</li>
    <li>Orlando</li>
    <li>Naples</li>
</ol>

Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.

<ol>
    <li><span>Jacksonville</span></li>
    <li><span>Orlando</span></li>
    <li><span>Naples</span></li>
</ol>
Переменные стили списков

В этом примере показан входной HTML-код, который задает разные типы стилей списков в элементах li.

<ul>
    <li>square style</li>
    <li>circle style</li>
    <li>disc style (default)</li>
</ul>

Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.

<ul>
    <li><span>square style</span></li>
    <li><span>circle style</span></li>
    <li><span>disc style (default)</span></li>
</ul>

таблицы;

Таблицы представляются как элементы table, которые могут содержать элементы tr и td. Поддерживаются вложенные таблицы.

Входной и выходной HTML-код для таблиц может содержать перечисленные ниже атрибуты. API OneNote не поддерживают атрибуты rowspan и colspan.

Входные атрибуты
Входной атрибут Описание
data-id Ссылка на элемент.

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

style Свойства CSS style для элемента, а также:
width. Поддерживается в элементах table и td как количество пикселей или процент от ширины страницы.

Пример: width="100px" или width="60%"

граница Складывает границы с таблицей указанной ширины
ширина Ширина таблицы
bgcolor Цвет фона таблицы

Примечание: Использование свойства граница в стиле атрибута таблицы не поддерживается в ввода html.

Выходные атрибуты

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

Входной HTML-код с необязательными параметрами на разных уровнях.
<table border="1";; bgcolor = "green">
    <tr> 
        <td>Cell 1</td> 
        <td>Cell 2</td> 
        <td>Cell 3</td> 
    </tr> 
    <tr> 
        <td>Left</td> 
        <td>Middle</td> 
        <td>Right</td> 
    </tr> 
</table>
Выходной HTML-код со стилями CSS, которые возвращаются встроенными в элементы td.
<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
    </tr>
    <tr>
        <td>Left</td>
        <td>Middle</td>
        <td>Right</td>
    </tr>
</table>

Стили

API OneNote в Microsoft Graph поддерживают перечисленные ниже встроенные свойства CSS style для элементов основного текста страницы, например body, div, p, li и span.

Свойство Пример
background-color style="background-color:#66cc66" (по умолчанию задан белый цвет)

Поддерживаются как шестнадцатеричный формат, так и именованные цвета.

color style="color:#ffffff" (по умолчанию задан черный цвет)
font-family style="font-family:Courier" (по умолчанию задан шрифт Calibri)
font-size style="font-size:10pt" (по умолчанию задан размер 11 точек)

API принимают размер шрифта в единицах pt или px, но единицы px преобразуются в pt. Десятичные значения округляются до ближайшего значения n,0 или n,5 точек.

font-style style="font-style:italic" (обычный или только курсив)
font-weight style="font-weight:bold" (обычный или только полужирный)
strike-through style="text-decoration:line-through"
text-align style="text-align:center" (только для блочных элементов)
text-decoration style="text-decoration:underline" (без оформления или только подчеркивание)

Кроме того, поддерживаются следующие встроенные стили знаков:

Пример входного и выходного HTML-кода

На приведенном ниже рисунке показана простая страница, созданная с помощью Microsoft Graph.

Ниже показан входной HTML-код, отправляемый в тексте сообщения для создания страницы.

<html lang="en-US">
    <head>
        <title>Sample Study Notes</title>
        <meta name="created" content="2015-01-01T01:01"/>
    </head>
    <body>
        <h2>Aurora Borealis</h2>
        <p>Dancing lights in the sky. Also called <i>Northern Lights</i>. Caused by solar radiation.</p>
        <br />
        <p><b>Intersting facts</b></p>
        <table>
            <tr>
                <td>Neil Armstrong</td>
                <td>Commander</td>
            </tr>
            <tr>
                <td>Buzz Aldrin</td>
                <td>LM Pilot</td>
            </tr>
            <tr>
                <td>Michael Collins</td>
                <td>Command Module Pilot</td>
            </tr>
        </table>
        <img alt="Apollo 11 commemorative stamp." src="https://upload.wikimedia.org/wikipedia/commons/a/a4/First_Man_on_Moon_1969_Issue-10c.jpg" />
        <p>References:</p>
        <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
        <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
    </body>
</html>

Ниже показан выходной HTML-код, который Microsoft Graph возвращает при получении содержимого страницы.

Примечание. При создании страницы или получении метаданных страницы API возвращает URL-адрес конечной точки content для страницы в свойстве contentUrl.

<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US">
    <head>
        <title>Sample Study Notes</title>
    </head>
    <body data-absolute-enabled="true">
        <div data-id="_default">
            <h2>American History 101: Moon Landing</h2>
            <p>First moon landing - July 20, 1969 with Apollo 11 (Eagle)</p>
            <br />
            <p><span>Apollo 11 Astronauts</span></p>
            <table>
                <tr>
                    <td>Neil Armstrong</td>
                    <td>Commander</td>
                </tr>
                <tr>
                    <td>Buzz Aldrin</td>
                    <td>LM Pilot</td>
                </tr>
                <tr>
                    <td>Michael Collins</td>
                    <td>Command Module Pilot</td>
                </tr>
            </table>
            <br />
            <img alt="Apollo 11 commemorative stamp." src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value"
                 data-src-type="image/jpeg" data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value" data-fullres-src-type="image/jpeg" />
            <p>References:</p>
            <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p>
            <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p>
        </div>
    </body>
</html>

См. также

Noveo Блог • DATA-QA. Удобные селекторы для автоматизации UI-тестов

Test Engineer Noveo Юлия рассказывает об удобном и достаточно новом способе идентифицировать элементы на веб-странице при тестировании UI, а именно — об атрибуте data-qa.

Каждый, кто интересуется или непосредственно занимается автоматизацией тестирования UI, знает о том, как порой сложно выбрать подходящий селектор.

Идентификаторы («id»-атрибуты элементов) не всегда присутствуют в коде страницы, а порой бывают сложночитаемыми (т.е. написанными не на «человечески понятном» языке), или даже динамическими, и не пригодными к использованию в качестве селекторов.

Xpath и CSS селекторы используются достаточно часто, но в этом случае при изменении структуры документа или таблицы стилей селектор может стать устаревшим и, соответственно, неработающим. Также такие селекторы порой получаются достаточно длинными, а оптимизировать их длину не всегда возможно.

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

В HTML5 появилась новая возможность: data-* атрибуты. Это универсальный атрибут, который можно добавить для любого элемента (тега) на странице. Он позволяет создавать кастомные атрибуты для хранения каких-либо значений. Главные правила: название атрибута всегда должно начинаться с «data-», а также могут использоваться только латинские буквы, дефис, двоеточие и подчеркивание.

Если такой атрибут используется для автоматизации тестирования, самыми логичными вариантами выглядят «data-qa» или «data-test», но можно использовать любые другие наименования. В тексте этой статьи атрибут носит название «data-qa», но на практике оно может быть любым другим по усмотрению.

Data-qa-атрибут можно впоследствии использовать в качестве селектора. Для этого нужно, чтобы в коде страницы для каждого элемента/тега, который будет или с большой вероятностью может быть использован в автотестах, был добавлен этот атрибут.

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

Кроме того, атрибут data-qa присваивается элементу один раз и обычно не нуждается в каких-либо модификациях и изменениях. Соответственно, пока элемент находится на веб-странице, атрибут data-qa этого элемента всегда будет присутствовать в коде страницы, неизменный, а значит, ссылка на элемент тоже будет постоянной. Стабильность!

Безусловно, составление списка этих атрибутов, определение, каким элементам он должен быть присвоен, фиксирование всего в документации — это задача специалиста по тестированию. А добавление этого атрибута в код для всех нужных элементов — задача разработчика. Соответственно, это дополнительная нагрузка для обоих. Поэтому нужно учитывать, насколько широко автоматизация тестирования UI будет использоваться на проекте и будет ли это целесообразно в плане трудозатрат.

Если принято решение внедрить использование атрибутов data-qa на проекте, то это, конечно, лучше делать как можно раньше. Хороший воркфлоу можно описать таким образом:

  1. Тестирование документации, исправление ошибок;
  2. Тестирование файлов дизайна (мокапов), исправление ошибок;
  3. Определение элементов, которые будут использоваться для последующей автоматизации тестирования;
  4. Определение наименований атрибутов data-qa для этих элементов, фиксирование в документации;
  5. Разработка задачи и добавление атрибутов data-qa для элементов в коде страницы;
  6. Тестирование задачи, тестирование наличия атрибутов data-qa.

Теперь посмотрим, как могут выглядеть сами атрибуты data-qa.

На мой взгляд, имеет смысл ввести два базовых правила:

  • все атрибуты должны иметь схожую структуру;
  • если элементы имеют какие-то общие признаки (например, расположены на одной странице или являются элементами одного типа, как «поле ввода» или «кнопка»), эти признаки должны быть отражены в тексте атрибута data-qa.

Например, в общем виде атрибут может выглядеть как:

<название страницы>_<название элемента>

Например:

HOME_TITLE

Где HOME — название страницы («главная страница»), TITLE — заголовок страницы. Или

SETTINGS_PASSWORD_CHANGE_INPUT

Где SETTINGS — название страницы («настройки»), PASSWORD_CHANGE — форма смены пароля, INPUT — указание на поле ввода

Теперь на примере нескольких страниц абстрактного веб-проекта посмотрим, как это будет выглядеть.

Начнем с самого первого и базового, что обычно тестируется, — страницы авторизации.

Здесь:

[0] = LOGIN_FORM_PAGE — сама страница авторизации (LOGIN_FORM) и указание на то, что это целая веб-страница (PAGE).

[1] = LOGIN_FORM_TITLE — заголовок, наследует название страницы, на которой расположен (LOGIN_FORM), и т.к. заголовок на странице один, имеет универсальное обозначение (TITLE).

[2] = LOGIN_FORM_LOGIN_INPUT — текстовое поле ввода логина (LOGIN_INPUT).

[3] = LOGIN_FORM_PASSWORD_INPUT — текстовое поле ввода пароля (PASSWORD_INPUT).

[4] = LOGIN_FORM_LOGIN_INPUT_ALERT_MESSAGE  — информационное сообщение (ALERT_MESSAGE), которое содержит информацию о поле ввода логина (LOGIN_INPUT).

[5] = LOGIN_FORM_PASSWORD_INPUT_ALERT_MESSAGE — информационное сообщение (ALERT_MESSAGE), которое содержит информацию о поле ввода логина (LOGIN_PASSWORD).

[6] = LOGIN_FORM_SUBMIT — кнопка подтверждения входа (SUBMIT).

[7] = LOGIN_FORM_BADGE_SCAN_GOTO — переход на страницу сканирования бейджа (BADGE_SCAN). Т.к. после нажатия этой кнопки пользователь попадает на другую страницу/форму, атрибут имеет обозначение GOTO.

Теперь рассмотрим абстрактную страницу корзины интернет-магазина.

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

Data-qa можно разместить следующим образом:

[0] = BASKET_PAGE — непосредственно страница (PAGE) корзины (BASKET).

[1] = BASKET_RETURN_BACK — кнопка возвращения на предыдущую страницу. Так как предыдущая страница может быть не всегда одной и той же, обозначить эту кнопку имеет смысл просто как RETURN_BACK.

[2] = BASKET_IN_STOCK_GOTO — переход на вкладку (GOTO) с товарами в наличии (IN_STOCK).

[3] = BASKET_OUT_STOCK_GOTO — переход на вкладку (GOTO) с товарами не в наличии (OUT_STOCK).

[4] = BASKET_SEARCH_INPUT — текстовое поле (INPUT) для ввода поискового запроса (SEARCH).

[5] = BASKET_SEARCH_CLEAR_INPUT — кнопка очистки (CLEAR_INPUT) текстового поля поиска (SEARCH).

[6] = BASKET_QUANTITY_TITLE — заголовок (TITLE) столбца, в котором отображается количество товаров одного типа (QUANTITY).

[7] = BASKET_NAME_TITLE — заголовок столбца, в котором отображается название товара (NAME).

[8] = BASKET_DESCRIPTION_TITLE — заголовок столбца, в котором отображается краткое описание товара (DESCRIPTION).

[9] = BASKET_UNIT_PRICE_TITLE — заголовок столбца, в котором отображается цена за единицу товара (UNIT_PRICE).

[10] = BASKET_TOTAL_PRICE_TITLE — заголовок столбца, в котором отображается цена за все товары одного типа (TOTAL_PRICE).

[11] = BASKET_NO_RESULTS_ALERT_MESSAGE — предупреждающее сообщение (ALERT_MESSAGE), содержащее информацию об отсутствии соответствующих поисковому запросу товаров.

[12] = BASKET_TOTAL_PRICE — нередактируемое текстовое поле с общей стоимостью (TOTAL_PRICE) всего заказа.

[13] = BASKET_ORDER_DELETE_SUBMIT — кнопка подтверждения (SUBMIT) удаления заказа (ORDER_DELETE).

[14] = BASKET_ORDER_PAY_SUBMIT — кнопка подтверждения (SUBMIT) оплаты заказа (ORDER_PAY).

И, наконец, рассмотрим ту же страницу, только с пустой поисковой строкой и одним товаром в корзине.

В данном случае многие элементы точно те же, что и на предыдущем изображении, поэтому заново их можно не размечать, data-qa будут такими же.

Здесь:

[1] = BASKET_PRODUCT_DECREASE_QUANTITY_{ID} — кнопка уменьшения (DECREASE) количества (QUANTITY) конкретного товара (PRODUCT). Идентификатор ID нужен для указания на конкретную строку таблицы (конкретный товар).

[2] = BASKET_PRODUCT_QUANTITY_{ID} — нередактируемое текстовое поле для отображения количества (QUANTITY) конкретного товара (PRODUCT).

[3] = BASKET_PRODUCT_INCREASE_QUANTITY_{ID} — кнопка увеличения (INCREASE) количества конкретного товара.

[4] = BASKET_PRODUCT_NAME_{ID} — нередактируемое текстовое поле для отображения названия товара (NAME).

[5] = BASKET_PRODUCT_DESCRIPTION_{ID} — нередактируемое текстовое поле для отображения краткого описания товара (DESCRIPTION).

[6] = BASKET_PRODUCT_UNIT_PRICE_{ID} — нередактируемое текстовое поле для отображения цены за единицу товара (UNIT_PRICE).

[7] = BASKET_PRODUCT_TOTAL_PRICE_{ID} — нередактируемое текстовое поле для отображения цены за все товары одного типа (TOTAL_PRICE).

[8] = BASKET_PRODUCT_DELETE_{ID} — кнопка удаления товара из корзины (DELETE).

[9] = BASKET_PRODUCT_{ID} — строка товара целиком без указания на конкретный столбец.

Как можно хранить документацию для атрибутов data-qa? В любом удобном виде. В качестве примера приведем таблицу:

Mockup с размеченными data-qa Список data-qa атрибутов Ссылки на связанные тикеты Development status QA review status
Макет страницы, на котором указаны номера атрибутов data-qa Список атрибутов data-qa с названиями и номерами, соответствующими обозначениям на дизайн-макете Список тикетов, которые связаны с веб-страницей, отображенной на макете, и атрибутами data-qa этой страницы Статус разработки атрибутов data-qa. Например:

* пустое поле (не сделано)

* в процессе

* сделано

Статус тестирования атрибутов data-qa. Например:

* пустое поле (не тестировалось)

* есть ошибки (MISSING со списком недостающих атрибутов)

* проверено (PASSED)

На этом всё. Надеемся, что эта информация окажется полезной. Спасибо за прочтение!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Использование атрибутов данных — Изучение веб-разработки

HTML5 разработан с учетом возможности расширения для данных, которые должны быть связаны с конкретным элементом, но не должны иметь какое-либо определенное значение. Атрибуты data- * позволяют нам хранить дополнительную информацию о стандартных, семантических элементах HTML без других взломов, таких как нестандартные атрибуты или дополнительные свойства в DOM.

Синтаксис простой. Любой атрибут любого элемента, имя атрибута которого начинается с data- , является атрибутом данных.Допустим, у вас есть статья, и вы хотите сохранить дополнительную информацию, не имеющую визуального представления. Просто используйте для этого атрибутов данных :

  <статья
 
  столбцы данных = "3"
  номер-индекса-данных = "12314"
  data-parent = "cars">
...

Считывание значений этих атрибутов в JavaScript также очень просто. Вы можете использовать getAttribute () с их полным HTML-именем для их чтения, но стандарт определяет более простой способ: DOMStringMap , который вы можете прочитать через свойство набора данных .

Чтобы получить атрибут data через объект набора данных , получите свойство по части имени атрибута после data - (обратите внимание, что тире преобразуются в camelCase).

  const article = document.querySelector ('# электромобили');



article.dataset.columns
article.dataset.indexNumber
article.dataset.parent  

Каждое свойство представляет собой строку, которую можно читать и писать. В приведенном выше случае установка article.dataset.columns = 5 изменит этот атрибут на "5" .

Обратите внимание, что, поскольку атрибуты данных являются обычными атрибутами HTML, вы можете получить к ним доступ даже из CSS. Например, чтобы показать родительские данные в статье, вы можете использовать сгенерированный контент в CSS с помощью функции attr () :

  артикул :: до {
  содержимое: attr (родительские данные);
}  

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

  статья [data-columns = '3'] {
  ширина: 400 пикселей;
}
article [data-columns = '4'] {
  ширина: 600 пикселей;
}  

Вы можете увидеть, как все это работает вместе в этом примере JSBin.

Атрибуты данных также могут быть сохранены, чтобы содержать информацию, которая постоянно меняется, например, счет в игре. Использование здесь селекторов CSS и доступа к JavaScript позволяет создавать отличные эффекты без необходимости писать собственные процедуры отображения. См. Этот скринкаст для примера использования сгенерированного контента и переходов CSS (пример JSBin).

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

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

Основные вопросы, которые следует учитывать, - это поддержка и производительность Internet Explorer. Internet Explorer 11+ обеспечивает поддержку стандарта, но все более ранние версии не поддерживают набор данных . Для поддержки IE 10 и ниже вам необходимо получить доступ к атрибутам данных с помощью getAttribute () . Кроме того, производительность чтения атрибутов данных по сравнению с хранением этих данных в обычном объекте JS оставляет желать лучшего.

Тем не менее, для метаданных, связанных с настраиваемыми элементами, они являются отличным решением.

В Firefox 49.0.2 (и, возможно, более ранних / более поздних версиях) атрибуты данных, длина которых превышает 1022 символа, не будет считываться Javascript (EcmaScript 4).

HTML Глобальные данные - * Атрибуты


Пример

Используйте атрибут data- * для вставки пользовательских данных:


  • Сова

  • Лосось

  • Тарантул

Попробуй сам "

Определение и использование

Атрибуты data- * используются для хранения пользовательских данных, приватных для страницы или применение.

Атрибуты data- * дают нам возможность встраивать пользовательские атрибуты данных в все элементы HTML.

Сохраненные (настраиваемые) данные затем можно использовать в JavaScript страницы для создания более привлекательный пользовательский интерфейс (без каких-либо вызовов Ajax или серверной базы данных запросы).

Атрибуты data- * состоят из двух частей:

  1. Имя атрибута не должно содержать заглавных букв и должно содержать не менее одного символа после префикса «data-».
  2. Значение атрибута может быть любой строкой

Примечание. Пользовательские атрибуты с префиксом «данные-» будут полностью игнорируется пользовательским агентом.


Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую атрибут.

Атрибут
данные- * 4,0 5,5 2,0 3,1 9,6

Синтаксис

< элемент данных - * = " somevalue ">

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

Значение Описание
некоторая стоимость Задает значение атрибута (в виде строки)

Связанные страницы

Учебное пособие по HTML: Атрибуты HTML

HTML DOM Ссылка: HTML DOM getAttribute () Метод



Как можно использовать атрибуты пользовательских данных HTML5 и почему

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

Почему настраиваемые атрибуты данных?

Очень часто нам нужно хранить информацию, связанную с различными элементами DOM. Эта информация может быть несущественной для читателей, но легкий доступ к ней значительно упростит жизнь нам, разработчикам.

Например, допустим, у вас есть список различных ресторанов на веб-странице. До HTML5, если вы хотели хранить информацию о типе еды, предлагаемой ресторанами, или их удаленности от посетителя, вы использовали атрибут HTML class .Что, если вам также нужно сохранить ресторан с идентификатором , чтобы увидеть, какой именно ресторан пользователь хотел бы посетить?

Вот несколько проблем с подходом, основанным на атрибуте класса HTML.

  • Атрибут класса HTML не предназначен для хранения подобных данных. Его основная цель - позволить разработчику назначить информацию о стиле набору элементов.
  • Каждая дополнительная информация требует от нас добавления нового класса к нашему элементу. Это затрудняет анализ данных в JavaScript, чтобы получить то, что нам нужно.
  • Допустим, имя данного класса начинается с цифр. Если вы позже решите стилизовать элементы на основе этих данных в имени класса, вам придется либо экранировать число, либо использовать селекторы атрибутов в вашей таблице стилей.

Чтобы избавиться от этих проблем, HTML5 представил настраиваемых атрибутов данных . Все атрибуты элемента, имя которого начинается с data- , являются атрибутами данных. Вы также можете использовать эти атрибуты данных для стилизации ваших элементов.

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

Синтаксис HTML

Как я упоминал ранее, имя атрибута данных всегда начинается с data- . Вот пример:

  
  • Салат Король
  • Теперь вы можете использовать эти атрибуты данных для поиска и сортировки ресторанов для ваших посетителей. Например, теперь вы можете показать им все вегетарианские рестораны на определенном расстоянии.

    Помимо префикса data- , имя допустимого пользовательского атрибута данных должно содержать только буквы, цифры, дефис (-), точку (.), двоеточие (:) или подчеркивание (_). Он не может содержать заглавные буквы.

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

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

    Во-вторых, атрибуты данных должны использоваться только тогда, когда нет других подходящих элементов HTML или атрибутов .Например, нецелесообразно хранить элемент class в атрибуте data-class .

    Элемент может иметь любое количество атрибутов данных с любым желаемым значением.

    Атрибуты данных

    и CSS

    Вы можете использовать атрибуты данных в CSS для стилизации элементов с помощью селекторов атрибутов. Вы также можете показать пользователям информацию, хранящуюся в атрибуте data (во всплывающей подсказке или каким-либо другим способом), с помощью функции attr () .

    Элементы стиля

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

      li [data-type = 'veg'] {
      фон: # 8BC34A;
    }
    
    li [data-type = 'french'] {
      фон: # 3F51B5;
    }  

    См. Элементы стиля пера с атрибутами данных от SitePoint (@SitePoint) на CodePen.

    Создание всплывающих подсказок

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

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

    Информация, которую вы хотите показать, может быть сохранена в атрибуте data-tooltip .

       Word   

    Затем вы можете представить данные пользователю с помощью псевдоэлемента :: before .

      span :: before {
      контент: attr (всплывающая подсказка);
      // Дополнительные правила стиля
    }
    
    span: hover :: before {
      дисплей: встроенный блок;
    }  

    См. Всплывающие подсказки по созданию пера с атрибутами данных с помощью SitePoint (@SitePoint) на CodePen.

    Доступ к атрибутам данных с помощью JavaScript

    Есть три способа доступа к атрибутам данных в JavaScript.

    Использование getAttribute и setAttribute

    Вы можете использовать getAttribute () и setAttribute () в JavaScript для получения и установки значений различных атрибутов данных.

    Метод getAttribute либо вернет null , либо пустую строку, если данный атрибут не существует. Вот пример использования этих методов:

      var restaurant = document.getElementById ("restaurantId");
    var rating = restaurant.getAttribute ("данные-рейтинги");  

    Вы можете использовать метод setAttribute для изменения значения существующих атрибутов или для добавления новых атрибутов.

      restaurant.setAttribute ("имя-владельца-данных", "someName");  

    Использование свойства набора данных

    Более простой способ доступа к атрибутам данных - использование свойства набора данных . Это свойство возвращает объект DOMStringMap с одной записью для каждого настраиваемого атрибута данных.

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

    Преобразование настраиваемого атрибута данных в ключ DOMStringMap занимает три шага:

    • Префикс data- удален из имени атрибута
    • Любой дефис, за которым следует строчная буква, удаляется из имени, а следующая за ним буква преобразуется в прописную
    • Остальные символы останутся без изменений.Это означает, что любой дефис, за которым не следует строчная буква, также останется без изменений.

    Затем к атрибутам можно получить доступ, используя имя camelCase, хранящееся в объекте в виде ключа, например element.dataset.keyname .

    Другой способ доступа к атрибутам - использование скобок, например element.dataset [keyname]

    Рассмотрим следующий HTML:

      
  • Салат Король
  • Вот несколько примеров:

      var restaurant = document.getElementById ("restaurantId");
    
    вар рейтинги = restaurant.dataset.ratings;
    restaurant.dataset.ratings = newRating;
    
    var owner = restaurant.dataset ['имя-владельца'];
    restaurant.dataset ['ownerName'] = 'новыйВладелец';  

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

    Использование jQuery

    Вы также можете использовать метод jQuery data () для доступа к атрибутам данных элемента.До версии jQuery 1.6 для доступа к атрибутам данных приходилось использовать следующий код:

      var restaurant = $ ("# restaurantId");
    
    var owner = restaurant.data ("имя-собственник");
    restaurant.data ("имя-владельца", "новоеНазвание");  

    Начиная с версии 1.6, jQuery начал использовать версию атрибутов данных camelCase. Теперь вы можете сделать то же самое, используя следующий код:

      var restaurant = $ ("# restaurantId");
    
    var owner = restaurant.data ("имя-владельца");
    ресторан.данные ("ownerName", "newName");  

    Вы должны знать, что jQuery также пытается внутренне преобразовать строку, полученную из атрибута данных, в подходящий тип, такой как числа, логические значения, объекты, массивы и null.

      var restaurant = $ ("# restaurantId");
    var identifier = restaurant.data («идентификатор»);
    
    console.log (идентификатор типа);
      

    Если вы хотите, чтобы jQuery получал значение атрибута в виде строки без какой-либо попытки преобразовать его в другие типы, вам следует использовать метод jQuery attr () .

    jQuery извлекает значение атрибутов данных только при первом доступе к ним. Атрибуты данных больше не доступны и не изменяются. Все изменения, которые вы вносите в эти атрибуты, производятся внутри и доступны только в jQuery.

    Предположим, вы манипулируете атрибутами данных следующего элемента списка:

      
  • Салат Король
  • Вы можете использовать приведенный ниже код, чтобы изменить значение его атрибута data-distance :

      var distance = $ ("# салат").данные («расстояние»);
    console.log (расстояние);
    
    
    $ ("# салат"). data ("расстояние", "1,5 мили");
    console.log (расстояние);
    
    
    document.getElementById ("салат"). dataset.distance;
      

    Как видите, доступ к значению атрибута data-distance с использованием ванильного JavaScript (не jQuery) продолжает давать нам старый результат.

    Заключение

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

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

    Как использовать атрибуты данных HTML5

    Еще в старые времена XHTML / HTML4 у разработчиков было мало возможностей для хранения произвольных данных, связанных с DOM. Вы могли изобрести свои собственные атрибуты, но это было рискованно; ваш код будет недействительным, браузеры могут игнорировать данные, и это вызовет проблемы, если имя когда-либо станет стандартным атрибутом HTML.

    Таким образом, большинство разработчиков полагалось на атрибуты class или rel , поскольку только они допускали достаточно гибкие строки.Например, предположим, что мы создавали виджет для отображения сообщений, таких как временная шкала Twitter. В идеале JavaScript должен быть настраиваемым без изменения его кода, поэтому мы определяем идентификатор пользователя в атрибуте class , например

      

    Наш код JavaScript будет искать элемент с идентификатором msglist . Небольшой анализ строки найдет класс, начинающийся с user_ , предположим, что «bob» - это идентификатор, и отобразит все сообщения от этого пользователя.

    Допустим, мы затем хотели определить максимальное количество сообщений и игнорировать сообщения старше шести месяцев (180 дней):

      

    Наш атрибут класса становится все более громоздким; ошибиться легко, а синтаксический анализ JavaScript сложнее.

    Атрибуты данных HTML5

    К счастью, HTML5 вводит настраиваемые атрибуты данных. Вы можете использовать любое имя в нижнем регистре с префиксом data- , например

      

    Пользовательские атрибуты данных:

    • - это строки - вы можете хранить все, что может быть закодировано, например JSON.Преобразование типов должно выполняться в JavaScript.
    • следует использовать только тогда, когда не существует подходящего элемента или атрибута HTML5.
    • являются частными для страницы. В отличие от микроформатов, они должны игнорироваться внешними системами, такими как роботы индексации поисковых систем.

    Разбор JavaScript # 1: getAttribute и setAttribute

    Каждый браузер позволит вам получать и изменять атрибутов data- с помощью методов getAttribute и setAttribute , т.е.г.

      var msglist = document.getElementById ("список сообщений");
    
    var show = msglist.getAttribute ("размер-списка-данных");
    msglist.setAttribute ("размер-списка-данных", + показать + 3);  

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

    Анализ JavaScript # 2: метод jQuery data ()

    Начиная с версии 1.4.3, метод jQuery data () анализирует атрибуты данных HTML5. Вам не нужно указывать префикс data- , поэтому можно написать эквивалентный код:

      var msglist = $ ("# список сообщений");
    
    var show = список сообщений.данные ("размер списка");
    msglist.data ("размер списка", показать + 3);  

    Однако будьте осторожны, jQuery ловко пытается преобразовать данные в подходящий тип (логические, числа, объекты, массивы или null) и избегает касания DOM. В отличие от setAttribute , метод data () физически не изменяет атрибут data-list-size - если вы проверите его значение вне jQuery, оно все равно будет «5».

    Анализатор JavaScript # 3: API набора данных

    Наконец, у нас есть API набора данных HTML5, который возвращает объект DOMStringMap.Следует отметить, что имена атрибутов данных отображаются путем удаления префикса data- , удаления дефисов и преобразования в camelCase, например.

    Список
    имя атрибута имя API набора данных
    пользователь данных пользователь
    макс. Данные макс.
    размер списка данных Размер

    Наш новый код:

      var msglist = document.getElementById ("список сообщений");
    
    var show = msglist.dataset.listSize;
    msglist.dataset.listSize = + показать + 3;  

    API списка данных поддерживается всеми современными браузерами, но не IE10 и более ранними версиями. Доступна прокладка, но, возможно, более практично использовать jQuery, если вы пишете код для старых браузеров.

    Базовые типы данных HTML

    Базовые типы данных HTML

    В этом разделе спецификации описаны основные типы данных, которые могут отображаются как содержимое элемента или значение атрибута.

    Для ознакомления с вводной информацией о чтении HTML DTD, пожалуйста, обратитесь к Учебник SGML.

    Каждое определение атрибута включает информацию о чувствительность к регистру его значений. Информация по делу представлена со следующими ключами:

    CS
    Значение чувствительно к регистру (т.е. пользовательские агенты интерпретируют "a" и "A" иначе).
    CI
    Значение не чувствительно к регистру (т.е. пользовательские агенты интерпретируют "a" и "A" как одинаковый).
    CN
    Значение не подлежит изменению регистра, например, потому что это число или символ из набора символов документа.
    CA
    Само определение элемента или атрибута дает информацию о случае.
    CT
    Подробные сведения о чувствительности к регистру см. В определении типа.

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

    6.2 Основные типы SGML

    В определении типа документа указывается синтаксис содержимого HTML-элементов и значений атрибутов с использованием токенов SGML (например, PCDATA, CDATA, NAME, ID и т. Д.). См. [ISO8879] для полной определения. Ниже приводится краткая основная информация:

    • CDATA - последовательность символов из набор символов документа и может включать в себя символьные сущности. Пользовательские агенты должны интерпретировать значения атрибутов следующим образом:
      • Заменить символьные сущности на символы,
      • Игнорировать перевод строки,
      • Замените каждый возврат каретки или табуляцию одним пробелом.

      Пользовательские агенты могут игнорировать начальные и конечные пробелы в атрибуте CDATA значения (например, "myval" можно интерпретировать как «мивал»). Авторам не следует объявлять значения атрибутов в начале или в конце. белое пространство.

      Для некоторых атрибутов HTML 4 со значениями атрибута CDATA спецификация накладывает дополнительные ограничения на набор допустимых значений атрибута, который не могут быть выражены DTD.

      Хотя элементы STYLE и SCRIPT используют CDATA для их модель данных, для этих элементов CDATA должны обрабатываться пользовательскими агентами по-разному.Разметка и объекты должны обрабатываться как необработанный текст и передаваться в приложение. как есть. Первое появление последовательности символов "

    • ID и NAME токены должны начинаются с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифры ([0-9]), дефисы ("-"), подчеркивания ("_"), двоеточия (":") и точки (".").
    • IDREF и IDREFS - это ссылки на токены ID, определенные другими атрибуты. IDREF - это одиночный токен, а IDREFS - это список разделенных пробелами жетоны.
    • НОМЕР токенов должен содержать не менее одна цифра ([0-9]).

    Ряд атрибутов (% Text; в DTD) принимают текст, предназначенный для быть "читаемым человеком". Для вводной информации об атрибутах, пожалуйста, обратитесь к обсуждению учебника атрибуты.

    В этой спецификации используется термин URI, как определено в [URI] (см. Также [RFC1630]).

    Обратите внимание, что URI включают URL-адреса (как определено в [RFC1738] и [RFC1808]).

    Относительные URI преобразуются в полные URI с использованием базового URI. [RFC1808], раздел 3, определяет нормативный алгоритм для этого процесса. Для Для получения дополнительной информации о базовых URI обратитесь к разделу о базовых URI в главе, посвященной ссылкам.

    URI представлены в DTD параметром% URI ;.

    URI обычно чувствительны к регистру. Могут быть URI или части URI, где регистр не имеет значения (например,г., машина имена), но определить их может быть непросто. Пользователи всегда должны учитывать что URI чувствительны к регистру (на всякий случай).

    Информацию о символах, отличных от ASCII, в атрибуте URI см. В приложении. значения.

    Тип значения атрибута «цвет» (% Color;) относится к определениям цвета как указано в [СРГБ]. Значение цвета может быть шестнадцатеричным числом. (с префиксом решетки) или одним из следующих шестнадцати названий цветов. В в названиях цветов регистр не учитывается.

    Таким образом, значения цвета "# 800080" и "Purple" оба относятся к цвету фиолетовый.

    6.5.1 Примечания по использованию цветов

    Хотя цвета могут добавить значительный объем информации в документы и сделать их более читаемыми, примите во внимание следующие рекомендации, когда включая цвет в ваших документах:

    • Использование элементов и атрибутов HTML для указания цвета не рекомендуется. Вместо этого рекомендуется использовать таблицы стилей.
    • Не используйте цветовые комбинации, которые вызывают проблемы у людей с цветом слепота в различных ее формах.
    • Если вы используете фоновое изображение или устанавливаете цвет фона, обязательно также установите различные цвета текста.
    • Цвета, указанные для BODY и Элементы FONT и bgcolor на таблицах выглядят по-разному на разных платформах (например, рабочие станции, Mac, Windows и ЖК-панели vs. ЭЛТ), поэтому не стоит полностью полагаться на какой-то конкретный эффект. В будущем, поддержка цветовой модели [SRGB] вместе с цветовыми профилями ICC должна смягчить эту проблему.
    • По возможности используйте общие соглашения, чтобы избежать путаницы с пользователем.

    6,6 Длина

    HTML определяет три типа значений длины для атрибутов:

    1. пикселей : значение (% пикселей; в DTD) - целое число, которое представляет количество пикселей холста. (экран, бумага). Таким образом, значение «50» означает пятьдесят пикселей. Для нормативного информацию об определении пикселя см. в [CSS1].
    2. Длина : значение (% длины; дюйм DTD) может быть% Pixel; или в процентах от доступного горизонтального или вертикальное пространство.Таким образом, значение «50%» означает половину доступного пространства.
    3. MultiLength : значение ( % MultiLength; в DTD) может быть% Length; или относительная длина . Относительная длина имеет вид «i *», где «i» - целое число. При распределении места между элементами, конкурирующими за это пространство, пользовательские агенты сначала выделяют пиксельную и процентную длину, а затем разделяют оставшееся доступное пространство среди относительных длин. Каждая относительная длина получает часть доступного пространства, пропорциональная целому числу, предшествующему "*".Значение «*» эквивалентно «1 *». Таким образом, если 60 пикселей пространства доступен после того, как пользовательский агент выделит пиксельное и процентное пространство, а конкурирующие относительные длины - 1 *, 2 * и 3 *, 1 * будет присвоено 10 пикселей, 2 * будет выделено 20 пикселей, а 3 * будет выделено 30 пикселей.

    Значения длины не зависят от регистра.

    Примечание. «Тип носителя» (определен в [RFC2045] и [RFC2046]) определяет характер связанного ресурса. В этой спецификации используется термин «тип содержимого», а не «тип мультимедиа» в соответствии с текущим использованием.Кроме того, в этой спецификации «тип носителя» может относиться к носителю, на котором пользовательский агент отображает документ.

    Этот тип представлен в DTD как %Тип содержимого;.

    Типы содержимого нечувствительны к регистру.

    Примеры типов контента: text / html, image / png, image / gif, "видео / MPEG", "текст / CSS" и "аудио / базовый". Для текущего списка зарегистрированных Типы MIME, см. [MIMETYPES].

    Значение атрибутов, тип которых является кодом языка ( % LanguageCode в DTD) относится к коду языка, указанному в [RFC1766], раздел 2.Для получения информации об указании языковых кодов в HTML, пожалуйста, обратитесь к разделу о языке коды. В коде языка нельзя использовать пробелы.

    Коды языков без учета регистра.

    Атрибуты "charset" (% Charset в DTD) относятся к кодировке символов, как описано в раздел о кодировках символов. Значения должны быть строками (например, «euc-jp») из реестра IANA (см. [CHARSETS] для полного списка).

    Названия кодировок символов без учета регистра.

    Пользовательские агенты должны следовать шагам, изложенным в разделе по указанию кодировок символов, по порядку. для определения кодировки символов внешнего ресурса.

    Некоторые атрибуты требуют одного символа из набора символов документа. Эти атрибуты принимают в % Тип символа в DTD.

    Отдельные символы могут быть указаны с помощью ссылки на символы (например, "& amp;").

    [ISO8601] допускает множество вариантов и вариантов представления дат. и раз.В текущей спецификации используется один из форматов, описанных в profile [DATETIME] для определения допустимых строк даты / времени (% Datetime в DTD).

    Формат:

      ГГГГ-ММ-ДДTчч: мм: ссTZD
     
    куда:
         ГГГГ = год из четырех цифр
         MM = двузначный месяц (01 = январь и т. Д.)
         DD = двузначный день месяца (с 01 по 31)
         чч = две цифры часа (от 00 до 23) (am / pm НЕ допускается)
         мм = две цифры минуты (от 00 до 59)
         ss = две цифры секунды (от 00 до 59)
         TZD = указатель часового пояса
     

    Указатель часового пояса может быть одним из:

    .
    Z
    указывает UTC (всемирное координированное время).Буква "Z" должна быть прописной.
    + чч: мм
    указывает, что время является местным, которое составляет часов часов и мм на минут впереди UTC.
    -хч: мм
    указывает, что время является местным, которое составляет часов часов и мм.

    Должны присутствовать именно те компоненты, которые здесь показаны, именно с такими пунктуация. Обратите внимание, что "T" буквально появляется в строке (это должен быть в верхнем регистре), чтобы указать начало элемента времени, как указано в [ISO8601]

    Если генерирующее приложение не знает время с точностью до секунды, оно может использовать значение «00» для секунд (и минут и часов, если необходимо).

    Примечание. [DATETIME] не решить проблему дополнительных секунд.

    Авторы могут использовать следующую признанную ссылку перечисленные здесь типы с их общепринятыми интерпретациями. в DTD,% LinkTypes относится к список типов ссылок, разделенных пробелами. Пробелы не допускаются. в типах ссылок.

    Эти типы ссылок без учета регистра, то есть "Альтернативный" имеет то же значение, что и «альтернативный».

    Пользовательские агенты, поисковые системы и т. Д.может интерпретировать эти типы ссылок в Разнообразие способов. Например, пользовательские агенты могут предоставлять доступ к связанным документы через панель навигации.

    Альтернативный
    Обозначает заменяющие версии документа, в котором есть ссылка. При использовании вместе с атрибутом lang он подразумевает переведенный версия документа. При использовании вместе с media , подразумевает версию, предназначенную для другого средний (или медиа).
    Таблица стилей
    Относится к внешней таблице стилей. См. Подробности в разделе о внешних таблицах стилей. Используется вместе с типом ссылки "Альтернативный" для выбираемых пользователем альтернативные таблицы стилей.
    Начало
    Обращается к первому документу в коллекции документов. Этот тип ссылки сообщает поисковым системам, какой документ автор считает отправная точка сбора.
    Далее
    Обращается к следующему документу в линейной последовательности документов.Пользовательские агенты может выбрать предварительную загрузку «следующего» документа, чтобы уменьшить воспринимаемую нагрузку время.
    Назад
    Относится к предыдущему документу в упорядоченной серии документов. Некоторые пользовательские агенты также поддерживают синоним «Предыдущий».
    Содержание
    Обращается к документу, служащему оглавлением. Некоторые пользовательские агенты также поддерживают синоним ToC (из «Оглавления»).
    Индекс
    Обращается к документу, обеспечивающему индекс для текущего документа.
    Глоссарий
    Относится к документу, содержащему глоссарий терминов, относящихся к текущий документ.
    Авторские права
    Относится к заявлению об авторских правах для текущего документа.
    Глава
    Глава
    Относится к документу, служащему главой в коллекции документы.
    Раздел
    Относится к документу, служащему разделом в коллекции документы.
    Подраздел
    Относится к документу, служащему подразделом в коллекции документы.
    Приложение
    Относится к документу, служащему приложением в коллекции документы.
    Справка
    Относится к документу, предлагающему помощь (дополнительная информация, ссылки на другие источники информации и др.)
    Закладка
    Ссылается на закладку. Закладка - это ссылка на ключевую точку входа в расширенный документ.В title Атрибут может использоваться, например, для пометьте закладку. Обратите внимание, что в каждом можно определить несколько закладок. документ.

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

    Для дальнейшего обсуждения типов ссылок, пожалуйста, обратитесь к разделу ссылок в документах HTML.

    Ниже приводится список распознанных носителей. дескрипторы (% MediaDesc в DTD).

    экран
    Предназначен для экранов компьютеров без страницы.
    терминал
    Предназначен для носителей, использующих символьную сетку с фиксированным шагом, например телетайпов, терминалы или портативные устройства с ограниченными возможностями отображения.
    телевизор
    Предназначен для устройств телевизионного типа (низкое разрешение, цветное, ограниченное возможность прокрутки).
    выступ
    Предназначен для проекторов.
    портативный
    Предназначен для портативных устройств (маленький экран, монохромный, растровый) графика, ограниченная пропускная способность).
    печать
    Предназначен для постраничных непрозрачных материалов и документов, просматриваемых на экране в режим предварительного просмотра печати.
    шрифт Брайля
    Предназначен для устройств с тактильной обратной связью Брайля.
    слух
    Предназначен для синтезаторов речи.
    все
    Подходит для всех устройств.

    В будущих версиях HTML могут быть добавлены новые значения и разрешены параметризованные значения. Чтобы облегчить внедрение этих расширений, соответствующий пользователь агенты должны иметь возможность анализировать Значение атрибута media выглядит следующим образом:

    1. Значение представляет собой список записей, разделенных запятыми. Например,
      media = "экран, 3D-очки, печать и разрешение> 90 dpi"
       

      отображается на:

      "экран"
      «3d-очки»
      "печать и разрешение> 90 точек на дюйм"
       
    2. Каждая запись обрезается непосредственно перед первым символом, который не является американским. Буква ASCII [a-zA-Z] (ISO 10646 шестнадцатеричное 41-5a, 61-7a), цифра [0-9] (шестнадцатеричное 30-39) или дефис (шестнадцатеричный 2d).В примере это дает:
      "экран"
      «3d-очки»
      "Распечатать"
       
    3. А Затем выполняется сопоставление с учетом регистра с набором типов мультимедиа определено выше. Пользовательские агенты могут игнорировать несоответствующие записи. В примере у нас остается экран и печать.

    Примечание. Таблицы стилей могут включать в себя зависящие от носителя вариации внутри них (например, конструкция CSS @media ). В в таких случаях может оказаться целесообразным использовать « media = all» .

    Данные скрипта (% Script; в DTD) может быть содержимым элемента SCRIPT и значением внутренние атрибуты события. Пользователь агенты не должны оценивать данные скрипта как разметку HTML, а должны передавать их как данные для скриптового движка.

    Чувствительность к регистру данных скрипта зависит от язык сценариев.

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

    Данные таблицы стилей (% StyleSheet; в DTD) может быть содержимым СТИЛЬ элемент и значение Атрибут стиля . Пользовательские агенты не должны оценивать данные стиля как HTML разметка.

    Чувствительность к регистру данных стиля зависит от стиля язык листа.

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

    За исключением зарезервированных имен, перечисленных ниже, целевые имена фреймов (% FrameTarget; в DTD) должны начинаются с буквенного символа (a-zA-Z). Пользовательские агенты должны игнорировать все другие целевые имена.

    Следующая цель имена зарезервированы и имеют особое значение.

    _ пустой
    Пользовательский агент должен загрузить указанный документ в новый, безымянный окно.
    _self
    Пользовательский агент должен загрузить документ в том же фрейме, что и элемент. что относится к этой цели.
    _ родительский
    Пользовательский агент должен загрузить документ непосредственно в FRAMESET родительский элемент текущего кадра. Это значение эквивалентно _self, если у текущего фрейма нет родителя.
    _top
    Пользовательский агент должен загрузить документ в полное исходное окно. (таким образом отменяя все остальные кадры). Это значение эквивалентно _self если у текущего кадра нет родителя.

    Руководство по атрибутам пользовательских данных HTML

    Атрибут данных позволяет хранить / встраивать дополнительный бит частной информации в элементы HTML.Атрибуты data- * состоят из двух частей:

    • имя атрибута : оно не должно содержать прописных букв и должно быть длиной не менее одного символа после префикса «данные-»
    • значение атрибута : Значение может быть любой строкой.

    Атрибуты данных могут быть полезны во многих отношениях. Ниже приведены некоторые из сценариев, в которых могут быть полезны атрибуты данных:

    • Добавьте информацию в значок меню, независимо от того, открыто оно или закрыто.
    • Загружать изображения большого размера в модальное окно при щелчке изображения для предварительного просмотра.Мы можем сохранить URL-адрес изображения большого размера в атрибуте data.
    • Вы можете сохранить идентификатор сообщения в базе данных, чтобы сообщение могло быть запросом с их пользовательским идентификатором.

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

    В HTML мы можем определить атрибут данных HTML, как показано ниже:

      
    Таймур Саттар

    Ниже создайте две (2) кнопки в HTML, когда щелкните, чтобы запустить функцию javascript, чтобы отобразить / изменить атрибут данных.

      <кнопка>
      Щелкните, чтобы отобразить идентификатор автора.
    
    
    <кнопка>
      Щелкните меня, чтобы изменить идентификатор автора на 14.
      

    В CSS вы можете задать стиль атрибута данных, как показано ниже:

      .author [data-id = '44 '] {
      красный цвет;
    }
    
    .author [data-id = '14 '] {
      цвет синий;
    }  

    В Javascript вы можете получить / изменить атрибуты пользовательских данных HTML (data- *) двумя способами.

    • Использование универсальной функции, например setAttribute и getAttribute
    • Атрибуты данных специальный API

    Ниже мы определили две функции detectAuthorID () для предупреждения идентификатора автора и changeAuthorID () для изменения атрибута данных автора.

      var author = document.getElementsByClassName ("автор") [0];
    
    function detectAuthorID () {
      
      предупреждение (author.getAttribute ("идентификатор-данных"));
    }
    
    function changeAuthorID () {
      author.setAttribute ("идентификатор данных", "14");
      
    }  

    Атрибуты данных | Документация по jQuery Mobile API


    Ссылка на атрибут данных

    Платформа jQuery Mobile использует атрибуты HTML5 data- для обеспечения инициализации и настройки виджетов на основе разметки.Эти атрибуты не являются обязательными; Также поддерживается вызов плагинов вручную и передача параметров напрямую. Чтобы избежать конфликтов имен с другими подключаемыми модулями или фреймворками, которые также используют атрибуты data- , установите пользовательское пространство имен, изменив глобальный параметр ns .

    Ссылки с data-role = "button" . Кнопки на основе ввода, ссылки на панелях инструментов и элементы кнопок улучшаются автоматически, роль данных не требуется.

    уголки данных правда | ложь
    значок данных дом | удалить | плюс | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
    data-iconpos слева | право | наверх | внизу | notext
    data-iconshadow верно | false Устарело с 1.4.0 и будет удален в 1.5.0.
    встроенные данные верно | ложный
    data-mini верно | false - Версия компактного размера
    тень данных правда | ложь
    тема данных образец буквы (a-z)

    Пары меток и входов с type = "checkbox" улучшаются автоматически, не требуется роль данных

    Образец буквы
    data-mini верно | false - Версия компактного размера
    роль данных none - Запрещает автоматическое улучшение для использования собственных элементов управления
    тема данных (a-z) - добавлен в форму элемент

    Заголовок и контент, заключенные в контейнер с data-role = "collapsible"

    данные свернуты правда | ложь
    свертывание данных-текст строка - текст, используемый для звуковой обратной связи для пользователей программ чтения с экрана.По умолчанию: «щелкните, чтобы свернуть содержимое»
    значок свернутых данных дом | удалить | plus | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
    тема-контент-данные образец буквы (a-z)
    data-expand-cue-text строка - текст, используемый для звуковой обратной связи для пользователей программ чтения с экрана.По умолчанию: «щелкните, чтобы развернуть содержимое»
    значок развернутых данных дом | удалить | плюс | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
    data-iconpos слева | право | наверх | дно
    вставка данных правда | ложь
    data-mini верно | false - Версия компактного размера
    тема данных образец буквы (a-z)

    Количество складных элементов, завернутых в контейнер с data-role = "collapsibleset"

    значок свернутых данных дом | удалить | plus | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
    тема-контент-данные образец буквы (a-z) - Устанавливает все складные элементы в наборе
    значок развернутых данных дом | удалить | плюс | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
    data-iconpos слева | право | наверх | внизу | notext
    вставка данных правда | ложь
    data-mini верно | false - Версия компактного размера
    тема данных образец буквы (a-z) - Устанавливает все складные элементы в наборе

    Содержимое

    Примечание: Устарело с 1.4.0 и будет удален в 1.5.0.

    Контейнер с data-role = "content"

    тема данных образец буквы (a-z)

    DIV или контейнер FIELDSET с data-role = "controlgroup" . Визуально интегрируйте несколько элементов в стиле кнопок.

    исключить данные-невидимые правда | false - Устанавливает, следует ли исключать невидимых дочерних элементов при назначении закругленных углов
    data-mini верно | false - Версия компактного размера для всех элементов контрольной группы
    тема данных образец буквы (a-z)
    тип данных горизонтальный | vertical - Для выравнивания элементов по горизонтали или вертикали

    Контейнер с data-role = "dialog" или связанный с data-rel = "dialog" на якоре.

    данные-закрытие-btn слева | право | нет
    data-close-btn-text строка - текст для кнопки закрытия, только диалог. По умолчанию: «закрыть»
    уголки данных правда | ложь
    data-dom-cache верно | ложный
    тема наложения данных образец письма (a-z) - Тема наложения при открытии страницы в диалоговом окне
    тема данных образец буквы (a-z)
    заголовок данных строка - заголовок, используемый при отображении страницы

    Контейнер с data -hance = "false" или data-ajax = "false"

    расширение данных правда | ложь
    данные ajax правда | ложь

    Любые элементы DOM внутри контейнера data -hance = "false" , за исключением data-role = "page | dialog" элементов, будут проигнорированы во время первоначального улучшения, а последующие создадут событий при условии, что $.Флаг mobile.ignoreContentEnabled устанавливается до расширения (например, в привязке mobileinit ).

    Любая ссылка или элемент формы внутри контейнеров data-ajax = "false" будет игнорироваться функцией навигации фреймворка, если для $ .mobile.ignoreContentEnabled установлено значение true.

    Полевой контейнер

    Контейнер с data-role = "fieldcontain" , обернутый вокруг пары элементов "метка / форма"

    Примечание. data-role = "fieldcontain" устарело в jQuery Mobile 1.4.0 и будет удален в 1.5.0. Вместо этого добавьте класс ui-field-contain .

    Выбрать с data-role = "slider" и двумя опциями element

    Образец буквы Образец буквы
    data-mini верно | false - Версия компактного размера
    роль данных none - Запрещает автоматическое улучшение для использования собственных элементов управления
    тема данных (a-z) - добавлен в форму элемент
    тема-трек с данными (a-z) - добавлен в форму элемент

    Ссылка

    Ссылки, в том числе с data-role = "button" , и кнопки отправки формы имеют эти атрибуты

    данные ajax правда | ложь
    направление данных reverse - Анимация обратного перехода (только для страницы или диалога)
    data-dom-cache верно | ложный
    упреждающая выборка данных верно | ложный
    отн. Данных назад - для перехода на один шаг назад в истории
    диалоговое окно - для открытия ссылки в стиле диалогового окна, не отслеживаемого в истории
    external - для связи с другим доменом
    всплывающего окна - для открытия всплывающего окна
    передача данных выцветание | перевернуть | поток | поп | слайд | сползание | затухание | слайд-вверх | поворот | нет
    данные-позиция-к origin - Центрирует всплывающее окно над ссылкой, которая его открывает.
    Селектор jQuery - Центрирует всплывающее окно над окном указанного элемента
    - Центрирует всплывающее окно в окне
    Примечание. Параметр доступен только при использовании со всплывающими окнами.См. Также: параметры.

    OL или UL с data-role = "listview"

    автоделители данных верно | ложный
    тема подсчета данных буква образца (a-z) - значение по умолчанию "null", унаследовано от родительского объекта. Устарело с версии 1.4.0 и будет удалено в 1.5.0.
    тема-разделитель данных буква образца (a-z) - по умолчанию "null", унаследовано от родительского
    фильтр данных верно | ложный
    заполнитель-фильтр данных строка
    тема-фильтр данных образец буквы (a-z)
    тема заголовка данных образец буквы (a-z)
    значок данных дом | удалить | плюс | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
    вставка данных верно | ложный
    значок разделения данных дом | удалить | плюс | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | arrow-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск
    тема с разделением данных буква образца (a-z) - по умолчанию "null", унаследовано от родительского
    тема данных образец буквы (a-z)

    LI в виде списка

    текст фильтра данных строка - Фильтр по этому значению вместо внутреннего текста
    значок данных дом | удалить | плюс | стрелка-у | стрелка-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
    роль данных разделитель списка
    тема данных образец буквы (a-z)

    Атрибут data-icon применим только для элемента списка, если он содержит ссылку.

    Число LI , заключенных в контейнер с data-role = "navbar"

    data-iconpos осталось | право | верх | внизу | notext

    Для добавления значков к элементам навигационной панели используется атрибут data-icon , определяющий стандартный мобильный значок для каждого элемента.

    Навбары наследуют образец темы от своего родительского контейнера. Установка атрибута data-theme для панели навигации не поддерживается.Атрибут data-theme может быть установлен индивидуально для ссылок внутри навигационной панели.

    Контейнер с data-role = "page"

    data-dom-cache верно | ложный
    тема наложения данных образец письма (a-z) — Тема наложения при открытии страницы в виде диалогового окна
    тема данных образец буквы (a-z) — по умолчанию «a»
    заголовок данных строка — заголовок, используемый при отображении страницы
    URL-адрес данных url — Значение для обновления URL-адреса вместо URL-адреса, используемого для запроса страницы.Значение этого атрибута не должно кодироваться по URI. Если ваш путь или имя файла содержат апострофы или кавычки, используйте в значении кодировку объекта, а не кодировку URL. Например, data-url = "/ path / to / " Devil ' s Advocate " .html"

    Контейнер с data-role = "popup"

    уголки данных правда | ложь
    данные разрешены правда | false — если установлено значение false, предотвращает закрытие всплывающего окна, щелкнув за пределами всплывающего окна или нажав клавишу Escape
    история данных правда | false — Устанавливает, создает ли всплывающее окно элемент истории браузера при открытии.Если установлено значение false, элемент истории не будет создаваться, и, следовательно, его нельзя будет закрыть с помощью кнопки «Назад» в браузере.
    тема наложения данных образец буквы (a-z) — по умолчанию «ноль» (прозрачный фон)
    данные-позиция-к происхождение | окно | selector — «origin» указывает, что всплывающее окно должно располагаться по центру ссылки, которая его открывает. «window» указывает, что оно должно быть центрировано в окне браузера. Если вы укажете селектор jQuery, он будет центрирован над первым элементом, возвращаемым селектором, если этот элемент виден.В противном случае он будет центрирован в окне браузера.
    тень данных правда | ложь
    тема данных образец письма (a-z) | none — По умолчанию унаследовано, «none» устанавливает прозрачность всплывающего окна
    допуск данных 30,15,30,15 — Расстояние от краев окна (вверху, справа, внизу, слева)
    передача данных нет | переход — переход, используемый при появлении / исчезновении всплывающего окна.

    Якорь с data-rel = "popup" открывает всплывающее окно

    данные-позиция-к origin — Центрирует всплывающее окно над ссылкой, которая его открывает.
    Селектор jQuery — Центрирует всплывающее окно над окном указанного элемента
    — Центрирует всплывающее окно в окне
    отн. Данных popup — Для открытия всплывающего окна
    передача данных исчезать | перевернуть | поток | поп | слайд | сползание | затухание | слайд-вверх | поворот | нет — переход, который будет использоваться при отображении / скрытии всплывающего окна

    Пары меток и входов с type = "radio" улучшаются автоматически, data-role не требуется

    Образец буквы
    data-mini верно | false - Версия компактного размера
    роль данных none - Запрещает автоматическое улучшение для использования собственных элементов управления
    тема данных (a-z) - добавлен в форму элемент

    Все элементы формы select улучшаются автоматически, роль данных не требуется

    Образец буквы
    тема-разделитель данных буква образца (a-z) - по умолчанию "b" - применимо только в том случае, если поддержка optgroup используется в неродных выборках
    значок данных дом | удалить | плюс | стрелка-у | arrow-d | карат-л | карат-т | карат-р | карат-б | проверить | передача | сетка | звезда | обычай | стрелка-r | стрелка-л | минус | обновить | вперед | назад | предупреждение | информация | поиск | ложь
    data-iconpos осталось | правый | наверх | внизу | notext
    встроенные данные верно | ложный
    data-mini верно | false - Версия компактного размера
    собственное меню данных правда | ложь
    тема наложения данных образец письма (a-z) - тема наложения для неродных выделений
    заполнитель данных верно | false - Может быть установлен на option element non-native select
    роль данных none - Запрещает автоматическое улучшение для использования собственных элементов управления
    тема данных (a-z) - добавлен в форму элемент

    Входы с type = "range" улучшаются автоматически, data-role не требуется

    Образец буквы Образец буквы
    выделение данных верно | false - Добавляет заливку активного состояния на дорожку для обработки
    data-mini верно | false - Версия компактного размера
    роль данных none - Запрещает автоматическое улучшение для использования собственных элементов управления
    тема данных (a-z) - добавлен в форму элемент
    тема-трек с данными (a-z) - добавлен в форму элемент

    Введите type = "текст | число | поиск | и т. Д." или textarea элементов улучшаются автоматически, data-role не требуется

    Образец буквы
    data-clear-btn верно | false - Добавляет кнопку очистки
    data-clear-btn-text строка - Текст для кнопки закрытия. По умолчанию: "открытый текст"
    data-mini верно | false - Версия компактного размера
    роль данных none - Запрещает автоматическое улучшение для использования собственных элементов управления
    тема данных (a-z) - добавлен в форму элемент

    Контейнер с data-role = "header" или data-role = "footer"

    data-add-back-btn верно | false - Кнопка автоматического добавления назад, только заголовок
    данные-back-btn-text строка - только заголовок
    data-back-btn-theme образец буквы (a-z) - только заголовок
    идентификатор данных строка - Уникальный идентификатор.Обязательно для постоянных нижних колонтитулов
    позиция данных фиксированный
    тема данных образец буквы (a-z)

    Контейнер с data-role = "header" или data-role = "footer" плюс атрибут data-position = "fixed"

    масштабирование страницы отключения данных правда | false - Возможность масштабирования пользователем для страниц с фиксированными панелями инструментов
    полноэкранный режим данных верно | false - Установка панелей инструментов поверх содержимого страницы
    переключение передачи данных правда | false - Возможность переключения видимости панели инструментов при нажатии / щелчке пользователем
    передача данных слайд | исчезать | none - переход, используемый при отображении / скрытии панели инструментов
    заполнение страницы обновления данных правда | false - обновить верхнее и нижнее отступы страницы при изменении размера, переходе, событиях «updatelayout» (платформа всегда обновляет отступы при событии «pageshow»).

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

    Ваш адрес email не будет опубликован.