HTML的路径及其超链接

目录

一.路径

1.目录文件夹和根目录

2.相对路径

（1）.位于同一路径

（2）.下一级路径

（3）.上一级路径

3.绝对路径

二.图片引入标签

三.超链接

1.链接的语法：

2.链接的分类

（1）.外部链接

（2）.内部链接

  (3).空连接

（4）.下载链接 

（5）.网页元素链接

（6）.锚点链接

---

一.路径

1.目录文件夹和根目录

• 目录文件夹：就是一个普通的文件夹，用于存放素材

 图中的文件夹就是一个根目录

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

 图中就是根目录打开的第一层，也就是目录文件夹

---

在这里为讲解方便就先提及一下 img：是图片引用标签  

语法：

<img src="图片地址">

src是图片引入的必须属性 

2.相对路径

• 一引用文件所在位置为参考，基而建立出的目录的路径
• 简单来说：你引用的文件相对于HTML文件的位置

（1）.位于同一路径

 如图所示想在“案例.html”中引入“00.1jpg”，而这它们为同一阶层的根目录中那么就可以直接引用

例如：“案例.html”中引入“00.1jpg”那么就可以直接引用。

<img src="001.jpg">

（2）.下一级路径

html文件与要引用的文档的目录文件夹位于同一级

引用时语法：<img src="图片所在的目录文件夹名 / 图片名"

例如： 此时在“案例.html”中引入“001.jpg”

<img src="photl/001.jpg">

（3）.上一级路径

要引用的文档与html文档的目录文件夹位于同一级

引用语法：<img src="..  /  图片名">

例如： 此时在“案例.html”中引入“001.jpg”

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

*注：相对位置每加一层就加一个“ ../  ”

3.绝对路径

指目录下的绝对位置直接到达目标位置

例如：D:\admin\学习中心\HTML

或者完整的网页：https://www.w3school.com.cn/

---

二.图片引入标签<img>

语法：

<img src="图片名"/>

图片标签的一些属性

图片标签的属性

属性	属性值	解释
src	图像路径	插入图片的必要属性；指图片的路径
alt	文本	替换文本；图片不能显示的时候显示出文字
title	文本	提示文本；鼠标放到图片上会显示文字
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置边框粗细

*注：这些属性一定是在“img”后

代码展示：

---

三.超链接<a> 

1.链接的语法：

<a href="跳转目标"  target="目标窗口弹出方式">图片或文本</a>

超链接的属性

超链接的属性

属性	属性值	解释
href	地址	用于指定链接目标的url地址；当标签应用href时它就具有了超链接属性
target	_blank _self _parent _framename	用于指定链接页面的打开方式

target属性值

属性值	解释
_blank	新窗口打开（重点）
_self	当前页面打开；默认打开方式（重点）
_parent	在父框中打开（了解）
_framename	在指定框架中打开（了解）

2.链接的分类

（1）.外部链接

          引用英特网上的网站的链接

例如：

<a href="https://v.qq.com/" target="_blank">腾讯视频</a>

（2）.内部链接

          引用自己电脑中的文件

例如：

<a href="file:///D:/admin/%E5%AD%A6%E4%B9%A0%E4%B8%AD%E5%BF%83/HTML/css%E5%AE%9E%E9%AA%8C.html" target="_self">打开HTML</a>

(3).空连接

        如果当前没有确定的链接目标时就可以用空连接

例如：

<a href="#" >空连接</a>

（4）.下载链接 

      如果“href ”里面的地址是一个压缩包或或文件则会下载这个文件

（5）.网页元素链接

   在网页中的各种元素如：文本，图像，音频等都可以添加超链接

（6）.锚点链接

      点击链接可以快速定位到同一个页面中的某个位置

• 在连接文本的href属性中设置属性值为——“#命名”

<a href="#one">第一集</a>

找到目标位置标签，里面添加一个——id="命名"

<p id="one">第一集的内容</p>