ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

超链接<a></a>

2022-01-25 23:35:28  阅读:95  来源: 互联网

标签:点击 html 超链接 跳转 链接 图片


一、超链接基本介绍

二、外部资源链接

三、内部资源链接

四、注意事项

五、拓展资料

一、超链接基本介绍

在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页所在的服务器域名,端口是访问某些资源时,需给出相应的服务器提供端口号。路径是指服务器上某资源的位置。

标签:点击,html,超链接,跳转,链接,图片
来源: https://blog.csdn.net/m0_66451927/article/details/122691939

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有