刚学 HTML 的新手朋友，是不是总被标签搞得头大？看到一堆<>尖括号就晕，记了这个标签忘那个；好不容易写了段代码，浏览器里要么显示乱码，要么图片不出来，报错信息看得一脸懵？别着急，今天兔子哥就带来超实用的 HTML 标签用法手册，把常用标签讲得明明白白，还教你怎么排查常见错误，哪怕你是零基础，跟着学也能少踩坑，轻松上手写 HTML，一起往下看吧！

一、先搞懂：HTML 标签到底是啥？为啥用不对就出问题？

基础问题：HTML 标签是什么？有啥用？

简单说，HTML 标签就是用<>包起来的指令，告诉浏览器 “这段内容该怎么显示”。比如

告诉浏览器 “这是大标题，要加粗放大”，说 “这里要显示一张图片”。标签就像网页的 “说明书”，每个标签有自己的功能，用对了页面整齐好看，用错了就会乱套。

场景问题：新手最常用的标签有哪些？在哪能查用法？

新手不用学所有标签，先掌握这几个高频常用的就行：标题标签（

-

）、段落标签（

）、图片标签（）、链接标签（）、盒子标签（）。想查用法的话，菜鸟教程网的 HTML 参考手册就很方便，每个标签都有示例，新手一看就懂。

解决方案：标签用不对会怎样？页面会出哪些问题？

标签用错麻烦可不少：比如标签没闭合，页面会突然乱码；图片标签漏了路径，页面上就会出现一个小叉叉；链接标签没写对地址，点了没反应。之前有个新手把写成了，结果图片死活不显示，查了半天才发现多写了个 “e”，你看这小错误多影响效率。

二、常用标签详解：每个标签怎么用？属性有啥讲究？

1. 标题标签（

-

）：让文字有层级，重点突出

标题标签是新手最容易上手的，数字越小标题越大，用法超简单：
html

<h1>这是一级标题（最大）h1><h2>这是二级标题h2><h3>这是三级标题h3>

注意：一个页面里

最好只放一个，用来突出网页主题，比如文章大标题；别用标题标签调文字大小，它的作用是分层级，不是改样式。

2. 段落标签（

）：让文字分段，排版整齐

写文章要分段，网页文字也一样，

标签能自动在段落前后加空白，看着不拥挤：
html

<p>这是第一段文字，用p标签包起来后，段落之间会有空隙，阅读体验更好。p><p>这是第二段文字，不用手动敲很多空格，p标签会自动处理间距。p>

避坑点：别用一堆
换行代替

分段，段落和换行的作用不一样，段落是内容分组，换行只是换行，乱用会让代码很乱。

3. 图片标签（）：给网页加图片，生动又直观

图片标签是单标签（不用闭合），但有两个必写属性，少一个图片就可能不显示：
html

<img src="风景.jpg" alt="海边日落风景">

• src：图片的路径，告诉浏览器图片在哪（必填）；
• alt：图片加载失败时显示的文字（必填），比如图片没找到，就会显示 “海边日落风景”。

常见错：src路径写错，比如图片存在 “images” 文件夹里，写成src="风景.jpg"就找不到，得写成src="images/风景.jpg"；还有人漏写alt，虽然不影响显示，但不符合规范，搜索引擎也不友好。

4. 链接标签（）：让网页能跳转，连接不同页面

想做个点击能跳转到其他页面的链接，就用标签，href属性写跳转地址：
html

<a href="https://www.example.com">点击访问示例网站a><a href="about.html">查看关于我们页面a>

小技巧：想让链接在新窗口打开，加个target="_blank"属性：
html

<a href="https://www.example.com" target="_blank">新窗口打开示例网站a>

5. 盒子标签（）：给内容分组，方便排版

标签本身没样式，但能把相关内容包起来，就像个 “盒子”，方便统一调整布局：
html

<div><h3>我的爱好h3><p>我喜欢看书、爬山和编程。p>div><div><h3>我的技能h3><p>会HTML、Python基础。p>div>

