Что такое атрибуты "data-url" и "data-key" тега <a>?

Я столкнулся с двумя странными атрибутами тега html . Они являются "data-url" и "ключом данных.

Каковы они и как их можно использовать?

По некоторым причинам я не могу показать точный пример файла HTML, в котором я их нашел, но вот несколько примеров из Интернета с такими тегами:

PS: Я пытался Google, но никаких полезных результатов не найдено.

Ответ 1

Когда следует использовать атрибут данных?

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


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

<a href="#" class="pink" data-bubble="2">Profile</a>

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

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

Когда не использовать атрибут данных?

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

<span data-time="20:00">8pm<span>

когда мы могли бы использовать уже определенный атрибут datetime в элементе времени, как показано ниже:

<time datetime="20:00">8pm</time>

Использование атрибутов данных с помощью CSS (Селекторы атрибутов)

[data-role="page"] {
  /* Styles */
}

Использование атрибутов данных с помощью jQuery (. attr())

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

-

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

Примеры и информация от здесь

Ответ 2

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

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

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

От просмотра вашего кода кажется:

  • Лицо, написавшее этот код, хочет сохранить некоторые дополнительные информация с элементами. Не уверен, что он справится с этим в Javascript тоже.

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

  • Поскольку ваш код использует библиотеку jQuery, проверьте .data() метод. После полного обзора кода, если вы считаете, что это бесполезно, затем не стесняйтесь удалять.

Ответ 3

data-* атрибуты предназначены для добавления произвольных данных в элемент, используемый исключительно кодом (обычно клиентским JavaScript), запущенным на сайте хостинг HTML.

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

Ответ 4

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

<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li>