HTML需通过实践掌握，双击打开因file://协议限制导致资源加载失败，应使用Live Server或Python本地服务器；img路径以HTML为基准按URL规则解析；button无响应多因DOM未加载完或ID错误，需检查执行时机与开发者工具Console/Network。
HTML 不是“学”的，是“用”出来的；没项目压着，看十遍教程也记不住 <form> 里 method 和 action 谁管发请求、谁管发给谁。
写第一个页面就卡在“保存后双击打不开”
常见错误现象：file:// 协议下加载本地资源（比如图片、CSS）失败，控制台报 CORS 或 net::ERR_FILE_NOT_FOUND；双击打开时地址栏显示 file:///xxx/index.html，但样式全丢、图片不显示。
原因不是 HTML 写错了，而是浏览器对本地文件的限制变严了。现代浏览器（Chrome/Firefox/Edge）默认禁止 file:// 下的跨文件资源加载。
- 最稳做法：用 VS Code 装
Live Server插件，右键 → “Open with Live Server”，自动起一个http://127.0.0.1:5500服务 - 临时替代：命令行进到目录，运行
python3 -m http.server 8000（Mac/Linux）或py -m http.server 8000（Windows） - 别用双击打开，也别手动输
file://地址——它不是开发流程，是调试陷阱
<img> 的 src 总是 404，路径到底怎么算
路径不是“看着文件夹结构猜”，而是以 HTML 文件为起点，按 URL 规则解析。你写的 src 是浏览器最终拼出来的完整请求地址。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 如果 HTML 在
/project/index.html，图片在/project/images/logo.png，那就写src="images/logo.png"（相对路径） - 如果图片在
/project/assets/logo.png，而 HTML 在/project/pages/about.html，就得写src="../assets/logo.png"（..回退一级） - 绝对路径从域名根开始，比如
src="/images/logo.png"，对应http://localhost:5500/images/logo.png，不是系统盘根目录 - 用 VS Code 预览时，
Live Server的根就是你右键的那个文件夹，不是整个磁盘
为什么 <button> 点了没反应，连 console.log 都不触发
不是 JS 写错了，大概率是 HTML 结构断了：JS 找不到元素，或者事件绑定时机错了。
- 检查是否在 DOM 加载完之前就执行 JS，比如把
document.getElementById("myBtn")放在<head>里，此时<button id="myBtn">还没解析到 - 解决方法：把 script 放在
</body>前；或用DOMContentLoaded包一层；或加defer属性：<script src="app.js" defer></script> - 检查 ID 是否拼错、是否重复（
getElementById只返回第一个）、是否被 JS 框架动态删过（比如 Vue 渲染前先清空容器） - 别信“我刚复制粘贴的代码”，浏览器会缓存旧 JS，强制刷新（
Cmd+Shift+R/Ctrl+F5）再试
真正卡住人的从来不是标签怎么写，而是浏览器怎么解析路径、怎么执行 JS、怎么报错又不告诉你真实原因。开好开发者工具，盯着 Network 和 Console 两栏，比背十个属性有用得多。
