[英]Error: Attribute audio_url not allowed on element li at this point
I have created an audio playlist. 我已经创建了一个音频播放列表。 It's an unordered list with several list items.
这是一个有几个列表项的无序列表。 The
<li>
element defines the list items that are part of the unordered list. <li>
元素定义作为无序列表一部分的列表项。 Each list item consists of an audio url and an image url. 每个列表项都包含一个音频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>
The code works great with no issues, but as I understand it, these are not valid attributes allowed with list items. 该代码运行良好,没有任何问题,但是据我了解,这些不是列表项所允许的有效属性。 List items can have valid attributes of
type
, and value
, as well as global and event attributes. 列表项可以具有
type
和value
有效属性,以及全局和事件属性。 Consequently, the attributes I have included lead to validation errors. 因此,我包含的属性导致验证错误。 I have tried many fixes- such aswrapping the audio and img urls as
<div>
or as <audio>
but without any success. 我尝试了许多修复程序,例如将音频和img URL包装为
<div>
或<audio>
但是没有成功。
When I check it on the W3C validator, I get the error message: 当我在W3C验证器上检查它时,出现错误消息:
Error: Attribute
audio_url
not allowed on elementli
at this point.错误:
audio_url
,元素li
上不允许使用属性audio_url
。
I am not sure how to fix it. 我不确定该如何解决。 Any suggestions?
有什么建议么?
If you want to keep your markup like that, you could add data-
as prefix to your invented attributes: 如果要保持这样的标记,可以将
data-
作为前缀添加到发明的属性中:
<li data-audio_url="music/Castaway.mp3"
class="list-group-item playlist-item"
data-img_url="images/isos_ep.jpg">
Castaway
</li>
But it would typically be better to use semantic markup. 但是使用语义标记通常会更好。 For example, something like this:
例如,如下所示:
<li>
<button type="button" data-audio_url="music/Castaway.mp3">
<img src="images/isos_ep.jpg" alt="">
Castaway
</button>
</li>
(assuming that a click adds the track to the playlist) (假设点击将曲目添加到播放列表中)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.