【前端开发之HTML】（三）HTML 常见标签（下）：图文、链接与实战，解锁网页交互新姿势！

_OP_CHEN

发布于 2026-01-22 10:02:33

2930

文章被收录于专栏：C++C++

前言

在上一篇文章中，我们掌握了 HTML 基础排版标签（注释、标题、段落、换行），搭建了简单的博客页面骨架。但一个生动的网页绝不止于文字排版 —— 还需要图文并茂的展示、灵活跳转的链接、突出重点的文本格式。今天这篇文章，就带大家解锁格式化标签、图片标签、超链接标签的核心用法，让你的网页从 “骨架” 变身 “有血有肉” 的交互页面！下面就让我们正式开始吧！

一、格式化标签：让文本重点突出，样式更丰富

在网页中，我们常常需要强调某些文本（如关键词加粗、重要提示倾斜）、标注失效内容（如原价删除线）或补充说明（如下划线），这时候就需要用到格式化标签。HTML 提供了多组格式化标签，虽然 CSS 也能实现类似效果，但在无需复杂样式的场景下，格式化标签简单直接、语义清晰，是提升文本可读性的好帮手。

1. 格式化标签分类与语法

HTML 格式化标签主要分为 4 类：加粗、倾斜、删除线、下划线，每类都有两组功能相同但语义略有差异的标签，具体如下：

功能	标签组 1（推荐，带语义）	标签组 2（仅样式，无语义）	语法示例
加粗	<strong>	<b>	<strong>这是加粗文本</strong><b>这也是加粗文本</b>
倾斜	<em>	<<i>	<em>这是倾斜文本</em><<i>这也是倾斜文本</</i>
删除线	<del>	<s>	<del>这是带删除线的文本</del><s>这也是带删除线的文本</s>
下划线	<ins>	<u>	<ins>这是带下划线的文本</ins><u>这也是带下划线的文本</u>

