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的有效属性，以及全局和事件属性。因此，我所包含的属性会导致验证错误。我尝试过很多修复方法，例如将音频和图片文件包装为<div>或<audio>，但没有任何成功。

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

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

我不确定如何修复它。有什么建议吗？

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>

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

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

1 个答案: