CHAPTER 01 · 建站基础

写出你的第一个网页

这一章不追求"学完编程",只追求一件事:在你自己的电脑上,做出一个能打开、能看到内容的网页。如果你是中职/技校的同学,先看下面的 从易到难的知识点进阶地图,心里有个整体路线,再一节节跟着敲;有经验的可直接跳到 进阶部分。

★ 中职 · 从易到难的知识点进阶地图

这张地图把"做网站"要用的知识点,拆成 6 个台阶(关卡),从易到难排列。每上一个台阶,你都能多做出一样真实的东西——不是背概念,而是"我又能做出 XX 了"。建议按顺序闯,学完一项就在心里打个勾。

难度:★☆☆☆☆ 入门 → ★★★★☆ 进阶 实心方块 = 必学核心  空心方块 = 了解/选学
1

破冰:看懂网页是由什么组成的

建立信心,不写代码也能先"懂"
难度 ★☆☆☆☆
🎯 学完你能:说清一个网页由哪些部分构成,会打开开发者工具偷看别人网站的标签结构。
  • 浏览器、网址(URL)、输入回车后大致发生了什么
  • 网站 / 网页 / 首页(index.html)这几个词的区别
  • 安装并认识 VS Code:新建、保存、打开文件
  • HTML 标签的基本形状:<标签>内容</标签>
  • 按 F12 打开开发者工具查看页面元素
  • 什么是"前端",它和"网站长什么样"的关系
练手 打开你喜欢的网站,按 F12 随便点点,试着找到一张图片和一段文字
查看详细知识点 · 在线练一练 →
2

HTML:给页面搭骨架

用标签把内容"装"进网页
难度 ★★☆☆☆
🎯 学完你能:独立写一个有标题、多段文字、图片、链接的完整页面。
  • 文档骨架:<!DOCTYPE html> / html / head / body
  • 标题 h1–h6、段落 p、换行 br、分割线 hr
  • 强调 strong em;字符实体如 &nbsp;
  • 列表 ul / ol / li
  • 图片 img(src alt width)
  • 超链接 a:站内、外链、锚点跳转、mailto:
  • 表格 table / tr / td / th
  • 语义化标签 header / nav / main / section / footer(先了解)
  • 中文乱码与 charset="UTF-8"
  • 给元素加 class / id,为下一步 CSS 做准备
练手 做一份"自我介绍页 / 我喜欢的专业介绍页"(纯 HTML,先不管好不好看)
查看详细知识点 · 在线练一练 →
3

CSS:给页面穿衣服

从灰白页面变好看
难度 ★★★☆☆
🎯 学完你能:把上一关的页面改成有配色、有间距、有质感的漂亮页面。
  • 三种引入方式:行内、内部 <style>、外部样式表 link
  • 选择器:标签、类 .class、ID #id(重点)
  • 颜色 color / background(十六进制、rgb、命名色)
  • 字体 font-family / size / weight / line-height
  • 盒模型:padding / border / margin(最重要的一关)
  • 圆角 border-radius、阴影 box-shadow
  • 单位:px % vw/vh rem(初步)
  • 鼠标悬停 :hover 与过渡 transition
  • 用开发者工具实时调样式、找问题
  • 引用网络字体 / 图标库(选学)
练手 给"自我介绍页"换一套主题色和排版,做成有"海报感"的一页
查看详细知识点 · 在线练一练 →
4

布局与响应式:排整齐、手机也能看

让内容按你想要的地方站好
难度 ★★★☆☆
🎯 学完你能:做出多栏卡片式布局,并保证在电脑和手机上都不变形。
  • 显示模式 display: block / inline / none
  • 弹性布局 Flex:justify-content / align-items / gap(重点)
  • 网格布局 Grid:grid-template-columns / gap
  • 定位 position: relative / absolute / fixed(了解)
  • 响应式:@media 媒体查询
  • 移动端 viewport meta 的作用
  • 图片自适应 max-width: 100%
  • 居中方案的几种常见写法
  • 简单动画、导航吸顶 sticky(选学)
练手 做一个"作品集 / 班级活动"响应式主页(可参考本站 示例小站)
查看详细知识点 · 在线练一练 →
5

JavaScript:让页面动起来

给页面加"会做事"的部分
难度 ★★★★☆
🎯 学完你能:做出点击弹窗、深色模式切换、表单校验等交互效果。
  • JS 放哪:<script>、外部 js、defer
  • 变量 let / const、数据类型、运算符
  • 条件 if/else、循环 for
  • 函数 function
  • DOM 操作:querySelector、textContent、classList、style
  • 事件 addEventListener(click / input / submit)
  • 数组与对象基础
  • 小综合:待办清单、图片轮播
  • 用现成库实现复杂效果(选学)
练手 给主页加一个"深色模式切换"按钮和"点击展开的导航菜单"
查看详细知识点 · 在线练一练 →
6

综合与上线:把作品变成能分享的网址

