Html data-value、data-title、data-original-title、original-title等的用途和用途是什么?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17246497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what is the purpose and usage of data-value, data-title, data-original-title, original-title, etc.?
提问by questy
I've been seeing these attributes around on more modern websites like GitHub and such, and they always seemed to coincide with a customized popover like the title
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>
I read some documents about data- attributes on HTML5 Doctor, and I'm not quite sure of the point.
我在 HTML5 Doctor 上阅读了一些有关数据属性的文档,但我不太确定这一点。
Is there some SEO or accessibility benefit to using them? And what is the plugin(hopefully jQuery) commonly being used to create the popovers in this specific case?
使用它们是否有一些 SEO 或可访问性好处?在这种特定情况下,通常用于创建弹出窗口的插件(希望是 jQuery)是什么?
采纳答案by lloan
Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can't see it – it doesn't affect layout or presentation).
简而言之,自定义数据属性的规范规定,任何以“data-”开头的属性都将被视为私有数据的存储区域(从某种意义上说,最终用户看不到私有数据——它不影响布局)或演示)。
This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:
这允许您编写有效的 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>
From : Ejohn.org'Not sure about the external link policy, just putting it in here in case someone wants to know'
来自:Ejohn.org'不确定外部链接政策,只是把它放在这里以防有人想知道'
回答by Shaddow
HTML5 data-*
attribute is used for storing data in element
HTML5 data-*
属性用于在元素中存储数据
For manipulating with this attribute you can use jQuery.data()or .data()methods.
要使用此属性进行操作,您可以使用jQuery.data()或.data()方法。
回答by Jukka K. Korpela
The main point is that data-
attributes will not clash with attributes that may added to HTML later or with browser-specific attributes. The idea is to give an author a playground, a name space where he can use attributes for private purposes without fear of having them ever interpreted as standard or vendor-defined attributes in some different meaning.
主要的一点是data-
属性不会与以后可能添加到 HTML 的属性或浏览器特定的属性发生冲突。这个想法是给作者一个操场,一个命名空间,他可以将属性用于私人目的,而不必担心他们被解释为具有某种不同含义的标准或供应商定义的属性。
According to this idea, search engines and assistive software ignore such attributes, as they have no interoperable meaning.
根据这个想法,搜索引擎和辅助软件忽略了这些属性,因为它们没有互操作的意义。