三步搞定本地html页面：写文件→浏览器打开→调整内容；关键在utf-8编码保存和doctype+html+body基础结构，避免file:///下路径错误与编码乱码。
直接用浏览器打开就能看的页面，不需要服务器、不用部署，三步搞定：写 HTML 文件 → 用浏览器打开 → 调整内容。所谓“全流程”，核心就两件事：结构怎么写对，以及为什么一改就乱码或不显示。
HTML 文件怎么保存才不会乱码
Windows 记事本默认存为 ANSI 编码，中文一刷新就变 ???；Mac 的 TextEdit 默认存成富文本（.rtf），浏览器根本打不开。
- 用 VS Code、Sublime Text 或记事本（但必须点「另存为」→ 编码选
UTF-8→ 文件名填index.html） - 文件扩展名必须是
.html或.htm，不能是index.html.txt - 别用微信/QQ 接收后直接双击——它可能自动加了隐藏字符，建议重写一遍最外层
浏览器打不开页面？先查这三行基础结构
缺 可能触发怪异模式；漏 <code> 或 不一定报错，但 CSS 和 JS 容易失效；标签没闭合（比如写了 <p>文字</p> 却忘了
- 最小合法结构长这样：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <p>你好</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/8918" title="启科网络PHP商城系统"><img src="https://img.php.cn/upload/webcode/000/000/020/175722660670001.jpg" alt="启科网络PHP商城系统" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/8918" title="启科网络PHP商城系统">启科网络PHP商城系统</a> <p>启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。 系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。</p> </div> <a href="/xiazai/code/8918" title="启科网络PHP商城系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </body> </html> -
<meta charset="UTF-8">必须放在里，且越靠前越好，否则浏览器可能已按错误编码解析了一部分 - 不要在
外面写<p></p>、<div> —— 这些只能在 <code>里生效写完打不开、样式不生效？先关掉这些干扰项
本地双击打开时，地址栏是
file:///开头，不是http://。这意味着：fetch()会失败、localStorage可能被禁用、相对路径的图片/CSS 如果路径错一个斜杠就 404。- 检查图片路径：
<img src="photo.jpg" alt="html页面怎么制作_html网页从零开始制作全流程【教学】" >要求photo.jpg和 HTML 文件在同一文件夹；如果图在images/下，就得写src="images/photo.jpg" - CSS 文件同理：
<link rel="stylesheet" href="style.css">中的style.css是相对于 HTML 文件的位置，不是相对于当前编辑器打开的文件夹 - 想测试 AJAX 或现代 API？得搭个本地服务，比如用 VS Code 插件
Live Server，右键点「Open with Live Server」，地址变成http://127.0.0.1:5500/就行
真正卡住人的，往往不是语法，而是路径和编码这两个隐形开关——它们不报错，但让一切看起来“莫名其妙地不对”。多试一次「另存为 UTF-8」，多看一眼地址栏开头是不是
file:///，比查十遍标签拼写更管用。 - 检查图片路径：
