前端入门实战：分步教你做教师节主题静态网页
大家好，我是糖糖～今天咱们从零开始，一步步做一个教师节主题的静态网页。整个过程只需要 HTML 基础标签，新手也能轻松跟做，做完就能掌握文件管理、文字排版、图片插入、链接设置这 4 个核心技能！
步骤 1：搭建项目文件结构 先把文件和文件夹整理好，这样写代码时不会乱～
ini
teachers'day-project/ # 项目根目录
├── demo.html # 首页
├── teacher.html # 子页面（教师介绍页）
└── images/ # 图片文件夹
└── t1.jpg # 教师节装饰图
└── teacher.png # 教师节装饰图- 新建一个文件夹（比如叫
teachers'day-project）。 - 在里面创建
demo.html、teacher.html两个文件。 - 再建一个
images文件夹，把准备好的图片（如t1.jpg）放进去。
步骤 2：写首页（demo.html）的基础框架
打开 demo.html，先用 HTML5 模板搭建页面骨架：
html
<!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>
<!-- 后续内容在这里写 -->
</body>
</html> 步骤 3：文字输入与排版
把内容填进页面，用 HTML 标签整理文字层级：
3.1 标题标签
（<h1>、<h2>） 标题标签用来区分内容层级，<h1> 是一级标题（页面主标题），<h2> 是二级标题（板块标题）：
html
<body>
<h1>教师节主题页</h1>
<h2>教师节的由来</h2>
<h2>教师的由来</h2>
<h2>教师节的活动</h2>
</body>3.2 段落标签
（<p>）和换行标签（<br>） <p> 用来包裹一段文字，<br> 用来强制换行：
html
<h2>教师节的由来</h2>
<p>我国尊师重教的传统由来已久，古代便有 "弟子事师，敬同于父" 的理念。1985年1月21日，第六届全国人大常委会第九次会议正式决议，将每年的9月10日定为我国教师节。<br>这一日期避开了传统节日与寒暑假，恰逢新学期伊始，方便学生表达对教师的敬意～</p>
<h2>教师的由来</h2>
<p>教师这一职业的起源可追溯至人类文明早期，西周时期有"师氏""保氏"等官职，专门教贵族子弟礼、乐、射、御、书、数；春秋时期孔子打破"学在官府"，主张"有教无类"，开创了私人教师的先河～</p>
<h2>教师节的活动</h2>
<p>教师节期间，学校会办表彰大会、学生做手工贺卡；社会上也会有慰问乡村教师、景区对教师免门票的活动～这些小事都在传递"尊师重教"的心意～</p>步骤 4：插入图片（设置路径）
用 <img> 标签插入图片，src 属性写图片的相对路径（即图片相对于 HTML 文件的位置）：
html
<h2>教师的由来</h2>
<p>教师这一职业的起源可追溯至人类文明早期...（省略部分文字）</p>
<img src="images/t1.jpg" alt="教师节装饰图">src="images/t1.jpg"表示图片在images文件夹里，文件名叫t1.jpg。alt是图片加载失败时的提示文字，可以加上哦～
步骤 5：添加链接标签
链接是网页的灵魂，咱们来加 3 种常见链接：
5.1 外部链接（跳转到其他网站）
用 target="_blank" 让链接在新标签页打开：
html
<p>想了解更多教师节故事？可以<a href="https://www.baidu.com" target="_blank">百度一下</a>～</p> 5.2 锚点链接（页面内跳转）
先给目标位置加 id，再用 #id 实现跳转：
html
<!-- 顶部导航，点击跳转到对应板块 -->
<a href="#origin">教师节的由来</a><br>
<a href="#teacher">教师的由来</a><br>
<a href="#activities">教师节的活动</a><br>
<!-- 目标位置，加 id -->
<h2 id="origin">教师节的由来</h2>
<h2 id="teacher">教师的由来</h2>
<h2 id="activities">教师节的活动</h2>5.3 内部链接（跳转到子页面）
新建 teacher.html 作为子页面，用相对路径链接它：
html
<p>想了解更多教师故事？可以<a href="teacher.html" target="_blank">点击查看</a>～</p>步骤 6：制作子页面（teacher.html）
子页面的制作逻辑和首页一样，重复"文字排版、图片插入、链接设置"的步骤即可：
html
<!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>教师风采</h1>
<p>教师是人类灵魂的工程师，他们用知识的火种点亮学生的人生...（这里写教师介绍的内容）</p>
<img src="images/teacher.png" alt="教师形象图">
<!-- 假设子页面用了新图片 -->
<p><a href="demo.html" target="_blank">返回首页</a></p>
</body>
</html> 我的手写思路笔记，仅供参考:
最终效果与总结
做完这 6 步，一个包含文字、图片、三类链接的静态网页就完成啦！ 通过这个项目，你应该掌握了：
- 如何组织前端项目的文件结构；
- HTML 标题、段落、换行标签的用法；
- 图片路径的设置和插入方法；
- 外部链接、锚点链接、内部链接的实现逻辑。
这只是前端的起点，后续学了 CSS 后，还能给页面加颜色、调布局，让它更美观～如果在操作中遇到问题，欢迎在评论区交流哦～
如果你想查看这个项目的完整代码，可以访问我的 GitHub 仓库：教师节网页项目仓库