主页面必须独占且仅有一个、、，所有include文件只能含片段，禁止顶层标签；脚本统一置于前，meta charset须在主页面顶部唯一声明并确保utf-8编码。
动态脚本引入导致 HTML 结构重复
直接在被 include 的头部文件（如 header.php）里写 、 或 ，是页脚重叠、DOM 丢失、脚本失效的根源。浏览器看到多个 标签会自行纠错——但纠错逻辑不统一，Chrome 可能忽略后续 ，Firefox 可能截断 script 执行。
- 主页面（如
index.php）必须独占且仅有一个、一个、一个 - 所有
include文件（header.php、footer.php）只能含片段：比如<nav></nav>、<script src="bootstrap.bundle.min.js"></script>，绝不能带顶层标签 - JavaScript 脚本务必放在
前——尤其依赖 DOM 的代码，放里大概率执行时找不到元素
script 标签位置错乱引发执行失败
常见错误是把 <script></script> 塞进 header.php 的 里，而该文件又被多次 include。结果是：同一页面加载多遍 jQuery，或 document.getElementById() 在 DOM 尚未解析完时就运行。
- 所有第三方脚本（Bootstrap、jQuery）和自定义 JS，统一移到主页面
闭合前 - 如果必须提前加载某脚本（如统计代码），用
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">必须出现在主页面的最顶部（紧贴开始标签），且只出现一次 - 删掉所有
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');
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
