HTML本身不处理数据加载异常，健壮性关键在于JS层生成合法HTML：需用DOMParser校验、避免innerHTML执行脚本、框架中v-html/dangerouslySetInnerHTML须兜底、iframe需监听onload/onerror并设fallback模板。
HTML 本身不处理“数据加载异常”，它只是静态结构容器；真正需要健壮性的是你把数据塞进 HTML 的那一环——比如 fetch 渲染、innerHTML 注入、或框架中动态更新 DOM 的过程。关键不是让 HTML “扛住错误”，而是让 JS 层在数据出问题时仍能生成合法、可渲染、不崩 UI 的 HTML 片段。
fetch 后插入 HTML 字符串前必须校验内容
很多人直接 res.text().then(html => el.innerHTML = html)，但一旦后端返回空、乱码、或半截 HTML（如只返回 <div>hello 没闭合），就会导致 DOM 解析错乱、后续 JS 操作失败，甚至整个区域不可交互。
- 永远先用
DOMParser().parseFromString(htmlStr, 'text/html')做轻量解析，再检查doc.body.children.length是否为 0 —— 若为 0 且htmlStr.trim()非空，说明结构严重异常，不能直接插入 - 避免用
innerHTML = '<script>...</script>'动态执行脚本：浏览器不会执行，且可能被 XSS 过滤器拦截；如需逻辑，应单独加载 JS 或走框架生命周期 - 服务端返回的 HTML 片段建议带根标签（如
<article>...</article>），避免无父级的多个并列标签（如<p>1</p><p>2</p>），后者在innerHTML赋值时虽能解析，但容易丢失事件绑定或破坏 Vue/React 的 diff 边界
Vue/React 中动态 HTML 的安全兜底
框架对非响应式 HTML 插入天然敏感。比如 Vue 的 v-html 或 React 的 dangerouslySetInnerHTML，一旦数据为空、含非法标签、或嵌套错乱，视图层可能静默失效或报 TypeError: Cannot read property 'xxx' of null。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Vue 场景下，
v-html前加判空和默认值：v-html="content || '<p class="empty">暂无内容</p>'"，避免空字符串导致节点消失 - React 中若用
dangerouslySetInnerHTML，务必确保传入对象是{__html: str || ''}，且str已经过服务端或前端简单清洗（如移除<script>、onerror=等） - 不要在
v-html内部放子组件或指令（如<my-button></my-button>），框架不会编译它们；这类交互逻辑应由 JS 主动挂载，而非依赖 HTML 字符串内联
iframe 加载失败时的 fallback 和状态监听
iframe 是典型的“黑盒加载”，src 变更后既不抛 JS 异常，也不触发 window.onerror，只能靠自身事件。
立即学习“前端免费学习笔记（深入）”；
- 必须同时监听
onload和onerror：<iframe src="..." onload="handleLoad()" onerror="handleError()"></iframe>；注意onerror在某些浏览器中对跨域 iframe 不触发，此时需配合超时检测 - 设置
loading="lazy"仅适用于非首屏 iframe；首屏关键 iframe 应去掉该属性，并加title属性（无障碍必需）和aria-hidden="true"（若纯装饰） - fallback 内容不能写在
iframe标签内部（如<iframe>加载中...</iframe>），HTML 规范不支持；正确做法是用外层容器包裹 + CSS 控制显隐：<div class="iframe-wrapper"><iframe></iframe><div class="fallback">加载失败，请重试</div></div>
最易被忽略的一点：HTML 结构健壮性不取决于你写了多少容错代码，而取决于你是否把“数据不可用”当成一种正常状态来设计 UI。空状态、加载态、错误态的 HTML 模板都应该在开发期就写死，而不是等 fetch 失败了再临时拼字符串。否则，任何一次网络抖动或字段缺失，都会变成线上不可控的视觉断裂。
