如何制作一个自己的何制网页网站

先打开记事本，敲下“<h1>你好</h1>”，作个自己站保存为 index.html，页网双击它。何制浏览器弹出一行黑字——你已经做出了人生第一个网页。作个自己站就这么简单。页网真的何制，不需要先学完HTML、作个自己站CSS、页网JavaScript三件套再动手，何制那样你大概率会卡在第三天的作个自己站盒模型里，然后放弃。页网

我见过太多人把建站想成盖楼，何制觉得得先画图纸、作个自己站打地基、页网审批报建。其实更像搭乐高：先拼一块，再拼一块，歪了拆掉重来，没人管你。

准备工具：一个浏览器，一个文本编辑器

浏览器你有了。编辑器别用Word，它会在文件里塞一堆你看不见的格式代码，网页会莫名其妙变胖变形。Windows用VS Code或Notepad++，Mac用VS Code或CotEditor，免费，够用。不装也行，系统自带的记事本和TextEdit都能写——TextEdit记得在“格式”菜单里选“制作纯文本”，否则存出来的是rtf，浏览器不认。

建一个文件夹，名字随便，比如 mysite。所有文件丢进去，别散落在桌面上。以后文件一多，你找 index.html 会找到想砸键盘。

HTML：网页的骨架

新建 index.html，输入下面这些：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是第一段文字。</p> <img src="cat.jpg" alt="一只猫"> </body> </html>

标签成对出现，<h1> 开头 </h1> 结尾，斜杠表示关闭。img 和 meta 是自闭合标签，不用加斜杠。缩进不是必须的，但缩进之后你改起来不容易搞错层级。

把一张图片命名为 cat.jpg 放进同一文件夹，刷新浏览器，猫就出来了。图片不显示？检查文件名大小写，Windows不区分，但服务器区分，养成全小写的习惯。

CSS：让页面不那么像1995年

纯HTML的网页白底黑字，Times New Roman，链接是蓝色带下划线。能看，但丑。CSS负责外观。在 <head> 里加一行：

<link rel="stylesheet" href="style.css">

新建 style.css，写：

body {  font-family: system-ui, sans-serif; max-width: 640px; margin: 40px auto; padding: 0 20px; line-height: 1.6; color: #333; } h1 {  color: #1a1a1a; }

刷新。文字居中、行距舒服、字体跟着系统走。max-width 限制行宽，太长的行读起来眼睛累。margin: 40px auto 让内容水平居中，auto 是左右自动平分剩余空间。

CSS的选择器、盒模型、flex布局，够你学一阵子。但别一开始就啃完，用到什么查什么。我做了六年网页，到现在还记不住 grid 的简写属性顺序。

让它上线

本地文件只有你自己能看。想让别人访问，得放到服务器上。最省事的是 GitHub Pages：注册GitHub账号，新建仓库，把文件传上去，在Settings里找到Pages，选main分支，等一分钟，你的网址就是 你的用户名.github.io/仓库名。免费，支持自定义域名，适合静态页面。

或者用 Netlify、Vercel，拖拽文件夹就能部署，比GitHub Pages还快。缺点是国内访问速度看运气，但自己看、发给朋友看，完全够。

想用独立域名，去Namecheap或阿里云买一个，一年几十块。在域名商那里把DNS指向你的托管平台，等几小时生效。我第一次弄的时候把A记录和CNAME搞混，网站打不开，折腾到凌晨两点。现在想想，那晚学到的东西比看十篇教程都多。

接下来干什么

把 index.html 里的“欢迎来到我的网站”改成你真正想写的东西。放几张照片，写一段自我介绍，加一个你常去的链接列表。网页是你自己的地盘，不用管别人觉得好不好看。

然后学一点JavaScript，让按钮能点、让文字能变。再然后学响应式设计，手机上看也不挤。一步一步来，别急。你不需要成为专业前端才能拥有自己的网站——你只需要一个记事本和一点好奇心。