降级非自动fallback，而是HTML解析器按顺序检查，仅当所有source均因MIME不匹配或资源不可用而失败时，才加载兜底；type必须为标准MIME且与服务器Content-Type严格一致，否则静默跳过。

降级不是“自动 fallback”，而是浏览器按顺序解析 并严格匹配 MIME 类型和可用性后，**没一个满足才用 **。它不靠 JS、不靠错误重试，是 HTML 解析器在构建 DOM 阶段就决定的。

浏览器怎么解析 并触发降级

HTML 解析器（Tokenizer + Tree Construction）遇到 时，会逐条处理子节点：

• 先读第一个 ，检查它的 type 属性是否被当前浏览器支持（例如 Safari ≤13.1 不支持 image/webp，直接跳过）
• 再检查该 的 srcset 或 src 是否能成功获取并解码（404、格式损坏、CORS 拦截 → 视为不满足）
• 只要有一条 同时满足“类型支持”+“资源可加载”，就停止遍历，加载它； 被忽略
• 所有 都失败（类型不认 / 资源不可用），才把 当作最终 fallback 加载

type 写错或服务器返回 Content-Type 不一致会怎样

浏览器只认标准 MIME 类型字符串，且要求 HTML 中写的和服务器响应头完全一致：

• type="webp" → 无效，Safari/Chrome 都跳过
• type="image/webp" + 服务器返回 Content-Type: image/webp → 成功
• type="image/jpeg" 正确；type="image/jpg" 错误（不是标准值）
• AVIF 必须写 type="image/avif"，哪怕文件后缀是 .avif

哪怕资源 URL 可访问，只要 type 和响应头不匹配，这条 就不会被选中。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

为什么 在旧浏览器里是空白而不是报错

因为这不是加载失败，而是**解析阶段就被静默丢弃**：

• 浏览器看到 src="logo.webp"，去查 MIME 白名单，发现 image/webp 不在其中
• 它不发起请求，也不抛异常，连 Network 面板都看不到这个 URL
• DOM 中该 元素存在，但 currentSrc 为空，complete 为 false，自然留白
• 结构则把“声明支持”这件事显式交给了 HTML，让解析器有据可依

降级真正生效的前提：DOM 构建完成前就得有确定路径

整个过程发生在 HTML 解析器构建 DOM 树的早期阶段，不依赖 JS、不等待 CSSOM、不等 onload：

• 的兜底地址必须是静态可直访路径，不能带查询参数（如 ?format=webp）
• 服务器不能对 的请求做内容协商（比如根据 Accept 头返回不同格式）——旧浏览器根本不会发 Accept: image/webp
• 如果 指向的是 404 或损坏 JPEG，降级就彻底失效，页面留白

最容易被忽略的一点：降级不是“容错机制”，它是解析规则；一旦 结构写错或资源部署不匹配，就没有第二次机会。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！