直接复制粘贴公共<header>会出错，因其常含动态内容（如userName）、内联样式或页面依赖JS变量，导致ReferenceError: userName is not defined或样式错位；应提取静态结构、用占位符和data-*属性解耦，配合fetch动态注入并妥善处理脚本执行与样式隔离。
提取公共 <header> 时，为什么直接复制粘贴会出错？
因为多数页面的 <header> 里混着动态内容（比如用户昵称、未读消息数）、内联样式或依赖特定页面的 JS 变量。硬拷贝会导致后续页面加载时报 ReferenceError: userName is not defined，或样式错位。
实操建议：
- 先用浏览器 DevTools 定位真正「静态可复用」的部分——通常是 logo、主导航、语言切换器这类不依赖当前页面上下文的结构
- 把含 JS 逻辑或服务端变量的部分（如
${user.name}、<span id="msg-count"></span>）抽成占位符，例如<div class="header-user-placeholder"></div> - 用
data-*属性标记可注入点：<nav data-nav-type="main">，方便后续 JS 或模板引擎精准替换
用 include 还是 fetch 加载头部？
纯静态 HTML 站点别用 include（Apache 的 SSI 或 Nginx 的 include 指令），它要求服务器开启特定模块，且无法处理跨域或异步状态反馈；现代项目更常用 fetch + insertAdjacentHTML 动态注入。
关键差异：
立即学习“前端免费学习笔记（深入）”；
-
fetch能加 loading 状态、失败重试、缓存控制（cache: 'force-cache'） - 但要注意 CSP 策略是否允许
script标签在注入 HTML 中执行——默认会拦截，需配unsafe-inline或改用addEventListener绑定事件 - 如果头部含
<script src="header.js"></script>，fetch注入后不会自动执行，得手动eval或创建 script 元素
尾部 <footer> 提取后字体/颜色异常怎么办？
常见原因是原页面 CSS 把 footer 样式写在了「页面级样式表」里，用了强选择器如 .page-home footer { color: #666; }，提取后脱离上下文，规则失效。
解决路径：
- 检查 Chrome DevTools 的 Computed 标签页，确认实际生效的 color、font-size 来源
- 把 footer 相关样式迁移到独立 CSS 文件，并用更健壮的选择器：
footer[data-role="global"]或.site-footer - 避免用
!important临时修复——它会让后续维护时难以覆盖，尤其当主题切换功能上线后 - 如果用 CSS-in-JS（如 Emotion），确保
footer的 style block 在组件首次渲染前已注册
如何让头部/尾部支持多语言切换而不重载整页？
核心不是替换整个 DOM 片段，而是只更新文本节点和 aria-label 属性。强行重新 fetch 整个 header 会闪屏、丢失焦点、打断正在输入的表单。
推荐做法：
- 给每个可翻译节点加
data-i18n-key，例如：<a href="#" data-i18n-key="nav.about">关于我们</a> - 语言切换时，遍历所有
[data-i18n-key]元素，用 i18n 实例的t()方法更新textContent或title - 注意跳过
input的placeholder和button的innerText，它们需单独处理 - 如果用了 Web Components，可在自定义元素内部监听
lang-change自定义事件，封装更新逻辑
实际重构中最容易被忽略的，是 header/footer 与页面主体之间的「滚动行为耦合」——比如 fixed header 占位没预留高度、footer 粘底逻辑在提取后失效、或者移动端键盘弹起时 footer 错位。这些不会在开发机上暴露，得在真机+不同系统版本下反复验证。
