HTML验证错误咨询：<li>元素不允许使用audio_url属性

嗨，这个问题我碰到过好多次了——直接给<li>加自定义属性确实会触发HTML验证错误，毕竟HTML规范里只给<li>规定了type、value还有全局/事件属性，自定义的audio_url、image_url不在合法列表里。不过有几种完全合规的解决办法，给你列出来：

1. 用HTML5标准的data-*自定义属性（最推荐） #

这是官方专门为存储自定义数据设计的方案，所有HTML元素都支持，完全符合验证标准。你只需要把属性名改成data-开头的形式，连字符分隔的名称会自动在JS的dataset里转换成驼峰式：

<li data-audio-url="https://example.com/audio1.mp3" data-image-url="https://example.com/cover1.jpg">
  音频1
</li>

之后在JavaScript里获取这些数据也很方便：

const listItem = document.querySelector('li');
const audioUrl = listItem.dataset.audioUrl; // 获取data-audio-url的值
const imageUrl = listItem.dataset.imageUrl; // 获取data-image-url的值

2. 把数据放在<script type="application/json">标签里 #

如果你的数据结构比较复杂（比如后续要加更多字段），或者不想用data属性，可以在<li>内部嵌套一个隐藏的JSON脚本标签：

<li>
  音频1
  <script type="application/json" class="audio-playlist-data">
    {"audioUrl": "https://example.com/audio1.mp3", "imageUrl": "https://example.com/cover1.jpg"}
  </script>
</li>

然后在JS里解析这个JSON数据：

const scriptTag = document.querySelector('.audio-playlist-data');
const playlistData = JSON.parse(scriptTag.textContent);
console.log(playlistData.audioUrl, playlistData.imageUrl);

3. 用隐藏元素存储数据（适合简单场景） #

如果不想用data属性或JSON脚本，也可以在<li>里放带hidden属性的元素来存储数据，这种方式对一些老旧的JS环境兼容性更好：

<li>
  音频1
  <span hidden class="audio-url">https://example.com/audio1.mp3</span>
  <span hidden class="image-url">https://example.com/cover1.jpg</span>
</li>

获取数据时直接读取元素的文本内容：

const listItem = document.querySelector('li');
const audioUrl = listItem.querySelector('.audio-url').textContent.trim();
const imageUrl = listItem.querySelector('.image-url').textContent.trim();

总结 #

这三种方法里，data-*属性是最简洁、最符合HTML标准的方案，推荐优先使用。修改后再跑HTML验证，就不会再出现属性不合法的报错啦！

内容的提问来源于stack exchange，提问作者philip-j