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

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

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

  (1)、  href=”这里写要跳转的网页的地址”;

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

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

            网页一             跳转网页2    

登录后复制

 

 网页二代码:

            网页二             跳转网页1    

登录后复制

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

总结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)、总结a标签-img标签-绝对/相对路径的实例教程    [注]:这个是没有闭合标签的 ,图片的路径和网页路径一样,你写我的路径是没用的你要看你自己的路径,具体参考上边

     插入图片          @@##@@     

登录后复制

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

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

 

 

效果

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

希望大家多多评论啊!

 

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3197092.html

(0)
上一篇 2025年4月1日 03:18:58
下一篇 2025年4月1日 03:19:23

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • html、css容易被忽略的小知识点_html/css_WEB-ITnose

    都说前端容易,谁说的。前端上手快,越往后学习越困难。学习前端快一年了,依然发现一些小的知识点不会。这些经验性的东西不碰到永远学不会。 (1)title前面的logo。 就像这个编辑文章前面的logo。不知道大家知不知道这个图标是如何加载过来…

    编程技术 2025年4月4日
    100
  • html节点属性操作

    nbsp;html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> …

    编程技术 2025年4月4日
    200
  • html教程:用tabIndex轻松实现网页导航

    最近,当我在一个网站上输入表格数据时,我填写了一栏,并点击[tab]键移到下一栏;当我抬头时,我惊奇的发现光标跳到页面下方的另一栏中。我用鼠标将光标移到正确的文本栏中,但不久[tab]键又再次出现问题。这一情形使我想了解一下页面设计,以及t…

    编程技术 2025年4月4日
    200
  • html教程:WEB标准从头开始_DOCTYPE声明

    在较早之前的网页上,我们经常可以看到如下的网页结构代码: 这是一个网页 …… 立即学习“前端免费学习笔记(深入)”; …… 立即学习“前端免费学习笔记(深入)”; 很显然的,这种结构的网页代码是不符合Web标准规范的,但是浏览器仍然可以很好…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第一课

    在讲授第一课的时候,首先要给大家表明的一个概念是:我们学习的是一门语言,而不是一个编译工具,所以我们要习惯在编写程序的时候忽略编译工具的概念,因为只有忽略了编译工具,才能真正意义上的明白一门语言的精髓在哪里,也才能真正掌握一门语言到底是怎么…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第三课

    经过前面两课的学习,不知道你们对于什么是html有没有了一定程度上的了解,今天的第三课算是第一阶段的一个总结,会加入一点新的内容,但是更多的是会做总结,好了,废话不说了,进入今天的课程吧!在前两课的基础上,这一课主要是加入了一个插入图片的问…

    编程技术 2025年4月4日
    200
  • 一步步学习html—-第四课

    这一课我们主要讲解一下链接的问题:这个也可以定义为超文本链接,标签则是这个标签的全称是anchor,中文意思是锚;例子:http://www.baidu.com”>click!在网页上就会出现一个链接,其文本表现形式就是正…

    编程技术 2025年4月4日
    200
  • HTML的分段与换行代码说明

    在网页的排版中,经常会对文本进行分段和换行的操作,这两种操作由 标签 和标签来实现。 1、 -段落标签 p是英文单词“paragraph”的首字母,用来定义网页中的一段文本, 一般是成对出现。 2、-换行标签 br是英文单词“break”的…

    编程技术 2025年4月4日
    200
  • HTML的标题设置代码

    在word文档中,标题往往都需要格外醒目,例如加粗字体较大等。同样地在html文档中也可以设置标题以同样的格式显示。 我们可以用html标题标签来设置标题,一共有6个标题标签,从 到 ,数字越小,级别越高,文字也相应越大。 下面通过实例介绍…

    编程技术 2025年4月4日
    200
  • HTML的列表代码说明

    在编辑文档时,有时希望某些内容以列表形式显示出来,是其结构化和条理化。在html文档中,html列表标签主要分为序号列表和项目列表,前者是每个列表项都有个数字编号,后者则在每个列表项前有个圆点符号。 1、序号列表(也称为有序列表) 序号列表…

    编程技术 2025年4月4日
    200

发表回复

登录后才能评论