如何在 HTML 中正确引用本地资源？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14489016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to properly reference local resources in HTML?
提问by Chase Florell
As it turns out, referencing local resources can be a rub point for some. I'm looking for a canonical answer to local resource referencing, and what they mean.
事实证明，引用本地资源对某些人来说可能是个难题。我正在寻找本地资源引用的规范答案及其含义。
Take these examples, what is the difference between these reference paths?
拿这些例子来说，这些参考路径有什么区别？
<img src="myfile.png" />(no leading slash)<img src="/myfile.png" />(with leading slash)<img src="folder/myfile.png" />(no leading slash / in subfolder)<img src="/folder/myfile.png" />(with leading slash / in sub folder)<img src="../folder/myfile.png" />(with dots and a leading slash / in sub folder)
<img src="myfile.png" />（没有前导斜线）<img src="/myfile.png" />（带前导斜线）<img src="folder/myfile.png" />（没有前导斜杠 / 在子文件夹中）<img src="/folder/myfile.png" />（带前导斜杠 / 在子文件夹中）<img src="../folder/myfile.png" />（在子文件夹中带有点和前导斜杠 /）
回答by Chase Florell
- A leading slash tells the browser to start at the root directory.
- If you don't have the leading slash, you're referencing from the current directory.
- If you add two dots before the leading slash, it means you're referencing the parent of the current directory.
- 前导斜杠告诉浏览器从根目录开始。
- 如果没有前导斜杠，则是从当前目录引用。
- 如果在前导斜杠前添加两个点，则表示您正在引用当前目录的父目录。
Take the following folder structure
采取以下文件夹结构
notice:
注意：
- the ROOT checkmark is green,
- the second checkmark is orange,
- the third checkmark is purple,
- the forth checkmark is yellow
- ROOT 复选标记为绿色，
- 第二个对勾是橙色的
- 第三个复选标记是紫色的，
- 第四个对勾是黄色的
Now in the index.html.enfile you'll want to put the following markup
现在在index.html.en文件中，您需要放置以下标记
<p>
<span>src="check_mark.png"</span>
<img src="check_mark.png" />
<span>I'm purple because I'm referenced from this current directory</span>
</p>
<p>
<span>src="/check_mark.png"</span>
<img src="/check_mark.png" />
<span>I'm green because I'm referenced from the ROOT directory</span>
</p>
<p>
<span>src="subfolder/check_mark.png"</span>
<img src="subfolder/check_mark.png" />
<span>I'm yellow because I'm referenced from the child of this current directory</span>
</p>
<p>
<span>src="/subfolder/check_mark.png"</span>
<img src="/subfolder/check_mark.png" />
<span>I'm orange because I'm referenced from the child of the ROOT directory</span>
</p>
<p>
<span>src="../subfolder/check_mark.png"</span>
<img src="../subfolder/check_mark.png" />
<span>I'm purple because I'm referenced from the parent of this current directory</span>
</p>
<p>
<span>src="subfolder/subfolder/check_mark.png"</span>
<img src="subfolder/subfolder/check_mark.png" />
<span>I'm [broken] because there is no subfolder two children down from this current directory</span>
</p>
<p>
<span>src="/subfolder/subfolder/check_mark.png"</span>
<img src="/subfolder/subfolder/check_mark.png" />
<span>I'm purple because I'm referenced two children down from the ROOT directory</span>
</p>
Now if you load up the index.html.enfile located in the second subfolder
http://example.com/subfolder/subfolder/
现在，如果您加载index.html.en位于第二个子文件夹http://example.com/subfolder/subfolder/中的文件
This will be your output
这将是你的输出