从"做出来"到"别人能打开"
难度 ★★★☆☆
🎯 学完你能:整理好项目、用 Git 管理、部署上线拿到自己的网址。
  • 项目文件组织:index.html + css/ js/ assets/、相对路径
  • 代码规范、注释、自动排版(Prettier)
  • 图片压缩、网站图标 favicon
  • SEO 基础:title / description、语义化
  • 无障碍:alt 文本、颜色对比度(了解)
  • Git 基础:add / commit / push(重点)
  • 部署:GitHub Pages / Netlify(见 第 02 章)
  • 自定义域名与 HTTPS(见 第 03 章)
  • 国内上线需备案的合规意识(见 第 04 章)
练手 把作品集小站部署上线,拿到网址发到班级群 / 放进简历
查看详细知识点 · 在线练一练 →

关于顺序:1–3 关是"地基",几乎所有同学都要走;4、5 关按专业和兴趣选做(做展示型网站 4 很重要,要交互才学 5);6 关对应后面三章。别一次贪多,每个台阶做出一个小东西再往下走。

组合起来:把六关串成一条主线作业

单学知识点容易忘,"组合"的关键是用同一个作品一路升级——从第 2 关到第 6 关,始终在完善同一个页面。下表就是一条推荐的组合路线,一个学期或一个假期都能照着推进:

第 1 周
破冰
定选题 + 搭骨架(关卡 1→2)

选一个你真正想做主题(个人介绍 / 社团 / 家乡 / 喜欢的游戏),用纯 HTML 把内容堆满,先不求好看。

第 2–3 周
化妆
配色与盒模型(关卡 3)

给页面穿上衣服:定一套主题色,调好间距,让它从"文档"变成"设计"。

第 4–5 周
排布
布局 + 响应式(关卡 4)

用 Flex/Grid 做卡片和导航,再用 @media 让它在手机上不出错。

第 6–7 周
激活
加交互(关卡 5,选做)

给页面加一个"亮点":深色切换、图片轮播、点击展开……让老师同学"哇"一下。

第 8 周
交付
整理 + 上线(关卡 6)

规范文件、加图标与标题,用 Git 推到 GitHub Pages,拿到属于你的网址。

成果
一个能访问的个人作品集网站

可对接中职的 1+X 网页设计方向、计算机等级、技能竞赛,也能直接放进升学/求职简历。

下面这张详细清单,就是这条主线的"教材目录"。我们一节一节往下走 👇

① 准备工具:只需要两样

很多新手以为建站要装一堆复杂软件。其实做静态网站,你只需要 一个代码编辑器 和 一个浏览器。

📝 代码编辑器:VS Code(推荐)

免费、跨平台、插件丰富,几乎是前端的标准选择。

  1. 打开官网 code.visualstudio.com
  2. 下载对应系统(macOS / Windows)版本并安装
  3. 安装后可选装插件:Live Server(自动刷新预览)、Prettier(自动排版)

替代方案 Sublime Text、Cursor,甚至系统自带的"记事本"理论上也行,只是体验差。

🌐 浏览器:任意现代浏览器

Chrome、Edge、Safari、Firefox 均可,用来"看"你的网页。

写网页时你会反复用到 开发者工具——按 F12 或 Ctrl/Cmd + Shift + I 打开,可以实时查看和调试页面。现在先知道有它就行。

工具装好,这一节就完成了。别在"选哪个编辑器"上纠结太久——它们都能做出完全一样的网页。

② 动手:5 分钟写出第一个网页

