一.相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
即图片相对于你写的html页面的位置
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图片与html文件处于同一级,如<img src="baidu.gif"> | |
下一级路径 | / | 图片位于html文件下一级,如<img src="images/baidu.gif"> |
上一级路径 | ../ | 图片位于html文件下一级,如<img src="../baidu.gif"> |
1.同一级路径
可以看到此时oip的这张图片与我写的这个html文件(三种相对路径)同处在HTML这个文件夹里,他们属于同一级路径
2.下一级路径
这里可以看到这个html文件(三种相对路径)与image相对为同一级,可爱茂夫在相对路径的下一级
3.上一级路径
百分百茂夫相对与HTMl文件夹为同一级,即百分百茂夫在html文件(三种相对路径)的上一级
最后想说茂夫真的帅
4.总结:相对其实就是找到与html同级包含图片的文件/图片,从同级这里出发,寻找文件
二. 绝对路径
1.左击此框框可以看到现在此文件夹的路径
一般来说绝对路径不能用live server查看,因为HTML文件是通过Web浏览器访问的,而Web浏览器出于安全考虑不会允许打开file://开头的本地图片
解决办法
直接在本地打开html文件
2.网络中的绝对路径使用
比如获取csdn左上角猿头像,只需要右键复制图像链接
还是会遇到相同的问题,解决办法也跟上面相同
三.超链接标签
在html标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
1.超链接的语法规范
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>
a为anchor的缩写,意为锚。href的全称为Hypertext Reference,意为超文本引用。
属性 | 作用 |
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性,它就具有超链接的功能 |
target | 用于指定链接页面的方式,其中_self为默认值,_blank为在新窗口中打开方式 |
2.链接的分类
1.外部链接,例如<a href=写文章-CSDN创作中心">csdn社区</a>
单机一下->
但此时新打开的页面会覆盖掉原来的窗口,因为此时target默认为_self.
想要另起一个窗口,把target修改为blank,意思为空白的(新建页)。
2.内部链接
网站内部页面之间的相互链接,直接链接内部页面名称即可,例如创立两个html文件
单击->
3.空链接
当我们没有连接目标时,通常用#先代替
4.下载链接
如果href里面地址是一个文件或者压缩包,会下载这个文件。
5.网页元素链接
在网页中的各种网页元素,如文本 图像 表格 音频 视频等都可以添加超链接。
例如我现在点开一张灵能百分百的图片,就让他跳转到b站的灵能百分百。
->
6.锚点链接
点我们链接,可以快速定位到页面中的某个位置
在链接文本的href属性中,设置属性值为#名字的形式,如<a href="#two"> 第2集</a>
找到目标位置标签,里面加一个id属性=名字,如<h3 id="two">第二集介绍</h3>
例如我们查一下影山茂夫,他这里会有一个目录,点击它,就可以跳转到相应位置
->
假设我现在想跳转到角色介绍处
点击跳转->
、