我创建了一个音频播放列表。这是一个包含多个列表项的无序列表。 <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验证器上检查它时,我收到错误消息:
错误:此时元素
audio_url
上不允许属性li
。
我不知道如何解决它。有什么建议?
如果你想保留这样的标记,可以将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>
(假设点击将曲目添加到播放列表)