实例
使用 data-* 属性来嵌入自定义数据：
<ul> <li data-animal-type="鸟类">喜鹊</li> <li data-animal-type="鱼类">金枪鱼</li> <li data-animal-type="蜘蛛">蝇虎</li> </ul>
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {
var animalType = animal.getAttribute("data-animal-type");
alert(animal.innerHTML + "是一种" + animalType + "。");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击某个物种来查看其类别：</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="鸟类">喜鹊</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="鱼类">金枪鱼</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="蜘蛛">蝇虎</li>
</ul>
</body>
</html>
http://www.w3school.com.cn/tiy/t.asp?f=html5_global_data
data-* 属性包括两部分：
（1）属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
（2）属性值可以是任意字符串
简单来说就是存储一些简单信息，然后可以通过js拿到这些信息，像你说的data-url和data-href估计就是存储的真正的url和href，可以通过js的element.dataset.url或JQ的data('url')拿到，然后进行相应操作。
https://blog.csdn.net/j_bean/article/details/78457644
js和data-url代替a标签的各种好处
跳转没用a标签，而是用了div加h5的自定义属性
因为a标签有种种不确定性，比如在各种浏览器的表现形式不统一，而且鼠标hover的时候页面下方会有链接，显得很low。
而div+自定义属性，在js中获取链接，通过$('.new').attr('url')获取地址，然后把链接 window.href,这样做的目的是不暴露地址，有一些地址是隐藏的，在js处理可以有一个保护性，在html里面就直接能看到，还有在js里可以对http和https做处理，更加便利，window.location.protocol，这样按页面头信息，跳转，，还有就是按域名，比如你是测试机器，然后你在html写错了其实灵活性太不好
data属性可以使用dataset拿到，是一个对象
使用dataset操作data 要比使用getAttribute和setAttribute速度稍微慢些，使用dataset不能提高代码的性能，但是对于简洁代码，提高代码的可读性和可维护性是很有帮助的
原文：https://blog.csdn.net/weixin_38026561/article/details/80606518
前端data-url的用法
data-* 相当于数据存储，点加了点击方法，就会读取里面的数据，进行页面跳转
<div class="level02_guide">
<ul class="title">
<li><span<#if type=='companyNotice'>
class="l02_active" </#if>
data-url="${webHomeUrl}/article/companyNotice/index"
data-type="/article/companyNotice/index">公司公告</span></li>
<li><span<#if type=='news'> class="l02_active" </#if>
data-url="${webHomeUrl}/article/news/index"
data-type="/article/news/index">业界新闻</span></li>
</ul>
<script type="text/javascript">
$(function() {
$('.level02_guide>ul>li>span')
.on(
'click',
function() {
var newsurl = $(this).attr(
"data-url");
var newType = $(this).attr(
"data-type");
var oldUrl = location.href;
if (oldUrl.toLowerCase()
.indexOf(newType) < 0) {
location.href = newsurl;
}
});
});
</script>
<div>
原文：https://blog.csdn.net/wudiansheng/article/details/80079006