Java教程

超链接＜a＞＜/a＞

本文主要是介绍超链接＜a＞＜/a＞，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、超链接基本介绍

二、外部资源链接

三、内部资源链接

四、注意事项

五、拓展资料

一、超链接基本介绍

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，超链接的目标可以是一个网址、一张图片、一个pdf文件或者一个视频等，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有_self 和 _blank两种，其中_self 为默认值，_blank为在新窗口中打开方式。

二、外部资源链接

外部资源链接：External Links 指的是从外部网站指向自己网站的链接，简称外链，其形式包含纯文本链接，图片链接和锚文本链接。

通过一个例子了解外部资源链接：

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>
<body>
    <a href="https://www.csdn.net/">点击这里链接跳转到CSDN</a>
</body>
</html>

运行结果：

代码解释：

 

http://表示超链接链接的目标是一个网页

链接目标若改为其他html文件，如上博客里的test.html

代码改为：

    <a href="C:\Users\admin\Desktop\HTML\作业\html\test.html">点击跳转到我的html文档</a>

运行结果：

点击后便跳转到我的上个html文档

代码解释：

"C:\Users\admin\Desktop\HTML\作业\html\test.html"是链接目标，由C:\Users\admin\Desktop\HTML\作业\html\ test.html的绝对路径和包含后缀的文件名组成

 三、内部资源链接

内部资源链接：Internal Links指的是同一域名网站下的内容页面之间相互链接。
比如网站频道页、栏目页、文章详情页（或产品详情页）之间的链接，甚至是网站内关键词与关键词之间的链接（如：百度百科），都可以归类为内部链接，这也是内部链接被称为站内链接的原因。

同样通过两个例子来理解：

例一：

代码：

<a href="C:\Users\admin\Desktop\安安.png">点击跳转到图片</a>
    <hr>
    <a href="C:\Users\admin\Desktop\安安.png"title="打开图片" target="_blank"_blank 点击跳转到图片>新开一页跳转到图片</a>
    <hr>
    <a href="C:\Users\admin\Desktop\安安.png"title="打开图片" target="_self"_self 点击跳转到图片>在本页跳转到图片</a>
 <hr>
    <a href="http://www.baidu.com" name="baidu">这是跳转到百度的链接</a>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <a href="#baidu">跳转到百度链接</a>

运行结果：

点击第一行“点击跳转到图片”字体浏览器会跳转到图片

点击第二行“新开一页跳转到图片”字体浏览器会新开一个页面跳转到图片

点击第三行“在本页跳转到图片”字体浏览器会在本页跳转到图片

点击第五行“跳转到百度链接”字体会在本页跳转到“这是跳转到百度链接”字体部分的内容，再点击“这是跳转到百度链接”字体便会跳转到百度官网。

代码解析：

通过第一个超链接掌握图片怎么添加：用href赋值资源地址（图片在电脑的绝对地址+含后缀的文件名）

属性：

title属性：作用是当鼠标悬停在链接文本上时会跳出提示“打开图片”

target属性：链接打开方式，blank表示新开个页面打开链接，self表示在本页面跳转打开

name属性：表示这个链接的名字

