很多零基础的朋友想学做网页，一搜 “HTML 教程” 就被满屏的代码吓退了？“标签是什么？”“网页布局怎么弄？”“学 30 天真的能掌握吗？” 别慌，兔子哥当初也是从 “连编辑器都不会开” 开始的，今天就带大家走一遍 30 天入门计划，从最基础的标签到完整的网页布局，每天学一点、练一点，保证新手也能跟上，一起往下看吧！

先说明：30 天计划能学会啥？适合什么样的你？

别指望 30 天就成大神，但按这个计划走，你能收获这些：会写基本 HTML 标签、能搭简单网页结构、看懂常见代码报错、做出有模有样的静态网页。这个计划特别适合：

• 纯零基础，想试试做网页的朋友
• 学生党，要交网页作业的
• 职场人，想多学技能的
• 喜欢动手，想做个人网页的

有朋友问：“没电脑基础能学吗？” 当然能！HTML 是最贴近 “人类语言” 的编程知识，只要会用鼠标键盘，就能学。

第一阶段：基础入门（1-7 天）—— 搞懂标签和工具

这 7 天重点是 “认识 HTML”，别贪多，把基础工具和核心标签吃透。

第 1-2 天：工具准备 + 第一个网页

学 HTML 不用装复杂软件，这几个工具足够：

工具名称	优点	缺点	适合人群
记事本	电脑自带，不用安装	没代码高亮，易写错	纯新手试手
Notepad++	免费，代码高亮	功能简单	零基础日常练习
VS Code	插件多，调试方便	占内存稍大	想长期学的朋友

兔子哥推荐新手先用 Notepad++，第一天就用它写第一个网页：打开软件，输入这段代码（别抄错符号）：
plaintext

我的第一个网页
今天开始学HTML啦！

保存成 “index.html”，双击用浏览器打开，就能看到标题和文字了。这就是 HTML 的神奇之处 —— 简单几行代码就能出效果。

第 3-5 天：核心标签练熟

HTML 靠 “标签” 说话，这几个核心标签必须会：

• 到
  ：标题标签，h1 最大，h6 最小，就像文章的大标题、小标题

• ：段落标签，用来放文字内容，自动换行
• 
：换行标签，想在段落里换行就用它
• ：加粗标签，让文字变粗
• ：斜体标签，让文字变斜

每天练 3 个标签组合，比如第 3 天练标题 + 段落，第 4 天加加粗 + 斜体，第 5 天试试换行。练的时候多改改文字，看看标签效果怎么变。

第 6-7 天：检查错误 + 复习

新手常犯这些错，第 6 天专门练 “找错”：

• 标签没闭合：比如写了
  忘了，网页会乱码
• 符号用中文：引号、尖括号要用英文的，中文符号会导致显示异常
• 文件名错了：保存时扩展名一定要是.html，不然浏览器不认

第 7 天把前 6 天的代码再敲一遍，改改内容，比如把 “我的网页” 改成 “我的兴趣爱好”，加深记忆。

第二阶段：内容丰富（8-14 天）—— 加图片、链接和列表

光有文字太单调，这 7 天学加图片、链接和列表，让网页变丰富。

第 8-9 天：插入图片

网页没图片可不行，学用标签：
plaintext

这里的src是图片路径，alt是图片加载失败时显示的文字。新手常犯 “图片不显示” 的错，大多是路径写错了：图片和 HTML 文件放同一文件夹，直接写文件名；放子文件夹，要写 “文件夹名 / 文件名”。
第 9 天练 “调整图片大小”，加width和height属性，比如width="300"就是宽 300 像素。

第 10-11 天：加超链接

用标签做链接，能跳转到其他网页：
plaintext

去百度关于我

href后面写链接地址，网页内跳转就写文件名，外部跳转写网址。记得加target="_blank"能新窗口打开，用户体验更好。

第 12-14 天：列表排版

网页里的 “步骤”“清单” 常用列表：

• 无序列表（
  +
