杭州做网站：您需要了解的HTML5数据属性_极简kok官方体育ios kok官方体育ios 公司

杭州做网站：您需要了解的HTML5数据属性

2019.08.02 mf_web

HTML5数据属性允许您将自定义数据分配给元素。本文介绍了如何使用它，并提供了理想情况下使用它的示例。杭州做网站‍

介绍

在HTML5之前，我们不得不依赖于使用“class”或“rel”属性来存储我们可以在网站中使用的小数据片段。这有时会导致问题，并可能导致网站的样式和功能之间发生冲突。HTML5的出现引入了一个称为“数据”的新属性。在本文中，我将讨论一些如何使用此属性以及如何正确使用它的示例。

随着网站越来越受数据驱动和应用程序的影响，他们开始掌握更多有关特定元素的数据。例如，如果我们正在创建一个音频应用程序。我们可能有标准的标记，例如：

</audio>

上述标记是完全可以接受的，但有时我们可能希望存储除源以外的每个轨道的更多信息。例如，我们可能希望能够分配其他特定的曲目信息，例如持续时间，节奏和艺术家。我们可以通过为每个音频源分配自定义数据属性来实现此目的，例如：

</audio>

通过提供这些自定义数据属性，我们可以执行诸如在持续时间，节奏或艺术家使用其关联值在我们的应用程序中搜索，过滤或分组任务。

如何使用数据属性

数据属性的名称必须以字符串'data-'开头，并且必须在连字符后面包含至少一个使用任何HTML命名约定的字符。

数据属性的W3C规范声明：

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

这意味着我们应该只在我们的应用程序内部使用该数据，它不应该用于向我们的用户显示信息。同样重要的是要注意，您可以为具有任何值的元素分配任意数量的自定义属性。

我应该何时使用数据属性？

我们已经看过你如何使用数据属性，但为了让你清楚地理解，让我们再看几个例子。

幸运的是，Webdesigntuts +已经对一些好的用例示例进行了详细介绍。其中一个关键是通过在锚标记中分配通知项来查看如何使用它们来设置和显示菜单通知气泡。这次data属性用于指示通知气泡的气泡值。

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

在另一个快速提示中，我们还可以看到它如何用作工具提示的标记的一部分

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

此时间用于显示工具提示的文本。

我什么时候不应该使用数据属性？

我们不应该为已经建立或更合适的属性使用数据属性。例如，使用它是不合适的：

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

当我们可以datetime在time如下元素中使用已定义的属性时：

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

数据属性不应用作元数据或微格式的替代。微格式主要是为人类设计的，并且是为了给出我们的标记上下文而引入的。例如，如果您有一个Vcard提供有关个人或组织的联系信息，那么您可以给它一类“vcard”，让机器了解这是联系信息。

使用微格式，你应该使用你的标记

<span class="fn " >Aaron Lumsden</span>

</div>

而不是使用数据属性，如

<span data-name="Aaron Lumsden " >Aaron Lumsden</span>

</div>

要了解有关微格式的更多信息，请访问Mircorformats.org。

使用CSS的数据属性

一旦我们在HTML标记中实现了数据属性，我们就可以使用CSS来定位它们。重要的是要注意，不应该直接使用数据属性来使用样式，尽管在某些情况下它可能是合适的。在CSS中定位数据属性与定位其他属性类似，您可以像下面这样使用它们：

[data-role="page"] {

/* Styles */

}

例如，如果您要创建跨设备友好的网站或应用程序，那么您可能希望定位一些您只应在移动设备上查看的特定内容。采取以下标记

Mobile only content

</div>

使用CSS，您可以在桌面上查看时隐藏所有仅限移动设备的页面。

div[data-role="mobile"] {

display:none;

}

虽然不建议基于查看设备隐藏内容，但可能存在适合的情况。您应该根据每个具体情况和案例来确定这一点。

也可以使用属性中的数据并通过CSS显示它。尽管规范说您不应该使用自定义属性中的数据向用户显示，但是在某些情况下可能是最好的方法。这就是它的实现方式。

1	<div class="test" data-content="This is the div content">test</div>

在CSS中，您将使用'：after'伪元素（或其他一些生成的内容）并将该属性用作'after'内容的一部分，如下所示：

五

.test {

display: inline-block;

}

.test:after {

content: attr(data-content);

}

然后，这将在'.text'div中显示'This is the div content'。

使用数据属性使用jQuery

现在我们已经了解了如何使用CSS使用data属性来定位元素，让我们看一下如何使用jQuery获取数据。

注意：处理数据超出了本教程的范围，因为本教程专门针对前端开发人员和设计人员。

我们可以通过几种方法使用jQuery从元素中获取数据。让我们来看看其中的一些。

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

如果我们有一个锚标记，就像上面那个，它具有data-info的数据属性，那么我们可以像获取任何其他属性值一样访问该数据。

五

$('.button').click(function(e) {

e.preventDefault();

thisdata = $(this).attr('data-info');

console.log(thisdata);

});

您可以通过在Web检查器中打开js控制台，然后点击链接来测试它。

关于data属性的好处是我们也可以使用它来提供这样的json数据。

1	<a href="google" class="button" data-info='{"foo":"bar"}'></a>

使用jQuery我们可以使用jQuery的数据对象方法获取这些数据。

五

$('.button').click(function(e) {

e.preventDefault();

thisdata = $('div').data('info').foo;

console.log(thisdata);

});

然后，上面的示例将“bar”记录到控制台日志中。

跨浏览器支持

我知道在你使用这个新属性之前，你会想知道哪些浏览器支持它以及什么时候可以开始使用它。好消息是它在所有现代浏览器中得到了很好的支持。任何支持HTML的东西都可以访问数据属性。如果您正在使用该属性进行样式设置以及访问数据（请谨慎使用），那么浏览器将需要支持CSS3选择器。

更好的消息是，所有浏览器（甚至是IE7）都允许你在元素上使用data- *属性，如果你使用的是jQuery 1.4或更高版本，那么你可以使用jQuery的数据对象访问数据。但是，如果您只是使用JavaScript，则必须使用JavaScript的“getAttribute”方法访问数据。

有关数据集的完整列表支持，您可以查看canIuse.com。

结论

随着网站和网络应用程序变得越来越复杂并开始保存更多信息和数据，这个新属性绝对是工具箱的一个受欢迎的补充。我现在已经在很多现实世界的例子中使用它，并且发现它是一种非常有用的方法来提供响应更快（更快速）的网站，因为否则必须从服务器中提取的数据现在可以在标记并在必要时使用。

总而言之，如果您坚持以下三个规则，那么您可以确保以最有效和语义的方式使用新属性。

仅用于您网站/应用的内部使用。例如，它不应该在XML / RSS提要中用于外部网站或应用程序。
不要仅用于CSS样式。
不要使用它来替换更具语义或适当性的现有属性或元素。

既然您已经对HTML5数据属性及其使用方式有了更深入的了解，我建议您立即开始在项目中实现它。

杭州做网站你有没有在任何现实世界的例子中使用它？你用过什么场景？它是节省您的时间还是您希望通过此属性扩展的任何内容？请在下面的评论中告诉我。

kok官方体育ios