HTML 核心标签全解析：从文本排版到媒体嵌入

在网页开发中，HTML（超文本标记语言）是构建页面结构的基石。掌握各类核心标签的用法，是实现页面内容有序呈现、提升用户体验的关键。本文将系统讲解 HTML 中最常用的几类标签 —— 段落标签、文本格式标签、列表标签、表格（table）标签、媒体标签及超链接标签，结合实例代码与效果说明，帮助初学者快速上手。

一、段落标签：实现文本结构化排版

段落标签是 HTML 中用于定义文本段落的基础标签，核心作用是将文本内容分割为逻辑独立的区块，让页面布局更清晰。

1. 核心段落标签：``

标签是定义段落的标准标签，浏览器会自动在标签包裹的内容前后添加空白（默认 margin），区分不同段落。

<p>这是一个完整的段落内容，浏览器会自动为段落添加上下间距。</p>
<p>这是第二个段落，通过<p>标签可以轻松实现文本的分段展示，提升可读性。</p>

效果说明：两个段落之间会有明显的垂直间距，避免文本堆积。

2. 换行标签：` `

当需要在段落内部强制换行（而非新建段落）时，使用 标签。它是单标签（无需闭合），仅表示 “此处换行”。

<p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>

效果说明：诗句每句后会强制换行，呈现古诗的分行格式，且整体仍属于一个段落（无段落间的大间距）。

3. 水平线标签：`<hr>`

<hr>标签用于在页面中插入一条水平线，常用于分隔不同主题的内容（如章节分割），同样是单标签。

<p>以上是第一章节内容</p>
<hr>
<p>以下是第二章节内容</p>

效果说明：两段文本之间会显示一条横贯页面的水平线，视觉上划分内容模块。

二、文本格式标签：美化与强调文本

文本格式标签用于调整文本的样式（如粗细、斜体）或赋予文本特殊含义（如强调、引用），让内容更具层次感。

1. 常用文本格式标签汇总

下表整理了 HTML 中最常用的文本格式标签，包含标签功能、语法及实例：

标签	功能描述	语法示例	效果预览
`<b>`	文本加粗（仅视觉效果）	`<b>这是加粗文本</b>`	这是加粗文本
`<strong>`	文本加粗（强调语义，推荐）	`<strong>这是强调的加粗文本</strong>`	这是强调的加粗文本
`<i>`	文本斜体（仅视觉效果）	`<i>这是斜体文本</i>`	这是斜体文本
`<em>`	文本斜体（强调语义，推荐）	`<em>这是强调的斜体文本</em>`	这是强调的斜体文本
`<u>`	文本下划线	`<u>这是带下划线的文本</u>`	这是带下划线的文本
`<s>`	文本删除线	`<s>这是带删除线的文本</s>`	<s>这是带删除线的文本</s>
`<sup>`	上标文本（如公式、注释）	`x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup>`	x² + y² = r²
`<sub>`	下标文本（如化学公式）	`H<sub>2</sub>O`	H₂O
`<code>`	代码片段（等宽字体）	`<code>console.log("Hello HTML")</code>`	`console.log("Hello HTML")`

2. 语义化建议

优先使用和而非和：前者不仅有视觉效果，还能向搜索引擎、屏幕阅读器传递 “强调” 的语义，提升页面可访问性。

<code>标签通常配合<pre>标签使用（<pre>保留文本中的空格和换行），用于展示多行代码：

<pre><code>// 计算两数之和function add(a, b) {return a + b;}</code>
</pre>

三、列表标签：有序与无序列表的应用

列表标签用于将相关内容以 “列表” 形式呈现，分为无序列表（内容无先后顺序）和有序列表（内容有明确顺序）两类，此外还有用于定义术语的定义列表。

1. 无序列表：`<ul>` + `<li>`

无序列表由<ul>（unordered list）作为容器，内部每个列表项用<li>（list item）包裹，默认以 “圆点” 作为列表项标记（可通过 CSS 修改）。

实例：网页导航菜单（无序列表常见场景）

<!-- 导航菜单 -->
<ul style="list-style-type: none; display: flex; gap: 20px;"><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li><a href="#about">关于我们</a></li><li><a href="#contact">联系我们</a></li>
</ul>

说明：

list-style-type: none：取消默认圆点标记；

display: flex：将列表项横向排列（默认纵向），实现导航栏效果。

2. 有序列表：`<ol>` + `<li>`

有序列表由<ol>（ordered list）作为容器，列表项同样用<li>包裹，默认以 “数字” 作为标记（可修改为字母、罗马数字等）。

实例：步骤说明（有序列表常见场景）

<!-- 泡茶步骤 -->
<ol start="1" type="1"><li>烧开水至80℃（绿茶）或95℃（红茶）；</li><li>将茶叶放入茶壶或茶杯中；</li><li>倒入热水，浸泡3-5分钟；</li><li>待茶汤变色后即可饮用。</ol>

关键属性：

start：指定列表起始数字（如start="3"表示从 3 开始）；

