HTML网页制作：创建超链接的方法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML网页制作：创建超链接的方法相关的知识，希望对你有一定的参考价值。

参考技术A

    01

    使用代码编辑软件，创建一个html结尾的文档。

    02

    把代码编辑在<body></body>内，写入：<a href="url">Link text</a>，点击保存。

    03

    点击F12预览，或者直接在代码编辑器中点击地球小图标，然后点击第一个预览，如下图所示内容。

    04

    超链接就创建成功了。

如何制作 HTML 反向链接？

【中文标题】如何制作 HTML 反向链接？【英文标题】：How to make an HTML back link? 【发布时间】：2012-02-07 12:36:55 【问题描述】：

创建链接到前一个网页的&lt;a&gt; 标记的最简单方法是什么？基本上是一个模拟的后退按钮，但是一个实际的超链接。请仅提供客户端技术。

编辑 寻找能够在悬停时显示您将要单击的页面的 URL 的解决方案，例如普通的静态超链接。我不想让用户在悬停在超链接上时查看history.go(-1)。到目前为止我发现的最好的是：

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

document.referrer 可靠吗？跨浏览器安全吗？我很乐意接受更好的答案。

【问题讨论】：

JavaScript 是一种客户端技术，一些客户端（比如我）只是选择禁用它（默认情况下）。这就是客户的力量！ :D 但是，是的，HTML 本身无法确定上一页是什么。 【参考方案1】：

还有一种方式：

&lt;a href="javascript:history.back()"&gt;Go Back&lt;/a&gt;

【讨论】：

按钮：&lt;button type="button" onclick="javascript:history.back()"&gt;Back&lt;/button&gt; 这种方法的一个缺点是标准浏览器功能，例如“悬停查看 URL”和右键单击 -> 复制链接将被破坏。 我认为更多的是语义。返回“按钮”比返回“链接”更贴切。这两个选项都很棒，而且两个选项都以自己的方式正确。 这应该是这个页面上唯一的答案——所有其他的要么是重复的，要么是不太好的，因此只是简单地掩盖了这个......【参考方案2】：

这个解决方案的好处是在悬停时显示链接到页面的 URL，就像大多数浏览器默认做的那样，而不是 history.go(-1) 或类似的：

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

【讨论】：

这也有利于覆盖引用页面打开时链接上带有target="_blank" 属性的情况，而history.go(-1) 没有。 此解决方案丢失了 # 之后的链接部分，'javascript:history.back()' 工作正常。 此解决方案的缺点是您将无法返回超过一页。例子;导航到页面 a、b、c、d - 反复按返回按钮 c、d、c、d、c、d。将此与 .history.back() a,b,c,d 反复按下后退按钮 d,c,b,a 进行比较 我怎样才能做到，如果没有后页，然后重定向到一个固定的urlhistory.back() || "myaction/mycontroller" @orangesherbert 我已经在一个新答案中解决了这个问题（这也满足“显示 URL”的要求。【参考方案3】：

此解决方案为您提供两全其美的解决方案

用户可以将鼠标悬停在链接上以查看 URL 用户最终不会得到损坏的后台堆栈

更多细节在下面的代码 cmets 中。

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() 
  history.back();
  return false;

&lt;a id="back-link"&gt;back&lt;/a&gt;

【讨论】：

很棒的答案。在自定义绑定的上下文中，我几乎在所有淘汰项目中都使用它。 很好的答案！我必须将return false; 添加到 Chrome 中的 onclick 函数中，以防止其将当前页面添加到浏览器历史记录中。【参考方案4】：

你可以试试javascript

<A HREF="javascript:history.go(-1)">

参考JavaScript Back Button

编辑

显示推荐网址http://www.javascriptkit.com/javatutors/crossmenu2.shtml

并按如下方式在鼠标悬停中发送元素本身

function showtext(thetext) 
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)

 &lt;a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()"&gt;JavaScript Kit&lt;/a&gt;

查看jsfiddle

【讨论】：

