对路径与绝对路径的使用方法

在《HTML元素中的属性1——零基础自学网页制作》这一篇教程最后内容中，我们详细展示了"绝对路径"与"相对路径"在写法上的区别。示例代码如下：

<img src="file:///D:/零基础自学网页制作/image1.jpg"/><!--绝对路径-->
<img src="image1.jpg"/><!--相对路径-->

那什么时候使用"相对路径"什么时候使用"绝对路径"呢？

搞清楚这个问题就要介绍一下网页制作的最后一步，上传服务器的过程与要求。

我们所有的可以通过网络在浏览器上显示的页面都是存储在网络服务器中的文件。

网络服务器是什么？大家可以理解为一台电脑，和我们使用的个人计算机在构造上差不多，但是功能更加强大、稳定。因此服务器的价格相比个人电脑更加昂贵，可靠性也要更高。

服务器图片

如果我们的网页或网站的制作完成后，需要去找一个网络服务器或是网络服务器中的部分内存（也可以自己搭建简单服务器用来测试），之后会给我们相关的账号，我们自己设置密码后，使用ftp工具上传到网络服务器中，然后给我们分配一个临时的域名用来测试网站。这样我们就可以使用手机或电脑通过浏览器在线打开自己的页面了。这是笔者做过的一个全景展馆页面----在线齐越教育馆（http://qiyueehibitionhall.gz01.bdysite.com/indexWeiXin.html）。

那页面或网站如何上传呢？

还记得最开始我们建立的那个"零基础自学网页制作"文件夹吗？简单来说通过把这个文件夹上传就可以了，把里面"第一个页面.html"改成"index.html"这个页面就变成了我们的主页。

如果，这个页面中的所有路径都是使用绝对路径写的，这时问题就来了，

<img src="file:///D:/零基础自学网页制作/image1.jpg"/><!--绝对路径-->

页面及其所在文件夹在我的电脑上是在D盘，我上传服务器之后，文件就不一定还在服务器的D盘上，也许是在服务器的F盘呢？或者把文件发给同事，同事接收后在C盘上打开，绝对路径是不是就不能指示正确的位置了？因此页面就不能正确的找到相应信息了。

为了解决因为上传服务器或者换电脑而不能正确找到资源路径的问题，相对路径的概念就产生了，相对路径是不管你在哪个磁盘上，它只是遵循资源与页面文件的相对位置，只要文件夹中的相对位置没变，无论你把文件夹搬运到天涯海角，页面依然可以循着路径找到相关信息。

<img src="image1.jpg"/><!--相对路径-->

下面为家具体展示一下相对路径的写法以及页面文件与路径指定文件的位置关系。

<img src="image1.jpg"/><!--相对路径-->

这句代码指的是页面文件"第一个页面.html"与图片"image1.jpg"在一个文件夹中。如图所示：

如果，图片比较多，我们建立一个叫做"img"的文件夹来专门存放图片，那代码该怎么写呢？

如图所示：

打开文件夹，里面有一张图片"image2.jpg"。如图：

下面我们把这个文件召唤出来！

代码示例：

<img src="image1.jpg"/><!--相对路径--><img src="img/image2.jpg"/><!--相对路径-->

效果如下：两张图片都进来了。

那如果我们图片种类比较多，在img文件夹内部也要分文件夹，导入不同文件夹中的方法相信大家已经猜到了。图片分类如下：

代码如下：

<img src="image1.jpg"/><!--相对路径-->
<img src="img/办公室/image2.jpg"/><!--相对路径-->
<img src="img/战斗机/image3.jpg"/><!--相对路径-->

效果如图：

大家发现书写规律没有？

相对于绝对路径来说，相对路径只需要写工程文件夹（将要上传服务器并且包含页面或网站所有内容的文件夹）内部的路径就可以了。这里"零基础自学网页制作"文件夹可以看做是工程文件夹。因此，包括"零基础自学网页制作"文件夹，以及以前的路径信息在"相对路径中"都不需要写出。如图：红框以内的都不用写了。

