常用标签详解
🎯 引言
在学会这篇文章之后，你将能够清楚地知道 HTML 中哪些标签是构建网页内容最常用、最基础的部分。比如我们打开一个网页，最常见的内容不就是标题、文字段落、图片、链接这些吗？这些“可见”的内容，都是通过 HTML 内容标签编写出来的。
无论你是准备搭建自己的博客，还是要写产品介绍页面，又或者只是想学前端做点页面原型，这些内容标签都是必须掌握的。我们这篇文章就围绕这些标签，一个一个讲透彻，举例子、上代码，还提供练习帮助你快速上手！
🧱 什么是网页内容标签？
简单来说，内容标签就是控制网页中“看得见的内容”的标签。比如页面中的文字、图片、链接、段落等等，全部都是靠这些标签来呈现。
它们不像结构标签 <div> 或者 <section> 那样只负责结构，它们是真正“写内容”的主力。
| 分类 | 标签 | 作用说明 |
|---|---|---|
| 标题 | <h1> ~ <h6> | 控制标题大小、层级 |
| 段落 | <p> | 一段文字段落 |
| 加粗 | <strong> | 强调某些关键词 |
| 换行 | <br> | 插入一个换行 |
| 图片 | <img> | 插入图片 |
| 超链接 | <a> | 跳转到其他页面或地址 |
🏷️ 标题标签
标题标签就是网页中的各种标题文本，比如文章题目、大标题、小节标题等。
HTML 提供了六种标题标签，分别是：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
浏览器默认会把 <h1> 显示得最大、最粗，后面依次变小。这些标签不仅是样式，也能提升网页语义，对搜索引擎 SEO 很重要。
<h1> ，表示网站重要标题。<h2>~<h6> 表示副标题、小标题，根据内容分层次使用。📑 段落标签
段落标签非常简单，使用 <p> 标签就能写一段文字。
<p>这是第一段文字。</p>
<p>这是第二段文字。</p>
每个 <p> 都会自动换行并有一定的上下边距。
<p> 中嵌套块级元素（比如 <div> 或 <h1>），会引发浏览器解析问题。🖋️ 文字样式：加粗与换行
加粗文本
想要让某段文字更醒目，我们可以使用 <strong> 或 <b>：
<p>我今天学会了 <strong>HTML 内容标签</strong>。</p>
区别在于：
| 标签 | 含义 |
|---|---|
<strong> | 表示语义强调 |
<b> | 只是加粗，不强调语义 |
推荐使用 <strong>，因为更语义化。
换行标签 <br>
换行不用写新段落，可以使用 <br>：
<p>
第一行内容<br />
第二行内容
</p>
常用于诗歌、地址、或表单中信息断行。
🖼️ 插入图片
插图是网页内容的重要组成部分，HTML 提供了 <img> 标签来插入图片。
<img src="https://example.com/logo.png" alt="网站 Logo" />
| 属性 | 说明 |
|---|---|
| src | 图片路径（可以是网络或本地） |
| alt | 替代文字（图片加载失败时显示） |
<img> 是单标签，不需要闭合标签。alt 对无障碍访问和 SEO 也有帮助。🔗 超链接
超链接标签是 <a>，可以用来跳转页面、打开文件或拨打电话等。
<a href="https://www.baidu.com">访问百度</a>
| 属性 | 说明 |
|---|---|
| href | 要跳转的地址 |
| target | 设置在哪打开链接，_blank 表示新窗口 |
示例：
<a href="https://www.baidu.com" target="_blank">在新窗口打开百度</a>
还可以用来：
- 下载文件：
<a href="文件.pdf" download>下载文件</a> - 打电话：
<a href="tel:1234567890">拨打电话</a> - 发邮件：
<a href="mailto:test@example.com">发送邮件</a>
🧾 小节总结
- 内容标签是构建网页可见内容的关键标签，包含标题、段落、图片、链接等；
<h1>~<h6>控制标题大小和结构，有助于页面语义；<p>标签定义段落，<strong>表示强调，加粗更有语义；<img>插入图片，必须写src和alt；<a>用于跳转链接，target="_blank"可新标签打开。
❓ 知识问答（Q&A）
Q：标题标签可以跳着用吗，比如直接用 <h3> 开头？
A：不建议这么做。应当从 <h1> 开始，依次使用，保持层级结构清晰。
Q：<b> 和 <strong> 有什么区别？
A：<b> 是纯样式标签，只加粗没语义；而 <strong> 表示强调语义，搜索引擎也会重点识别。
Q：一张图片一定要写 alt 属性吗？
A：不是必须，但强烈推荐写，方便无障碍浏览，也对 SEO 有好处。
🧪 小练习
练习 1：创建一个简单的介绍页面
<h1>欢迎来到我的网站</h1>
<p>我是一个正在学习 HTML 的新手。</p>
<p>我喜欢的内容包括：</p>
<p>
编程<br />
设计<br />
摄影
</p>
<img src="https://via.placeholder.com/200" alt="我的照片" />
<a href="https://www.example.com" target="_blank">访问我的作品集</a>
请拷贝到编辑器中去尝试预览体验吧！
练习 2：产品介绍模块
<h2>超值手机推荐</h2>
<p><strong>Phone 100</strong> 是一款性价比极高的智能手机，适合日常使用。</p>
<img src="phone.img" alt="Phone 100" />
<p>更多信息请点击：<a href="https://www.mi.com" target="_blank">xx官网</a></p>
请拷贝到编辑器中去尝试预览体验吧！
🎉 恭喜你已经掌握/学会 标题标签、段落标签、加粗换行、图片插入、超链接 这些网页内容的基础标签啦！继续保持练习，你会越来越熟练地写出结构清晰、内容丰富的网页页面哦！