拼接html片段前必须剥离重复的标签，仅保留内有效载荷；须用.content.clonenode(true)安全插入，禁用innerhtml直接拼接；必须全局唯一且由主页面提供，模块只含等子结构；多需动态补aria-label以保障无障碍。
拼接前必须剥离重复的
多个 HTML 片段直接字符串拼接，最容易导致结构错乱：比如两个 header.html 都带 <title>...</title>，合并后变成嵌套或并列的顶层标签，浏览器解析时会丢弃多余节点，<main></main> 可能被吞掉，屏幕阅读器直接找不到主体内容。
正确做法是只保留每个片段的“有效载荷”部分：
- 用正则或 DOMParser 提取
内部内容（不含标签本身） - 显式剔除所有
、、<title></title>、<meta>（除非你真需要合并 meta，那得手动 dedupe） - 检查是否含
<script></script>或<link rel="stylesheet">—— 这些应统一收口到主页面，避免重复加载或执行冲突
用 <template></template> + cloneNode(true) 替代 innerHTML +=
innerHTML 直接拼接字符串，既不安全也不可控：用户输入里的 <script></script> 会被执行，引号没转义会崩 JS，换行符会让模板字符串截断。而 <template></template> 是浏览器原生支持的“安全容器”，它的内容不会渲染、不执行脚本、不加载资源，直到你主动克隆插入。
示例流程：
const template = document.createElement('template');
template.innerHTML = fetchedHtmlString; // 此时无副作用
const fragment = template.content.cloneNode(true);
// ✅ 可遍历 fragment 查找 data-* 属性做数据绑定
// ✅ 可调用 fragment.querySelectorAll('button') 统一加事件
document.getElementById('main-content').appendChild(fragment);
注意：cloneNode(true) 深拷贝后，原 <template></template> 仍可复用；若需多次实例化同一模板，别漏掉这一步。
<main></main> 必须全局唯一，且不能嵌套在 <article></article> 或 <section></section> 里
模块化拼装最常踩的语义坑：把每个“模块 HTML 片段”都包一层 <main></main>，以为这样更“独立”。结果是拼完页面出现 3 个 <main></main>，NVDA 和 VoiceOver 的“跳转到主要内容”快捷键（Ctrl+Alt+O / Cmd+Opt+O）直接失效，ARIA 检查器报错 main role must not be a descendant of another landmark。
正确分工：
- 主页面负责提供唯一的
<main></main>容器，例如<main id="app-main"></main> - 所有拼入的模块片段，只包含语义子结构：
<article></article>、<section></section>、<aside></aside>等，绝不可含<main></main>、<header></header>（除非是模块内局部 header）、<footer></footer> - 若模块需标题导航，用
<h2></h2>～<h6></h6>，并确保层级连续（主页面<h1></h1>→ 模块<h2></h2>）
动态注入后，<nav></nav> 必须补 aria-label
拼装后的页面可能含多个 <nav></nav>：顶部主导航、侧边工具栏、页脚链接区、甚至某个模块内部的分页导航。如果全都不加 aria-label，屏幕阅读器用户听到的全是“navigation, navigation, navigation…”，根本分不清哪个是主菜单。
补标策略要靠 JS 动态识别上下文：
- 主区域内的
<nav></nav>（如#app-main > nav）→aria-label="主导航" - 页脚里的
<nav></nav>（如footer > nav）→aria-label="友情链接" - 模块内分页
<nav></nav>（如.pagination > nav）→aria-label="文章列表分页" - 绝对不要用
aria-labelledby指向display: none的隐藏标题 —— 屏幕阅读器读不到
复杂点在于：拼装顺序不确定时，aria-label 补写时机得放在所有模块插入完成之后，否则可能漏掉新挂载的 <nav></nav>。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
