HTML data标签

HTML data标签是一个HTML5新标签，用于为元素提供额外的数据供JavaScript使用，而不会影响到页面本身的布局。

用法

data标签可以将数据存储在HTML元素中，使得在JavaScript中可以方便的通过DOM API访问到这个元素的详细数据信息。使用data标签时，我们需要在属性名前加上data-前缀，然后在属性值中存储我们需要的数据，例如：

<div id="user" data-user-id="123" data-user-name="John Doe" data-user-email="john@doe.com">John Doe</div>

以上代码中，div元素有一个id属性，使得我们可以方便的通过JavaScript访问到这个元素。除此之外，它还有三个通过data-*属性存储的自定义数据属性。这些属性可以通过JavaScript的data-*API访问到，而不会影响到页面本身的布局。在JavaScript中，我们可以通过以下方式访问这些属性：

const userDiv = document.querySelector('#user');
const userId = userDiv.dataset.userId;
const userName = userDiv.dataset.userName;
const userEmail = userDiv.dataset.userEmail;

注意事项

• 不建议在 data-* 属性中存储敏感数据
• 由于各种框架的使用，不建议在 data-* 属性中使用自定义 javascript 脚本进行交互
• data-* 属性的命名需要符合我们常见的变量命名规范

结论

HTML data标签提供了一种存储自定义数据的方法，使得我们的JavaScript代码可以在页面上获取所需的数据，而不会影响到页面本身的布局和显示，因此，在前端开发中被广泛应用。