HTML常用标签用法菜鸟入门指南（附实例）

admin HTML教程 2025-10-24 3

刚学 HTML 的菜鸟朋友，是不是总对着教程里的标签犯愁？看到这些尖括号符号，记不住哪个是哪个，更不知道该怎么用？写网页时想加个标题却用错标签，想插张图片结果只显示叉号？别着急，今天兔子哥就把 HTML 里最常用的标签一一讲清楚，每个标签都附实例代码，哪怕你是零基础，跟着学也能轻松掌握它们的用法。

一、先搞懂：标签到底是啥？为啥写网页离不开它？

可能有朋友会问，标签不就是几个字母加尖括号吗？有那么重要吗？其实啊，HTML 标签就像网页的 “积木零件”，每个标签都有自己的功能 —— 有的负责显示标题，有的负责放文字，有的负责插图片，浏览器就是靠这些标签来识别内容该怎么展示的。
比如你写 “我的网页”，浏览器看到就知道这是大标题，会加粗放大显示；你写 “这是一段文字”，浏览器就会按段落格式展示。没有标签的话，文字图片都会堆在一起，乱糟糟的没法看。所以学 HTML，先把常用标签的用法记牢，这是最基础的一步。

二、标题标签：让文字有层级，h1 到 h6 怎么用？

网页里的标题需要分主次，就像书的章节目录一样，HTML 用到来表示不同层级的标题，数字越小标题越大、越重要。

用法实例：

html

<h1>这是一级标题（最大，整个页面最好只放一个）h1><h2>这是二级标题（常用于章节标题）h2><h3>这是三级标题（比二级小一点）h3><h4>这是四级标题h4><h5>这是五级标题h5><h6>这是六级标题（最小）h6>

新手常见问题：

问：能不能在一个页面里放多个？
答：虽然技术上可以，但不建议。通常代表整个页面的主题，放多了会让浏览器和搜索引擎 confusion，影响页面结构识别。
问：标题标签里能嵌套其他标签吗？
答：可以简单嵌套，比如今天天气很好，但别嵌套太复杂的内容，保持标题简洁。

三、段落和换行：让文字排版更整齐

写文章需要分段，网页里的文字也一样，标签就是用来包段落的，段落之间会自动留空隙；想在段落里换行，用

标签，它是个单标签，不用写结束标签。

用法实例：

html

<p>这是第一段文字，用p标签包裹起来后，浏览器会自动在段落前后加空白，让页面更透气。p><p>这是第二段文字，<br>这里用br标签强制换了一行，适合在同一段里需要换行的情况，比如地址、诗歌之类的内容。p>

注意事项：

别用多个来代替分段，比如用隔开文字，这样不规范，段落就用，换行才用。
标签里可以放文字、链接、强调标签等，但不能放其他块级标签（比如另一个或）。

四、链接和图片：让网页能跳转、有画面

网页不能只有文字，还得能跳转到其他页面、能显示图片，这就需要标签和标签。

1. 链接标签：点一下就能跳走

html

<a href="https://www.baidu.com">点击去百度a><a href="about.html">关于我们a><a href="https://www.bilibili.com" target="_blank">B站（新窗口打开）a>

href属性是链接的目标地址，必须写；target="_blank"让链接在新窗口打开，不加的话会在当前窗口跳转。

2. 图片标签：展示图片

html

<img src="风景.jpg" alt="美丽的风景" width="300"><img src="https://img.example.com/cat.jpg" alt="可爱的猫" height="200">

src：图片的路径或链接，错了图片就显示不出来。
alt：图片加载失败时显示的文字，对搜索引擎也很重要，一定要写。
width/height：设置图片宽度高度，只写一个会按比例缩放，避免图片变形。

五、列表标签：让内容有条理，不杂乱

网页里的清单、步骤、选项等内容，用列表标签会更整齐，分有序列表和无序列表两种。

1. 无序列表：前面带圆点或方块

html

<ul><li>苹果li><li>香蕉li><li>橘子li>ul>

是无序列表容器，里面的每个项用包裹，默认前面是圆点，后面学 CSS 可以改成方块、空心圆等。

2. 有序列表：前面带数字或字母

html

<ol><li>打开电脑li><li>打开浏览器li><li>输入网址li>ol>

是有序列表容器，默认前面是数字，也可以通过属性改成字母（type="A"）或罗马数字（type="I"）。

用法场景：

无序列表适合列爱好、物品清单等没有顺序的内容。
有序列表适合列步骤、排名等有先后顺序的内容。

六、常用标签对比表：什么时候该用哪个标签？

标签	功能	示例	适合场景
`-`	标题层级	`章节标题`	页面标题、章节名
	段落	`一段文字`	正文内容、说明文字
	换行	`第一行第二行`	同一段内换行
	链接	`跳转`	页面跳转、下载链接
	图片		显示照片、图标
+	无序列表	`项1`	清单、选项
+	有序列表	`步骤1`	步骤、排名

七、实战小案例：用常用标签做一个简单网页

把上面学的标签组合起来，做一个个人介绍页试试：
html

DOCTYPE html><html><head><title>我的个人页title>head><body><h1>大家好，我是小明h1><h2>关于我h2><p>我是一名大学生，喜欢编程和旅行，<br>目前正在学习HTML，希望能做出好看的网页。p><h2>我的爱好h2><ul><li>编程li><li>旅行li><li>看电影li>ul><h2>我的照片h2><img src="myphoto.jpg" alt="我的照片" width="300"><h2>我的博客h2><a href="https://myblog.example.com" target="_blank">点击访问我的博客a>body>html>

这段代码包含了标题、段落、列表、图片和链接，保存成 HTML 文件打开，就是一个简单但完整的网页啦。试着改改里面的文字和图片路径，做成你自己的页面吧。

兔子哥的小建议

学 HTML 标签不用死记硬背，多写多练自然就记住了。建议新手准备一个练习文档，每天花 10 分钟写几个标签，比如今天练标题和段落，明天加链接和图片，慢慢积累。
遇到标签用错的情况别着急，浏览器会帮你 “纠错”，但可能显示效果不对，这时候对照标签功能一个个排查 —— 是不是标签没闭合？路径写错了？属性用错了？大部分问题都能这样找到原因。
其实常用的 HTML 标签就这十几个，掌握它们就能做出简单的网页了。后面学 CSS 美化时，这些标签会成为布局的基础，所以现在打好基础很重要。多动手写，多观察别人的网页结构，你会发现 HTML 其实没那么难，而且越用越顺手！

标签：浏览器零基础