那什么时候使用绝对路径呢？一般情况下，在需要引入其他网站的图片或页面或其他信息时使用绝对路径！

示例代码如下：

<img src="https://bkimg.cdn.bcebos.com/pic/38dbb6fd5266d01694f698369a2bd40734fa35c4?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UyNzI=,xp_5,yp_5"/>

这样我们就通过访问百度百科的地址在自己的页面中打开了歼20的图片，如图：

这样做的好处是可以节省自己服务器的空间，减小工程文件夹的体积。

总结一下：

在页面中显示工程文件夹内的资源或信息使用"相对路径"，不使用"绝对路径"。

在页面中显示其他网站的资源或信息使用"绝对路径"，不使用"相对路径"。

今天的内容结束了。

最后请大家思考一个问题，为什么多个<p></p>标签中的内容会自动换行，而多个<img>标签却并排显示而不会换行呢？这个问题我们会在后面的讲解中给出答案！

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

下一篇继续为大家介绍常用元素的使用方法。

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

、内联框架标签

HTML的内联框架元素<iframe>标签可以将其他的HTML页面嵌入到当前页面中。

内联框架的代码结构：

<a href="www.abc.com" target="iframe"></a>

<iframe src="" srcdoc="" frameborder="0" name="iframe"></iframe>

• src 表示被嵌套的URL地址；
• srcdoc 该属性可以是一段html代码，这些代码会被渲染到iframe中展示最终的样式。
• name 与标签和<form>标签的target属性可以配合使用，当点击对应的标签按钮时，可以跳转到点击的标签的URL地址。

拓展：使用iframe可以实现一个后台管理系统的菜单导航。

二、CSS基础语法

1.什么是CSS？

CSS全称：Cascading Style Sheets，中文名称叫层叠样式表。它是用来表示HTML、XML等文件 样式的计算机语言。

2.CSS相关术语：

CSS的规则由两个部分组成：

• 选择器：由html元素构成；
• 声明块：由一对“{…}”包裹的名、值对。

例如：

<style>

/* 声明块中的每一个名、值对，叫一个“样式声明” */

h1 {

    /* 前景色 */

    color: green;

    font-weight: 200;

}

</style>

<header class="page-header">

    <h1 id="page-title" class="title" style="color: green;">Web全栈开发入门课程</h1>

    <h2 id="page-title">大家晚上好，我是Hello World！</h2>

</header>

效果如下：

在Chrome浏览器中，通过F12打开控制台工具，通过选择工具选中h1标签，我们可以看到一个元素的样式会受到四个级别的影响：

• 继承的：根据元素在文档的结构和层级关系来确定它的最终样式；
• 浏览器客户端：用户代理样式（user agent style），基本上浏览器的表现样式都是一致的；
• 用户自定义：写在HTML文档<style>标签中的样式；
• 行内样式（内联样式）：写在元素的style属性中的样式。

3.CSS层叠与优先级

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS层叠与优先级</title>

    <!-- 如果CSS样式仅仅用来控制当前页面的元素，我们就用style标签写在当前页面中。 -->

    <style>

        /* CSS（Cascading Style Sheets）：层叠样式表 */

        /* 1.标签选择器 */

        h1 {

            color: green;

        }

        /* 2.属性选择器 */

        /* *：表示所有元素（标签） */

        *[class="title"] {

            color: hotpink;

        }

        h1[class="title"] {

            color: indigo;

        }

        h2[class="title"] {

            color: mediumslateblue;

        }

        /* 3.类选择器 */

        /* .title {

            color: lawngreen;

        } */

        /* 4.id选择器 */

        /* #page-title {

            color: lightseagreen;

        } */

        /* 标签选择器 < 类选择器 < id选择器 < 行内样式 */

    </style>

</head>

<body>

    <header class="page-header">

        <h1 id="page-title" class="title">Web全栈开发入门课程</h1>

        <h2 id="page-title" class="title">大家晚上好，我是Hello World！</h2>

    </header>

</body>

</html>

效果图：

由上述例子可以看出CSS的优先级是：

