HTML data-* 属性

实例

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

<p>点击某个物种来查看其类别：</p>

</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-* 相当于数据存储，点加了点击方法，就会读取里面的数据，进行页面跳转

                   <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