）：前面带圆点，适合列爱好、物品
• 有序列表（
  +
）：前面带数字，适合列步骤、排名

第 14 天做个 “我的周末计划” 网页，用有序列表写步骤，无序列表写要带的东西，插入一张周末照片，加个 “查看更多计划” 的链接，把这阶段内容串起来。

第三阶段：结构进阶（15-21 天）—— 表格、表单和语义化

这 7 天学稍微复杂的内容，表格能展示数据，表单能收集信息，语义化让代码更清晰。

第 15-17 天：表格制作

用做表格，学生党交作业常考这个：
plaintext

姓名
年龄
小明
20

border是边框，是行，是表头，是单元格。练的时候试试合并单元格（colspan跨列，rowspan跨行），别嫌麻烦，表格在数据展示里超有用。

第 18-20 天：表单设计

想做 “注册页”“问卷” 就得学表单，核心标签：

• ：文本输入框，写用户名
• ：密码框，输入时显示圆点
• +：下拉菜单，选性别、地区
• ：提交按钮

第 20 天做个 “简单注册表单”，包含用户名、密码、性别下拉框，试试点击按钮弹出提示（后面学 JS 再让它真提交）。

第 21 天：语义化标签

别全用堆网页，用语义化标签更规范：

• ：网页头部（标题、导航）
• ：导航栏
• ：主要内容
• ：页脚（版权信息）

把之前的网页改成语义化结构，你会发现代码变清爽多了，浏览器也更懂你的网页。

第四阶段：网页布局（22-30 天）—— 搭完整网页

最后 9 天学布局思路，把前面的知识串起来，做一个完整网页。

第 22-25 天：布局基础

网页布局就像 “搭积木”，先规划区域：头部放标题导航、中间放主要内容、侧边放推荐、底部放版权。用加class区分区域，比如：
plaintext

我的网页标题这里是主要内容版权所有

每天练一个区域，25 天拼出简单布局框架。

第 26-28 天：实战小项目

选一个主题做完整网页，推荐这几个：

• 个人介绍页：放照片、简介、爱好，用列表和段落
• 课程表网页：用表格做课程表，加表头和边框
• 兴趣展示页：放多张图片，加文字说明和跳转链接

兔子哥当时做的是 “电影推荐页”，放了喜欢的电影海报、简介，还加了 “查看影评” 的链接，成就感超足。

第 29-30 天：优化和复盘

第 29 天检查网页问题：图片太大？文字看不清？链接能不能点？第 30 天把 30 天的代码整理成文件夹，看看从 “第一个网页” 到 “完整布局” 的变化，你会发现自己真的进步了！

常见问题：这些坑别踩！

学的时候肯定会遇到问题，兔子哥总结了几个高频坑：

• 标签记混：比如把
  写成
  ，虽然浏览器可能兼容，但最好小写，规范点
• 路径错误：图片不显示八成是路径错了，多检查 “文件名对不对”“文件夹有没有重名”
• 急于求成：别第 5 天就想学布局，基础标签没吃透，后面肯定卡壳，慢慢来更稳

有朋友问：“学 HTML 需要背标签吗？” 不用死背！常用的练多了自然记住，记不住就建个 “标签小抄”，随时翻看，刚开始没人会笑话你。

个人心得：坚持比天赋更重要

30 天计划的关键不是 “每天学多久”，而是 “每天都学一点”。兔子哥见过很多人第一天热情满满，学 3 天就放弃，其实 HTML 入门不难，难的是坚持。
每天花 30 分钟敲代码，比周末一次性学 3 小时有用。遇到报错别慌，复制错误提示搜一搜，八成能找到解决方法；练完别删代码，建个 “练习文件夹”，回头看会超有成就感。
希望这个 30 天计划能帮你入门 HTML，记住：做网页就像搭积木，一块一块拼，总有一天能搭出自己的 “城堡”。现在就打开编辑器，从第一个

开始吧，30 天后你会感谢现在的自己！

标签： 有模有样 index.html