實例
使用 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