10

我想得到与下面相同的结果，但没有重复（相同的链接出现两次）：

<html>
<body>
<a href="http://www.w3schools.com">http://www.w3schools.com</a>
</body>
</html>

在没有 Javascript 的情况下可以在静态 HTML 中使用吗？

4

5 回答 5

5

attr通过使用 CSS 中的函数，您可以使用 CSS 选择器执行此操作而无需重复。

在您的样式表中，您可以添加以下内容：

a::after {
    content: attr(href);
}

对于您在问题中的示例：

<html>
<style>
a::after {
        content:  attr(href);
}
</style>
<body>
    <a href="http://www.w3schools.com">Some text</a>
</body>
</html>

并在 之后显示链接Some text。

于 2020-08-04T07:41:56.223 回答
4

HTML 标准(a)仅允许将某些内容放置在hrefURL 本身中，并且“请使用文本描述作为链接”标记不是其中之一。

你是对的，它会节省很多重复，尽管大多数人可能认为链接的文本描述应该比链接更易于阅读。例如，您不希望在您的网页中看到以下内容：

http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA

话虽如此，您可以使用 CSS 来做到这一点，特别是通过使用after将包含文本href属性的元素添加到文档中。我建议将其限制为特定的类，这样您就不会修改a您拥有的每个标签，例如：

<html>
    <style>
        .add-link::after {
            content: " (" attr(href) ")";
        }
    </style>
    <body>
        <a class="add-link" href="http://www.example.com">Link added</a>
        <p />
        <a href="http://www.example.com">No link added</a>
    </body>
</html>

第一个链接将添加链接文本，第二个则不会。不幸的是，这并不能解决巨大的 URI（见上文）作为文本放置在页面上的问题，但您至少可以选择不附加add-link类）：

(a) : HTML5 标准在此处指定 A 元素，在此处指定URI 规范。

于 2012-05-17T11:06:41.567 回答
3

你不能，你要么必须使用 JavaScript，要么保持原样。

于 2012-05-17T11:06:35.307 回答
0

不，没有办法仅使用静态 html 删除重复项。

这也不是必需的。许多网页使用 PHP 或类似的东西，用 PHP 制作链接很容易:)

PHP 示例：

<a href="<?php echo $item->link; ?>"><?php echo $item->link; ?></a>
于 2012-05-17T11:09:14.200 回答
-3

实际上格式化链接的一种好方法是：

<html>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
</body>
</html>
于 2012-05-17T11:08:53.623 回答