能打开的.html文件需用utf-8编码保存且结构完整：必须含三部分；图片不显示多因路径错误；css无效常因大小写或选择器不匹配；表单默认会刷新，需js阻止；html容错机制可能导致实际渲染与代码不符。
怎么写一个能打开的 .html 文件
不是所有带 标签的文本都能双击打开看到网页——关键在保存格式和编码。很多人用记事本直接存成 新建文本文档.txt，改后缀为 .html，结果中文乱码或样式不生效。
- 用 VS Code、Sublime 或记事本（但必须选「另存为」→ 编码选
UTF-8→ 文件类型选「所有文件」→ 文件名输index.html） - 不要用 Word、WPS 写 HTML，它们会偷偷加不可见格式字符，浏览器解析直接报错或空白
- 最简可用结构只要三行：
<!DOCTYPE html> <html><body>Hello</body></html>
，少会导致 IE 或旧浏览器进怪异模式
为什么 ![怎么使用html_网页制作基础入门指南【实操】]()
标签死活不显示图片
90% 是路径问题，不是代码写错。浏览器里右键「检查」看 Network 选项卡，如果图片请求状态是 404，说明路径根本没找对。
-
src值是相对路径时，以当前.html文件所在目录为起点，不是以编辑器打开的项目根目录 - 比如
index.html和pic.jpg在同一文件夹，就写<img src="pic.jpg" alt="怎么使用html_网页制作基础入门指南【实操】" >；如果图片在images/子目录，就得写<img src="images/pic.jpg" alt="怎么使用html_网页制作基础入门指南【实操】" > - Windows 下路径分隔符用
/，别用\—— 浏览器只认/，哪怕你在资源管理器里看到的是反斜杠
CSS 样式写了但没反应，怎么快速定位
优先查是否漏了 <style></style> 或 <link>，再查选择器是否匹配到目标元素。很多人把 class="header" 写成 class="Header"，而 CSS 里写的是 .header，大小写不一致就完全失效。
- 用浏览器开发者工具（F12）点中元素，右边
Styles面板看有没有该样式出现，没出现说明选择器没命中，或 CSS 文件根本没加载成功（检查 Network 里 CSS 请求状态） - 内联样式（
style="color: red;"）优先级高于外部 CSS，临时调试可先加内联，确认效果后再挪进<style></style> - 如果用了
id="nav"，CSS 必须写#nav，不能写.nav；类名和 ID 名中间不能有空格，.menu item匹配的是item元素且在.menu内部，不是给.menu加样式
表单提交后页面刷新或跳转，怎么让它停住
默认行为就是刷新或跳转，这不是 bug，是浏览器对 <form></form> 的标准处理。想做无刷新提交（比如发个登录请求），必须用 JavaScript 拦住它。
立即学习“前端免费学习笔记（深入）”；
- 给
<form></form>加onsubmit="return false;"可阻止默认行为，但只是“停住”，后续逻辑得自己写 - 更常用的是用
event.preventDefault()，比如：<form onsubmit="handleSubmit(event)"> <script> function handleSubmit(e) { e.preventDefault(); console.log('现在可以发 AJAX 了'); }</script> - 如果没写任何 JS，又不想刷新，最简单的办法是把
<input type="submit">换成<button type="button"></button>，它天生不触发表单提交
