HTML链接教程

*发表于 2021-12-1 11:26:54* · 发表于 2021-12-1 11:26:54

<!DOCTYPE html>
<html>
<head>
<title>主页</title>
</head>
<body>
<h1>HTML网站</h1>
<p>Try <a href="链接">链接名称</a>为初学者尝试</p>
</body>
</html>

HTML 网站
为初学者尝试链接名称。

上面的链接是一个超链接的例子。一个超链接是一个链接，允许用户导航到另一个资源（如网页）或下载（如下载文件）。在这种情况下，我们链接到另一个网页。

超链接的工作原理
使用<a>标记和href属性创建超链接，该属性用于指定目标 URL。像这样：

<a href="你的链接">链接名称</a>
该<a>标签有开始和结束标记。开始和结束标记之间的任何文本或元素都成为“可点击”部分。您会注意到，大多数 Web 浏览器会以不同的颜色和带下划线的方式显示超链接文本。但是，与任何 HTML 元素一样，您确实可以通过使用 CSS 来控制链接的样式（我们很快就会谈到）。

正如您从上面的示例中看到的，您可以在文本中内嵌放置链接——无需将其放置在新行或任何东西上。

您可以链接到您喜欢的任何网页或文档。无需在目标页面上执行任何操作。因此，您可以在他们不知情的情况下链接到其他人的网站。这就是为什么网络上有这么多链接的原因！

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

又例如，该download属性可用于指定链接用于下载资源（例如文件）。

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

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

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

关于网址
URL（代表Uniform Resource Locator）是网络上资源的位置。这通常是网页、图像或其他一些文件。许多非技术人员将其称为网址。

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

绝对网址
一个绝对URL是其中包含完整路径的URL。下面是一个绝对 URL 的示例：

你的域名/html/index.cfm
这包括协议（例如http://）、域名/子域和实际资源的完整路径（例如/html/index.cfm）。

相对 URL
一个相对URL，另一方面，只包含一些路径。这是因为路径相对于隐含的绝对 URL。上一个示例中的页面也可以与以下任何内容链接：

index.cfm
html/index.cfm
../html/index.cfm
您使用的将取决于当前页面所在的位置（即您链接的页面）。这是一个解释：

索引.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 始终由网站根目录的完整路径组成。因此，无论您的链接页面位于何处，您始终使用相同的 URL。

所以无论我们的链接页面在哪里（只要它在同一个网站上），我们都可以使用以下代码：

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

使用哪一个？
当链接到与链接页面位于同一网站上的页面时，我建议使用根相对 URL 或绝对 URL。

当链接到外部网页（即与链接页面不在同一站点上的页面）时，您需要使用绝对 URL。这是因为您需要提供托管目标页面的网站的域名。

链接图像
您可以使用与链接文本相同的方式链接图像。只需在开始和结束<a>标记之间插入图像代码。

我们接下来将介绍图片，因此您可以尝试一下！

其他链接类型
我应该提到 HTML 包含另一种类型的链接：指向外部资源的链接。

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

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

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