HTML中的路径和超链接标签

偏执的太偏执、 2022-12-14 15:53 285阅读 0赞

# HTML中的路径和超链接标签 #

### 路径 ###

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

2、VSCode打开目录文件夹

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

3、路径

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

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

<table> 
 <thead> 
  <tr> 
   <th>相对路径分类</th> 
   <th>符号</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>同一级路径</td> 
   <td></td> 
   <td>图像文件位于HTML文件同一级，如&lt;img src=“baidu.gif”/&gt;</td> 
  </tr> 
  <tr> 
   <td>下一级路径</td> 
   <td>/</td> 
   <td>图像文件位于HTML文件下一级，如&lt;img src=“images/baidu.gif”/&gt;</td> 
  </tr> 
  <tr> 
   <td>上一级路径</td> 
   <td>…/</td> 
   <td>图像文件位于HTML文件上一级，如&lt;img src="…/baidu.gif"/&gt;</td> 
  </tr> 
 </tbody> 
</table>

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

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

### 超链接标签 ###

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

超链接语法格式

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

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

链接的分类：

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