例子存档

更多关于HTML中的url

在介绍性讲座中，我展示了几个需要在其属性中使用url的元素。img元素有一个src属性，它指向我们想要显示的图像文件。元素有一个href属性，用来指定链接应该指向的页面。

在这两种情况下，都可以使用完整的URL。

在许多项目中，您将设置指向与当前页面位于同一文件夹中的文件的内部链接。在这些情况下，您可以使用更短、更简单的url，称为相对url。

一个例子

单击本页顶部的按钮，下载包含简单示例项目的归档文件。归档文件中有一个文件夹，其中包含几个文件和子文件夹，这些文件和子文件夹共同构成了一个简单的多文件示例项目。

以下是该项目中的文件和子文件夹的组织方式：

如果您查看每个html文件的源代码，您将看到我已经设置了一个链接系统，允许您从一个。html导航到另外两个html文件。另外，这三个html文件中的每一个都包含一个img元素，该元素将从images文件夹加载图像文件。

的链接

这组示例文件中的赢博体育链接都是指向同一项目目录中的其他文件的内部链接。在HTML中，这类链接非常常见，并且HTML使在项目中使用这类链接变得很容易。下面你将看到这些相关链接的几个例子，以及我如何设置它们。

第一个文件one.html包含到第二个文件two.html的链接。因为这两个文件都在同一个目录下，从一个文件链接到另一个文件只需要我们使用我们想要链接到的文件名：

<a href="two.html">第二页</a>

文件2包含到文件3的链接。由于文件3位于子文件夹中，我们必须提供子文件夹的名称，然后是子文件夹中的文件名称：

<a href="more/three.html">第三页</a>

最后，文件三链接回文件一。由于文件1位于文件3所在目录的上方，要从文件3导航到文件1，我们必须向上移动一级。要做到这一点，我们使用…命令:

<a href="../one.html">第一页</a>

这三个文件中的每一个都包含一个img元素，用于加载存储在images文件夹中的图片。下面是如何设置这三个img元素。

在文件1和文件2中，我们这样做：

<img src=“images/one_way.png“ alt=”单向标志”>

在文件3中，我们这样做：

<img src=“../images/one_way.png“ alt=”单向标志”>

在最后一个例子中，我们必须首先使用…要从more文件夹向上移动一级，然后我们可以进入images文件夹获取我们想要的图像文件。