例2：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接</title>
</head>
<body>
    <h2>段落跳转</h2>
    <a href="#1">《再别康桥》</a>
    <a href="#2">《雨巷》</a>
    <a href="#3">《乡愁》</a>
    <h3 id="1">《再别康桥》</h3>
    <p>
        轻轻的我走了，<br>
        正如我轻轻的来；<br>
        我轻轻的招手，<br>
        作别西天的云彩。<br>
        <br>
        那河畔的金柳，<br>
        是夕阳中的新娘；<br>
        波光里的艳影，<br>
        在我的心头荡漾。<br>
        <br>
        软泥上的青荇，<br>
        油油的在水底招摇；<br>
        在康河的柔波里，<br>
        我甘心做一条水草！<br>
        <br>
        那榆荫下的一潭，<br>
        不是清泉，是天上虹；<br>
        揉碎在浮藻间，<br>
        沉淀着彩虹似的梦。<br>
        <br>
        寻梦？撑一支长篙，<br>
        向青草更青处漫溯；<br>
        满载一船星辉，<br>
        在星辉斑斓里放歌。<br>
        <br>
        但我不能放歌，<br>
        悄悄是别离的笙箫；<br>
        夏虫也为我沉默，<br>
        沉默是今晚的康桥！<br>
        <br>
        悄悄的我走了，<br>
        正如我悄悄的来；<br>
        我挥一挥衣袖，<br>
        不带走一片云彩。<br>
    </p>
    <h3 id="2">《雨巷》</h3>
    <p>
        撑着油纸伞，独自<br>
        彷徨在悠长、悠长<br>
        又寂寥的雨巷<br>
        我希望逢着<br>
        一个丁香一样的<br>
        结着愁怨的姑娘<br>
        她是有<br>
        丁香一样的颜色<br>
        丁香一样的芬芳<br>
        丁香一样的忧愁<br>
        在雨中哀怨<br>
        哀怨又彷徨<br>
        她彷徨在这寂寥的雨巷<br>
        撑着油纸伞<br>
        像我一样<br>
        像我一样地<br>
        默默彳亍着<br>
        冷漠、凄清，又惆怅<br>
        她走近，又投出<br>
        太息一般的眼光<br>
        她飘过<br>
        像梦一般的<br>
        像梦一般的凄婉迷茫<br>静默地走近<br>
        <br>
        像梦中飘过<br>
        一枝丁香地<br>
        我身旁飘过这女郎<br>
        她静默地远了、远了<br>
        到了颓圮的篱墙<br>
        走尽这雨巷<br>
        在雨的哀曲里<br>
        消了她的颜色<br>
        散了她的芬芳<br>
        消散了，甚至她的<br>
        太息般的眼光<br>
        丁香般的惆怅<br>
        撑着油纸伞，独自<br>
        彷徨在悠长、悠长<br>
        又寂寥的雨巷<br>
        我希望飘过<br>
        一个丁香一样的<br>
        结着愁怨的姑娘<br>
    </p>
    <h3 id="3">《乡愁》</h3>
    <p>
        小时候，<br>
        乡愁是一枚小小的邮票，<br>
        我在这头，<br>
        母亲在那头。<br>
        <br>
        长大后，<br>
        乡愁是一张窄窄的船票，<br>
        我在这头，<br>
        新娘在那头。<br>
        <br>
        后来啊，<br>
        乡愁是一方矮矮的坟墓，<br>
        我在外头，<br>
        母亲在里头。<br>
        <br>
        而现在，<br>
        乡愁是一湾浅浅的海峡，<br>
        我在这头，<br>
        大陆在那头。<br>
    </p>
</body>
</html>

运行结果：

 代码解释：

 这种代码是锚点写法，结构像 href="#1"；

"#1"是链接的资源地址；

#是锚点的写法；

1为当前页面中某个元素id的值，上面id为1的元素内容是<h3 id="1">《再别康桥》</h3>，点击页面中《再别康桥》文字时会跳转到id值为1部分的内容。

四、注意事项

1.外部链接 需要添加 http://www.csdn.com

2.内部链接 直接链接内部页面名称即可 比如 <a href="index.html>首页</a>

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

五、拓展资料

（1）url地址：是统一资源定位符，是WWW页的地址，url地址从左到右由Internet资源类型、服务器地址、端口、路径等部分组成。其中Internet资源类型即scheme，是指出WWW客户程序用来操作的工具。服务器地址是指出WWW页所在的服务器域名，端口是访问某些资源时，需给出相应的服务器提供端口号。路径是指服务器上某资源的位置。

这篇关于超链接＜a＞＜/a＞的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航