。在这个示例中，“data-city”是自定义数据属性，而“Beijing”则是该属性存储的值。
使用数据属性的一个重要方面是可以把多种自定义信息嵌入到HTML元素中。这样做不会影响到元素的外观或功能，而且在页面加载后可以通过NET/" style="text-decoration: none; color: inherit;" title="NET">NET/" style="text-decoration: none; color: inherit;" title="java">javaScript轻松提取这些数据。比如，可以将产品信息、用户设置等直接存储在相应的元素内。
在NET/" style="text-decoration: none; color: inherit;" title="NET">NET/" style="text-decoration: none; color: inherit;" title="java">javaScript中，使用数据属性非常方便。可以通过元素的.dataset属性快速获取。例如，如果要获取data-city的值，可以用document.querySelector('[data-city]').dataset.city，处理简单，可以快速实现动态效果和交互。
数据属性不仅可以用于获取，还可以用于存储影响页面行为的信息。通过修改数据属性的值，可以在页面中驱动不同的事件逻辑。这种方式使得前端开发更加高效，减少了对外部脚本和全局变量的依赖。
在CSS中也可以通过自定义属性与数据属性结合，实现更灵活的样式调整。可以在样式规则中使用attribute选择器，轻松地根据数据属性的值来控制样式，例如可通过[data-city="Beijing"]来改变特定城市相关元素的样式。
HTML中的数据属性提供了一个强大的工具来扩展网页元素的信息承载能力。无论是通过NET/" style="text-decoration: none; color: inherit;" title="NET">NET/" style="text-decoration: none; color: inherit;" title="java">javaScript的操作，还是结合CSS的样式定义，数据属性带来的灵活性和便利性都显而易见。