零基础做一个静态网页的完整步骤

很多人觉得做网页是程序员的事，自己完全不懂代码，肯定做不了。其实不是这样的。做一个简单的静态网页，真的没有你想象中那么难。

我自己也不是程序员出身，最开始连HTML是什么都不知道。但因为工作需要，慢慢摸索着也学会了做一些简单的网页。今天就把我的学习路径整理出来，分享给零基础的朋友。

只要你会用电脑、会打字，跟着这篇文章一步步来，半天时间就能做出一个像模像样的网页。

第一步：了解基本概念

先搞清楚几个最基本的概念，不用记，有个印象就行。

HTML：网页的骨架。决定了网页上有什么内容——标题、段落、图片、链接等等。
CSS：网页的皮肤。决定了网页长什么样——颜色、字体、布局、排版等等。
静态网页：就是内容固定不变的网页。你看到的内容就是写在HTML文件里的，没有后台、没有数据库。

我们要做的是静态网页，所以只需要HTML和CSS就够了，不用学JavaScript，更不用学什么后端框架。

第二步：准备工具

做网页需要什么工具？其实最简单的工具就是电脑自带的记事本。但为了写起来更方便，我推荐用一个专门的代码编辑器。

新手推荐 VS Code，免费、好用、功能强大。直接去官网下载安装就行，完全免费。

安装好之后，你需要知道的几个最基本操作：

新建文件：File → New File
保存文件：File → Save，保存的时候后缀名要是 .html
打开文件夹：File → Open Folder，把你做网页的文件夹打开，这样方便管理文件

就这三个操作，足够你开始了。

第三步：写第一个HTML页面

好，现在我们来写第一个网页。新建一个文件，保存为 index.html，然后把下面这段代码复制进去：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，世界！</h1>
  <p>这是我的第一个网页。</p>
</body>
</html>

保存之后，找到这个文件，双击打开——它会用浏览器打开。你就能看到你的第一个网页了！是不是很有成就感？

我们来简单解释一下这段代码：

<!DOCTYPE html> 告诉浏览器这是一个HTML文件
<html> 是整个网页的根标签，所有内容都放在这里面
<head> 里放网页的配置信息，比如标题、编码方式
<body> 里放网页的实际内容，也就是用户能看到的东西
<h1> 是一级标题，<p> 是段落

HTML的基本语法就是这样——用标签把内容包起来，不同的标签代表不同的含义。

第四步：学会常用的HTML标签

不用学太多，掌握十几个最常用的就够做大部分网页了：

标题：<h1> 到 <h6>，数字越大字越小
段落：<p>，包裹一段文字
链接：<a href="网址">链接文字</a>
图片：<img src="图片地址">
列表：<ul><li>列表项</li></ul>
加粗：<strong>重要文字</strong>
换行：<br>
分区：<div>，用来把内容分组

这些标签就是网页的"积木块"。一个网页再复杂，也是用这些基本标签拼出来的。

第五步：用CSS给网页化妆

只有HTML的网页是很朴素的，黑字白底，没有任何样式。要让它变好看，就得用CSS。

CSS的基本语法很简单：选择器 + 样式属性。比如：

h1 {
color: red;
font-size: 32px;
}

意思就是：所有的 h1 标题，文字颜色改成红色，字号改成32像素。

CSS可以直接写在HTML文件里，也可以单独保存成 .css 文件然后引入。推荐用单独文件的方式，这样代码更清晰。

在HTML的 <head> 里加上这一行就能引入CSS文件了：

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

第六步：学习布局

布局是新手最难的一关。怎么把内容放到想要的位置？怎么让两列并排显示？怎么让内容居中？

推荐直接学 Flexbox（弹性布局），这是目前最主流也最好用的布局方式。学会了Flexbox，90%的布局问题都能解决。

Flexbox的核心概念很简单：父元素设置 display: flex，子元素就会自动排成一行。然后通过各种属性来调整对齐方式、排列顺序、间距等等。

不用一开始就全记住，用到的时候去查就行。做多了自然就熟了。

第七步：找参考、多模仿

这是我觉得最有效的学习方法——找一个你喜欢的网页，照着它的样子模仿着做一个。

不用怕"抄"，学习本来就是从模仿开始的。在模仿的过程中，你会遇到各种问题，然后想办法解决它们。这个解决问题的过程，就是你进步最快的时候。

给新手的建议：

先从简单的页面开始模仿，比如一个个人主页、一个简单的博客
不要追求完美，先做出来再说，再慢慢优化
遇到问题先自己搜一搜，大部分问题网上都有答案
做完一个之后保存好，再去做下一个，一个比一个复杂

第八步：部署上线

网页做好了，怎么让别人也能访问到？这就需要部署上线。

对于静态网页来说，部署其实很简单。有很多免费的静态网页托管服务，比如 GitHub Pages、Gitee Pages、Vercel、Netlify 等等。

以Gitee Pages为例，大概流程是：

申请一个Gitee账号
创建一个仓库（仓库名最好和你的用户名一样）
把你的网页文件上传到仓库里
在仓库设置里开启 Pages 服务
等几分钟，就能通过网址访问你的网页了

具体操作步骤网上有很多图文教程，跟着做就行，不难。

给新手的几个建议

最后再说几个我自己摸索出来的心得，希望能帮到刚开始学的朋友：

1. 不要一开始就追求学全

HTML和CSS的知识点很多，不用全学。先学最核心的20%，足够你做80%的事情。剩下的等用到了再去查，效率最高。

2. 动手最重要

看十遍教程不如动手做一遍。看的时候觉得都懂了，真自己做的时候会发现到处都是问题。但解决了这些问题，你就真的学会了。

3. 善用搜索

做网页的过程中遇到问题是常态。不要卡住就放弃，把问题拿去搜一搜，基本都能找到答案。这也是程序员的基本技能——遇到问题，先自己想办法解决。

4. 从简单的开始

不要一上来就想做一个功能齐全的大网站。先从一个简单的个人主页开始，做成功了有了成就感，再慢慢加功能。

做网页这件事，入门真的不难。难的是坚持学下去，从"会做"到"做好"。但只要你有兴趣、愿意动手，进步一定会比你想象的快。

希望这篇文章能帮到想入门的你。如果有什么问题，欢迎通过邮箱和我交流。