📚 全栈开发学习系列 · 阶段二（Web 全栈）
阶段一（编程基础）8/8篇 ✅ 完结
—— 阶段二：Web 全栈 ——
09 HTML 基础：网页骨架与语义化标签（当前篇）
10 CSS 基础：样式、布局与响应式
11 JavaScript 基础：变量、DOM 与事件
12 HTTP 协议基础：请求、响应与状态码
13 FastAPI 入门：构建第一个 RESTful API
14 PostgreSQL 基础：数据库设计与 SQL 操作
15 认证授权：JWT、Session 与 Cookie
16 综合实战：带登录的博客系统
HTML 基础：网页骨架与语义化标签
从一行文本到完整页面，掌握网页的结构语言
入门篇
HTML
阶段二启航
读完本篇你将能：理解 HTML 文档的完整结构，使用文本和语义化标签组织内容，创建链接和插入图片，用列表和表格展示结构化数据，编写表单收集用户输入，独立编写一个完整的个人主页 HTML 页面。
📑 本文目录
01从命令行到网页：阶段二启航
02HTML 文档结构：网页的骨架
03文本与语义化标签
04链接与图片：连接万维网
05列表与表格：组织结构化数据
06表单：用户输入的入口
07实战：个人主页
08动手练习
01 从命令行到网页：阶段二启航
阶段一的八篇文章里，你的代码跑在终端里——Python 脚本输出文字到命令行，C 程序操作内存中的链表，Git 在后台管理版本。这些是"幕后"技能，用户看不到也摸不着。从阶段二开始，你的代码将通过浏览器与世界见面：用户打开网址，看到排版精美的页面，点击按钮提交表单，数据存入后端数据库——这就是 Web 全栈开发。
Web 全栈的起点是 HTML（HyperText Markup Language，超文本标记语言）。HTML 不是编程语言——它没有变量、没有循环、没有条件判断。HTML 是标记语言，用一组标签描述网页的内容结构：哪里是标题、哪里是段落、哪里是图片、哪里是链接。
把 HTML 标签想象成乐高积木块——每一块有固定的形状和用途：长条块做标题，方块做段落，透明窗块做图片，铰链块做链接。你不需要"编程"，只需要把积木按顺序拼在一起。语义化标签就是分类好的积木套装——header 套装搭页头，nav 套装搭导航，article 套装搭文章内容。后续 CSS 是给积木上色的贴纸，JavaScript 是让积木动起来的电动组件——但一切的基础，是先把骨架搭对。
HTML = 骨架
定义内容结构：标题、段落、图片、链接、表单
CSS = 皮肤
定义视觉样式：颜色、字体、布局、动画（下篇学）
JS = 肌肉
定义交互行为：点击响应、数据请求、动态更新
02 HTML 文档结构：网页的骨架
每个 HTML 页面都有相同的骨架结构。在 macOS 上用 Vim 或任何编辑器创建一个 index.html 文件，输入以下内容，然后双击用浏览器打开：
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!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>Hello, World!</h1>
<p>这是我的第一个 HTML 页面。</p>
</body>
</html>
|
逐行解读：
<!DOCTYPE html>
文档类型声明，告诉浏览器这是 HTML5 文档。必须是文件第一行。
<head> 区域
页面元信息：字符编码、视口设置、标题。用户在页面上看不到这些内容。
<body> 区域
页面可见内容：标题、段落、图片、链接——用户看到的一切都在这里。
lang="zh-CN"
声明页面语言为简体中文，帮助搜索引擎和屏幕阅读器正确处理内容。
💡 小贴士
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 这行是移动端适配的关键——没有它，手机浏览器会把网页缩放到很小。每写一个 HTML 页面都应包含这行。
03 文本与语义化标签
你已经能在 body 里写 h1 和 p 了，现在学习更多文本标签。HTML5 引入了一组语义化标签——它们不改变内容外观，但告诉浏览器和搜索引擎"这段内容的角色是什么"。用 <div> 能做一切，但用语义化标签能让代码更清晰、SEO 更友好、无障碍阅读更准确。
常用文本标签
| 标签 |
用途 |
示例 |
h1 ~ h6 |
六级标题 |
页面大纲层级 |
p |
段落 |
正文文本块 |
strong |
强调（加粗） |
重要内容 |
em |
强调（斜体） |
语气加重 |
code |
行内代码 |
print() |
blockquote |
引用块 |
引用他人文字 |
语义化结构标签
HTML5 提供了一组结构标签，让页面各区域"自我介绍"——浏览器和搜索引擎一看就知道哪是页头、哪是导航、哪是正文：
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<header>
<nav>
<a href="/">首页</a>
<a href="/about">关于</a>
</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章正文段落。</p>
</article>
</main>
<footer>
<p>© 2026 个人网站</p>
</footer>
|
⚠️ 常见错误
<div class="header"> — 用 div 加 class 模拟语义化标签，浏览器和搜索引擎无法识别其含义
✓ 正确：直接使用 <header>、<nav>、<main>、<footer> 语义化标签，语义清晰且 SEO 友好。
04 链接与图片：连接万维网
网页之所以叫"超文本"，就是因为页面之间能通过链接互相跳转。链接用 <a> 标签创建，图片用 <img> 标签插入。两者的 href 和 src 属性都涉及路径——理解绝对路径和相对路径的区别至关重要。
HTML
<!-- 外部链接：跳转到其他网站 -->
<a href="https://example.com">外部链接</a>
<!-- 内部链接：跳转到本站其他页面 -->
<a href="/about.html">关于页面</a>
<!-- 锚点链接：跳转到本页内某位置 -->
<a href="#section1">跳到第一节</a>
<!-- 图片：src 是路径，alt 是替代文字 -->
<img src="logo.png" alt="网站Logo" width=200>
href 是"超链接引用"（Hypertext REFerence），值可以是完整 URL（https://...）、站内路径（/about.html）或锚点（#section1）。img 的 alt 属性是图片加载失败时显示的替代文字，也是屏幕阅读器为视障用户朗读的内容——每张图片都必须有 alt。
⚠️ 常见错误
<img src="logo.png"> — 缺少 alt 属性，图片加载失败时用户不知道这里是什么
✓ 正确：<img src="logo.png" alt="网站Logo">。如果图片纯装饰，用 alt="" 空值。
05 列表与表格：组织结构化数据
列表和表格是网页中组织结构化数据的两种基本方式。列表适合展示并列关系（技能清单、操作步骤），表格适合展示二维数据（项目对比、成绩单）。
列表：无序与有序
HTML
<!-- 无序列表：项目之间没有顺序关系 -->
<ul>
<li>Python</li>
<li>C 语言</li>
<li>JavaScript</li>
</ul>
<!-- 有序列表：项目之间有先后顺序 -->
<ol>
<li>创建项目目录</li>
<li>编写代码</li>
<li>提交到 Git</li>
</ol>
表格：二维数据展示
用表格展示你的全栈项目清单——这正是阶段二练习项目的雏形：
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<table>
<thead>
<tr>
<th>项目名</th>
<th>技术栈</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>个人博客</td>
<td>FastAPI + React</td>
<td>开发中</td>
</tr>
</tbody>
</table>
|
thead 放表头行（用 th 标签，默认加粗居中），tbody 放数据行（用 td 标签），tr 表示一行（table row）。
06 表单：用户输入的入口
表单是前后端交互的桥梁——用户在表单中输入数据，点击提交，数据被发送到后端处理。你在阶段二后半段会学到 FastAPI 如何接收表单数据，现在先学怎么用 HTML 搭建表单结构。
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<form action="/submit" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<label for="msg">留言：</label>
<textarea id="msg" name="message" rows=4></textarea>
<button type="submit">提交</button>
</form>
|
action 指定数据提交到哪个后端地址，method 指定 HTTP 方法（GET 或 POST）。label 的 for 属性值必须和 input 的 id 一致——点击 label 文字就能自动聚焦到对应输入框。
| type 值 |
用途 |
浏览器验证 |
text |
单行文本 |
无 |
password |
密码（隐藏显示） |
无 |
email |
邮箱地址 |
检查 @ 格式 |
number |
数字输入 |
只允许数字 |
date |
日期选择 |
弹出日历 |
💡 小贴士
在浏览器中按 F12 打开开发者工具，切到 Elements 面板，可以实时查看和修改任何网页的 HTML 结构——这是学习 HTML 最快的方式。看到喜欢的网页布局，右键"检查元素"就能看到它的 HTML 代码。
07 实战：个人主页
把本篇学的所有标签组合起来，写一个完整的个人主页。这个页面包含：页头导航、自我介绍、技能列表、项目表格、联系表单。在 macOS 上创建文件，用浏览器打开即可看到效果。后续学了 CSS 和 JavaScript，可以逐步给这个页面加上样式和交互。
HTML — index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!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>
<header>
<h1>张三的开发笔记</h1>
<nav>
<a href="#about">关于</a>
<a href="#skills">技能</a>
<a href="#projects">项目</a>
<a href="#contact">联系</a>
</nav>
</header>
<main>
<section id="about">
<h2>关于我</h2>
<p>全栈开发学习者，正在掌握 Python、React、Flutter 全平台开发。</p>
</section>
<section id="skills">
<h2>技能清单</h2>
<ul>
<li>Python / FastAPI</li>
<li>React / TypeScript</li>
<li>Linux / Git / Docker</li>
</ul>
</section>
<section id="contact">
<h2>联系我</h2>
<form action="/contact" method="POST">
<input type="email" name="email" placeholder="你的邮箱" required>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer><p>© 2026 张三</p</footer>
</body>
</html>
|
这个页面综合运用了本篇全部知识点：文档骨架（DOCTYPE、html、head、body）、语义化标签（header、nav、main、section、footer）、文本标签（h1、h2、p）、列表（ul、li）、链接（a + 锚点）、表单（form、input、button）。虽然现在还很朴素——没有颜色、没有布局——但结构已经完整。下一篇 CSS 基础会让它脱胎换骨。
08 动手练习
🟢 基础验证
创建一个 hello.html 文件，包含完整的 HTML 骨架（DOCTYPE、html、head、body），在 body 中写一个 h1 标题和一段 p 段落，内容自我介绍。保存后用浏览器打开，确认页面正常显示。按 F12 打开开发者工具，在 Elements 面板中查看你的 HTML 结构。
🟡 组合应用
用语义化标签构建一个博客文章页面 blog.html，包含：header（站点标题 + nav 导航）、main（article 内含 h1 标题、h2 小标题、p 段落、blockquote 引用）、aside（相关文章链接列表 ul）、footer（版权信息）。在文章中插入一张图片，设置 alt 属性。用锚点链接实现导航跳转。
🔴 开放挑战
为你的全栈项目作品集设计一个展示页面 portfolio.html。要求：用表格展示至少 3 个项目（项目名、技术栈、描述、状态）；用有序列表展示开发流程；包含一个联系表单（姓名 text、邮箱 email、项目类型 select 下拉、需求描述 textarea、提交按钮）；所有图片都有 alt 属性；页面用语义化标签分区。提示：参考本篇实战代码的结构，但要自己设计内容。
📖 知识回顾
DOCTYPE 文档声明
head / body 结构
meta charset / viewport
h1~h6 标题层级
语义化标签 header/nav/main/article/section/footer
a 链接 + href 路径
img 图片 + alt 属性
ul / ol / li 列表
table / thead / tbody / tr / th / td
form / input / label / textarea / button
F12 开发者工具
下篇预告
10 CSS 基础：样式、布局与响应式
HTML 骨架搭好了，接下来给页面穿上衣服——学习选择器、盒模型、Flex 布局和移动端适配，让你的个人主页从朴素文本变成专业页面。