HTML的路径和链接、注释、特殊字符

最新推荐文章于 2025-10-28 16:25:48 发布

原创

最新推荐文章于 2025-10-28 16:25:48 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文详细介绍了HTML中的路径类型，包括相对路径和绝对路径，以及超链接的使用，包括外部链接、内部链接、空链接、下载链接、网页元素链接和锚点链接。此外，还讲解了HTML注释的添加方法和特殊字符的使用，以帮助理解并提高网页制作能力。

学习目标：

掌握两类路径；

掌握六类链接；

学习内容：

在网页制作的过程中，少不了跟路径打交道，比如，包含一个文件，插入一个图片等，与路径都有关系，如果使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。

一、路径之相对路径

相对路径∶以引用文件所在位置为参考基础，而建立出的目录路径。

这里简单来说，图片相对于HTML页面的位置。

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

代码如下：

<body>
    <!-- 同一级路径。直接在同级的目录文件中找到图片。 -->
    <img src="img.jpg" />
    <!-- 下一级路径。先找到images文件，再找到所需要的图片。 -->
    <img src="images/img.JPG" />
    <!-- 上一级路径。先..返回到上一级目录中，再找到要的图片。 -->
    <img src="../img.jpg" />
</body>
</html>

二、路径之绝对路径

绝对路径∶是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
绝对路径是和当前html文件无关的一个路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http;//www.itcast.cn/images/logo.gif”。
这里要注意的是“文档地址”和“网络地址”是不一样的斜杠。

<body>
    <!-- 文档下的图片 -->
    <img src="C:\Users\86132\Desktop\VScode实验\第一天\images\img.JPG" /> 

    <!-- 复制百度logo网址 -->
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</body>
</html>

使用绝对路径的缺点：

事实上，在网页编程时，很少会使用绝对路径，如果使用“E:\book\网页布\代码\第2章\bg.jpg”来指定背景图片的位置，在自己的计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片了。因为上传到Web服务器上时，可能整个网站并没有放在Web服务器的E盘，有可能是D盘或H盘。即使放在Web服务器的E盘里，Web服务器的E盘里也不一定会存在“E:\book\网页布局\代码\第2章”这个目录，因此在浏览网页时是不会显示图片的。

三、超链接标签

链接的语法格式

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

两个属性的作用如下：

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

2.链接的分类

外部链接:例如< a href="http:// www.baidu.com ">百度</a >。

    <h2>1.外部链接</h2>

    <h4>新窗口打开页面</h4>
    <a href="https://www.baidu.com" target="_blank">认识HTML</a>

    <h4>当前窗口打开页面</h4>
    <a href="https://www.baidu.com" target="_self">认识HTML</a>