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>。