【问题标题】:How to make a link in HTML with href as its content如何在 HTML 中创建一个以 href 为内容的链接
【发布时间】:2015-03-02 20:50:18
【问题描述】:

我认为很清楚,但这里有一个例子:

<a href="https://stackoverflow.com/">https://stackoverflow.com/</a>

代码使这个真正的链接:https://stackoverflow.com/

有没有更简单的方法来做到这一点?

【问题讨论】:

  • 什么样的“更简单”?你能举个例子吗?
  • 如果“href”是任何其他语言(当然不是HTML)的变量,例如,我们会写成@href

标签: html hyperlink href


【解决方案1】:

我认为你想要类似的东西:

<a>http://stackoverflow.com/</a>

这看起来合乎逻辑,但如果您想要自定义文本,例如 POTATO,该怎么办?

这毫无意义。

<a>POTATO</a>

链接中的文本实际上只是可点击的文本,而不是链接指向的位置。 此外,您可以在链接中包含图像或其他内容。 href 属性在 HTML 中才是真正重要的。

这是对的:

<a href="http://stackoverflow.com/">http://stackoverflow.com/</a>
<a href="http://potato.com/">POTATO</a>

要执行您想要的操作,最好的选择是使用某种预处理器,例如 BBCode 解析器(BBCode 是公告板上使用的格式)。

在 BBCode 中,您可以拥有

[url]http://stackoverflow.com/[/url]

翻译成

<a href="http://stackoverflow.com/">http://stackoverflow.com/</a>

请注意,BBCode 也允许

[url=http://stackoverflow.com]链接文本[/url]

或者,以马铃薯为例

[url=http://potato.com]POTATO[/url]

您可以制作自己的解析器,与正则表达式执行类似的操作,例如。使用preg_replace

【讨论】:

  • 嗯,很好,所以在 HTML 的情况下,像 BBCode 这样的预处理器是必须的,
  • 嗯取决于你想要什么,但如果这是为了转换,例如。文章转为html进行展示,某种处理是个好主意。另请查看 Markdown,它并不能完全做到这一点,但它真的很好,我将它用于我的博客。
【解决方案2】:

&lt;a&gt; HTML 元素表示一个锚点,它用于链接的两端。如果它具有name 属性,那么它可以用作链接的目标。这对于目录 f.e. 很有用; TOC 中的链接指向页面内的各个部分。 href 属性用于将&lt;a&gt; 元素标记为链接源。

示例(目录)

<ul>
    <li><a href="#chapter1">Introduction</a></li>
    <li><a href="#chapter2">Blah, blah, blah</a></li>
    <li><a href="#chapter3">Conclusion</a></li>
</ul>


<h1><a name="chapter1">Introduction</a></h1>
<p>Some text here</a>

<h1><a name="chapter2">Blah, blah, blah</a></h1>
<p>Some other text here</a>

<h1><a name="chapter3">Conclusion</a></h1>
<p>No, there is no simpler way to specify a link.</a>

如果你只写&lt;a&gt;something here&lt;/a&gt;,浏览器应该猜测你想要实现什么:链接源还是目标? (请注意,具有hrefname 属性的&lt;a&gt; 元素既是源又是目标)。由于namehref 属性的有效值都遵循一些规则,因此大多数时候无法从&lt;a&gt; 元素的内容中猜出它们。 无论如何,这不是 HTML 的工作方式。

简短回答您的问题:

不,在 HTML 中这是不可能的。您可以使用MarkdownTextile 或其他文本处理语言来编写更少的标记;用这些语言编写的文档需要经过预处理并转换为 HTML 才能发布。

【讨论】:

  • 好的,所以很明显source和destination是两个不同的东西,所以应该将它们分开并得到两个不同的值,谢谢axiac
【解决方案3】:

只需使用 Jquery 即可:

<script>
    $(document).ready(function(){
      $("a").each(function(){
        $(this).text($(this).attr("href"))
      })
    })
  </script>

在此解决方案中,您只需将超链接代码编写为&lt;a href="http://foo.com"&gt;&lt;/a&gt;,然后上面的代码会将http://foo.com 设置为链接文本。

查看此演示:http://jsbin.com/hajobewixu/1/

【讨论】:

  • 这个真的好用,我一定会用的!
  • 这会起作用,但是机器人和禁用 javascript 的人将看不到链接(机器人会看到链接,但里面没有文字,人们什么都看不到),这是一个很大的缺点 imo .
  • 这是真的,虽然我认为现在大多数网站在禁用 JS 时都会出现混乱
  • 为此,您必须使用主要依赖于正则表达式或xpath的服务器端脚本解决方案
【解决方案4】:

不,没有。您必须指定href 属性才能链接到某个地方。您在&lt;a&gt; 标签之间写的内容与实际链接(href)无关

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2018-09-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-14
    • 2013-10-30
    相关资源
    最近更新 更多