你能解释一下最后的编辑吗？我只想要一个正常的链接，就像它在大多数浏览器底部显示的那样。 因为所有浏览器都显示所有你不需要做任何事情，但如果你想在你自己的 div 中显示它，你可以在页面的任何地方指定一个 div tabledescription 以显示链接鼠标悬停在锚标签上【参考方案5】：

最简单的方法是使用history.go(-1);

试试这个：

&lt;a href="#" onclick="history.go(-1)"&gt;Go Back&lt;/a&gt;

【讨论】：

【参考方案6】：

使用锚标签&lt;a&gt;返回上一页，下面是2个工作方法，其中第一个是更快并且有一个很棒返回上一页的优势。

这两种方法我都试过了。

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

如果您在当前浏览器窗口中单击了一个链接并在新标签中打开了链接，则上述方法 (1) 非常有效。

2)

<a href="javascript:history.back()">Go Back</a>

上述方法（2）只有在您点击了一个链接并且在当前浏览器窗口中在当前选项卡中打开了链接时才能正常工作。

如果您在新标签页中有打开的链接，它将不起作用。如果在网络浏览器的新标签页中打开链接，这里history.back() 将不起作用。

【讨论】：

【参考方案7】：

后退链接是将浏览器向后移动一页的链接，就像用户单击了大多数浏览器中可用的后退按钮一样。反向链接使用 JavaScript。如果您的浏览器支持 JavaScript（确实如此）并且如果它支持反向链接所必需的 window.history 对象，它会将浏览器向后移动一页。

简单的方法是

<a href="#" onClick="history.go(-1)">Go Back</a>

或者：

function goBack() 
  window.history.back()

&lt;a href="#" onclick="goBack()" /&gt;Go Back&lt;/a&gt;

一般来说，后退链接不是必需的……后退按钮通常就足够了，而且通常您也可以简单地链接到您网站中的上一页。但是，有时您可能希望提供指向几个“先前”页面之一的链接，这就是反向链接派上用场的地方。因此，如果您想以更高级的方式进行操作，请参考以下教程：

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html

【讨论】：

与投票最多的解决方案不同，这会保持用户的滚动位置。 @Ketri 您可以为该声明提供支持吗？它们应该是相同的：w3schools.com/jsref/met_his_back.asp【参考方案8】：

试试这个

<a href="javascript:history.go(-1)"> Go Back </a>

【讨论】：

【参考方案9】： 
<a href="#" onclick="history.back();">Back</a>

【讨论】：

【参考方案10】：

使用按钮的最佳方式是

&lt;input type= 'button' onclick='javascript:history.back();return false;' value='Back'&gt;

【讨论】：

【参考方案11】：

您也可以使用history.back() 和document.write() 仅在确实有可以返回的地方时显示链接：

<script>
  if (history.length > 1) 
    document.write('<a href="javascript:history.back()">Go back</a>');
  
</script>

【讨论】：

document.write 会覆盖页面上的所有内容。为什么你会曾经使用它？ 您必须在页面仍在加载时执行此脚本。【参考方案12】：

history.go(-1) 在第二个域中单击或引用者为空时不起作用。

所以我们必须在到达这个域时存储historyCount，然后返回这一侧的导航次数减1。


// if referrer is different from this site
if (!document.referrer.includes(window.location.host)) 
  // store current history length
  localStorage.setItem('historyLength', `$history.length`);


// Return to stored referrer on logo click
document.querySelector('header .logo').addEventListener('click', 
  () =>
   history.go(Number(localStorage.getItem('historyLength')) - history.length -1)
);

【讨论】：

【参考方案13】：

我使用了 window.history 并返回了一个 false 以便浏览器不会导航 href（默认行为）。

<a href="www.web.com" onclick="window.history.go(-1); return false;"> Link </a>

【讨论】：

以上是关于HTML网页制作：创建超链接的方法的主要内容，如果未能解决你的问题，请参考以下文章

HTML超链接代码

如何在html页面中设置超链接

在网页中如何设置超链接下划线的颜色?

C# 抓取并导出网页里面所有超链接方法

HTML网页怎样链接到另一个HTML网页？

java超链接怎么实现？