前端自学HTML笔记之二【超链接】

我已加入 1_bit 博主的免费前端 站起来 学习计划,专栏链接:https://blog.csdn.net/a757291228/category_11609526.html

前端自学HTML笔记二

超链接

超链接需要用到a标签

一、外部资源链接

代码如下:
在这里插入图片描述
其中a标签的href属性定义了链接的网址,href属性值即为跳转页面的网址或路径;当href的值为空时,点击超链接不会跳转页面;当href属性指向外部链接,如图中为百度链接。

运行结果:
在这里插入图片描述
点击页面中的第一个超链接,不会跳转;点击第二个超链接会在当前页面跳转到百度页面。

二、内部资源超链接

将href属性值修改为本机文件(可以是图片、视频、其他网页文件等)的地址,如下:

<body>
    <a href="祢豆子.jpg">这是图片超链接<a>
</body>

保存代码,刷新浏览器,页面展示为:
在这里插入图片描述
点击超链接,跳转到图片-- 祢豆子(图片这里就不放出来了)
在这里插入图片描述
此时可以看到浏览器的路径也变成了图片的路径;之所以属性值中可以直接写文件名,是因为该图片文件和当前网页文件是位于同一个文件夹中的,那么若我们要放问的文件和当前网页文件不在同一个文件夹中应该怎么表示呢?让我们来试试吧!
我们尝试访问html_study文件夹中的一个html文件,输入代码:

<body>
    <a href="../test.html">这是内部超链接<a>
</body>

保存代码,刷新浏览器,页面展示同上
在这里插入图片描述

当点击超链接是会跳转至相应文件所在位置
在这里插入图片描述
这里"../test.html"表示的即是相对路径,"../"表示的是上级路径,"./"表示的是当前路径下,"/"表示根目录。

三、其他属性

除了href属性,a标签还有name属性、title属性、target属性;其中name属性是给该链接命名,title属性是给该链接加提示文字,target属性是指定该链接打开窗口的方式
修改代码如下:

<body>
    <a href
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值