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