学了个HTML 3：路径和超链接

最新推荐文章于 2021-12-23 10:32:10 发布

zbossz

最新推荐文章于 2021-12-23 10:32:10 发布

阅读量254

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/weixin_54130714/article/details/114648589

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、路径

1、绝对路径

①、同级路径

当我们插入图片的时候，需要给< img>提供一个路径，当图片和html文件同级也就是

在这里插入图片描述
这样的时候，我们就说他们是同级的，这个时候，想要引用图片就十分方便：

<img src="green.jpg"/>

这样就行了。

②、下一级路径

就像这样

在这里插入图片描述
那么我们需要这样：

 <img src="images/green.jpg" />

“/“就是下一级的意思
在这里插入图片描述

③、上一级路径

"../"就是上一级的操作。

在这里插入图片描述
文件要像这样子。

<img src="../green.jpg" />

在这里插入图片描述

2、绝对路径

    <img src="C:\web editor\vccode\green.jpg" />

在这里插入图片描述
效果也是一样的。但这个是只限于我们自己的电脑，所以我们还是需要用网络的绝对路径才比较好。

二、超链接标签

1、链接的语法格式

< a>就是超链接的标签，a是anchor的缩写，意思是锚。
< a>也具有属性，比如href、target

href就是放超链接的网页地址的，是< a>的必要属性。target是用来定义网页的打开方式，有_self当前页面打开的意思，_blank就是指新窗口的打开方式，默认是当前页面打开，就会覆盖掉我们本来的网站。

2、链接的分类

①外部链接

通往外部的网站

在这里插入图片描述

<a href="https://join.qq.com" target="_self"> 腾讯招聘 </a>

这样会覆盖掉我们本来的网站。
在这里插入图片描述

<a href="https://join.qq.com" target="_blank"> 腾讯招聘 </a>

这样就会新开一个网页
在这里插入图片描述

②内部链接

网站内部页面的相互链接，内部链接不需要http://，直接写文件名字就行了。

    <a href ="别伤心了.html">别伤心了</a>

在这里插入图片描述

③空链接

 <a href ="#">对的人会来的</a>

设置成空链接的时候，是没法跳转的。
在这里插入图片描述

④下载链接

地址链接的是.exe或者是.zip等压缩包形式。
我们将green压缩一下。

在这里插入图片描述

    <a href="../green.zip">下载绿色养眼图片</a>

在这里插入图片描述
点击就会下载

除此之外，< a>之间还可以用图片做导航。

<a href ="https://www.baidu.com"><img src="../百度.png"></a>

在这里插入图片描述
就会跳转到这里

不止文件和图片可以添加超链接，声音、视频、表格等等都可以。

⑤锚点链接

就是点击链接的时候，可以快速定位到页面的某个位置，具有跳转的功能。

<body>
    <!--<img src="C:\web editor\vccode\green.jpg" />-->
    <a href="https://join.qq.com" target="_blank"> 腾讯招聘 </a>
    <a href ="别伤心了.html">别伤心了</a>
    <a href ="#">对的人会来的</a>
    <a href="../green.zip">下载绿色养眼图片</a>
    <a href ="https://www.baidu.com"><img src="../百度.png"></a>
    <a href="#one">单身吗</a>
    <a href="#two">活了多久</a>
    <a href="#three">爱情？</a>
    <a href="#four">放肆？</a>

    <h3 id="one">单身吗</h3>
    <br>是的。....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    <h3 id="two">活了多久了</h3>
    <br>快20年了。....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    <h3 id="three">目前有经济独立吗？</h3>
    <br>没有。....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
    <h3 id="four">有过放肆的感觉吗</h3>
    <br />没有。....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
</body>

在这里插入图片描述
是可以跳转的。
href属性的格式要以#名字的形式。

zbossz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学了个HTML 3：路径和超链接

一、路径1、绝对路径①、同级路径当我们插入图片的时候，需要给< img>提供一个路径，当图片和html文件同级也就是这样的时候，我们就说他们是同级的，这个时候，想要引用图片就十分方便：<img src="green.jpg"/>这样就行了。②、下一级路径就像这样那么我们需要这样： <img src="images/green.jpg" />“/“就是下一级的意思③、上一级路径"../"就是上一级的操作。文件要像这样子。<im
复制链接

扫一扫