Web前端开发笔记——第二章 HTML语言第四节超链接标签

2022-10-29 187

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Web前端开发笔记——第二章 HTML语言第四节超链接标签

前言

本节介绍超链接标签即a标签的用法以及相关应用例题。

一、超链接标签

a标签，也叫超链接标签，在图片或者文字上使用，或者可以用在导航栏上，点击后跳到新的页面，以供用户浏览。超链接表示为<a href ="网址">文字或图片</a>，这里的"href=“是该标签的属性即超链接，通过赋值符号”="，来对该属性进行赋值，而网址是要跳转的目标网址。

<a href ="网址">文字或图片</a>

它有几种应用情况：

1、链接到本站点的其它子网页；

2、链接到其它站点；

3、虚拟超链接。

（一）链接其它子网页

这种情况，是在主页中点击文字或者图片，使其跳转到其它子网页。表示为<a href ="文件名">文字或图片</a>，属性的赋值号后跟子网页的文件名，使href属性取值。

例如下图在主页面中点击"国际"，链接至国际栏目子网页中：

（二）链接其它站点

而当点击文字或者图片后，若想链接至其它站点，表示为<a href ="网页地址">文字或图片</a>，即创建一个指向网站的超链接，属性的赋值号后跟跳转网页的地址，使href属性取值，且在地址中要使用https协议。

例如像这样是错误的：<a href="www.baidu.com">百度一下</a>

正确写法：<a href="http://www.baidu.com">百度一下</a>

例如登录csdn，使用qq登录，这里的qq图标点击后跳转至qq登录页面，在这里a标签的作用就是创建一个指向qq登录页面的超链接：

（三）虚拟超链接

虚拟超链接，表示为<a href ="#">文字或图片</a>，属性的赋值号后跟#，它不会链接到其它网址，即还未设计的链接，可以理解为空链接。

二、从当前页面链接到指定位置

当需要通过a标签跳转到指定页面位置时，需要使用虚拟超链接并在跳转位置的a标签加上id属性，即虚拟超链接的取值与跳转位置的a标签id属性取值是一样。

例如，下列html代码中，我们点击查看数据库原理与应用或者查看QT Creator就会跳转至指定的栏目03和06中：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <p>直接跳转：</p>
  <a href="#03">查看数据库原理与应用</a>
  <a href="#06">查看QT Creator</a>
  <hr />
  <h2>栏目 01</h2>
  <p>Web前端开发</p>
  <h2>栏目 02</h2>
  <p>计算机网络</p>
  <h2><a id="03">栏目 03</h2>
  <p>数据库原理与应用</p>
  <h2>栏目 04</h2>
  <p>c++程序设计</p>
  <h2>栏目 05</h2>
  <p>c语言</p>
  <h2><a id="06">栏目 06</a></h2>
  <p>QT Creator</p>
  </body>
</html>

运行结果：

点击查看QT Creator，跳转至栏目06：

三、链接的访问情况

默认情况下，即在未进行CSS的样式编辑的情况下，链接会以不同字体颜色的形式展示其浏览情况：

未访问的链接显示为蓝色字体且带有下划线；

访问过的链接显示为紫色字体且带有下划线；

当点击链接时，链接会显示为红色字体且带有下划线。

四、在新窗口中打开链接

在a标签内添加上target属性，且target="_blank"，当点击这个超链接时浏览器则会新建一个窗口解析这个链接并打开。

<a href ="网址" target="_blank">文字或图片</a>

例如，下列html代码中，在新的窗口中打开百度链接：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <a href ="https://www.baidu.com" target="_blank">百度一下</a>
  </body>
</html>

运行结果如下：

点击“百度一下”后，新窗口自动弹出：

例题

例、完成下列网页设计，其中导航栏里链接首页的其它子网页，且子网页中可以跳转文章，文章暂且不用编辑目录即可，另外还可以返回csdn主页和进行百度搜索，效果图如下:

1、创建站点文件夹，编辑主页html代码，即主页.html文件，如下：

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Document</title>
  </head>
  <body>
  <h1>首页</h1>
  <h2>导航栏</h2>
  <hr />
  <pre>
    <a href="Web前端开发.html">Web前端开发</a><br />
    <a href="计算机网络.html">计算机网络</a><br />
    <a href="数据库原理与应用.html">数据库原理与应用</a><br />
    <a href="QT Creator.html">QT Creator</a><br />
    <hr />
    <a href="https://www.csdn.net/">返回csdn主页</a>
    <a href="https://www.baidu.com">未找到需要，百度一下</a>
  </pre>
  </body>
</html>

2、对四个子网页编辑，分别是Web前端开发.html、计算机网络.html、数据库原理与应用.html和QT Creator.html四个html文件，其实代码都大同小异，如下;

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <h1>Web前端开发</h1>
  <p><a href="#">Web前端开发笔记——第一章 Web前端概论</a></p>
  <p><a href="#">Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性</a></p>
  <p><a href="#">Web前端开发笔记——第二章 HTML语言 第二节 基本标签</a></p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <h1>计算机网络实验</h1>
  <p><a href="#">*（绝对可以安装成功的HUAWEI eNSP模拟器）计算机网络实验（华为eNSP模拟器）——第一章 华为eNSP安装教程</a></p>
  <p><a href="#">计算机网络实验（华为eNSP模拟器）——第二章 VRP通用路由平台介绍</a></p>
  <p><a href="#">计算机网络实验（华为eNSP模拟器）——第三章 配置IP地址和网关</a></p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <h1>数据库原理与应用</h1>
  <p><a href="#">数据库原理与应用（SQL Server）笔记 第一章 数据定义语言和数据操纵语言</a></p>
  <p><a href="#">数据库原理与应用（SQL Server）笔记 第二章 简单数据查询</a></p>
  <p><a href="#">数据库原理与应用（SQL Server）笔记 第三章 连接查询</a></p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
  </head>
  <body>
  <h1>QT Creator</h1>
  <p><a href="#">QT Creator应用程序开发——01简单按钮显示</a></p>
  </body>
</html>