HTML文件路径 HTML文件路径|HTML5

本文概述

绝对文件路径
相对文件路径
文件路径的重点

HTML文件路径用于描述文件在网站文件夹中的位置。文件路径就像Web浏览器的文件地址一样。我们可以通过图像, 文件, CSS文件, JS文件, 视频等文件路径链接任何外部资源以添加到HTML文件中。
src或href属性需要一个属性来将任何外部源链接到HTML文件。
以下是用于指定文件路径的不同类型：

< img src =http://www.srcmini.com/“ picture.jpg”> 它指定picture.jpg与当前页面位于同一文件夹中。
< img src =http://www.srcmini.com/“ images / picture.jpg”> 它指定picture.jpg位于当前文件夹的images文件夹中。
< img src =http://www.srcmini.com/“ / images / picture.jpg”> 它指定picture.jpg位于当前站点根目录的images文件夹中。
< img src =http://www.srcmini.com/“ ../ picture.jpg”> 它指定picture.jpg位于当前文件夹上一层的文件夹中。

网页上使用文件路径来链接外部文件, 例如：

网页
图片
样式表
的JavaScript

有两种类型的文件路径：

绝对文件路径
相对文件路径

绝对文件路径绝对文件路径指定完整的URL地址。
例：

< !DOCTYPE html> < html> < body> < h2> Using a Full URL File Path< /h2> < img src="https://www.srcmini.com/images/nature-1.jpg" alt="image" style="width:300px"> < /body> < /html>

立即测试
相对文件路径相对文件路径指定与当前页面位置有关的文件。
例：
让我们以示例为例, 查看文件路径如何指向位于当前网站根目录下的images文件夹中的文件。

< !DOCTYPE html> < html> < body> < h2> Using a Relative File Path< /h2> < img src="http://www.srcmini.com/images/nature-2.jpg" alt="Mountain" style="width:300px"> < /body> < /html>

立即测试
例：
这是文件路径指向当前文件夹中images文件夹中的文件的方式。

< !DOCTYPE html> < html> < body> < h2> Using a Relative File Path< /h2> < img src="http://www.srcmini.com/images/nature-3.jpg" alt="Mountain" style="width:300px"> < /body> < /html>

立即测试
例：
当images文件夹位于当前文件夹上一级的文件夹中时。

< !DOCTYPE html> < html> < body> < h2> Using a Relative File Path< /h2> < img src="http://www.srcmini.com/images/nature4.jpg" alt="Mountain" style="width:300px"> < /body> < /html>

【HTML文件路径】立即测试
文件路径的重点