HTML多媒体资源质量核定聚焦引用方式：图标需type/sizes声明及多格式兼容；图片必设width/height、alt、loading策略；音视频须poster、controls、多source及preload="metadata"；SVG需净化并避免全局污染。
图标和多媒体资源本身不参与HTML代码质量核定——它们是外部资源，质量判定只落在HTML如何引用、描述、适配它们。
图标引用必须带语义与降级能力
单纯写 <link rel="icon" href="favicon.ico"> 是最低要求，但不够。缺少 type 和尺寸声明时，部分安卓浏览器或PWA环境会忽略；没提供 apple-touch-icon 会导致iOS主屏图标模糊或 fallback 到截屏。
- 必须显式声明
type和sizes：<link rel="icon" href="favicon.svg" type="image/svg+xml" sizes="any"> - 为旧设备兼容，同时提供 PNG 版本：
<link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32"> -
apple-touch-icon必须是 180×180 PNG，且不含透明背景（Safari 渲染异常） - 禁用内联 data URL 图标——它无法被缓存，且增加 HTML 体积，首次加载拖慢解析
图片标签必须含宽高、加载策略与可访问性属性
只写 <img src="banner.jpg"> 会触发布局抖动（layout shift），且对屏幕阅读器和 SEO 极不友好。现代 HTML 解析器对缺失 width/height 的图片会延迟计算尺寸，影响 CLS（Cumulative Layout Shift）得分。
- 必须声明
width和height属性（即使 CSS 会覆盖），用于预占位 - 首屏外图片强制加
loading="lazy"；首屏图禁用该属性，否则可能被延迟渲染 - 所有
<img>必须有alt：空字符串alt=""仅限纯装饰图；功能性图标需描述用途，如alt="搜索按钮" - 响应式图片优先用
srcset+sizes，而非仅靠 CSS 缩放——否则高 DPR 设备会下载远超需要的尺寸
音视频标签需声明 poster、controls 与格式兜底
<video> 或 <audio> 标签若无 poster、无 controls、无 <source> 备选格式，在 Safari 或旧版 Edge 上可能完全不显示控件或报错“no video sources”。更糟的是，缺失 preload 策略会让移动端自动下载完整文件，浪费用户流量。
立即学习“前端免费学习笔记（深入）”；
-
<video>必须带poster属性（哪怕只是 placeholder），否则 iOS Safari 显示黑块 - 明确声明
controls—— 不依赖 JS 注入，避免无控件导致不可操作 - 至少提供两种格式：
<source src="vid.mp4" type="video/mp4">+<source src="vid.webm" type="video/webm"> - 设
preload="metadata"（非"auto"），平衡加载速度与流量消耗 - 禁用
autoplay无muted—— Chrome 和 Safari 会静音并暂停，且触发 UX 惩罚
SVG 内联必须剥离编辑元数据并限制作用域
直接复制 Sketch/Figma 导出的 SVG 常含冗余 <defs>、id 冲突、style 标签甚至脚本——这些不仅增大体积，还可能污染全局 CSS 或执行意外逻辑。
- 用 SVGO 工具压缩后再内联，移除
title、desc（除非需无障碍支持）、xml:space等非必要节点 - 所有
id改为唯一前缀，如icon-search-fill→header-icon-search-fill，避免跨组件冲突 - 禁止在内联 SVG 中使用
<style>标签——改用外部 class 控制颜色/尺寸 - 若 SVG 需交互（hover 变色等），确保
fill/stroke使用 currentColor 或 CSS 变量，而非硬编码值
真正卡住质量核定的，从来不是“用了什么图标”，而是“怎么告诉浏览器和辅助技术这个图标代表什么、在什么条件下加载、失败时怎么兜底”。漏掉任何一个环节，都可能让整页通过 W3C 验证却在真实设备上失效。
