大家好呀，我是兔子哥！最近好多零基础的朋友问我：“想学做网页，但看到满屏的代码就头晕，HTML 到底难不难呀？” 其实真不用怕，HTML 就像搭积木的说明书，今天这篇教程就用大白话教你入门，小白也能快速学会核心标签用法，一起往下看吧！

一、先搞懂：HTML 到底是个啥？

可能有朋友会问：“做网页为啥非得学 HTML？” 简单说，HTML 就是网页的 “骨架”。你看到的网页上的文字、图片、按钮，都是用 HTML 标签 “搭” 起来的。就像盖房子得先有钢筋骨架，做网页也得先用 HTML 把结构定好，再添上样式和功能。
打个比方：你打开的任何网页，标题是用

标签写的，段落是

标签，图片是标签。这些标签就像不同形状的积木，拼在一起就成了网页的基本样子。是不是一下子就好理解了？

二、学 HTML 前，你需要准备这些工具

别以为学代码得装一堆复杂软件，新手用这两个就够了，兔子哥刚开始学的时候也用它们：

• 文本编辑器：记事本就行！不过推荐用 Notepad++（免费又轻便），它能给代码上色，看起来更清楚。
• 浏览器：Chrome 或者 Edge 都行，写完代码保存后，用浏览器打开就能看到效果，特别方便。

安装好后试试：打开 Notepad++，输入

我的第一个网页

，保存成 “index.html” 文件，再用浏览器打开，就能看到大标题啦。是不是超简单？

三、必学核心标签：新手先掌握这 5 个

HTML 标签有很多，但新手先学会这 5 个核心的，就能做出简单网页了，表格给大家列清楚用法：

标签	作用	举个例子	效果
到	标题标签，数字越小字越大	一级标题 二级标题	一级标题（大）、二级标题（中）
	段落标签	这是一段文字	文字会自动换行，段落间有间距
	插入图片		网页上显示指定图片
	链接标签	百度	点击 “百度” 跳转到百度首页
	无序列表	苹果 香蕉	显示带圆点的列表：苹果、香蕉

有朋友可能会问：“标签为啥都要带尖括号？” 因为浏览器靠这个识别 “这是标签，不是普通文字”，就像给积木贴了标签，告诉浏览器 “这块是标题，那块是段落”。

四、实战：10 分钟做个简单网页

光说不练假把式，咱们动手做个包含标题、段落、图片和链接的网页，步骤跟着做就行：

1. 新建文件：打开 Notepad++，点 “文件→新建”，保存为 “myfirstpage.html”（注意后缀必须是.html）。
2. 写基础结构：先写这两行，所有 HTML 网页都得有这个 “开头”：plaintext
   
   
3. 加内容：在下面加这些标签：plaintext

   我的个人小站
   大家好，我正在学HTML！
   我喜欢的水果：
   草莓
   葡萄
   看学习视频点这里

   
   
4. 收尾：在最后加上，保存文件。
5. 看效果：用浏览器打开保存的文件，就能看到自己做的网页啦！是不是超有成就感？

五、新手常踩的 3 个坑，提前避开

兔子哥刚开始学的时候踩过不少坑，给大家提个醒：

• 标签没闭合：比如写了
  忘了写，浏览器可能会乱显示，一定要记得 “开标签” 对应 “关标签”。
• 文件名错了：保存时后缀写成了 “.txt”，浏览器会当文本打开，记得改成 “.html”。
• 图片不显示：标签里的 “图片地址” 写错了，要么是路径不对，要么是文件名拼错了，仔细检查一下。

六、学完这些，接下来能学啥？

学会核心标签后，别着急学复杂的。可以先试试给网页加更多内容，比如多插几张图片，或者做个带链接的导航栏。等熟练了，再学 CSS 给网页上色、调样式，让网页更好看。

结尾心得

其实 HTML 对零基础小白特别友好，只要多动手写、多预览效果，很快就能上手。兔子哥建议大家每天花半小时练习，从简单网页开始，慢慢增加难度。别害怕写错，代码就是在不断修改中学会的。希望这篇教程能帮到想入门的你，赶紧打开编辑器试试吧，有问题随时留言问我呀！

标签： myfirstpage.html index.html