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

在《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>标签实现文本内链接——零基础自学网页制作

着移动设备的普及，响应式网站已经成为了现代网页设计的标配。响应式网站可以自动适应不同设备的屏幕大小，提供更好的用户体验。如果你想学习如何制作响应式网站，下面是一些简单的步骤和技巧，帮助你开始这个过程。

一、计划和设计

在制作响应式网站之前，你需要先进行计划和设计。你可以先确定你的网站主要的布局和功能，然后细化到不同设备的屏幕大小。考虑到不同设备的视觉和交互需求，你可以使用流式布局、媒体查询、弹性图片和自适应字体等技术来实现响应式设计。

二、使用流式布局

流式布局是指网页的布局随着屏幕大小的变化而自动调整。你可以使用百分比单位来设置元素的宽度和间距，而不是固定像素值。这样，当屏幕的大小改变时，元素的大小和布局也会自动适应。

三、使用媒体查询

媒体查询是一种CSS3的功能，可以根据设备的特性来应用不同的样式。你可以使用媒体查询来设置不同屏幕大小下的元素样式，如字体大小、图片大小、列数等。通过媒体查询，你可以为不同设备提供最佳的显示效果。

四、弹性图片

在响应式网站中，图片也需要自适应屏幕大小。你可以使用CSS3的max-width属性来限制图片的最大宽度，使其在小屏幕上不会溢出。同时，你也可以使用srcset属性来为不同屏幕大小提供不同分辨率的图片，以提高加载速度和显示质量。

五、自适应字体

字体大小在不同屏幕大小下也需要自适应。你可以使用CSS3的rem单位来设置字体大小，它相对于根元素的字体大小。通过设置根元素的字体大小和使用rem单位，你可以让字体在不同屏幕大小下按比例自动调整。

六、测试和优化

制作响应式网站后，你需要在不同设备和浏览器上进行测试，以确保它能够在各种情况下正常显示和操作。你可以使用浏览器的开发者工具来模拟不同设备的屏幕大小和触摸操作。同时，你也可以利用一些在线工具和服务来测试网站的响应式性能和兼容性。

七、使用示例

家好，我是 Echa。

前段时间，老铁们私信我有么有又免费又好用的在线代码编辑器，最近找了找。终于找到了。给老铁们安排上。创作不易，喜欢的老铁们转发加个关注，点个赞，速速收藏，谢谢！

今天来推荐六个好用又免费的在线代码编辑器！

CodeSandbox

在线地址：https://codesandbox.io/

CodeSandbox 是一个在线代码编辑器，主要用于创建 Web 应用项目，其提供了多种模块：

CodeSandbox 为前端开发提供了完整的代码编辑器体验和沙盒环境。其包含了很多实用功能：

• Npm 支持：可以添加几乎任何 npm 上可用的包；
• 支持 TypeScript、热更新、GitHub 导出、静态文件托管等；
• 使用 Monaco 编辑器构建，Monaco 是为 VSCode 的提供支持的代码编辑器，有很多相似的体验；
• 集成的 DevTools、linting、错误覆盖、测试框架 (Jest)等；
• 强大的 CLI 可以直接将本地项目导入 CodeSandbox。

Codepen

在线地址：https://codepen.io/

CodePen 是一个在线的HTML、CSS 和 JavaScript 代码编辑器，能够编写代码并即时预览效果，可以利用它来构建和分享代码。CodePen 支持使用 Less、Sass、PostCSS 等来编写CSS。CodePen 不仅是一个在线编辑器，还是一个庞大的前端社区，上面有来自全球开发者分享的各种各样炫酷的效果，并且这些代码都是开源和共享的。

Stackblitz

在线地址：https://stackblitz.com/

Stackblitz 和 VSCode 非常像，使用简单可以一键创建 React、Vue、Vanilla、RxJS、TypeScript、Angular 等项目：

Stackblitz 具有以下特性：

• 在浏览器中集成了一个 Dev Server，在离线的情况下仍然可以进行开发；
• 除了支持前端项目外，还支持在浏览器中运行 Node.js 环境；
• 支持连接 GIthub 仓库，可以直接将代码 push 到 Github 上，也可以拉取 Github 项目进行查看和编辑；
• 所有应用程序都会自动部署在其服务器上。

JSFiddle

在线地址：http://jsfiddle.net/

JSFiddle 是一个在线代码编辑器，允许用户在单个页面上编辑和运行 HTML、JavaScript 和 CSS 代码。JSFiddle 使用 CodeMirror 构建，其提供了多游标、语法高亮、语法验证（linter）、大括号匹配、自动缩进、自动完成、代码/文本折叠、搜索和替换以协助开发人员的操作。JSFiddle 被广泛用于共享简单的测试和演示。

JS Bin

在线地址：https://jsbin.com/

JS Bin 是一个开源的协同 web 开发调试工具。主要用于帮助测试 JavaScript 和 CSS 的代码片段，功能与 jsFiddle 类似。可以实时分享在 JS Bin 中输入的内容，在任何平台上的任何设备上查看 JS Bin 的输出，都是实时更新的。

码上掘金

在线地址：https://code.juejin.cn/

码上掘金是一个为广大开发者提供代码在线 Playground 的平台，具备轻量简单、易使用、现代标准、模块化、实时编辑，所见即所得等特性。内置了 ES Modules 支持，并且支持 React、Vue 等流行前端框架。