能双击打开的index.html即入门成功，关键在于三行结构+UTF-8编码+.html后缀；缺DOCTYPE会触发怪异模式；路径以HTML文件为基准；CSS建议内联调试；表单需用JavaScript阻止默认提交。
能双击打开的 index.html 就是入门成功的标志，不需要服务器、不依赖工具链，只要三行结构 + UTF-8 编码 + 正确后缀，就能在浏览器里看到内容。
怎么写出第一个能打开的 HTML 文件
很多人卡在“写完双击却一片空白”或报错“This page isn't working”，根本原因不是语法难，而是文件没被当 HTML 解析。
- 用 VS Code / Notepad++ / 记事本（别用 Word 或 WPS）新建纯文本文件
- 输入最简结构：
<!DOCTYPE html> <html><body>Hello</body></html>
——注意：缺会导致旧浏览器进怪异模式；<code>外不能直接写文字 - 保存时：文件名输
index.html（必须带.html后缀），编码选UTF-8（VS Code 右下角可点切换；记事本选「另存为」→ 编码选 UTF-8 → 类型选「所有文件」） - 双击该文件，Chrome/Firefox 会以
file://协议打开；若提示跨域错误（如Cross origin requests are only supported for protocol schemes），说明你用了fetch()或@import，初学阶段直接删掉即可
<img alt="HTML网页制作怎么入门？零基础自学指南" > 和 <a></a> 为什么总不生效
这两个标签出问题，90% 是路径或协议写错，和语法关系不大。
-
<img src="logo.png" alt="HTML网页制作怎么入门？零基础自学指南" >：路径是相对当前.html文件位置算的。如果index.html和logo.png在同一文件夹，就写"logo.png"；如果图片在images/子目录，必须写"images/logo.png"（Linux/macOS 区分大小写，Images/≠images/） -
<a href="contact.html"></a>：本地跳转用相对路径；外链必须带协议，比如href="https://example.com"，写成href="www.example.com"会被当成当前目录下的文件找 - 右键网页 →「检查」→ 切到 Network 标签页，看图片或链接请求状态是不是
404，是就说明路径错了 - Windows 资源管理器里显示
photo.jpg.png是常见陷阱：系统默认隐藏已知后缀，实际文件可能是photo.jpg.png，重命名去掉多余后缀
CSS 样式写了但没反应，怎么快速定位
初学阶段建议把 CSS 写进 <style></style> 标签里，而不是急着拆成外部文件——省去路径、缓存、引用漏掉等干扰项。
立即学习“前端免费学习笔记（深入）”；
- 把
<style></style>放在里，例如：<head> <style> body { font-family: "Microsoft YaHei", sans-serif; } </style> </head>——放在里无效 - 用浏览器开发者工具（F12）点中目标元素，右边 Styles 面板看样式是否出现；没出现，先查选择器是否匹配（
class="header"对应.header，不是.Header；id="nav"对应#nav，不是.nav） - 临时调试可用内联样式：
<p style="color: red;">测试</p>，确认效果后再挪进<style></style> - 别用
<font color="red"></font>，这是废弃标签，现代浏览器可能不支持或行为不一致
表单一提交就刷新，怎么让它停住
这不是 bug，是浏览器对 <form></form> 的默认行为。想做无刷新操作（比如登录、搜索），必须用 JavaScript 拦住它。
- 最简拦截：
<form onsubmit="return false;"></form>——能停住，但后续逻辑要自己补 - 更标准写法（推荐）：
<form id="loginForm"> <input type="text" name="user"> <button type="submit">登录</button> </form> <script> document.getElementById("loginForm").addEventListener("submit", function(e) { e.preventDefault(); // 关键：阻止默认提交 console.log("表单数据可在这里发请求"); }); </script> - 注意：
type="submit"的按钮才触发表单提交；type="button"不会，适合做纯 JS 操作 - 如果只是想让链接或按钮“看起来像提交”，但实际不走表单流程，直接用
<button type="button"></button>更干净
真正容易被忽略的，是编码和路径这两层隐形约束：UTF-8 编码不对，中文变乱码；路径基准不是项目根目录，而是 HTML 文件自身位置。这两点不解决，其他所有语法都白搭。
