欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

总结a标签-img标签-绝对/相对路径的实例教程

程序员文章站 2022-03-19 11:06:19
...

美好的星期六,今天多写一点,争取早点写js这个有点小无聊。

一、先来讲点网页之间的跳转

  (1)、<a href=""></a> href="这里写要跳转的网页的地址";

【注】:起始我们的话,就是写的两个页面之间相互跳转,或直接通过网址跳转别的网页。

 网页一代码:我们在里写两个网页他俩之间进行跳转 

<html>
    <head>
        <title>网页一</title>
    </head>
    <body>
     <a href="网页2.html">跳转网页2</a>
    </body>
</html>

 网页二代码:

<html>
    <head>
        <title>网页二</title>
    </head>
    <body>
     <a href="网页1.html">跳转网页1</a>
    </body>
</html>

  两个文件要在同一文件夹下,【注】:页面命名最好是英文的,如果是中文到后面可能出现问题,我这里只是让大家更明白一点

总结a标签-img标签-绝对/相对路径的实例教程

【注】: 在这里两个文件在同一级,的时候这样跳就可以,若不是同一级呢!

总结a标签-img标签-绝对/相对路径的实例教程总结a标签-img标签-绝对/相对路径的实例教程

就像是这样呢!网页2在另一个文件夹中我们的 "href=' '" 中路径又该如何呢! look当然是看图了。

网页一跳转网页2

总结a标签-img标签-绝对/相对路径的实例教程

其实我们经常上网的话会见到,那这又是啥意思呢!这里的意思是以当前文件也就是 "网页1" 为基准 ,意思就是跳转到 子文件夹 下的 网页2中去;

但是问题又来了,我要 网页2 跳转到 网页1 中去这该咋办 这里就要介绍一个小东西了 ../ 这个代表了返回上一级文件夹 网页2的 上一级不就是子文件夹吗!

和子文件夹同一级的网页不就是网页1吗!

所以网页2跳转网页1的代码是这样的

总结a标签-img标签-绝对/相对路径的实例教程

这意思表示了 他跳转到上一个文件夹中网页 1 中去

一、相对路径

这种路径我们叫做相对路径 ,就相对与当前文件,你要寻找的文件在哪个位置,当然我们还有另外一种,就是绝对路径但是不推荐用。

相对路径在任何人电脑上都可以用,但绝对路径就不可以了,谁知道你会把文件放在哪里。

二、绝对路径

教大家拿到绝对路径的好方法,把文件拖入浏览器地址栏就会显示你这个文件的完整地址 。

  总结a标签-img标签-绝对/相对路径的实例教程 只要盘符后边的哟!前边 file:/// 不需要

  在网页二中写入完整地址也可以跳转

  总结a标签-img标签-绝对/相对路径的实例教程

 最后来点小东西,昨天说要说网页图片的插入

一、图片的插入 

  (1)、<img src="路径"> [注]:这个是没有闭合标签的 ,图片的路径和网页路径一样,你写我的路径是没用的你要看你自己的路径,具体参考上边

<html>
     <head>
	<title>插入图片</title>
     </head>
     <body>
	<img src="img/01.jpg">
     </body>
</html>

 (2)、路径 [注]:由于我的文件是这样放的,所以我的图片就 图片这个html 文件夹img文件夹中的图片名是 01.jpg 的图片。 在这里还要注意你图片的格式路径格式与图片格式不同也无法显示哟!

总结a标签-img标签-绝对/相对路径的实例教程总结a标签-img标签-绝对/相对路径的实例教程

效果

总结a标签-img标签-绝对/相对路径的实例教程

希望大家多多评论啊!

以上就是总结a标签-img标签-绝对/相对路径的实例教程的详细内容,更多请关注其它相关文章!