HTML网页制作入门：零基础全流程教学

本文是一份专为初学者打造的HTML网页制作实战指南，直击新手最常踩的两大隐形陷阱——文件编码乱码和路径解析错误，手把手教你用“写文件→浏览器打开→调整内容”三步法快速搭建本地HTML页面；强调UTF-8编码保存、DOCTYPE声明与基础HTML结构的必要性，并详解file:///协议下的局限（如图片路径、AJAX失效等），提供VS Code Live Server等轻量解决方案，让零基础用户避开玄学报错，真正理解“为什么一改就出问题”，轻松迈出前端开发第一步。

直接用浏览器打开就能看的页面，不需要服务器、不用部署，三步搞定：写 HTML 文件 → 用浏览器打开 → 调整内容。所谓“全流程”，核心就两件事：结构怎么写对，以及为什么一改就乱码或不显示。

HTML 文件怎么保存才不会乱码

Windows 记事本默认存为 ANSI 编码，中文一刷新就变 ???；Mac 的 TextEdit 默认存成富文本（.rtf），浏览器根本打不开。

• 用 VS Code、Sublime Text 或记事本（但必须点「另存为」→ 编码选 UTF-8 → 文件名填 index.html）
• 文件扩展名必须是 .html 或 .htm，不能是 index.html.txt
• 别用微信/QQ 接收后直接双击——它可能自动加了隐藏字符，建议重写一遍最外层

浏览器打不开页面？先查这三行基础结构

缺 可能触发怪异模式；漏 或 不一定报错，但 CSS 和 JS 容易失效；标签没闭合（比如写了

文字 却忘了

• 最小合法结构长这样：

  
  
  
  
    
  你好
  
  

• 必须放在 里，且越靠前越好，否则浏览器可能已按错误编码解析了一部分
• 不要在 外面写

  、

  —— 这些只能在 里生效

写完打不开、样式不生效？先关掉这些干扰项

本地双击打开时，地址栏是 file:/// 开头，不是 http://。这意味着：fetch() 会失败、localStorage 可能被禁用、相对路径的图片/CSS 如果路径错一个斜杠就 404。

• 检查图片路径： 要求 photo.jpg 和 HTML 文件在同一文件夹；如果图在 images/ 下，就得写 src="images/photo.jpg"
• CSS 文件同理： 中的 style.css 是相对于 HTML 文件的位置，不是相对于当前编辑器打开的文件夹
• 想测试 AJAX 或现代 API？得搭个本地服务，比如用 VS Code 插件 Live Server，右键点「Open with Live Server」，地址变成 http://127.0.0.1:5500/ 就行

真正卡住人的，往往不是语法，而是路径和编码这两个隐形开关——它们不报错，但让一切看起来“莫名其妙地不对”。多试一次「另存为 UTF-8」，多看一眼地址栏开头是不是 file:///，比查十遍标签拼写更管用。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。