type：指定标记类型（1：数字，A：大写字母，a：小写字母，I：大写罗马数字，i：小写罗马数字）。

3. 定义列表：`<dl>` + `<dt>` + `<dd>`

定义列表用于 “术语 - 解释” 场景，由<dl>（definition list）作为容器，<dt>（definition term）定义术语，<dd>（definition description）定义术语解释。

实例：HTML 术语解释

<dl><dt>HTML</dt><dd>超文本标记语言（HyperText Markup Language），用于构建网页结构。</dd><dt>CSS</dt><dd>层叠样式表（Cascading Style Sheets），用于美化网页样式。</dd><dt>JavaScript</dt><dd>一种脚本语言，用于实现网页交互功能（如点击事件、表单验证）。</dd>
</dl>

效果说明：<dd>内容会默认缩进，与<dt>术语形成视觉区分。

四、表格标签（table）：结构化展示数据

表格标签用于以 “行 - 列” 形式展示结构化数据（如报表、课程表、商品属性），核心标签包括<table>（表格容器）、<tr>（表格行）、<td>（表格单元格），以及用于表头的<th>标签。

1. 表格基础结构

一个完整的表格通常包含 “表头” 和 “表体”，基础语法如下：

<table border="1" width="600" align="center"><!-- 表头行 --><tr><th>姓名</th><th>年龄</th><th>职业</th><th>所在城市</th></tr><!-- 表体行1 --><tr><td>张三</td><td>28</td><td>前端开发工程师</td><td>北京</td></tr><!-- 表体行2 --><tr><td>李四</td><td>32</td><td>产品经理</td><td>上海</td></tr>
</table>

核心标签说明：

<table>：表格容器，border="1"表示显示表格边框（默认无边框）；

<tr>：定义表格的一行（table row），每个<tr>包含若干<td>或<th>；

<th>：表头单元格（table header），默认文本居中、加粗；

<td>：普通单元格（table data），默认文本左对齐。

2. 表格进阶：单元格合并

当需要合并多行或多列单元格时，使用rowspan（跨行合并）和colspan（跨列合并）属性。

实例：带合并单元格的课程表

<table border="1" width="800" align="center"><tr><th colspan="2">时间/日期</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="2">上午</td><td>9:00-10:30</td><td>HTML</td><td>CSS</td><td>JavaScript</td><td>HTML</td><td>CSS</td></tr><tr><td>10:50-12:20</td><td>CSS</td><td>JavaScript</td><td>HTML</td><td>CSS</td><td>JavaScript</td></tr><tr><td colspan="7" align="center">下午：自由练习（14:00-17:00）</td></tr>
</table>

属性说明：

colspan="2"：表示当前单元格跨 2 列；

rowspan="2"：表示当前单元格跨 2 行；

align="center"：设置单元格内容水平居中（建议后续用 CSS 替代）。

五、媒体标签：嵌入图片、音频与视频

HTML5 新增了原生媒体标签，支持无需插件直接嵌入图片、音频和视频，极大简化了媒体内容的展示流程。

1. 图片标签：`<img>`

<img>标签用于在页面中插入图片，是单标签，核心属性包括src（图片路径）和alt（图片加载失败时的替代文本）。

语法格式与实例：

<!-- 插入本地图片（相对路径） -->
<img src="./images/flower.jpg" alt="一朵红色的花" width="400" height="300" title="花朵"><!-- 插入网络图片（绝对路径） -->
<img src="https://example.com/animal/dog.jpg" alt="一只可爱的小狗" width="400">

核心属性说明：

src：必填属性，指定图片的路径（相对路径：相对于当前 HTML 文件的位置；绝对路径：完整的 URL 地址）；

alt：必填属性，图片加载失败或屏幕阅读器访问时显示的文本，提升可访问性；

width/height：可选属性，设置图片宽度 / 高度（单位：像素 px），仅设置一个属性时，图片会按比例缩放；

title：可选属性，鼠标悬停在图片上时显示的提示文本。

2. 音频标签：`<audio>`

<audio>标签用于嵌入音频文件（如 MP3、WAV），支持控制播放、暂停等功能，需配合<source>标签指定不同格式的音频文件（兼容不同浏览器）。

实例：嵌入音频并显示控制栏

<audio controls autoplay loop preload="auto"><source src="./audio/music.mp3" type="audio/mpeg"><source src="./audio/music.wav" type="audio/wav">您的浏览器不支持音频播放，请升级浏览器。
</audio>

核心属性说明：

controls：显示音频控制栏（播放 / 暂停、音量、进度条）；

autoplay：页面加载完成后自动播放（部分浏览器需用户交互后才生效，避免扰民）；

loop：音频播放完毕后自动循环；

preload：指定音频预加载方式（auto：自动预加载；none：不预加载；metadata：仅预加载音频信息，如时长）；

<source>：指定多个音频格式，浏览器会选择第一个支持的格式播放；

标签内部的文本：浏览器不支持<audio>标签时显示的提示信息。

3. 视频标签：`<video>`

