【问题标题】:What is data- attribute used for in HTML? And, What are the common combinations with data attribute? [duplicate]HTML 中使用的 data- 属性是什么?并且,与数据属性的常见组合是什么? [复制]
【发布时间】:2013-08-27 05:21:46
【问题描述】:

这是我在查看网站源代码时遇到的部分代码。一个链接,它的正确描述也足够了。在某处我还看到了 data-info 作为属性。


这里在span标签中,使用了data-msg:

<li>
    <span class="info" data-msg="sources.remittances.type" data-info="sources.remittances.info"></span>:
    <a data-msg="sources.remittances.name" target="_blank" href="http://econ.worldbank.org/WBSITE/EXTERNAL/EXTDEC/EXTDECPROSPECTS/0,,contentMDK:22759429~pagePK:64165401~piPK:64165026~theSitePK:476883,00.html"></a>
</li>

这是另一个例子:

<section class="static">
    <div class="msg" data-msg="browser.not.supported"></div>
</section>

【问题讨论】:

    标签: html


    【解决方案1】:

    自定义数据属性旨在存储私有的自定义数据 没有更合适的页面或应用程序 属性或元素。

    -W3c

    Webdesign Tuts gives a pretty good write-up of data-.

    应该在没有其他旨在存储特定数据的元素或属性时使用。它不打算被最终用户看到。而是允许更丰富的应用程序。

    同一个链接(上面)给出了一个很好的例子:

    <audio controls="controls">
      <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
    </audio>
    

    您现在可以让应用程序访问这些数据,而无需额外调用服务器。

    对于某些允许自定义属性的框架(看看你的 Angular.js),在所有属性前加上 data- 允许代码验证,因为我相信浏览器会忽略这些属性。

    【讨论】:

      【解决方案2】:

      这是一个 html 属性标准,用于存储有助于 UI/页面功能的任意数据。它旨在成为表示数据的标准,而不仅仅是使用任意自定义属性

      【讨论】:

        【解决方案3】:

        自定义数据属性旨在存储私有的自定义数据 没有更合适的页面或应用程序 属性或元素。

        All You Need to Know About the HTML5 Data Attribute

        HTML5 Custom Data Attributes (data-*)

        【讨论】:

          【解决方案4】:

          HTML 5 中引入的一个新特性是添加了自定义数据属性。这是对规范的一个看似奇怪的补充,但实际上提供了许多有用的好处。

          访问

          http://html5doctor.com/html5-custom-data-attributes/

          【讨论】:

            猜你喜欢
            • 2015-08-05
            • 1970-01-01
            • 2013-07-09
            • 1970-01-01
            • 2015-02-10
            • 2016-03-29
            • 1970-01-01
            • 1970-01-01
            • 2016-10-02
            相关资源
            最近更新 更多