HTML中的路径和超链接标签

HTML中的路径和超链接标签

路径

1、目录文件夹和根目录

目录文件夹是一个普通文件夹，文件夹中存放一些制作页面所需要的相关素材，比如HTML文件、图片等

根目录是打开目录文件夹的第一层目录

2、VSCode打开目录文件夹

文件—>打开文件夹，打开一个根目录。在后续操作中可以直接在根目录中创建新的文件，也可以快速打开根目录中的文件。也可以将目录文件夹拖到VSCode中。

3、路径

​ 路径可以分为相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。也就是图片相对于HTML文件的位置。

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级，如<img src=“baidu.gif”/>
下一级路径	/	图像文件位于HTML文件下一级，如<img src=“images/baidu.gif”/>
上一级路径	…/	图像文件位于HTML文件上一级，如<img src="…/baidu.gif"/>

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径

例如：“D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif”。

超链接标签

在HTML中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

超链接语法格式

<a href=“跳转目标” target=“目标窗口的弹出方式”>  文本或图像  </a>

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就有了超链接的功能
target	用于指定链接页面的打开方式，其中_self为默认值,当前窗口打开页面，_blank为在新窗口中打开页面。

链接的分类：

1、外部链接，例如<a href=“http://www.baidu.com”>百度</a>

2、内部链接，网站内部页面的相互链接，例如<a href=“demo.html”>demo </a>

3、空链接，如果当时没有确定链接目标时，可以使用空链接。<a href="#">首页</a>

4、下载链接，地址链接的是文件.exe或者.zip等，例如<a href=“image.zip”>下载链接</a>

5、网页元素链接，在网页中的各种网页元素，如文本，图像，表格，视频等都可以添加超链接。例如<a href=“http://www.baidu.com”><img src=“img.jpg”></a>

6、锚点链接：点击链接，可以快速的定位到页面中的某个位置。

​ 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>。

​ 找到目标位置标签，里面添加一个id属性=上面的名字，如：<h3 id=“two”>第二集介绍</h3>。