HTML超链接与浮动框架全解析

原创于 2025-12-27 14:47:06 发布 · 800 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

Web前端开发技术专栏收录该内容

5 篇文章

订阅专栏

第五章超链接与浮动框架

5.1 超链接概述

5.1.1 什么是超链接？

超链接是一种可以点击后跳转到其他网页或资源的元素，就像现实中的桥梁，连接不同的信息。例如，你在百度首页点击“新闻”，就会跳到新闻页面，这种跳转就是通过超链接实现的。

5.1.2 超链接在网页中的作用

连接不同网页，实现信息的串联
跳转到文件，实现下载功能
跳转到图片、视频等资源
实现页面内部的快速导航

5.2 超链接的语法、路径及分类

5.2.1 超链接的语法

标签：<a>
关键属性：href（用于指定跳转目标）

基本语法示例：

<a href="https://www.baidu.com">百度一下</a>

点击“百度一下”即可跳转到百度首页。

可以在标签内添加target属性，使链接在新窗口（标签页）打开：

<a href="https://www.baidu.com" target="_blank">百度新窗口打开</a>

5.2.2 超链接的路径

在网页开发中，“路径”就是告诉浏览器点击超链接后要去哪里。选择不同的路径类型，决定了链接目标的位置和作用。下面详细介绍三种常见路径类型：

1. 绝对路径

定义：
绝对路径是指完整的、带有协议（如 http:// 或 https://）的网址。它通常用于跳转到互联网上的其它网站或资源。

特点：

必须包含协议（http、https、ftp等）。
跳转目标可以是任何互联网资源（网页、图片、文件等）。
不受当前页面所在网站的目录结构影响。

示例：

<a href="https://www.taobao.com">访问淘宝</a>

点击后会直接跳转到淘宝首页，无论当前页面在哪里。

2. 相对路径

定义：
相对路径是指相对于当前页面所在文件夹的位置来指定目标文件或资源。常用于同一网站内部页面之间的跳转。

特点：

不需要协议，只写文件名或文件夹名。
跳转目标必须在同一个网站内。
便于网页内容的组织和维护。

常见写法：

about.html：与当前页面在同一文件夹下的 about.html 文件。
images/pic1.jpg：当前文件夹下的 images 文件夹里的 pic1.jpg 图片。
../news.html：上一级文件夹下的 news.html 文件。

示例：

<a href="page2.html">访问本地页面</a>

假设你的当前页面和 page2.html 在同一目录下，点击后就能跳转。

3. 锚点路径（书签路径）

定义：
锚点路径用“#”加上锚点名，能跳转到当前页面的指定位置，像是页面内的“书签”。适合长页面或内容导航。

特点：

跳转目标是本页面内部的元素。
需要在目标位置定义锚点（如<a name="bottom">或<div id="bottom">）。
提升用户体验，便于快速定位页面内容。

示例：

<!-- 页面顶部添加跳转链接 -->
<a href="#bottom">跳到页面底部</a>

<!-- 页面底部定义锚点 -->
<a name="bottom"></a>
<h2>页面底部内容</h2>

点击“跳到页面底部”，页面会自动滚动到对应位置。

5.2.3 超链接的分类

文本超链接
直接在文字上添加链接
示例：<a href="...">点击这里</a>

图片超链接
在图片上添加链接
示例：

<a href="https://www.example.com">
  <img src="logo.png" alt="点我访问">
</a>

电子邮件超链接
点击后自动打开邮件软件，准备发送邮件
示例：
```
<a href="mailto:someone@example.com">给我们发邮件</a>
```

书签链接（锚点链接）
跳转到当前页面指定位置
示例：

<a href="#part1">跳转到第一部分</a>
...（页面其他位置）...
<a name="part1"></a>
<h2>第一部分内容</h2>

5.3 超链接的应用

5.3.1 创建HTTP文档下载超链接

<a href="docs/lesson5.pdf" download>下载第5章讲义</a>

点击后自动下载PDF文件。

5.3.2 创建FTP站点访问超链接

<a href="ftp://ftp.example.com/resource.zip">下载FTP资源</a>

用于跳转至FTP服务器，下载文件。

5.3.3 创建图像超链接

<a href="https://www.example.com">
  <img src="logo.png" alt="跳转到主页">
</a>

点击图片即可跳转目标网页。

5.3.4 创建电子邮件超链接

<a href="mailto:webmaster@example.com?subject=网页咨询">联系我们</a>

点击后自动打开邮件软件，并填写收件人和主题。

5.3.5 创建页面书签链接

先在目标位置设置锚点：

<a name="bottom"></a>
<h2>页面底部</h2>

再在需要跳转的地方设置链接：

<a href="#bottom">跳到页面底部</a>

5.4 浮动框架

什么是浮动框架（iframe）？

浮动框架可以在当前页面嵌入其他网页内容，让用户无需跳转即可浏览更多信息。

基本语法：

<iframe src="https://www.example.com" width="400" height="300"></iframe>

src：嵌入网页的地址
width、height：设置框架尺寸

常见应用：

嵌入地图
嵌入视频（如B站、YouTube播放器）
嵌入第三方内容（如问卷、广告）

注意事项：

不同网站有安全限制，部分内容可能无法嵌入
可以通过frameborder="0"去掉边框

5.5 思政案例5 —— 公民基本道德规范范论解释

