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

AM越.2024-03-02 22:27

超链接通用标签

链接分类及其使用

1.外部链接

[编辑 2.内部链接](#编辑 2.内部链接)

3.空链接

4.下载链接

超链接通用标签

html 复制代码

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

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

其中

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

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

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

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

链接分类及其使用

1.外部链接

html 复制代码

<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.内部链接

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

比如我新建一个页面如下

html 复制代码

<!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/只是我自己的习惯安排，大家要结合自己的习惯）

html 复制代码

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

得到

点击图片就可以得到

3.空链接

直接把链接部分换成 " # " 即可

4.下载链接

html 复制代码

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

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

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