混合应用中 WebView 加载 HTML 必须精简结构、内联资源、显式设置 base href 并适配各平台路径，避免 DOM 错误与资源加载失败。
混合应用里 WebView 加载的 HTML 不是随便写写就能跑通的。它必须兼顾原生容器的限制、离线资源路径、JS 桥接兼容性，以及移动端渲染性能。盲目套用 Web 端模板，轻则样式错乱、JS 调用失败，重则触发 ANR 或内存泄漏。
WebView 里不能用 <html><head><body> 全套结构
很多开发者直接把 Web 端页面丢进 WebView，结果发现 CSS 不生效、JS 报 ReferenceError: document is not defined。根本原因在于：WebView（尤其是 Android 的 loadDataWithBaseURL()）对 HTML 结构容忍度极低，且不保证完整 DOM 生命周期。
- Android
loadDataWithBaseURL(null, html, ...)会跳过<html>解析阶段，直接注入 innerHTML —— 此时document.head可能为null - iOS
loadHtmlString()虽支持完整结构，但若 base URL 为空，<link rel="stylesheet">和<script src>会全部 404 - 鸿蒙
WebView.loadContent()要求根节点必须是<div>或语义化块级元素，否则解析失败并静默丢弃
实操建议：去掉 <html>、<head>、<body> 标签，只保留内容主体；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="...">。
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
语义化标签要精简，避免嵌套过深和无意义 wrapper
WebView 渲染层（尤其旧版 Android WebKit）对 DOM 层级敏感。超过 5 层嵌套的 <div> 容易触发 Composite 层膨胀，滚动卡顿明显；Safari on iOS 对 <section>、<article> 的解析也比 Chrome 更严格。
- 删掉所有仅用于加 class 的“壳”
<div class="wrapper"><div class="content">... - 用
<main>替代<div id="app">—— 它既是语义锚点，也被多数 WebView 默认设为可聚焦区域 - 标题必须严格递进：
<h1>→<h2>→<h3>，跳级会导致鸿蒙阅读模式失效、iOS VoiceOver 跳过整段 - 避免在
<table>里塞<div>—— Android 6.0 以下 WebView 会直接忽略display: table-cell
真实项目中，一个新闻卡片用 <article><header><h2>...</h2></header><p>...</p></article> 就足够，没必要再包三层 <div>。
JS 初始化必须等 DOMContentLoaded，且避开 window.onload
WebView 的 JS 执行时机比浏览器更“激进”。很多代码在 DOM 还没挂载完就执行，document.getElementById() 返回 null 是常态；而 window.onload 在某些 Android 版本里根本不触发。
- 永远用
document.addEventListener('DOMContentLoaded', () => { ... })，这是最可靠的钩子 - 鸿蒙 WebView 需额外监听
document.readyState === 'interactive'，因为其 DOM 构建分两阶段 - 避免在
<script>标签里直接调用原生桥接方法（如AndroidInterface.showToast()），必须等WebView.addJavascriptInterface()注册完成 —— 建议用全局 flag + 轮询判断 - pywebview 的
webview.evaluate_js()只能在窗口 ready 后调用，否则抛WebViewException
最稳妥的初始化写法：内联脚本里先声明函数，再监听事件，最后在回调里调用桥接方法。别图省事把逻辑全堆在 <script> 底部。
轻量化不是删功能，而是砍掉 WebView 不需要的冗余结构和假设。真正难的不是写 HTML，而是时刻记住：你写的不是网页，是一段被嵌入原生容器的、受约束的 UI 片段。
