主页面必须独占且仅有一个<html>、<head>、<body>，所有include文件只能含片段，禁止顶层标签；脚本统一置于</body>前，meta charset须在主页面<head>顶部唯一声明并确保UTF-8编码。
动态脚本引入导致 HTML 结构重复
直接在被 include 的头部文件（如 header.php）里写 <html>、<head> 或 <body>，是页脚重叠、DOM 丢失、脚本失效的根源。浏览器看到多个 <html> 标签会自行纠错——但纠错逻辑不统一，Chrome 可能忽略后续 <head>，Firefox 可能截断 script 执行。
- 主页面（如
index.php）必须独占且仅有一个<html>、一个<head>、一个<body> - 所有
include文件（header.php、footer.php）只能含片段：比如<nav>、<script src="bootstrap.bundle.min.js"></script>，绝不能带顶层标签 - JavaScript 脚本务必放在
</body>前——尤其依赖 DOM 的代码，放<head>里大概率执行时找不到元素
script 标签位置错乱引发执行失败
常见错误是把 <script> 塞进 header.php 的 <head> 里，而该文件又被多次 include。结果是：同一页面加载多遍 jQuery，或 document.getElementById() 在 DOM 尚未解析完时就运行。
- 所有第三方脚本（Bootstrap、jQuery）和自定义 JS，统一移到主页面
</body>闭合前 - 如果必须提前加载某脚本（如统计代码），用
defer属性：<script src="analytics.js" defer></script>，它保证执行顺序且不阻塞渲染 - 避免在
header.php中写内联<script>console.log(...)</script>—— 它会在每次 include 时重复执行
meta charset 缺失或冲突引发乱码
即使 header.php 里写了 <meta charset="UTF-8">，若主页面也写了一次，或服务器响应头声明了 charset=GBK，浏览器会按优先级取舍，最终显示方块字或问号。
-
<meta charset="UTF-8">必须出现在主页面<head>的最顶部（紧贴<head>开始标签），且只出现一次 - 删掉所有
include文件里的<meta charset>—— 它不该由片段控制 - 用浏览器 DevTools 的 Network 标签页检查响应头：
Content-Type: text/html; charset=UTF-8必须存在且值为UTF-8；若为GBK，需改服务器配置（Apache 加AddDefaultCharset UTF-8，Nginx 写charset utf-8;）
动态引入脚本时的编码与 MIME 混淆
用 fetch() 或 $.getScript() 加载外部 JS 时，如果服务端返回的 JS 文件实际是 GBK 编码但没声明 charset，现代浏览器默认按 UTF-8 解码，结果函数名变乱码、语法报错 Unexpected token ILLEGAL。
立即学习“前端免费学习笔记（深入）”；
- 确保所有 JS 文件本身保存为 UTF-8（无 BOM），VS Code 底部状态栏确认编码显示 “UTF-8”
- 动态加载时显式指定
charset：<script src="module.js" charset="UTF-8"></script> - 若后端接口返回 JS 字符串（非文件），响应头必须带
Content-Type: application/javascript; charset=utf-8，PHP 中用header('Content-Type: application/javascript; charset=utf-8');
