【HTML】html中的超文本链接

关于超文本链接:

1、定义:

超文本链接是网页中一种非常重要的功能,是网页中最重要、最根本的元素之一。

2、作用:

(1)通过链接可以从一个网页转到另一个网页,也可以从一个网站转到另一个网站,这符合人类的跳跃思维方式。

(2)链接的标志有文字和图形两种。可以制作一些精美的图形作为链接按钮,使它和整个网页融为一体。

3、方式:

(1)所谓的超文本链接是指从一个网页指向一个目标的连接关系。

(2)这个目标可以是:

①另一个网页
②也可以是相同网页上的不同位置
③还可以是一个图片
④一个电子邮件地址
⑤一个文件
⑥甚至是一个应用程序。

4、原理:

而在一个网页中用来超文本链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

5、分类:

  • 页面链接
  • 本地链接
  • 电子邮件链接

☆页面链接

1、定义:

用HTML创建超文本链接需要使用<A>标记符(结束标记符</A>不能省略)。

2、属性:

它的最基本属性是href,用于指定超文本链接的目标。

3、原理:

通过为href指定不同的值,可以创建出不同类型的超链接。

4、说明:

在HTML文件中用链接指针指向一个目标。

5、格式:

其基本格式为:<a href = "…">标记超文本链接信息</a>

6、协议:

http:// ;file://;thunder://;

页面链接代码演示:

<html>
    <head><title>页面链接代码演示</title></head>
    <body>
        <!-- href属性如果不加协议的话,默认是file://协议 -->
        <a href="d:/a">超链接1-- href属性默认的协议是:file:// 协议</a>   <br/>
        <a href="file://d:/a">超链接2--href属性默认的协议是:file://</a><br/>
        <a href="http://www.hncu.net">超链接3--当超链接到网页时,href属性要填http://</a><br/>
        <a href="http://14.215.177.38">超链接4--当超链接到网页时,href属性要填http:// 用IP</a><br/>
        <!-- href属性还可以是迅雷协议 thunder:// 可以打开迅雷软件 -->
        <a href="thunder://dshjjewhuewiewuiew==1">超链接5--当用迅雷软件打开当前链接时,href属性要填:thunder://...</a> <br/>
    </body>
</html>

运行结果:

这里写图片描述

☆本地链接:

1、定义:

超文本链接指向自己的计算机中的某一个文件,叫本地链接。

2、属性:

命名时应使用标记符的name属性。

3、原理:

在文件中需要创建一个标签(即做一个记号),为页面中需要跳转到的位置命名。

4、格式:

<a name="标签名">此处创建了一个标签</a>

本地链接代码演示:

<html>
    <head>
        <title>超链接演示</title>
    </head>

    <body>
        <!-- 演示页面链接 -->
        <a name="pos1">开头</a><br>
        <a href="#pos2">跳到中间</a>
        <a href="#pos3">跳到尾部</a></br></br>
        <img alt="领导合影1" src="pics/zp1.jpg"></br>

        <a name="pos2">中间</a></br>
        <a href="#pos1">跳到开头</a>
        <a href="#pos3">跳到尾部</a></br></br>
        <img alt="领导合影2" src="pics/zp2.jpg"></br>

        <a name="pos3">尾部</a><br    >
        <a href="#pos1">跳到开头</a>
        <a href="#pos2">跳到中间</a><br><br>

    </body>
</html>

运行结果:

这里写图片描述

隐藏了图片的样式:

这里写图片描述

☆电子邮件链接:

1、定义:

如果希望用户在网页上通过链接直接打开客户端的发送邮件的工具发送电子邮件,则可以在网页内包含发送电子邮件的功能。

2、原理:

实现此功能所需的全部工作就是在链接标记中插入mailto值。

3、格式:

<a href="mailto:webmaster@hnu.cn">管理员信箱</a>

电子邮件代码演示 :

<html>
    <head><title>电子邮箱链接</title></head>
    <body>
    <!-- 
        当用邮件软件打开当前链接时且自动填上邮箱地(当前链接中的邮箱地址)。
        href属性要填:mailto://邮箱地址
     -->
        <a href="mailto://hncu@hncu.net">超链接6---电子邮箱链接</a>
    </body>
</html>

运行结果:

这里写图片描述

当点击了邮箱链接后,页面上会弹出打开电子邮件软件的弹框。

链接标签总结:

<a> 定义锚。 
<link> 定义文档与外部资源的关系。 
<nav> 定义导航链接。 
  • 6
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值