有了这些盒子，后面调布局时就知道 “要移动哪个部分”，不会乱改一气。

三、错误排查技巧：标签出错了？这样找问题超简单

1. 先看浏览器报错，定位错误位置

浏览器里按 F12 打开 “开发者工具”，点 “控制台”（Console），报错信息会告诉你 “第几行出错”“什么错误”。比如提示 “Unclosed element div”，意思是标签没闭合，找到对应的行补个就行。

2. 常见错误类型及解决方法

错误类型	表现症状	解决方法
标签未闭合	页面部分内容不显示或乱码	检查标签是否有开头没结尾，比如对应

，

对应属性拼写错误图片不显示、链接点不动检查src href是否拼错，比如把src写成sre，href写成herf路径错误图片显示叉号确认图片路径是否正确，相对路径用./（当前文件夹）、../（上一级文件夹）单标签多写闭合页面莫名空白单标签（
）不用加 ，删掉多余的闭合标签

3. 新手必学的 “逐行检查法”

写代码时别一口气写完再运行，写几行就运行一次，出错了范围小，好找问题。比如写图片标签，写完就运行看图片是否显示，显示了再写下一部分，这样能及时发现路径错误，不用等到最后大面积报错。

四、实战小案例：用常用标签做个简单网页，边练边避坑

咱们用上面学的标签做个个人介绍页，步骤超简单，跟着做少踩坑：

1. 用
   写大标题 “个人介绍”；
2. 用包一个图片和文字区域，图片用标签，加对src和alt；
3. 用
   写 “基本信息”“兴趣爱好” 小标题，内容用
   分段；
4. 用标签加个 “我的博客” 链接，测试能否跳转。

代码示例：
html

<h1>个人介绍h1><div><img src="me.jpg" alt="我的照片" width="200"><h2>基本信息h2><p>姓名：小明p><p>职业：前端初学者p>div><div><h2>兴趣爱好h2><p>喜欢研究HTML标签，用<span>在线编程工具span>练习网页制作。p><a href="myblog.html" target="_blank">查看我的博客a>div>

运行后检查：图片是否显示？段落是否分段？链接是否能点？有问题就对照错误排查表找原因，很快就能解决。

五、常见问题自问自答，帮你少走弯路

问：标签大小写有讲究吗？

和

一样吗？

答：HTML 标签不区分大小写，

和

效果一样，但建议小写，这是行业习惯，代码看起来更统一，也不容易和其他语言混淆。

问：想给文字加粗、变颜色，用什么标签？

答：加粗可以用标签（加粗文字）；变颜色需要用 CSS，新手先别急，把基础标签练熟，后面学 CSS 会更轻松，别在 HTML 里硬调样式哦。

问：标签记不住怎么办？总要用的时候翻手册会不会太慢？

答：刚开始记不住很正常，不用死记硬背！把常用标签写在便利贴上贴电脑旁，用得多了自然就记住了。兔子哥刚开始学的时候，也是边查边写，一周左右就熟了，重点是多敲代码，不是死记标签。

兔子哥的小建议

学 HTML 标签，重点不是记多少个，而是用对每个标签的 “脾气”—— 知道它干啥用、有啥必写属性、常见错误有哪些。新手别贪多，先把标题、段落、图片、链接、div 这几个标签练熟，做简单网页足够用。
写代码时养成 “写完就检查” 的习惯：标签闭合了吗？属性拼对了吗？路径写对了吗？这些小细节做好了，80% 的错误都能避免。遇到报错别慌，浏览器的控制台是你的好帮手，跟着报错信息找问题，解决多了就有经验了。
其实 HTML 标签就像积木零件，熟悉了每个零件的用法，拼出好看的网页并不难。少踩坑的秘诀就是 “多练习、勤检查、善总结”，练得多了，你会发现自己写代码越来越顺，报错越来越少。希望这本手册能帮你轻松入门 HTML，享受做网页的乐趣！

标签： 解决方案 浏览器