山住多一郎 發表於 2021-8-13 09:42:46

HTML 绝对路径与相对路径概念详细

<p><span class="bjh-p">路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。以下讨论均是在HTML环境下进行。</span></p>
<h3><span class="bjh-p"><span class="bjh-strong">相对路径</span></span></h3>
<p><span style="background-color: initial;">相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：</span></p>
<p><span class="bjh-p"><span class="bjh-strong">./ </span><span class="bjh-strong">：代表文件所在的目录（可以省略不写）</span></span></p>
<p><span class="bjh-p"><span class="bjh-strong">../ </span><span class="bjh-strong">：代表文件所在的父级目录</span></span></p>
<p><span class="bjh-p"><span class="bjh-strong">../../ </span><span class="bjh-strong">：代表文件所在的父级目录的父级目录</span></span></p>
<p><span class="bjh-p"><span class="bjh-strong">/ </span><span class="bjh-strong">：代表文件所在的根目录</span></span></p>
<p><span class="bjh-p">值得注意的是，（<span class="bjh-strong">/：代表文件所在的根目录</span>）其实可以理解成项目内部的绝对路径。</span></p>
<p style="text-align: center;"><img src="https://t10.baidu.com/it/u=278343249,4259206742&fm=173&app=25&f=JPEG?w=312&h=278&s=85D0ED3341CE554D5C7984DA0000C0B2" width="312" class="index-module_normal_Bq4DA" alt="" /><br />
<span class="bjh-image-caption">图1：项目目录结构</span></p>
<p><span class="bjh-p">以图1所示项目目录结构为例，如果要在test.html中引入000.css，可以有以下写法：</span></p>
<ol>
    <li><span class="bjh-p">&lt;linkhref="./css/css1/000.css" rel="external nofollow" /&gt;   (./可以省略)</span></li>
    <li><span class="bjh-p">&lt;link href="/html/css/css1/000.css" rel="external nofollow" /&gt;</span></li>
    <li><span class="bjh-p">&lt;link href="../html/css/css1/000.css" rel="external nofollow" /&gt;</span></li>
</ol>
<h3><span class="bjh-p"><span class="bjh-strong">绝对路径</span></span></h3>
<p><span class="bjh-p">绝对路径是指完整的网址，假设图一中项目的网站域名为www.test.com，那么000.css的绝对路径应该是</span></p>
<p><span class="bjh-p">https://www.test.com/HelloHBuilder/html/css/css1/000.css。</span></p>
<h3><span class="bjh-p"><span class="bjh-strong">相对路径与绝对路径的优缺点</span></span></h3>
<p style="text-align: center;"><img src="https://t10.baidu.com/it/u=3871860693,3209832081&fm=173&app=25&f=JPEG?w=639&h=158&s=01207C33C5726C230EFD41CE000070B1" width="639" class="index-module_large_1mscr" alt="" /><br />
<span class="bjh-image-caption">表1：相对路径与绝对路径的优缺点</span></p>
頁: [1]
查看完整版本: HTML 绝对路径与相对路径概念详细