HTML链接:如何创建指向其他网页的链接

你的网络首码项目网 网站建设评论75字数 2293阅读模式

本文介绍如何创建从一个页面到另一个页面的链接。它还概述了不同类型的超链接。

链接(也称为超链接)使用 <a> 标记(也称为锚点元素)进行定义。文章源自你的网络首码项目网-https://www.youranweb.com/41.html

若要创建超链接,请将 <a> 标记与属性结合使用。href 属性的值是 URL,或链接指向的位置。href文章源自你的网络首码项目网-https://www.youranweb.com/41.html

例:文章源自你的网络首码项目网-https://www.youranweb.com/41.html

<p>Here are some <a href="https://www.sinasz.cn/">HTML codes</a> to play with.</p>

超文本引用可以使用绝对 URL、相对 URL 或根相对 URL。文章源自你的网络首码项目网-https://www.youranweb.com/41.html

绝对
这是指提供完整路径的 URL。例如:文章源自你的网络首码项目网-https://www.youranweb.com/41.html
<a href="https://www.sinasz.cn/">HTML Tutorial</a>
相对
这是指提供相对于当前位置的路径的 URL。文章源自你的网络首码项目网-https://www.youranweb.com/41.html

例如,如果我们要引用 URL,并且我们的当前位置是 ,我们将使用以下内容:https://www.sinasz.cn/https://www.sinasz.cn/文章源自你的网络首码项目网-https://www.youranweb.com/41.html

<a href="tutorial/">HTML Tutorial</a>
根相对
这是指提供相对于域根的路径的 URL。文章源自你的网络首码项目网-https://www.youranweb.com/41.html

例如,如果我们要引用URL,并且当前位置是 ,则可以使用以下命令:https://www.sinasz.cn//html/tutorial文章源自你的网络首码项目网-https://www.youranweb.com/41.html

<a href="/html/tutorial/">HTML Tutorial</a>

正斜杠表示域的根目录。无论您的文件位于何处,您始终可以使用此方法指定路径,即使您不知道域名最终将是什么(只要您知道根目录的完整路径)。

链接目标

您可以指定是在新窗口中打开 URL 还是在当前窗口中打开 URL。您可以使用属性执行此操作。例如,在新窗口中打开 URL。targettarget="_blank"文章源自你的网络首码项目网-https://www.youranweb.com/41.html

目标属性可以具有以下可能的值:文章源自你的网络首码项目网-https://www.youranweb.com/41.html

_blank新的浏览器窗口中打开 URL。
_self当前浏览器窗口中加载 URL。
_parent将 URL 加载到框架中(仍在当前浏览器窗口中)。这仅适用于使用框架时。
_top当前浏览器窗口中加载 URL,但取消所有框架。因此,如果使用框架,则它们不再使用。

例:文章源自你的网络首码项目网-https://www.youranweb.com/41.html

<a href="https://www.sinasz.cn/" target="_blank">Quackit</a>

跳转链接

您可以将链接“跳转”到同一页面(或其他页面)中的其他部分。这些过去被称为“命名锚点”,但它们通常被称为跳转链接、书签或片段标识符。文章源自你的网络首码项目网-https://www.youranweb.com/41.html

以下是链接到同一页面的方法:文章源自你的网络首码项目网-https://www.youranweb.com/41.html

  1. 将 ID 添加到链接目标

    向页面中希望用户最终到达的部分添加 ID。为此,请使用 属性。该值应为一些简短的描述性文本。该属性是 HTML 中常用的属性。idid文章源自你的网络首码项目网-https://www.youranweb.com/41.html

    <h2 id="elephants">Elephants</h2>
  2. 创建超链接

    现在创建超链接(用户将单击该超链接)。这是通过使用链接目标的 来完成的,前面有一个哈希 () 符号:id#文章源自你的网络首码项目网-https://www.youranweb.com/41.html

    <a href="#elephants">Jump to Elephants</a>

因此,这两段代码被放置在文档的不同部分。像这样:文章源自你的网络首码项目网-https://www.youranweb.com/41.html

<!DOCTYPE html>
<html>
<title>Example</title>
<body>
<p><a href="#elephants">Jump to Elephants</a></p>

<h2>Cats</h2>
<p>All about cats.</p>

<h2>Dogs</h2>
<p>All about dogs.</p>

<h2>Birds</h2>
<p>All about birds.</p>

<h2 id="elephants">Elephants</h2>
<p>All about elephants.</p>

<h2>Monkeys</h2>
<p>All about monkeys.</p>

<h2>Snakes</h2>
<p>All about snakes.</p>

<h2>Rats</h2>
<p>All about rats.</p>

<h2>Fish</h2>
<p>All about fish.</p>

<h2>Buffalo</h2>
<p>All about buffalo.</p>
</body>
</html>

它不一定是同一个页面。您可以使用此方法跳转到任何页面的 ID。为此,只需在哈希 () 符号之前添加目标 URL。例:#文章源自你的网络首码项目网-https://www.youranweb.com/41.html

<a href="http://www.example.com#elephants">Jump to Elephants</a>

当然,这假设页面上有一个具有该值的 ID。文章源自你的网络首码项目网-https://www.youranweb.com/41.html

电子邮件链接

您可以创建指向电子邮件地址的超链接。为此,请在锚点标记中使用 属性。mailto文章源自你的网络首码项目网-https://www.youranweb.com/41.html

例:

<a href="mailto:king_kong@example.com">Email King Kong</a>

单击此链接应导致您的默认电子邮件客户端打开,并且电子邮件地址已填写。

你可以比这更进一步。您可以自动完成用户的主题行,甚至是电子邮件的正文。执行此操作将和参数附加到电子邮件地址。subjectbody

<a href="mailto:king_kong@example.com?subject=Question&body=Hey there">Email King Kong</a>

基础赫里夫

您可以为页面上的所有链接指定默认 URL 作为起始位置。为此,请将标记(与属性一起)放在文档的<head>basehref

示例代码:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<base url="https://www.sinasz.cn/">
</head>
<body>
<a href="html">HTML</a>
</body>
</html>
相关文章
weinxin
你的网络首码项目网站长
本站旨在为广大网友提供一个免费、公开且和谐的互联网项目交流平台,所有文章均来自网络和网友投稿,不代表本站任何立场,请勿盲目下载注册参与,以免为您带来不必要的损失。
你的网络首码项目网
  • 声明:首码项目网所有文章均来自网络和投稿,不代表本站立场,请勿盲目下载注册,以免为您带来不必要的损失。《项目投诉》
  • 你的首码项目网

发表评论