【HTML】HTML基础4（超链接标签）

最新推荐文章于 2024-06-06 12:13:29 发布

AM越.

最新推荐文章于 2024-06-06 12:13:29 发布

阅读量1k

点赞数 21

分类专栏： HTML系列文章标签： html 前端

本文链接：https://blog.csdn.net/2301_79982543/article/details/136404833

版权

HTML系列专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML超链接的基本结构，包括href属性、target属性的使用，以及外部链接、内部链接、空链接和下载链接的分类与示例。通过实例演示如何创建银河护卫队相关链接和下载图片文件。

摘要由CSDN通过智能技术生成

超链接通用标签

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

用到的是：<a></a>双标签

其中

1. herf是必须有的属性，后面接指定目标地址

2. target属性不一定有，这里介绍两种

_blank 在新窗口打开
_self（默认形态）覆盖原来窗口

3. 点击设置的文本或图像可以跳转所要求的链接

链接分类及其使用

1.外部链接

<a href="https://baike.baidu.com/item/%E9%93%B6%E6%B2%B3%E6%8A%A4%E5%8D%AB%E9%98%9F3/15281215?fr=ge_ala" target="_blank">银河护卫队3百度百科</a>

例如这里我就引用了银河护卫队的百度百科

打开网页后，点击银河护卫队3的字样就可以，跳转到百度百科了

点击得到

2.内部链接

指的是内部页面的互相连接

比如我新建一个页面如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>影迷AM的照片集</title>
	</head>
	<body>
		<img src="../img/5人。2.jpg" />
		<img src="../img/5ren.jpg" />
		<img src="../img/5人酷背景.jpg" />
		<img src="../img/银河护卫队-格鲁特.jpg" />
		
	</body>
</html>

接着我再在原本的index.html中插入这个超链接，并且设置点击图片跳转（根据上一期的路径知识，这里有一个test/只是我自己的习惯安排，大家要结合自己的习惯）

<a href="test/test.html" target="_blank"><img src="img/银河护卫队-星爵.png"></a>

得到

点击图片就可以得到

3.空链接

直接把链接部分换成 “ # ” 即可

4.下载链接

<a href="img/5人酷背景.zip" target="_blank">点击下载作者最爱的一张合照</a>

步骤：把图片压缩为zip或者换成exe形式，放进链接部位即可（这里同样要注意路径问题）

今天的分享就到此结束啦~~希望对您有所帮助！

AM越.

关注

21
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【HTML】HTML基础4（超链接标签）

接着我再在原本的index.html中插入这个超链接，并且设置点击图片跳转（根据上一期的路径知识，这里有一个test/只是我自己的习惯安排，大家要结合自己的习惯）步骤：把图片压缩为zip或者换成exe形式，放进链接部位即可（这里同样要注意路径问题）打开网页后，点击银河护卫队3的字样就可以，跳转到百度百科了。1. herf是必须有的属性，后面接指定目标地址。3. 点击设置的文本或图像可以跳转所要求的链接。例如这里我就引用了银河护卫队的百度百科。用到的是：<a></a>双标签。指的是内部页面的互相连接。
复制链接

扫一扫