教程 / 网页

从零开始做一个网页

约 20 分钟 · 新手向。会打字就能跟着做，最后你会得到一个能双击打开、也能发到网上的小网页。

我自己就是从这个流程入门的，所以不会绕弯子。一共三步：建文件、写内容、换样式。

第一步：建三个文件

新建一个文件夹，里面放三个文件，名字照抄：

my-site/
├── index.html
├── style.css
└── script.js

HTML 负责内容，CSS 负责样子，JS 负责行为。文件分开放，后面改起来不用在一堆代码里翻。

第二步：写最小可用的 HTML

打开 index.html，把下面这段原样贴进去：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>我的第一个网页</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>你好，世界</h1>
  <p>这是我自己的网页。</p>
  <script src="script.js"></script>
</body>
</html>

保存后用浏览器打开 index.html，你已经有一个网页了。字是黑的、底是白的，很正常，下一步就给它化妆。

第三步：让 style.css 接管样式

body {
  background: #0b0b0c;
  color: #e6e6e6;
  font-family: sans-serif;
  margin: 0;
  padding: 40px;
}
h1 { color: #ff4d00; }

刷新页面：背景变深、标题变橙。从这一步开始，改 CSS 就能立刻看到效果，这就是最快的学习回路。

踩过的坑

文件没保存就刷新，改了没反应——先检查右上角有没有未保存标记。
CSS 没生效——八成是 href 写错了路径，或者文件名不一致。
中文乱码——确认 <meta charset="utf-8"> 在 <head> 里。

下一步

把页面发到网上，我的站用的 Cloudflare Pages，教程里也有服务器相关的内容。完成后欢迎发到群内交流。