HTML 空 href 有效吗

在本文中，我们将介绍空 href 在 HTML 中是否有效以及其使用场景和示例。href 是 HTML 中用于指定链接目标的属性，在普通情况下我们需要指定一个有效的目标链接。然而，在某些特殊情况下，使用一个空 href 也是合法的。

阅读更多：HTML 教程

空 href 的含义

一个 href 属性的值为空，意味着链接的目标为空。即使没有指定具体的链接地址，也不会导致 HTML 验证错误。这种情况下，点击链接将不会有任何动作或跳转链接。

使用场景

跳转到当前页面顶部

在网页中，我们经常会遇到需要快速跳转到页面顶部的需求。如果我们希望用户点击某个元素后能够回到页面顶部，可以简单地使用一个空 href 属性。例如：

<a href="#">返回顶部</a>

当用户点击 “返回顶部” 链接时，页面将自动滚动到顶部位置。这种使用空 href 的方式可以避免使用 JavaScript 或其他复杂的解决方案。

为 JavaScript 提供后备操作

有时候，我们希望为某些元素添加一个点击事件，但是需要考虑 JavaScript 不可用的情况。使用空 href 可以作为一种后备操作。例如：

<a href="#" onclick="doSomething(); return false;">点击这里</a>

在这个例子中，当用户点击 “点击这里” 链接时，doSomething() 函数将被调用。return false; 的作用是阻止链接的默认行为，即跳转到空 href。这样，在不支持 JavaScript 的浏览器中，用户点击链接不会出现任何反应。

示例

以下是一个完整的示例，展示了如何在 HTML 中使用空 href 属性：

<!DOCTYPE html>
<html>
<head>
    <title>空 href 示例</title>
</head>
<body>
    <h1>空 href 示例</h1>

    <a href="#">返回顶部</a>

    <br><br>

    <a href="#" onclick="doSomething(); return false;">点击这里</a>

    <script>
        function doSomething() {
            console.log("点击了链接");
        }
    </script>
</body>
</html>