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 是浏览器最终拼出来的完整请求地址。
立即学习“前端免费学习笔记(深入)”;
- 如果 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 两栏,比背十个属性有用得多。










