html入门教程(初学者) -HTML链接 - 书目录

html入门教程(初学者) -HTML链接

HTML链接

<!DOCTYPE html>

<html>

<head>

	<title>Websites</title>

</head>

<body>

	<h1>HTML Websites</h1>

	<p>Try <a href="http://www.quackit.com">Quackit</a> for starters.</p>

</body>

</html>

以上链接是超链接的示例。一个超链接是一个链接,允许用户导航到另一个资源(如网页)或下载(如下载文件)。在这种情况下,我们链接到另一个网页。

超链接如何工作

超链接是通过使用该<a>标记以及href用于指定目标URL 的属性创建的。喜欢这个:

<a href="http://www.quackit.com">Quackit</a>

该<a>标签有开始和结束标记。开始标签和结束标签之间的任何文本或元素都将成为“可点击”部分。您会注意到,大多数网页浏览器都会以不同的颜色显示超链接文本并加下划线。但是,与任何HTML元素一样,您可以通过使用CSS控制链接的样式(我们很快就会看到)。

正如您从顶部示例中看到的,您可以将链接内联在文本中 – 无需将它放在新行或任何内容中。

你可以链接到你喜欢的任何网页或文件。没有必要在目的页面上做任何事情。因此,即使不知道,也可以链接到其他人的网站。这就是为什么网络上有这么多的链接!

属性

除了href属性外,<a>标签还接受其他属性。例如,该target属性允许您指定在哪个框架或浏览上下文中加载目标页面。

或者作为另一个示例,该download属性可用于指定该链接用于下载资源(如文件)。

而且,与其他任何元素一样,您也可以使用任何全局属性。例如,您可以使用该title属性来提供目标网页的“工具提示”类型描述。

再次,与其他任何元素一样,您也可以使用任何事件处理程序内容属性。

要查看可以与此标记一起使用的完整属性列表,请参阅有关该<a>元素的更多信息。

关于网址

URL(代表统一资源定位符)是Web上资源的位置。这通常是一个网页,图像或其他文件。许多非技术人员称之为网址。

创建超链接时,您可以使用绝对URL或相对URL。

绝对网址

一个绝对URL是其中包含完整路径的URL。以下是一个绝对网址的例子:

http://www.quackit.com/html/index.cfm

这包括协议(例如http://),域名/子域名(例如www.quackit.com)以及实际资源(例如/html/index.cfm)的完整路径。

相对URL

一个相对URL,另一方面,只包含一些路径。这是因为路径相对于隐含的绝对URL。上例中的页面也可以链接到以下任何一个:

index.cfm
html/index.cfm
../html/index.cfm

你使用的那个取决于当前页面的位置(即你所链接的页面)。这里有一个解释:

index.cfm
要使用此URL,您的代码将如下所示href=”index.cfm”。这要求您的链接页面index.cfm位于相同的目录中。
HTML / index.cfm
要使用此URL,您的代码将如下所示href=”html/index.cfm”。这要求你的链接页面是上面的一个目录index.cfm。路径显示index.cfm位于html目录内。
../html/index.cfm
要使用此URL,您的代码将如下所示href=”../html/index.cfm”。这要求您的链接页面位于与目录相同的html目录中。两个圆点和正斜杠(../)表示您打算回退一个级别,然后进入文件html目录index.cfm。

尽管相对URL可以更短且易于编码,但如果您决定移动页面,进行重大设计等,则它们可能会很容易中断。因此,我通常不推荐使用它们。

根相对URL

根相对URL是一个不同的故事。一个根相对URL总是以正斜杠(开始/),这表明它是相对于网站的根目录。网址始终由网站根目录的完整路径组成。因此,无论您的链接页面位于何处,您都始终使用相同的URL。

所以我们可以使用下面的代码,无论我们的链接页面在哪里(只要它在同一个网站上):

/html/index.cfm

要使用此URL,您的代码将如下所示href=”/html/index.cfm”。

使用哪一个?

链接到与链接页面相同网站上的页面时,我建议使用根相对URL或绝对URL。

链接到外部网页时(即与链接页面不在同一网站上的网页),您需要使用绝对网址。这是因为您需要提供承载目标页面的网站的域名。

链接的图像

您可以像链接文本一样链接图像。只需在开始<a>标签和结束标签之间插入图片代码即可。

我们将在下面介绍图片,以便您能够尝试一下!

其他链接类型

我应该提到HTML包含另一种类型的链接:链接到外部资源。

用户通常不会看到外部资源的链接。相反,它们通常被浏览器用来扩充当前文档。例如,您可以链接到可用于为当前文档提供样式的外部样式表文档。

这种类型的链接是使用该<link>元素实现的。

我们很快就会介绍样式表。