混合应用中 webview 加载 html 必须精简结构、内联资源、显式设置 base href 并适配各平台路径，避免 dom 错误与资源加载失败。
混合应用里 WebView 加载的 HTML 不是随便写写就能跑通的。它必须兼顾原生容器的限制、离线资源路径、JS 桥接兼容性，以及移动端渲染性能。盲目套用 Web 端模板，轻则样式错乱、JS 调用失败，重则触发 ANR 或内存泄漏。
WebView 里不能用
很多开发者直接把 Web 端页面丢进 WebView，结果发现 CSS 不生效、JS 报 ReferenceError: document is not defined。根本原因在于：WebView（尤其是 Android 的 loadDataWithBaseURL()）对 HTML 结构容忍度极低，且不保证完整 DOM 生命周期。
- Android
loadDataWithBaseURL(null, html, ...)会跳过解析阶段，直接注入 innerHTML —— 此时document.head可能为null - iOS
loadHtmlString()虽支持完整结构，但若 base URL 为空，<link rel="stylesheet">和<script src></script>会全部 404 - 鸿蒙
WebView.loadContent()要求根节点必须是<div> 或语义化块级元素，否则解析失败并静默丢弃 <p>实操建议：去掉 <code>、、标签，只保留内容主体；CSS 和 JS 内联写入（或通过 base URL 显式指向 assets/rawfile 目录）。base href必须显式设置，且路径格式因平台而异WebView 不像浏览器自动推导资源路径。没有正确的
<base href="...">，所有相对路径（./style.css、../img/logo.png）都会加载失败，控制台却几乎不报错。- Android：
base href="file:///android_asset/"（注意结尾斜杠，缺了就 404） - iOS：
base href="file:///var/containers/Bundle/Application/xxx/YourApp.app/"，但更稳妥的是用NSBundle.MainBundle.BundleUrl动态拼接 - 鸿蒙：
base href="resources/rawfile/"（鸿蒙 rawfile 资源路径固定，不可更改） - pywebview：
base href="http://localhost:xxxx/"或直接用file://协议（Windows/macOS/Linux 行为不一致，推荐统一走 HTTP server 模式）
别依赖
loadDataWithBaseURL()的第二个参数自动补全——它只影响相对 URL 解析，不改变 DOM 中<base>的实际值。务必在 HTML 字符串开头硬编码<base href="...">。语义化标签要精简，避免嵌套过深和无意义 wrapper
WebView 渲染层（尤其旧版 Android WebKit）对 DOM 层级敏感。超过 5 层嵌套的
<div> 容易触发 Composite 层膨胀，滚动卡顿明显；Safari on iOS 对 <code><section></section>、<article></article>的解析也比 Chrome 更严格。- 删掉所有仅用于加 class 的“壳”
<div class="wrapper"> <div class="content">...</div> <li>用 <code><main></main>替代<div id="app"> —— 它既是语义锚点，也被多数 WebView 默认设为可聚焦区域 <li>标题必须严格递进：<code><h1></h1>→<h2></h2>→<h3></h3>，跳级会导致鸿蒙阅读模式失效、iOS VoiceOver 跳过整段 - 避免在
<table> 里塞 <code><div> —— Android 6.0 以下 WebView 会直接忽略 <code>display: table-cell真实项目中，一个新闻卡片用
<article><header><h2>...</h2></header><p>...</p></article>就足够，没必要再包三层<div>。 <h3>JS 初始化必须等 <code>DOMContentLoaded，且避开window.onloadWebView 的 JS 执行时机比浏览器更“激进”。很多代码在 DOM 还没挂载完就执行，
document.getElementById()返回 null 是常态；而window.onload在某些 Android 版本里根本不触发。- 永远用
document.addEventListener('DOMContentLoaded', () => { ... })，这是最可靠的钩子 - 鸿蒙 WebView 需额外监听
document.readyState === 'interactive'，因为其 DOM 构建分两阶段 - 避免在
<script></script>标签里直接调用原生桥接方法（如AndroidInterface.showToast()），必须等WebView.addJavascriptInterface()注册完成 —— 建议用全局 flag + 轮询判断 - pywebview 的
webview.evaluate_js()只能在窗口 ready 后调用，否则抛WebViewException
最稳妥的初始化写法：内联脚本里先声明函数，再监听事件，最后在回调里调用桥接方法。别图省事把逻辑全堆在
<script></script>底部。轻量化不是删功能，而是砍掉 WebView 不需要的冗余结构和假设。真正难的不是写 HTML，而是时刻记住：你写的不是网页，是一段被嵌入原生容器的、受约束的 UI 片段。
- 永远用
- Android：