完整代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML格式化标签演示</title>
    <style>
        body {
            font-size: 18px;
            line-height: 2;
            padding: 20px;
        }
        .tag-group {
            margin: 30px 0;
            padding: 15px;
            border-left: 4px solid #3498db;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <h2>一、加粗标签</h2>
    <div class="tag-group">
        <p>语义化加粗（强调重要性）：<strong>前端开发核心技术：HTML、CSS、JavaScript</strong></p>
        <p>纯样式加粗（仅改变外观）：<b>本课程共12周，每周5课时</b></p>
    </div>

    <h2>二、倾斜标签</h2>
    <div class="tag-group">
        <p>语义化倾斜（强调语气）：<em>注意：请在提交前仔细检查表单信息</em></p>
        <p>纯样式倾斜（仅改变外观）：<<i>温馨提示：本活动最终解释权归主办方所有</</i></p>
    </div>

    <h2>三、删除线标签</h2>
    <div class="tag-group">
        <p>语义化删除线（表示失效/废弃）：<del>原价：¥999</del></p>
        <p>纯样式删除线（仅改变外观）：<s>旧活动时间：2024年1月1日-1月7日</s></p>
    </div>

    <h2>四、下划线标签</h2>
    <div class="tag-group">
        <p>语义化下划线（表示补充/插入）：<ins>新增功能：支持手机号快捷登录</ins></p>
        <p>纯样式下划线（仅改变外观）：<u>联系邮箱：service@example.com</u></p>
    </div>

    <h2>五、标签组合使用</h2>
    <div class="tag-group">
        <p>组合效果1：<strong><em>紧急通知：系统将于今晚23:00-次日2:00进行维护</em></strong></p>
        <p>组合效果2：<del>原价：¥599</del> <strong>现价：¥399</strong> <ins>（限时3天）</ins></p>
    </div>
</body>
</html>

运行效果如下：

2. 两组标签的核心区别：语义化 vs 纯样式

很多新手会疑惑：既然两组标签功能相同，为什么要存在两种写法？关键在于语义化—— 这是前端开发中非常重要的概念，影响网页的 SEO（搜索引擎优化）和可访问性（如屏幕阅读器对内容的解读）。

带语义的标签（、、<del>、<ins>）：不仅改变文本样式，还传递了明确的语义。
- ：表示文本 “重要性强”，搜索引擎会优先抓取这类文本中的关键词；
- ：表示文本 “语气强调”，屏幕阅读器会加重语气朗读；
- <del>：表示文本 “已删除、失效”，如商品原价、废弃的活动规则；
- <ins>：表示文本 “新增、插入”，如补充说明、新增功能提示。
纯样式标签（、<、<s>、）：仅改变文本外观，不传递任何语义，相当于 “单纯的样式装饰”。

推荐用法：优先使用带语义的标签（、、<del>、<ins>），让代码更具可读性和语义化；如果只是单纯需要改变文本样式（无任何强调或补充含义），建议使用 CSS（如font-weight: bold、font-style: italic）而非纯样式标签，让 HTML 专注于结构，CSS 专注于样式。

3. 格式化标签的使用场景

（1）加粗标签：突出核心信息

文章标题、小标题中的关键词；
商品价格、优惠信息；
重要提示、警告文本；
示例：

<p>本产品支持<strong>7天无理由退换</strong>、<strong>两年质保</strong>，让您购物无忧！</p>

运行效果如下：

（2）倾斜标签：强调语气或补充说明

温馨提示、注意事项；
引用他人话语、书籍 / 电影名称；
技术术语的补充说明；
示例：

<p>正如乔布斯所说：<em>“Stay hungry, stay foolish.”</em></p>
<p>我们使用的开发工具是<i>Visual Studio Code</</i>（简称VS Code）</p>

运行效果：

（3）删除线标签：标注失效内容

商品原价（配合现价使用）；
过期的活动时间、规则；
废弃的版本号、功能说明；
示例：

<p>活动特惠：<del>原价¥199</del> 现价¥99，立省100元！</p>
<p><del>旧版本：V2.0（已停止维护）</del> 最新版本：V3.0</p>

运行效果如下：

（4）下划线标签：补充或强调关键信息

新增功能、更新日志；
联系方式、重要链接（不建议用下划线表示链接，避免与默认链接样式冲突）；
需要突出的关键词（如表单中的必填项提示）；
示例：

<p>更新日志：<ins>1. 修复了登录失效问题；2. 优化了页面加载速度</ins></p>
<p>必填项：<ins>*</ins> 姓名 <ins>*</ins> 手机号 <ins>*</ins> 验证码</p>

运行效果：

4. 常见问题与注意事项

（1）不要过度使用格式化标签

避免将整段文本加粗或倾斜，否则会失去 “强调” 的意义，反而降低可读性；
示例（错误）：

<!-- 错误：整段加粗，无法突出重点 -->
<strong>前端开发是创建Web页面或应用程序的过程，主要涉及HTML、CSS和JavaScript三大核心技术。HTML负责构建页面结构，CSS负责美化页面，JavaScript负责实现交互功能。</strong>

示例（正确）：

<!-- 正确：仅加粗核心关键词 -->
前端开发是创建Web页面或应用程序的过程，主要涉及<strong>HTML</strong>、<strong>CSS</strong>和<strong>JavaScript</strong>三大核心技术。HTML负责构建页面结构，CSS负责美化页面，JavaScript负责实现交互功能。

（2）避免嵌套过深

格式化标签最多嵌套 2-3 层，嵌套过深会导致代码混乱、可读性差；
示例（不推荐）：

<strong><em><ins><del>这是嵌套过深的文本</del></ins></em></strong>

（3）下划线与链接样式冲突

浏览器默认的链接样式是 “蓝色 + 下划线”，因此不建议用<ins>或标签给非链接文本加下划线，避免用户混淆；
若需给非链接文本加下划线，建议用 CSS 的text-decoration: underline，并修改颜色以区分链接。

5. 格式化标签与 CSS 样式的对比

虽然格式化标签使用方便，但在实际开发中，CSS 样式更灵活、可控性更强。以下是常用格式化效果的 CSS 实现方式，大家可以根据需求选择：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS实现格式化效果</title>
    <style>
        .bold {
            font-weight: bold; /* 加粗（normal：默认，bold：加粗，bolder：更粗，100-900：细到粗） */
        }
        .italic {
            font-style: italic; /* 倾斜（normal：默认，italic：倾斜，oblique：倾斜（更强调）） */
        }
        .line-through {
            text-decoration: line-through; /* 删除线 */
        }
        .underline {
            text-decoration: underline; /* 下划线（none：无，underline：下划线，overline：上划线，line-through：删除线） */
        }
        .custom-format {
            font-weight: 700;
            color: #e74c3c;
            text-decoration: underline dotted #3498db; /* 虚线下划线 */
        }
    </style>
</head>
<body>
    <p class="bold">CSS实现加粗</p>
    <p class="italic">CSS实现倾斜</p>
    <p class="line-through">CSS实现删除线</p>
    <p class="underline">CSS实现下划线</p>
    <p class="custom-format">CSS实现自定义格式化效果（加粗+红色+蓝色虚线下划线）</p>
</body>
</html>

运行效果如下：

总结：简单的强调效果可以用 HTML 格式化标签（优先语义化标签），复杂的自定义样式（如颜色、线型、粗细）建议用 CSS 实现，遵循 “HTML 管结构，CSS 管样式” 的开发原则。

二、图片标签：<img>，让网页图文并茂

图片是网页的重要组成部分，能让页面更生动、信息传递更直观。HTML 中使用<img>标签插入图片，它是单标签（无需结束标签），但必须通过属性指定图片路径、替换文本等关键信息。

1. 图片标签的核心属性

<img>标签的属性是实现图片展示的关键，常用属性如下：

属性	作用	必选 / 可选	说明
src	指定图片路径（相对路径 / 绝对路径）	必选	图片的 “地址”，浏览器通过该路径加载图片
alt	图片加载失败时的替换文本	推荐	提升可访问性（屏幕阅读器会朗读），帮助 SEO
title	鼠标悬浮在图片上时的提示文本	可选	补充图片说明，提升用户体验
width	设置图片宽度	可选	单位：px（像素），仅设置 width 时，height 会等比例缩放
height	设置图片高度	可选	单位：px（像素），仅设置 height 时，width 会等比例缩放
border	设置图片边框宽度	可选	单位：px（像素），默认无边框，建议用 CSS 设置边框样式

核心属性代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片标签核心属性演示</title>
    <style>
        body {
            padding: 20px;
        }
        .img-demo {
            margin: 20px;
            border: 1px solid #eee;
            padding: 10px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <h2>1. 基础用法（src + alt）</h2>
    <div class="img-demo">
        <img src="rose.jpg" alt="红色玫瑰花" class="img1">
        <p>说明：图片路径正确时显示图片，路径错误时显示“红色玫瑰花”</p>
    </div>

    <h2>2. 带提示文本（title）</h2>
    <div class="img-demo">
        <img src="rose.jpg" alt="红色玫瑰花" title="这是一朵盛开的红玫瑰" class="img2">
        <p>说明：鼠标悬浮在图片上，会显示提示文本</p>
    </div>

    <h2>3. 设置宽高（width/height）</h2>
    <div class="img-demo">
        <img src="rose.jpg" alt="红色玫瑰花" width="300px" class="img3">
        <p>说明：仅设置width=300px，height自动等比例缩放</p>
    </div>

    <h2>4. 设置边框（border）</h2>
    <div class="img-demo">
        <img src="rose.jpg" alt="红色玫瑰花" width="200px" border="3px" class="img4">
        <p>说明：border=3px，显示3像素宽的边框（默认黑色）</p>
    </div>

    <h2>5. 路径错误演示（alt的作用）</h2>
    <div class="img-demo">
        <img src="wrong-path.jpg" alt="红色玫瑰花" class="img5">
        <p>说明：图片路径错误，显示alt文本“红色玫瑰花”</p>
    </div>
</body>
</html>

运行效果如下：

2. 图片路径：相对路径 vs 绝对路径

src属性的核心是正确指定图片路径，否则浏览器无法加载图片。图片路径分为相对路径和绝对路径，适用于不同场景。

（1）相对路径：以 HTML 文件所在位置为基准

相对路径是指图片相对于当前 HTML 文件的位置，无需完整路径，仅适用于本地图片（同一项目中的图片）。根据图片与 HTML 文件的目录关系，分为 3 种情况：

目录关系	路径写法	示例
同级目录（图片与 HTML 文件在同一文件夹）	直接写图片文件名（或./图片文件名）	src="rose.jpg" 或 src="./rose.jpg"
下一级目录（图片在 HTML 文件的子文件夹中）	文件夹名 / 图片文件名	src="images/rose.jpg"（HTML 文件同级有 images 文件夹，图片在 images 中）
上一级目录（图片在 HTML 文件的父文件夹中）	../图片文件名或 ../文件夹名/图片文件名	src="../rose.jpg"（图片在 HTML 文件的父文件夹中）src="../images/rose.jpg"（图片在父文件夹的 images 中）

目录结构示例：

project/
├── index.html（当前HTML文件）
├── rose.jpg（同级目录图片）
├── images/（下一级目录）
│   ├── lily.jpg（下一级目录图片）
│   └── flower/
│       └── sunflower.jpg（下两级目录图片）
└── parent/（上一级目录的父文件夹）
    └── tulip.jpg（上一级目录图片）

对应路径写法：

<!-- 同级目录：rose.jpg -->
<img src="rose.jpg" alt="玫瑰">
<img src="./rose.jpg" alt="玫瑰"> <!-- 等价于上面的写法 -->

<!-- 下一级目录：images/lily.jpg -->
<img src="images/lily.jpg" alt="百合">

<!-- 下两级目录：images/flower/sunflower.jpg -->
<img src="images/flower/sunflower.jpg" alt="向日葵">

<!-- 上一级目录：parent/tulip.jpg -->
<img src="../parent/tulip.jpg" alt="郁金香">

（2）绝对路径：完整的图片地址

绝对路径是指图片的完整地址，包括协议（http/https）、域名、文件路径，适用于网络图片或本地磁盘中任意位置的图片。

绝对路径类型	写法示例	说明
网络图片路径	src="https://example.com/images/rose.jpg"	图片存储在网络服务器上，需确保链接有效
本地磁盘路径	src="D:/project/images/rose.jpg"	图片存储在本地电脑磁盘中，路径需完整（建议用/而非\，避免转义问题）

代码示例：

<!-- 网络图片绝对路径 -->
<img src="https://images.unsplash.com/photo-1509909756405-be0199881695?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="风景图" width="500px">

<!-- 本地磁盘绝对路径 -->
<img src="D:/photos/pet.jpg" alt="宠物图片" width="300px">

（3）相对路径与绝对路径的对比

路径类型	优点	缺点	适用场景
相对路径	简洁、灵活，项目迁移时无需修改路径	仅适用于同一项目中的图片，路径层级复杂时易出错	本地项目开发、图片与 HTML 文件在同一项目
绝对路径	路径明确，无需考虑 HTML 文件位置	网络图片依赖链接有效性，本地路径迁移项目后失效	引用网络图片、本地磁盘中固定位置的图片

开发建议：本地项目开发优先使用相对路径，便于项目迁移和部署；引用网络图片时使用绝对路径，但需确保图片链接长期有效（建议使用稳定的图片 CDN）。

3. 图片标签的使用技巧

（1）保持图片比例，避免变形

仅设置width或height中的一个属性，另一个会自动等比例缩放，避免图片拉伸变形；
示例（正确）：

<!-- 仅设置宽度，高度自动缩放 -->
<img src="rose.jpg" alt="玫瑰" width="400px">

示例（错误）：

<!-- 同时设置宽高，可能导致图片变形 -->
<img src="rose.jpg" alt="玫瑰" width="400px" height="300px">

（2）优化图片加载体验

必加alt属性：图片加载失败时显示替换文本，避免页面出现空白区域，同时提升 SEO；
合理设置图片尺寸：根据页面布局需求压缩图片（如使用 PS、 TinyPNG 等工具），避免大图片拖慢页面加载速度；
示例：

<!-- 优化后的图片标签 -->
<img src="compressed-rose.jpg" alt="红色玫瑰花" width="300px" title="点击查看大图">

（3）图片边框美化（用 CSS 替代 border 属性）

<img>标签的border属性仅能设置边框宽度，样式单一，建议用 CSS 设置边框样式（颜色、圆角、阴影等）；
示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS美化图片边框</title>
    <style>
        .img-border {
            width: 300px;
            border: 2px solid #3498db; /* 边框颜色 */
            border-radius: 8px; /* 圆角 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影 */
            padding: 5px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <img src="rose.jpg" alt="玫瑰" class="img-border">
</body>
</html>

运行效果：

（4）响应式图片（适配不同设备）

为图片添加max-width: 100%，让图片在小屏幕设备上自动缩小，避免横向滚动；
示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式图片</title>
    <style>
        .responsive-img {
            max-width: 100%;
            height: auto; /* 高度自动缩放 */
        }
    </style>
</head>
<body>
    <div style="width: 50%; margin: 0 auto;">
        <img src="rose.jpg" alt="玫瑰" class="responsive-img">
    </div>
</body>
</html>

4. 常见问题与解决方案

（1）图片加载失败（显示破碎图标）

原因 1：src路径错误（最常见）；
- 解决方案：检查图片文件名（大小写敏感）、目录层级是否正确，相对路径是否以 HTML 文件为基准；
原因 2：图片文件损坏；
- 解决方案：用图片查看器打开图片，确认文件可正常显示，若损坏需重新获取图片；
原因 3：网络图片链接失效；
- 解决方案：更换有效的网络图片链接，或下载图片到本地使用相对路径引用。

（2）图片显示变形

原因：同时设置了width和height，且比例与图片原始比例不一致；
解决方案：仅设置width或height中的一个，或确保设置的宽高比例与图片原始比例一致。

（3）中文文件名图片加载失败

原因：部分服务器或浏览器对中文文件名支持不佳；
解决方案：将图片文件名改为英文或数字（推荐），或对中文文件名进行 URL 编码（复杂，不推荐）。

三、超链接标签：<a>，实现网页跳转与交互

超链接是网页的灵魂，能将多个页面、网站、资源连接起来，实现用户在不同内容之间的跳转。HTML 中使用<a>标签创建超链接，核心属性是href（指定跳转目标）和target（指定打开方式）。

1. 超链接标签的核心属性

<a>标签的常用属性如下：

属性	作用	必选 / 可选	说明
href	指定跳转目标（链接地址）	必选	可跳转至网页、文件、锚点、邮箱、电话等
target	指定链接打开方式	可选	_self：默认值，在当前标签页打开；_blank：在新标签页打开；_parent：在父框架打开；_top：在顶层框架打开
title	鼠标悬浮在链接上时的提示文本	可选	补充链接说明，提升用户体验

核心属性代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接核心属性演示</title>
    <style>
        body {
            font-size: 18px;
            line-height: 2.5;
            padding: 20px;
        }
        a {
            color: #3498db;
            text-decoration: none;
        }
        a:hover {
            color: #e74c3c;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h2>1. 默认打开方式（_self）</h2>
    <p><a href="https://www.baidu.com" title="跳转到百度首页">百度（当前标签页打开）</a></p>

    <h2>2. 新标签页打开（_blank）</h2>
    <p><a href="https://www.csdn.net" target="_blank" title="跳转到CSDN首页">CSDN（新标签页打开）</a></p>

    <h2>3. 本地页面跳转（相对路径）</h2>
    <p><a href="about.html" title="查看关于我们页面">关于我们（跳转至本地about.html）</a></p>

    <h2>4. 下载文件链接</h2>
    <p><a href="resume-template.zip" title="下载简历模板">下载简历模板（zip文件）</a></p>

    <h2>5. 锚点链接（页面内跳转）</h2>
    <p><a href="#section1" title="跳转到第一部分">跳转到“第一部分”</a></p>
    <p><a href="#section2" title="跳转到第二部分">跳转到“第二部分”</a></p>

    <h2>6. 邮箱链接（打开邮件客户端）</h2>
    <p><a href="mailto:service@example.com" title="发送邮件给客服">联系客服（发送邮件）</a></p>

    <h2>7. 电话链接（移动端可拨号）</h2>
    <p><a href="tel:400-123-4567" title="拨打客服电话">拨打客服电话：400-123-4567</a></p>

    <h2>8. 空链接（占位用）</h2>
    <p><a href="#" title="暂未开放">暂未开放的功能（空链接）</a></p>

    <h2>9. 禁止跳转链接</h2>
    <p><a href="javascript:void(0);" title="点击无反应">点击无反应的链接（禁止跳转）</a></p>

    <!-- 锚点目标区域 -->
    <div style="height: 800px; margin-top: 50px;">
        <h3 id="section1">第一部分：锚点目标区域</h3>
        <p>这是跳转到的第一部分内容...</p>
    </div>
    <div style="height: 800px;">
        <h3 id="section2">第二部分：锚点目标区域</h3>
        <p>这是跳转到的第二部分内容...</p>
    </div>
</body>
</html>

运行效果如下：

2. 超链接的常见类型与用法

根据href属性的不同值，超链接可分为多种类型，覆盖不同的使用场景：

（1）外部链接：跳转至其他网站

特点：href为完整的网络地址（带 http/https 协议）；
推荐用法：添加target="_blank"，在新标签页打开，避免用户离开当前页面；
示例：

<!-- 外部链接：跳转到淘宝 -->
<a href="https://www.taobao.com" target="_blank" title="跳转到淘宝">淘宝官网</a>

（2）内部链接：跳转至本地项目中的页面

特点：href为本地页面的相对路径（如about.html、pages/contact.html）；
适用场景：网站内部页面之间的跳转（如首页、关于我们、联系我们等）；
示例（目录结构）：

project/
├── index.html（当前页面）
├── about.html（同级页面）
└── pages/
    └── contact.html（子目录页面）

代码示例：

<!-- 跳转至同级页面about.html -->
<a href="about.html">关于我们</a>

<!-- 跳转至子目录页面pages/contact.html -->
<a href="pages/contact.html">联系我们</a>

<!-- 跳转至上一级目录的页面（若有） -->
<a href="../index.html">返回首页</a>

（3）锚点链接：页面内快速跳转

特点：实现同一页面内不同区域的快速跳转（如长文章的目录跳转、回到顶部按钮）；
实现步骤：
1. 给目标区域添加id属性（如<h3 id="section1">第一部分</h3>）；
2. 超链接的href属性值为#id（如<a href="#section1">跳转到第一部分</a>）；
高级用法：跳转至其他页面的指定锚点（如<a href="article.html#section3">跳转到文章第三部分</a>）；
示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>锚点链接示例</title>
    <style>
        body {
            font-size: 18px;
            line-height: 2;
        }
        .nav {
            position: fixed;
            top: 20px;
            left: 20px;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .content {
            margin-left: 200px;
            padding: 20px;
        }
        .section {
            height: 600px;
            margin-bottom: 50px;
            padding: 20px;
            border: 1px solid #eee;
        }
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: #3498db;
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            text-decoration: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <!-- 目录导航（锚点链接） -->
    <div class="nav">
        <h3>文章目录</h3>
        <ul style="list-style: none; padding: 0;">
            <li><a href="#intro">1. 引言</a></li>
            <li><a href="#html">2. HTML基础</a></li>
            <li><a href="#css">3. CSS基础</a></li>
            <li><a href="#js">4. JavaScript基础</a></li>
            <li><a href="#summary">5. 总结</a></li>
        </ul>
    </div>

    <!-- 文章内容 -->
    <div class="content">
        <div class="section" id="intro">
            <h2>1. 引言</h2>
            <p>前端开发是创建Web页面或应用程序的过程，主要涉及HTML、CSS和JavaScript三大核心技术...</p>
        </div>

        <div class="section" id="html">
            <h2>2. HTML基础</h2>
            <p>HTML（HyperText Markup Language）是超文本标记语言，用于构建网页的结构...</p>
        </div>

        <div class="section" id="css">
            <h2>3. CSS基础</h2>
            <p>CSS（Cascading Style Sheets）是层叠样式表，用于美化网页的外观和布局...</p>
        </div>

        <div class="section" id="js">
            <h2>4. JavaScript基础</h2>
            <p>JavaScript是一种脚本语言，用于实现网页的交互功能，让网页“活”起来...</p>
        </div>

        <div class="section" id="summary">
            <h2>5. 总结</h2>
            <p>掌握HTML、CSS和JavaScript三大核心技术，是成为前端开发工程师的基础...</p>
        </div>
    </div>

    <!-- 回到顶部锚点链接 -->
    <a href="#top" class="back-to-top" title="回到顶部">↑</a>
</body>
</html>

运行效果如下：

（4）下载链接：下载本地文件

特点：href为文件路径（如 zip、pdf、doc 等格式文件），点击链接会触发文件下载；
注意事项：
1. 若文件是浏览器可直接打开的格式（如 txt、jpg、html），部分浏览器会直接打开文件而非下载，需将文件压缩为 zip 格式或使用download属性强制下载；
2. download属性（HTML5 新增）：可指定下载文件的文件名，强制浏览器下载文件；
示例：

<!-- 下载zip文件（默认下载） -->
<a href="资料包.zip" title="下载前端学习资料包">下载前端学习资料包</a>

<!-- 下载pdf文件（强制下载，指定文件名为“前端面试指南.pdf”） -->
<a href="interview.pdf" download="前端面试指南.pdf" title="下载前端面试指南">下载前端面试指南</a>

<!-- 下载图片（强制下载，避免浏览器直接打开） -->
<a href="wallpaper.jpg" download="桌面壁纸.jpg" title="下载桌面壁纸">下载桌面壁纸</a>

（5）功能性链接：跳转至邮箱、电话等

邮箱链接：href="mailto:邮箱地址"，点击后打开本地邮件客户端（如 Outlook、Foxmail），自动填充收件人地址；
- 扩展用法：指定主题和正文（如href="mailto:service@example.com?subject=咨询问题&body=我想咨询的问题是："）；
电话链接：href="tel:电话号码"，移动端点击后直接弹出拨号界面，桌面端无效果；
短信链接：href="sms:电话号码?body=短信内容"，移动端点击后打开短信编辑界面；
示例：

<!-- 邮箱链接（基础用法） -->
<a href="mailto:service@example.com">联系客服（发送邮件）</a>

<!-- 邮箱链接（带主题和正文） -->
<a href="mailto:service@example.com?subject=产品咨询&body=我想咨询：">产品咨询（自动填充主题和正文）</a>

<!-- 电话链接（移动端可拨号） -->
<a href="tel:400-123-4567">拨打客服电话：400-123-4567</a>

<!-- 短信链接（移动端可编辑短信） -->
<a href="sms:10086?body=查询话费">发送短信查询话费</a>

（6）空链接与禁止跳转链接

空链接：href="#"，用于链接功能暂未实现时的占位（点击后会跳转到页面顶部）；
禁止跳转链接：href="javascript:void(0);" 或 href="javascript:;"，点击后无任何反应（用于仅需触发 JavaScript 事件的链接）；
示例：

<!-- 空链接（占位用） -->
<a href="#">功能开发中，敬请期待</a>

<!-- 禁止跳转链接（仅触发点击事件） -->
<a href="javascript:void(0);" onclick="alert('点击成功！')">点击触发提示（不跳转）</a>
<a href="javascript:;" onclick="showInfo()">查看详情（不跳转）</a>

<script>
function showInfo() {
    alert('这是详情信息！');
}
</script>

（7）网页元素链接：给图片、按钮等添加链接

超链接不仅可以包裹文本，还可以包裹图片、按钮、div 等任意 HTML 元素，点击该元素即可触发跳转；
示例：

<!-- 图片链接：点击图片跳转 -->
<a href="https://www.baidu.com" target="_blank" title="跳转到百度">
    <img src="baidu-logo.png" alt="百度logo" width="200px">
</a>

<!-- 按钮链接：点击按钮跳转 -->
<a href="login.html" title="登录">
    <button style="padding: 10px 20px; background-color: #3498db; color: #fff; border: none; border-radius: 4px; cursor: pointer;">登录</button>
</a>

<!-- div链接：点击div跳转 -->
<a href="register.html" title="注册">
    <div style="width: 100px; height: 40px; line-height: 40px; text-align: center; background-color: #e74c3c; color: #fff; border-radius: 4px;">注册</div>
</a>

3. 超链接的样式优化（CSS）

浏览器默认的超链接样式（蓝色、下划线）可能不符合页面设计需求，可通过 CSS （后续会为大家详细介绍CSS）优化超链接样式，提升用户体验：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>超链接样式优化</title>
    <style>
        /* 基础样式：去除下划线，设置颜色 */
        a {
            color: #2c3e50; /* 深灰色 */
            text-decoration: none; /* 去除下划线 */
            padding: 2px 4px;
            border-radius: 3px;
        }

        /* 鼠标悬浮状态：变色+下划线 */
        a:hover {
            color: #3498db; /* 浅蓝色 */
            text-decoration: underline; /* 显示下划线 */
            background-color: #f8f9fa; /* 浅灰色背景 */
        }

        /* 点击状态（按下未松开） */
        a:active {
            color: #e74c3c; /* 红色 */
        }

        /* 已访问链接状态（仅对外部链接有效） */
        a:visited {
            color: #9b59b6; /* 紫色 */
        }

        /* 焦点状态（键盘导航时） */
        a:focus {
            outline: 2px solid #3498db; /* 蓝色轮廓 */
            outline-offset: 2px;
        }

        /* 按钮样式链接 */
        .btn-link {
            display: inline-block;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff !important; /* 强制白色 */
            text-decoration: none !important;
            border-radius: 4px;
            transition: background-color 0.3s; /* 过渡动画 */
        }

        .btn-link:hover {
            background-color: #2980b9; /* 加深蓝色 */
            text-decoration: none !important;
        }
    </style>
</head>
<body>
    <p>普通链接：<a href="https://www.csdn.net" target="_blank">CSDN首页</a></p>
    <p>按钮样式链接：<a href="https://www.baidu.com" target="_blank" class="btn-link">百度搜索</a></p>
    <p>图片链接：<a href="https://www.taobao.com" target="_blank">
        <img src="taobao-logo.png" alt="淘宝logo" width="150px">
    </a></p>
</body>
</html>

运行效果：

4. 超链接的使用注意事项

（1）添加`title`属性，提升用户体验

给所有超链接添加title属性，说明链接的跳转目标或功能，让用户在点击前了解链接用途；
示例：

<a
  href="https://www.github.com"
  target="_blank"
  title="跳转到GitHub（代码托管平台）"
  >GitHub</a
>

（2）外部链接添加`target="_blank"`，并设置`rel="noopener noreferrer"`

target="_blank"让外部链接在新标签页打开，避免用户离开当前页面；
rel="noopener noreferrer"：安全性优化，防止新打开的页面通过window.opener访问当前页面的信息，降低安全风险；
示例：

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="跳转到示例网站">示例网站</a>

（3）锚点链接的`id`属性必须唯一

同一页面中，锚点目标的id属性值不能重复，否则链接会跳转到第一个匹配id的区域；
示例（错误）：

<!-- 错误：两个区域的id相同 -->
<h3 id="section">第一部分</h3>
<h3 id="section">第二部分</h3>

（4）避免链接文字模糊不清

链接文字应清晰明确，避免使用 “点击这里”“查看更多” 等模糊表述，建议直接说明跳转目标（如 “查看前端面试题”“下载学习资料”）；
示例（不推荐）：

<a href="interview.html">点击这里查看更多</a>

示例（推荐）：

<a href="interview.html">查看前端面试题合集</a>

总结

HTML 标签是网页的基础骨架，大家在学习时需要遵循 “结构与样式分离” 原则，合理运用基础标签构建清晰结构，结合 CSS 美化与交互优化，才能打造出用户体验佳、兼容性强的网页，为后续前端学习（如 JavaScript、框架开发）奠定坚实基础。如果大家在学习HTML的过程中遇到任何问题，欢迎在评论区发表你的观点，大家一起讨论和交流！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-21，如有侵权请联系 cloudcommunity@tencent.com 删除

优化

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！