错误：此时元素 li 上不允许使用属性 audio_url

Question

我创建了一个音频播放列表。这是一个包含多个列表项的无序列表。 <li> 元素定义了作为无序列表一部分的列表项。每个列表项由一个音频 url 和一个图像 url 组成。

<ul class="playlist list-group list-group-flush">

     <li audio_url="music/Intro.mp3" img_url="images/isos_ep.jpg" 
     class="active 
     list-group-item playlist-item">
     Intro</li>

     <li audio_url="music/Castaway.mp3" class="list-group-item playlist-
     item" 
     img_url="images/isos_ep.jpg">
     Castaway</li>

     <li audio_url="music/Robert_Smith.mp3" class="list-group-item playlist-
     item" img_url="images/isos_ep.jpg">
     Robert Smith</li>

     <li audio_url="music/Stolen_Youth.mp3" img_url="images/isos_ep.jpg" 
     class="active list-group-item playlist-item">
     Stolen Youth</li>
     <li audio_url="music/Red_Vines.mp3" class="list-group-item playlist-
      item" 
     img_url="images/isos_ep.jpg">
     Red Vines</li>

     <li audio_url="music/On_the_Attack.mp3" class="list-group-item 
     playlist-
     item" img_url="images/south_migration.jpg">
     On the Attack</li>

     <li audio_url="music/South_Migration.mp3" 
     img_url="images/south_migration.jpg" class="active list-group-item 
     playlist-item">
     South Migration</li>

</ul>

代码运行良好，没有任何问题，但据我了解，这些不是列表项允许的有效属性。列表项可以具有type 和value 的有效属性，以及全局和事件属性。因此，我包含的属性会导致验证错误。我已经尝试了许多修复 - 例如将音频和 img url 包装为 <div> 或 <audio> 但没有任何成功。

当我在 W3C 验证器上检查它时，我收到错误消息：

错误：此时元素li 上不允许使用属性audio_url。

我不知道如何解决它。有什么建议吗？

Answer 1

如果您想保持这样的标记，可以将data- as prefix 添加到您发明的属性中：

<li data-audio_url="music/Castaway.mp3" 
    class="list-group-item playlist-item" 
    data-img_url="images/isos_ep.jpg">
Castaway
</li>

但通常使用语义标记会更好。例如，像这样：

<li>
  <button type="button" data-audio_url="music/Castaway.mp3">
    <img src="images/isos_ep.jpg" alt="">
    Castaway
  </button> 
</li>

（假设点击将曲目添加到播放列表）