我们新建一个文件夹当作"项目",在里面写一个 index.html 文件。index.html 是约定俗成的"首页"文件名,记住它,后面部署时非常关键。

  1. 1

    新建项目文件夹

    在桌面(或任意位置)新建一个文件夹,取名 my-site。以后这个网站的所有文件都放在它里面。

  2. 2

    用 VS Code 打开它

    VS Code 菜单 File → Open Folder,选中 my-site 文件夹。

  3. 3

    新建 index.html 并粘贴代码

    在左侧文件区点"新建文件",命名为 index.html,把下面这段复制进去:

    index.html
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一个网站</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 640px; margin: 60px auto; padding: 0 20px; color: #1e293b; }
    h1 { color: #2563eb; }
    .btn { display:inline-block; margin-top:16px; padding:10px 18px; background:#2563eb; color:#fff; border-radius:8px; text-decoration:none; }
  </style>
</head>
<body>
  <h1>你好,互联网!</h1>
  <p>这是我亲手做出来的第一个网页。</p>
  <a class="btn" href="#">点我试试</a>
</body>
</html>
  4. 4

    保存并打开

    按 Ctrl/Cmd + S 保存,然后双击 index.html 文件(或在浏览器里"打开文件")。

    如果看到蓝色标题 "你好,互联网!" 和一个按钮——恭喜你,一个网页诞生了。

网页的"骨架"是 HTML(标签 <h1> <p> <a>),"长相"是 CSS(写在 <style> 里的规则)。上面这个例子把两者写在了一个文件里,方便你快速看到效果;真正做项目时,通常会拆成单独文件——下一节讲。

③ HTML、CSS、JS 的分工(用盖房子理解)

网页由三样东西协同完成,业内戏称"三剑客"。用盖房子来理解最直观:

技术好比房子负责什么常见标签/写法
HTML结构与承重墙页面有什么内容:标题、段落、图片、链接、按钮<h1> <p> <img> <a> <div>
CSS装修与粉刷长什么样:颜色、字体、间距、布局、动效color margin flex grid
JavaScript电器与智能家居会做什么:点击反应、弹窗、数据交互addEventListener() 等

三者关系:HTML 是必需的地基,CSS 让它好看,JS 让它"活"起来。做一个静态展示型网站,HTML + CSS 就能完成绝大部分,JS 是锦上添花。

新手常见误区:一上来就想"我是不是得学会编程才能做网站"。不需要。把 HTML 当作"用标签描述内容",把 CSS 当作"给内容定样式",你会发现门槛远比想象低。

④ 组织好你的文件

当页面变多,把样式和图片塞在一个 HTML 里会很难维护。标准做法是拆分文件、放进不同文件夹。一个常见的静态项目长这样:

项目结构
my-site/
├── index.html        # 首页(必须,部署后默认打开它)
├── about.html        # 其他页面,可选
├── css/
│   └── style.css     # 所有样式
├── js/
│   └── main.js       # 所有脚本,可选
└── assets/
    └── images/       # 图片、图标等

拆出去后,index.html 的 <head> 里用一行引用外部样式表即可:

index.html 中引用外部文件
<link rel="stylesheet" href="css/style.css">
...
<script src="js/main.js" defer></script>

路径最容易踩坑:引用文件时用相对路径(如 css/style.css),不要写死你电脑上的绝对路径(如 /Users/你/Desktop/...)。一旦上线,绝对路径会全部失效、样式丢失。

⑤ 边改边看:本地预览

写一行看一眼、反复保存刷新很痛苦。有两种更舒服的方式:

方式 A:Live Server 插件(最省事)

在 VS Code 扩展商店搜 Live Server 安装,打开 index.html,点右下角 Go Live。

它会在本地起一个小服务器并开一个网址(如 http://127.0.0.1:5500),你一保存,浏览器自动刷新。

方式 B:命令行起本地服务

如果你装了 Node,在项目文件夹里开终端运行:

终端
# 任选其一
npx serve .
# 或用 Python
python3 -m http.server 8000

为什么建议用本地服务器而不是"双击文件打开"?因为某些功能(比如用 JS 读取本地数据文件、部分字体加载)在 file:// 直接打开时会受限;用本地服务器更接近真实上线环境。这个习惯到第 02 章部署时会直接帮到你。

⑥ 让页面更好看的三件小事

不用精通 CSS,先掌握这三点,页面质感立刻上一个台阶:

  1. 响应式(手机上也能看):一定保留 <meta name="viewport" ...> 这一行,并用百分比 / max-width 布局,再配合媒体查询 @media 适配窄屏。
  2. 字体与间距:用系统字体栈(如本教程的 font-family),给足留白,标题字号大于正文,行高约 1.6–1.8。
  3. 图片要瘦身:上线前压缩图片(推荐 TinyPNG / Squoosh),大图用 <img loading="lazy"> 懒加载,网站打开更快。

想快速套用成熟样式而不从零写 CSS,可以了解 Tailwind CSS 或 Bootstrap 这类现成框架——引一个 CSS 文件,页面立刻有模有样。

⑦ 进阶:当你想做得更专业

进阶读者 如果你已有 HTML/CSS 基础,或要做多页/博客/团队项目,可以进一步了解下面的工具链。纯小白可以先跳过,不影响后续章节。

静态站点生成器(SSG)

手写很多页面会很累。SSG 让你用"模板 + 内容文件"批量生成静态 HTML,写一次样式,处处统一:

工具适合场景学习曲线
Hugo博客、文档站;单二进制、构建极快中
Astro / Eleventy追求极致性能的现代内容站中
VitePress / Docusaurus技术文档站,Markdown 即页面低
React/Vue + Vite交互复杂的 Web 应用,构建产物仍是静态文件高

用 Git 管理你的代码

到了第 02 章用 GitHub Pages 部署时,你会需要 Git。现在先把"版本控制"这件事建立起来:它能记录你每次改动、随时回退,也是很多免费托管平台的"上传方式"。

在项目里初始化 Git
cd my-site
git init
git add .
git commit -m "首次提交:我的静态网站"

如果你用 SSG(如 Hugo、VitePress),最终"要部署的"是它 构建出来的静态文件夹(通常叫 dist/、public/ 或 docs/)。下一章的部署,针对的正是这个纯静态产物——所以无论手写还是工具生成,后面的流程都一样。

⑧ 本章小结

  • 做静态网站只需要 编辑器 + 浏览器,推荐 VS Code。
  • 核心是 index.html:HTML 定结构、CSS 定样式、JS 定行为。
  • 把样式/脚本/图片拆到 css/ js/ assets/,用相对路径引用。
  • 用 Live Server 或本地服务边改边看,养成接近真实环境的习惯。
  • 进阶可用 SSG 工具 提效、用 Git 管版本——产物依旧是静态文件。
← 上一章首页 · 路线图