首页 前端知识 【HTML】HTML基础4(超链接标签)

【HTML】HTML基础4(超链接标签)

2024-05-27 10:05:24 前端知识 前端哥 796 665 我要收藏

目录

超链接通用标签

 链接分类及其使用

1.外部链接

​编辑 2.内部链接

 3.空链接

4.下载链接


超链接通用标签

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

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

其中

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

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

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

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

 链接分类及其使用

1.外部链接

<a href="https://baike.baidu.com/item/银河护卫队3/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形式,放进链接部位即可(这里同样要注意路径问题)

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9696.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!