前端开发--HTML--图片、链接

最新推荐文章于 2024-08-15 13:19:00 发布

小哦--

最新推荐文章于 2024-08-15 13:19:00 发布

阅读量902

点赞数

CC 4.0 BY-SA版权

分类专栏： html +css +javascript

本文链接：https://blog.youkuaiyun.com/sundanping_123/article/details/94444632

html +css +javascript 专栏收录该内容

43 篇文章

订阅专栏

这篇博客探讨了在前端开发中如何处理HTML中的图片和链接。通过使用相对路径确保图片在项目复制时仍可正常显示。内容包括创建两个相互链接的HTML文件，以及如何创建文字和图片链接到外部网站，如百度。此外，还介绍了回到页面顶部的链接功能以及使用#作为占位符的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>个人主页</title>
</head>
<body>
	[外链图片转存失败(img-rzD5xiE1-1562051862123)(https://mp.youkuaiyun.com/mdeditor/images/2.jpg)]

</body>
</html>

在这里插入图片描述
这里介绍一下路径问题：

./   表示当前路径下，可以省略不写，上面的程序就省略了
../  表示上一级目录下
../../  表示上上级目录下，一般只用到上一个，不常用

在这里插入图片描述
一般做项目，会把用到的所有图片保存到当前文件夹下，使用相对路径引用图片，这样拷贝的时候整个项目一起，就不会出现路径不对找不到图片的问题了。

在这里插入图片描述
写两个文件

python_002.html

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>图片</title>
</head>
<body>
	[外链图片转存失败(img-OzKRxvP0-1562052957575)(https://mp.youkuaiyun.com/mdeditor/images/2.jpg)]
	<a href="python_003.html">返回</a>
</body>
</html>

python_003.html

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>链接</title>
</head>
<body>
	<a href="python_002.html">去看图片</a>
</body>
</html>

运行结果：
在这里插入图片描述
点击能够链接到：

点击返回：

这样就实现了两个链接的往返。

当然也可以链接到外网，这里实现一下文字链接图片链接

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>链接</title>
</head>
<body>
	<a href="python_002.html">去看图片</a><br />
	<br />
	<a href="https://www.baidu.com/">去到百度搜索</a><br /><br />
	<a href="https://www.baidu.com/">[外链图片转存失败(img-i3y5mttB-1562053800862)(https://mp.youkuaiyun.com/mdeditor/images/7.jpg)]</a>
</body>
</html>

在这里插入图片描述
点击去到百度搜索或者点击图片都能去到百度搜索的页面。

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>链接</title>
</head>
<body>
	<br />
	<br />
	<a href="https://www.baidu.com/">去到百度搜索</a><br /><br />
	<a href="https://www.baidu.com/" title='去到百度搜索 ' target='_blank'>[外链图片转存失败(img-7Y7lvgNr-1562054247861)(https://mp.youkuaiyun.com/mdeditor/images/7.jpg)]</a>
</body>
</html>

在这里插入图片描述
点击图片，会再打开一个网页，而不是在本身跳转。
鼠标放在图片上，也会显示文字：去到百度搜索

还有一个链接到页面顶部的语句

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset='utf-8'>
	<title>链接</title>
</head>
<body>
	<br />
	<br />
	<a href="https://www.baidu.com/">去到百度搜索</a><br /><br />
	<a href="https://www.baidu.com/" title='去到百度搜索 ' target='_blank'>[外链图片转存失败(img-M6bkXjgz-1562056180389)(https://mp.youkuaiyun.com/mdeditor/images/7.jpg)]</a>
	<br /><br /<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

	<a href="#">链接到页面顶部</a>
</body>
</html>

在这里插入图片描述
点击就会回到页面顶部。
当我们在程序开发的时候，如果不知道写什么网址，可以先用# 代替，就类似于 pass。