高效开发需坚持「结构先行、实时验证、最小依赖」：先完整写出含charset、viewport、title的HTML骨架，再用本地服务器（非file://）预览，最后按规范顺序引入CSS/JS并注意路径相对性。
直接上结论：高效不靠工具堆砌，而在于「结构先行、实时验证、最小依赖」三个动作闭环。HBuilderX 或 VS Code 都能胜任，但多数人卡在第一步——没写完 <meta charset="UTF-8"> 就急着加 JS，结果中文乱码、表单提交失败、控制台报 net::ERR_FILE_NOT_FOUND，全是结构失序的连锁反应。
HTML骨架必须一次性写全再动笔
很多人新建 index.html 后只打 <!DOCTYPE html> 就开始写内容，这是最大隐患。浏览器一旦解析中断（比如缺 <head> 或漏 <meta charset>），后续所有 CSS/JS 加载、表单提交、甚至 fetch() 都可能静默失败。
-
<meta charset="UTF-8">必须紧贴<head>开始，不能换行或缩进太多，iOS Safari 对位置敏感 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">要立刻跟上，否则移动端双击放大、文字过小等问题当场出现 -
<title>不只是摆设：它影响 SEO、书签显示，还决定部分 PWA 安装逻辑是否触发 - 不要用 Word/WPS 新建 HTML 文件——它们会偷偷插入富文本格式，导致
<html>标签被渲染成乱码
本地预览必须绕过 file:// 协议
双击打开 HTML 文件看似快，实则埋雷：所有 fetch()、XMLHttpRequest、import 模块、甚至某些 localStorage 行为都会因 CORS 或协议限制直接报错，错误信息却是模糊的 net::ERR_FAILED 或空白控制台。
- VS Code 用户装
Live Server插件，右键“Open with Live Server”，自动起http://127.0.0.1:5500/ - HBuilderX 内置服务器，点菜单“运行”→“在浏览器中运行”即可，无需额外配置
- 命令行党可用 Python：
python3 -m http.server 8000，确保当前目录是项目根目录 - 切记：只要看到地址栏是
file:///开头，就等于没真正跑起来
JS/CSS 引入顺序和时机比代码量更重要
很多页面加载慢、交互卡顿，不是因为 JS 太大，而是加载时机错位。比如把 <script src="app.js"></script> 放在 <head> 顶部，它会阻塞 DOM 解析，用户看到白屏数秒。
立即学习“前端免费学习笔记（深入）”；
- CSS 必须放
<head>内，用<link rel="stylesheet" href="style.css">，避免 FOUC（无样式内容闪烁） - JS 推荐放
<body>底部；若必须放<head>，务必加defer属性：<script src="app.js" defer></script></li> <li>不要混用 <code>async
和defer——async不保证执行顺序，defer保证顺序但延迟到 DOM 解析后 - 内联脚本（
<script>...</script>）尽量少用，调试困难且无法缓存
最容易被忽略的是：所有路径都默认相对于当前 HTML 文件位置，不是相对于项目根目录。一个 img src="logo.png" 在子目录页里会去子目录下找，而不是根目录——这个细节在跨多级路由时几乎必踩坑。
