HTML无法直接识别版权状态，需用data-license等自定义属性标记，再通过CSS选择器或JS动态筛选；注意大小写统一、多值兼容及交互反馈。
HTML里没法直接筛选素材版权状态
浏览器和HTML标准本身不识别“可商用”或“需授权”这类语义信息，<img>、<source> 或 <link> 标签没有任何字段能声明版权状态。所谓“过滤”，必须靠外部数据配合实现——要么靠你手动加标记，要么靠JS读取预置元数据，再动态显示/隐藏。
用data-*属性存版权标识最实际
这是前端最可控、不依赖后端改造的做法。把版权状态作为自定义属性写进标签，后续可用CSS隐藏或JS筛选：
-
data-license="commercial"表示可商用（如CC0、MIT图库） -
data-license="attribution"表示需署名（如CC BY） -
data-license="permission"表示需单独授权（如多数商业图库）
示例：<img src="logo.png" data-license="commercial" alt="logo">。注意：属性值别用空格或斜杠，避免解析歧义；大小写建议统一小写，减少JS判断分支。
用CSS选择器快速显隐筛选结果
如果只是静态页面，不用JS也能做基础过滤——靠用户点击按钮切换CSS类，再用属性选择器控制显示：
立即学习“前端免费学习笔记（深入）”；
- 默认所有图片
display: none - 点“只看可商用”时，给容器加类
.filter-commercial - CSS写：
.filter-commercial img[data-license="commercial"] { display: block; }
兼容性没问题（IE7+ 支持 [attr="val"]），但缺点明显：无法组合筛选（比如“可商用 + PNG格式”），也不支持搜索关键词匹配。
JS筛选时容易漏掉的三个坑
真要用JS做动态过滤，这几个点不处理好，用户一选就崩或结果错乱：
- 没处理大小写：用户输入
"COMMERCIAL"但属性是"commercial"，得统一转小写再比对 - 没考虑多值场景：有些图可能同时满足
data-license="commercial attribution"，用includes()比===更稳妥 - 没重置滚动/焦点：筛选后列表变短，但页面还停在原位置，用户以为没变化；建议筛选完
scrollTo(0, 0)或聚焦到结果区
简单JS逻辑示例：document.querySelectorAll('img[data-license]') 拿到全部，再用 el.dataset.license.toLowerCase().includes(keyword) 判断。
版权状态不是HTML能自动理解的东西，它本质是业务规则映射到DOM的标记行为。标记是否一致、JS判断是否覆盖边界情况、用户交互反馈是否及时——这三块没对齐，筛选功能就只是个摆设。