标签选择器 < 类选择器 < id选择器 < 行内样式

其中行内元素的优先级别是最高的，这点是需要注意的，其实这个优先级从控制台也是能看出来的，如下图：

通过学习CSS的基础知识，我发现还是有好多属性需要去记，这个内容实在是太多了，还是需要多写，多练才可以熟能生巧。

TML元素的属性

属性是为HTML元素提供的附加信息。

为相同的HTML元素指定不同的属性，会呈现不同的功能或效果。

举个例子：

比如我们在上一篇中练习过的<a></a>标签构成的超链接元素中有一个href属性，这个属性指定的是点击后跳转的页面地址，相同的<a>标签改变href属性就能跳转不同的页面。例如

<a href="https://www.bilibili.com/read/cv2720755">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为href属性不同，打开的页面也不同。-->

小伙伴们自己写的时候要注意使用半角符号，不然不能正确打开链接。

超链接元素中还有一个控制链接页面打开的属性叫做target，是用来控制新打开页面窗口的位置。下面我们就看看target属性为_blank和_parent的情况下的不同。例如

<a href="https://www.bilibili.com/read/cv2720755" target="_blank">歼-20战斗机</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">歼-20战斗机</a><!-- 注释 看起来一样的超链接元素因为target属性不同，打开的页面所在窗口不同。-->

测试后，target="_blank"时，新页面在测试页面窗口旁边新建一个窗口打开。

target="_parent"时，新页面在原有测试页面窗口中打开。

如图所示：

左边为_blank,右边为_parent,点击左边链接后，新窗口在原有窗口旁边打开。如下图：

点击右侧

新页面在原窗口处打开。

<a>标签的target属性还有_self、_top这样的属性，感兴趣的小伙伴可以自行测试。

一般HTML元素的通用属性有：class 、id 、style 、title这四类，其中class 、id 、style这三个属性会在CSS的讲解中详细学习。

下面我们通过练习来看看title属性的作用。

HTML元素属性使用练习1

NO.1: title

title属性用于显示元素的额外信息使用。示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
</head> 
<body>
  <h1>第一个网页</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中国最先进战斗机">歼-20战斗机</a>
</body> 
</html>

效果如图：当鼠标移动到超链接上时，"中国最先进战斗机"的说明就出现在下侧。

NO.2:href/src/url

这三个属性虽然写法不同，但都是为元素指定路径使用的。不属于通用属性。

例如<a>标签中指定链接路径使用的是href，而<img>标签中导入图片的路径是src，url在css中也常用来引入链接。具体练习大家可以翻看《HTML中的元素使用方法2——零基础自学网页制作》一文。

这里要介绍的是关于网页中的路径的两个重要概念：绝对路径、相对路径。

绝对路径是指文件在硬盘上真正存在的路径。

相对路径就是相对自己的目标文件的位置。

怎么理解这两个概念呢？举个例子：

如果我们要在"第一个页面.html"中显示一张图片image1.jpg，它们都在我的"D盘/零基础自学网页制作"这个文件夹中。如图：

如果用绝对路径导入写法是这样的：

<img src="file:///D:/零基础自学网页制作/image1.jpg"/>

相对路径这样写：

<img src="image1.jpg"/>

大家观察一下，也看出了绝对路径与相对路径的区别了。

另外，这样的链接也属于绝对路径：href="https://www.bilibili.com/read/cv2720755"

那么什么时候使用相对路径什么时候使用绝对路径呢？这个问题我会在明天深入为大家讲解，这涉及到网页或网站上传服务器的问题。

做教程确实是没什么人看，但是我依然会坚持，我是一名高校教师（认证资料等疫情结束后去办公室拍摄上传吧），把自己的知识写出来对自己来说是一个提高，也把原来很多常用却不甚了然的概念再次打磨清晰是我最大的收获。本篇教程针对完全没有基础的网页制作学习者，利用碎片时间学习，只要我们坚持，必然可以完成网页制作的学习，为未来学习更加复杂的内容打下基础！

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作