<video>标签用于嵌入视频文件（如 MP4、WebM），用法与<audio>类似，支持控制播放、全屏等功能。

实例：嵌入视频并设置尺寸

<video controls width="800" height="450" poster="./images/video-cover.jpg"><source src="./video/movie.mp4" type="video/mp4"><source src="./video/movie.webm" type="video/webm">您的浏览器不支持视频播放，请升级浏览器。
</video>

核心属性补充：

poster：视频加载前显示的封面图片（如视频第一帧截图）；

width/height：设置视频播放器的宽度 / 高度，视频会按比例缩放；

其他属性（controls/autoplay/loop/preload）与<audio>标签一致。

六、超链接标签：实现页面跳转与资源链接

超链接（<a>标签）是 HTML “超文本” 特性的核心，用于实现页面内跳转、跨页面跳转、下载资源等功能，是连接不同网页的桥梁。

1. 超链接基础语法

<a>标签通过href属性指定链接目标，标签内部的文本或图片即为 “可点击的链接载体”。

语法格式：

<a href="目标地址" target="打开方式">链接文本/图片</a>

2. 常见链接类型与实例

（1）跨页面跳转（外部链接）

链接到其他网站或同一网站的其他页面，href为目标页面的 URL 或相对路径。

<!-- 链接到外部网站（绝对路径） -->
<a href="https://www.csdn.net" target="_blank">访问CSDN（新窗口打开）</a><!-- 链接到同一网站的其他页面（相对路径） -->
<a href="./about.html" target="_self">查看“关于我们”页面（当前窗口打开）</a>

（2）页面内跳转（锚点链接）

用于跳转到当前页面的指定位置（如长文档的章节导航），需先定义 “锚点”，再通过href="#锚点名称"链接到锚点。

<!-- 1. 定义锚点（两种方式） -->
<!-- 方式1：使用id属性（推荐，支持所有标签） -->
<h2 id="chapter1">第一章：HTML基础</h2><!-- 方式2：使用<a name="锚点名称">（旧方式，仅支持<a>标签） -->
<a name="chapter2"></a>
<h2>第二章：CSS样式</h2><!-- 2. 链接到锚点 -->
<a href="#chapter1">跳转到第一章</a>
<a href="#chapter2">跳转到第二章</a><!-- 3. 从其他页面跳转到当前页面的锚点 -->
<a href="./index.html#chapter1">从首页跳转到第一章</a>

（3）下载链接

当href指向的是文件（如 ZIP、PDF）且浏览器无法直接解析时，点击链接会触发文件下载；若需强制下载，可添加download属性。

<!-- 浏览器无法解析的文件，自动触发下载 -->
<a href="./files/HTML教程.zip">下载HTML教程（ZIP）</a><!-- 强制下载（即使浏览器可解析，如PDF） -->
<a href="./files/简历.pdf" download="我的简历.pdf">下载简历（PDF）</a>

说明：download属性的值为下载文件的默认名称（可选，若不指定则使用原文件名）。

（4）空链接与邮件链接

空链接：暂时未确定目标地址时，用href="#"（点击后会回到页面顶部）或href="javascript:;"（点击后无任何动作）。

<a href="#">暂未开放（点击回到顶部）</a>
<a href="javascript:;">暂未开放（点击无动作）</a>

邮件链接：href以mailto:开头，点击后会调用系统默认邮件客户端，发送邮件到指定地址

<a href="mailto:example@csdn.net">发送邮件到example@csdn.net</a>
<!-- 带默认主题和内容 -->
<a href="mailto:example@csdn.net?subject=咨询HTML问题&body=您好，我想咨询关于...">发送咨询邮件</a>

3. `target`属性详解

target属性用于指定链接的打开方式，常用值如下：

target 值	功能描述
`_self`	默认值，在当前窗口 / 标签页打开目标页面
`_blank`	在新窗口 / 标签页打开目标页面（推荐添加`rel="noopener noreferrer"`提升安全性）
`_parent`	在父框架中打开目标页面（用于框架页面）
`_top`	在顶层框架中打开目标页面（打破框架嵌套）
自定义名称	在指定名称的框架 / 窗口中打开目标页面

安全建议：使用target="_blank"时，建议添加rel="noopener noreferrer"，防止新页面通过window.opener获取原页面的控制权，避免安全风险。

<a href="https://www.csdn.net" target="_blank" rel="noopener noreferrer">访问CSDN（安全新窗口打开）</a>

总结

本文详细讲解了 HTML 中 6 类核心标签的用法，从文本排版（段落、文本格式）到结构化数据（列表、表格），再到媒体嵌入（图片、音频、视频）和页面连接（超链接），覆盖了网页开发的基础场景。

学习 HTML 的关键在于理解标签的语义（如强调语义而非仅加粗）和实用性（如表格用于数据展示，列表用于导航），后续结合 CSS（样式）和 JavaScript（交互），可进一步实现更丰富的网页效果。建议通过 “编写代码 + 浏览器预览” 的方式反复练习，逐步掌握标签的灵活应用。