新手从零开始搭建第一个本地网站
如果你完全不懂编程，但想亲手做出一个能在浏览器里打开的网页，这篇文章就是为你写的。我们不会涉及购买域名或租用服务器，所有操作都在你自己的电脑里完成。
一、你需要安装什么
只需要三样东西：浏览器、代码编辑器、以及一个本地开发服务器工具。
1. 浏览器
你肯定已经有了，但推荐安装 Google Chrome 或 Microsoft Edge。它们自带的“开发者工具”对新手查错非常有用。
2. 代码编辑器
不要直接用系统自带的“记事本”。请下载 Visual Studio Code（简称 VS Code）：
- 打开官网：https://code.visualstudio.com/
- 下载对应你系统的版本（Windows 选
.exe，Mac 选.dmg） - 像安装普通软件一样安装它
3. 本地开发服务器工具
最简单的方式：在 VS Code 里安装扩展 Live Server。
- 打开 VS Code
- 点击左侧边栏的“扩展”图标（四个方块）
- 搜索
Live Server - 找到作者为 Ritwick Dey 的那一项，点击”安装”
为什么需要它？
直接双击打开 HTML 文件也能看，但地址栏会显示file:///开头，这会导致某些功能（比如加载本地图片、JS 模块）失效。用 Live Server 启动后，地址会变成http://127.0.0.1:5500这种形式，更接近真实网站环境。
二、创建你的第一个网页
1. 建立项目文件夹
在你的电脑里随便找个地方，新建一个文件夹，命名为 my-first-site。
2. 用 VS Code 打开它
打开 VS Code，点击菜单栏的 文件 → 打开文件夹，选择刚才创建的 my-first-site。
3. 新建 HTML 文件
在 VS Code 左侧的空白区域右键，选择 新建文件，命名为 index.html。
注意：文件名必须是
index.html，全部小写。这是网站的默认入口文件名。
三、HTML 最基础的知识
把下面的代码复制进 index.html，然后保存（快捷键 Ctrl+S 或 Cmd+S）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网站</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我亲手写的第一个网页。</p>
</body>
</html>这段代码是什么意思？
| 部分 | 作用 |
|---|---|
<!DOCTYPE html> | 告诉浏览器：这是 HTML5 文档 |
<html> | 整个网页的根元素 |
<head> | 放浏览器需要读取、但用户看不到的信息 |
<meta charset="UTF-8"> | 指定字符编码，防止中文乱码 |
<title> | 浏览器标签页上显示的标题 |
<body> | 放用户实际能看到的内容 |
<h1> | 一级标题（最大最粗） |
<p> | 普通段落 |
新手最常用的几个标签
<!-- 标题，h1 到 h6，越来越小 -->
<h2>这是一个二级标题</h2>
<!-- 链接 -->
<a href="https://example.com">点击这里跳转</a>
<!-- 图片 -->
<img src="photo.jpg" alt="描述文字">
<!-- 按钮 -->
<button>点我</button>
<!-- 换行（不需要闭合标签） -->
<br>
<!-- 水平分割线 -->
<hr>重要规则：绝大多数标签需要成对出现
<tag>...</tag>，只有少数像<img>、<br>、<hr>是单标签。
属性是什么？
标签后面的 href="..."、src="..." 就是属性。写法永远是：
属性名="属性值"引号用英文双引号，不要用中文引号。
四、启动开发服务器
确保 index.html 已经保存，然后：
- 在 VS Code 里打开
index.html文件 - 点击编辑器窗口右下角的 “Go Live” 按钮
- 浏览器会自动弹出，地址类似
http://127.0.0.1:5500/index.html
你现在应该能看到”你好，世界！“这几个字了。
实时预览的好处
当你修改代码并保存后，浏览器页面会自动刷新。不需要你手动去点浏览器的刷新按钮。
如何停止服务器
在 VS Code 底部状态栏找到端口号（比如 Port:5500），点击它，然后选择 “Dispose”` 即可关闭。
五、常见注意事项（新手必看）
1. 文件路径问题
如果你的图片显示不出来，99% 是因为路径写错了。
- 同一文件夹下：
src="photo.jpg" - 在子文件夹
images里：src="images/photo.jpg" - 用相对路径，不要用绝对路径（如
C:\Users\...）
2. 中文乱码
如果网页上的中文变成乱码，检查 <head> 里有没有这行：
<meta charset="UTF-8">同时确保文件本身保存为 UTF-8 编码（VS Code 右下角会显示编码格式）。
3. 大小写敏感
HTML 标签本身不区分大小写，但强烈建议全部小写。文件名在大多数服务器上是区分大小写的，Index.html 和 index.html 会被当成两个文件。
4. 忘记保存
改完代码页面没变化？先按 Ctrl+S（或 Cmd+S）保存。VS Code 文件名旁的小白点就是“未保存”提示。
5. 浏览器缓存
如果 Live Server 已经自动刷新，但内容还是旧的，按 Ctrl+F5（Windows）或 Cmd+Shift+R（Mac）强制刷新。
6. 标签嵌套规则
标签不能交叉嵌套。下面这样是错的：
<p><h1>错误示范</p></h1> <!-- 错！ -->必须完全包裹：
<div><p>正确示范</p></div> <!-- 对 -->7. 引号要用英文
<!-- 错误 -->
<a href=“网址”>
<!-- 正确 -->
<a href="网址">六、下一步可以做什么
现在你已经有了一个能在本地运行的网站。你可以尝试：
- 在
index.html里多写几个<p>和<img>丰富内容 - 新建第二个文件
about.html，然后用<a href="about.html">做页面跳转 - 新建
style.css学习如何给文字加颜色和改变布局（这就是 CSS）
先把 HTML 结构写熟，再逐步添加样式和交互，这是最高效的学习路径。
撃っていいのは撃たれる覚悟のあるヤツだけだ。