html - data-value、data-title、data-original-title、original-title等的用途和用法是什么?

标签 html custom-data-attribute

我一直在 GitHub 等更现代的网站上看到这些属性,它们似乎总是与自定义的弹出窗口一致,如 title 属性。

<a href="/" data-value="hovering message">Option 1</a>
<a href="/" data-title="hovering message">Option 2</a>
<a href="/" data-original-title="hovering message">Option 3</a>
<a href="/" original-title="hovering message">Option 4</a>

我在 HTML5 Doctor 上阅读了一些关于数据属性的文档,但我不太确定这一点。

使用它们是否有一些 SEO 或可访问性优势?在这种特定情况下,通常用于创建弹出窗口的插件(希望是 jQuery)是什么?

最佳答案

简单地说,自定义数据属性的规范指出,任何以“data-”开头的属性都将被视为私有(private)数据的存储区域(私有(private)的意思是最终用户看不到它——它不不影响布局或演示)。

这允许您编写有效的 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>

发件人:Ejohn.org '不确定外部链接政策,只是把它放在这里以防有人想知道'

关于html - data-value、data-title、data-original-title、original-title等的用途和用法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50763455/

相关文章:

python - 如何在 Beautiful Soup 4 中插入未转义的 html 片段

javascript - 从javascript中的单独文件夹中获取图像

javascript - 如何使用 javascript 访问 HTML 元素的数据属性

javascript - 是否可以使用 CSS 分配数据属性?

JavaScript 或 jQuery 使用数据属性比较两个有序列表

javascript:监听来自特定 iframe 的 postMessage 事件

html - 嵌套 flexbox 和 CSS 网格布局中的空间分配问题

html - div覆盖html表格中的位置

javascript - 获取单页滚动分页中的数据属性

javascript - jQuery 按数据属性排序