<!-- case5.html -->
<!doctype html>
<html lang="en">
    <head>
       <meta charset="UTF-8">
       <style type="text/css">
          body {
             text-align: center;
          }

          ul {
             list-style-type: none;
             text-align: center;
          }

          li {
             display: inline;
             margin: 1px 22px;
             font-size: 22px;
          }

          div {
             width: 837px;
             height: 680px;
             margin: 0 auto;
             border: 1px solid #EEF3AA;
          }

          a:active,
          a:visited,
          a:link {
             text-decoration: none;
             color: black
          }

          a:hover {
             text-decoration: none;
             border-bottom: 5px solid red;
             color: red;
          }
       </style>
    </head>
    <body>
       <div>
          <img src="image-5-1.jpg">
          <ul>
             <li><a href="edu_5_5_1_1.html" target="content">爱国守法</a></li>
             <li><a href="edu_5_5_1_2.html" target="content">明礼诚信</a></li>
             <li><a href="edu_5_5_1_3.html" target="content">团结友善</a></li>
             <li><a href="edu_5_5_1_4.html" target="content">勤俭自强</a></li>
             <li><a href="edu_5_5_1_5.html" target="content">敬业奉献</a></li>
          </ul>
          <iframe frameborder="0" name="content" src="edu_5_5_1_1.html" width="100%" height="260px"></iframe>
       </div>
    </body>
</html>

<!-- edu_5_5_1_1.html -->
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>爱国守法</title>
       <style type="text/css">
          p {
             text-indent: 2em;
          }
       </style>
    </head>
    <body>
       <hr color="red">
       <p>“爱国守法”是公民对国家的最首要的道德义务。公民应当热爱国家、建设国家、保卫国家，维护国家的尊严，保守国家的机密，敢于同一切危害国家利益和安全的行为作斗争，把对国家的一切义务和责任看成是自己的天职。“守法”是公民道德的最低层次的要求。
       </p>
       <p>
          公民应当维护法律确定的最基本的政治秩序和社会秩序，尽法律所规定的一个公民应尽的义务。同时，“爱国主义”体现了社会主义集体主义原则，公民通过爱国守法去实践集体主义的道德要求。
       </p>
    </body>
</html>

<!-- edu_5_5_1_2.html -->
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>明礼诚信</title>
       <style type="text/css">
          p{text-indent: 2em;}      
       </style>
    </head>
    <body>
          <hr color="red">
       <p>“明礼诚信”是公民如何待人的道德规范。在我国，无论在何种场合，无论从事什么样的活动，公民彼此都应该讲文明、讲礼貌、讲诚实、讲信用。我国自古以礼仪之邦著称于世。</p>
       <p>
          在改革开放的条件下，特别是我国加入WTO之后，国际交往日益增多，公民能否明礼，关系到世界对我们国家的形象和文明程度的评价，因此，“明礼”具有特别重要的现实意义，“诚信”是人与人之间交往关系中最基本的道德。它是公民道德人格中的基本要素之一。
       </p>
       <p>
          在经济活动中要诚信，杜绝假冒伪劣、坑蒙拐骗；在日常生活中也要信守诺言，忠诚待人。
       </p>
    </body>
</html>

<!-- edu_5_5_1_3.html -->
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>团结友善</title>
       <style type="text/css">
          p {
             text-indent: 2em;
          }
       </style>
    </head>
    <body>
       <hr color="red">
       <p>“团结友善”是公民与公民之间应当如何相处的基本规范。每一个公民，不论民族、年龄、职业，都是中华人民共和国这个大家庭中的一员。公民之间应该彼此团结，相互友爱，建立起一种和睦亲爱的关系。现实中，对他人友善的人也必然会得到他人的友善。
       </p>
       <p>团结是力量的源泉。能否团结、友善，关系到一个人的前途和幸福，也关系到民族的兴旺、国家的兴衰。要做到团结友善，就必须怀着友好的愿望，抱着彼此平等的心理相互对待，就必须对已严、对人宽，就必须将心比心，“己所不欲，勿施于人”。当然，团结友善必须是在正义原则之下的团结友善。
       </p>
    </body>
</html>

<!-- edu_5_5_1_4.html -->
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>勤俭自强</title>
       <style type="text/css">
          p {
             text-indent: 2em;
          }     
       </style>
    </head>
    <body>
       <hr color="red">
       <p>“勤俭自强”是公民对待生活、对待自身的道德规范。作为一个公民，有劳动的权利和劳动的义务，应当懂得没有勤奋就不会有社会财富的道理，推崇勤劳，反对懒惰和游手好闲。公民还应该厉行节约，反对奢侈浪费和享乐主义的生活方式。
       </p>
       <p>在现实生活中，公民应当自强不息，不断进取，保持一种健康向上的精神风貌，凡事尽量依靠自己而不依赖他人。</p>
    </body>
</html>

<!-- edu_5_5_1_5.html -->
<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
       <title>敬业奉献</title>
       <style type="text/css">
          p{text-indent: 2em;}            
       </style>
    </head>
    <body>
          <hr color="red">
       <p>“敬业奉献”是公民对待职业活动的道德规范。每一个公民都要从事一定的职业，职业是公民与社会联系的重要方式和途径。对待职业或事业要严肃认真，一丝不苟，精益求精，为国家、为社会、为他人做出有益的贡献。
       </p>
    </body>
</html>