客观地说... 嘿，各位朋友！想启动学习了解前端开发，做个网页啊？ 别担心，很更多人刚启动都会觉得麻烦。其实搭建开发周边环境一点都不不容简单！我来给你们说说在Windows上搭建HTML5开发周边环境的方法。不用担心各种繁杂的柔软件安装，只要跟着我一步步来保证你很迅速就能启动写代码了。

哪些是HTML5开发周边环境？

其实“HTML5开发周边环境”说的就是让你的电脑能正确地运行HTML代码， 并且方便你写代码、预览效果、调试问题。 以前较大家有可能觉得要装很更多东西才行，但当前不一样了。 痛并快乐着。 HTML5是直接在浏览器里运行的，所以我们不需要专门安装一个“HTML5编辑器”。 就像盖房子一样，你需要一块地、一根砖和一些工具就行了。

不需要专业柔软件也能搞定

站在你的角度想... 别想着一定要装Visual Studio或者其他昂市场价格较高的柔软件。 Windows自带的Edge浏览器和Chrome浏览器、Firefox浏览器都支持最崭新的 HTML5 功能。也就是说你直接用这一些浏览器就能够打开你的网页文件了！

验证你的开发周边环境有没有准备就绪

躺平... 想了解你的电脑已经准备良好能够启动写代码了吗？ 试试当前这个较小测试：

简洁测试方法

又爱又恨。 崭新建一个名为index.html的文件 ， 把上面的代码复制进去保存后然后双击打开它。 打开浏览器的开发者工具 ，点击 “Console”标签页。 如果你在控制台看到true体现出来就说明你的开发周边环境已经准备良好了！恭喜你!

本地服务器：让网页文件不再死机

为哪些需要本地服务器

有时候你写良好的网页文件直接双击打开还是会卡顿、或者出现乱码的情况。 这是这是因为浏览器会把file://形式的文件当成操作系统的一一部分去加载的 。为了解决当前这个问题，我们需要采用一个本地服务器来模拟一个真实实的网站周边环境。

采用http-server

npm install -g http-server

安装步骤

• 先来看确保你有Node.js 和 npm 已安装在你的电脑上。
• 打开命令提示符或 PowerShell
• 输入 `npm install -g http-server` 命令进行全局安装
• 运行 `http-server -o` 命令启动服务

路径问题：崭新手常犯的坑

路径是关键

这是很更多崭新手简单忽略的问题！当你把图片、 CSS文件放到不同的文件夹里时如果路径写错的话会引起网页无法正常体现, 但控制台却不会报错。

相对路径 vs 绝对路径

• 相对路径相对于当前文件的位置
• 绝对路径完整的URL地址

常用工具推荐

• 文本编辑器记事本++, Sublime Text, VS Code
• 浏览器Google Chrome, Microsoft Edge, Mozilla Firefox
• 本地服务器http-server , XAMPP

摸个底。 搭建 Windows 上 HTML5 开发周边环境其实很简洁！ 不需要繁杂的柔软件配置或专业知识就能够迅速上手。记住以下几点：采用自带的浏览器即可满足基本需求；如果需要更流畅的体验或者部署到服务器上发布网站时能够采用本地服务器；注意检查文件路径有没有正确。