html基础-a标签-img标签-绝对/相对路径(3)
美好的星期六,今天多写一点,争取早点写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>
两个文件要在同一文件夹下,【注】:页面命名最好是英文的,如果是中文到后面可能出现问题,我这里只是让大家更明白一点
【注】: 在这里两个文件在同一级,的时候这样跳就可以,若不是同一级呢!
就像是这样呢!网页2在另一个文件夹中我们的 "href=' '" 中路径又该如何呢! look当然是看图了。
网页一跳转网页2
其实我们经常上网的话会见到,那这又是啥意思呢!这里的意思是以当前文件也就是 "网页1" 为基准 ,意思就是跳转到 子文件夹 下的 网页2中去;
但是问题又来了,我要 网页2 跳转到 网页1 中去这该咋办 这里就要介绍一个小东西了 ../ 这个代表了返回上一级文件夹 网页2的 上一级不就是子文件夹吗!
和子文件夹同一级的网页不就是网页1吗!
所以网页2跳转网页1的代码是这样的
这意思表示了 他跳转到上一个文件夹中网页 1 中去
一、相对路径
这种路径我们叫做相对路径 ,就相对与当前文件,你要寻找的文件在哪个位置,当然我们还有另外一种,就是绝对路径但是不推荐用。
相对路径在任何人电脑上都可以用,但绝对路径就不可以了,谁知道你会把文件放在哪里。
二、绝对路径
教大家拿到绝对路径的好方法,把文件拖入浏览器地址栏就会显示你这个文件的完整地址 。
只要盘符后边的哟!前边 file:/// 不需要
在网页二中写入完整地址也可以跳转
最后来点小东西,昨天说要说网页图片的插入
一、图片的插入
(1)、<img src="路径"> [注]:这个是没有闭合标签的 ,图片的路径和网页路径一样,你写我的路径是没用的你要看你自己的路径,具体参考上边
<html>
<head>
<title>插入图片</title>
</head>
<body>
<img src="img/01.jpg">
</body>
</html>
(2)、路径 [注]:由于我的文件是这样放的,所以我的图片就 图片这个html 文件夹中 img文件夹中的图片名是 01.jpg 的图片。 在这里还要注意你图片的格式路径格式与图片格式不同也无法显示哟!
效果
希望大家多多评论啊!
html基础-a标签-img标签-绝对/相对路径(3)的更多相关文章
- Mybatis动态SQL单一基础类型参数用if标签
Mybatis动态SQL单一基础类型参数用if标签时,test中应该用 _parameter,如: 1 2 3 4 5 6 <select id="selectByName" ...
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
- XSS攻击之基础篇:HTML标签与字符串的渲染
<body> XSS攻击之基础篇:HTML标签与字符串的渲染 测试 <div class="a1"> </div> <div class= ...
- HTML&CSS基础-html的图片标签
HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...
- HTML&CSS基础-html常用的标签
HTML&CSS基础-html常用的标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html& ...
- svg基础--基本语法与标签
svg系列–基础 这里会总结svg的基础知识和一些经典的案例. svg简介 SVG(Scalable Vector Graphics)is an XML-based Language for crea ...
- 前端基础之html常用标签
前言: 1.在B-S模式下,server服务端和客户端之间 使用http协议(规定 客户端应该怎么请求服务端,服务端应该怎么响应)通信: 2.传输过程 浏览器 向服务端发起 post/get请求 服务 ...
- 前端基础-html 字体标签,排版标签,超链接,图片标签
主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...
- 前端基础-html 列表标签,表格标签,表单标签
一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...
随机推荐
- 【wireshark】抓包和文件格式支持
1. 抓包 捕获从网络适配器提取包,并将其保存到硬盘上. 访问底层网络适配器需要提升的权限,因此和底层网卡抓包的功能被封装在dumpcap中,这是Wireshark中唯一需要特权执行的程序,代码的其他 ...
- JDK,常见数据结构解读
一.情有独钟 对数据结构情有独钟,打算慢慢把jdk里的实现都读一遍,发现其中的亮点,持续更新. 二.ArrayList 这应该是我们学习java最早接触的到的数据结构,众所周知,数组在申请了内存之后, ...
- h5博彩webapp项目实例|h5棋牌游戏|h5博彩app案例
html5实现的博彩webapp.h5棋牌app实例,运用h5+css3+zepto+jQ+swiper+layer等技术进行布控开发,750px最大宽度适配手机端设备,采用flex+rem布局样式. ...
- python中的sort方法使用详解
Python中的sort()方法用于数组排序,本文以实例形式对此加以详细说明: 一.基本形式 列表有自己的sort方法,其对列表进行原址排序,既然是原址排序,那显然元组不可能拥有这种方法,因为元组是不 ...
- hadoop2.x 安装配置
hadoop2.x在系统架构上与hadoop1.x有很大的变化 原文地址: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-y ...
- java HashMap源码分析(JDK8)
这两天在复习JAVA的知识点,想更深层次的了解一下JAVA,所以就看了看JAVA的源码,把自己的分析写在这里,也当做是笔记吧,方便记忆.写的不对的地方也请大家多多指教. JDK1.6中HashMap采 ...
- word黑底白字
我们在使用word文档编辑文件时,有时候希望某段文字采用黑底白字,以区分其他段落的白底黑字从而达到强调的效果. 方法是: 1. 选中待处理的段落. 2. 点击“设计”选项卡. 3. 找到“设计”选下卡 ...
- 笔记五:python字符串
一:学习内容 字符串类型 字符串类型判断 字符串类型互转 字符串小练习 二:字符串类型 1. basestring 在python中和字符串相关的数据类型为:str和unicode,他们都是bases ...
- Maven 映像
国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...
- TCP三次握手/四次挥手
TCP 三次握手 TCP 连接是通过三次握手进行初始化的.三次握手的目的是同步连接双方的序列号和确认号并交换 TCP 窗口大小信息.以下步骤概述了通常情况下客户端计算机联系服务器计算机的过程: 1. ...