href=""中的空字符串与'#' [重复]

Posted 2023-03-05

【中文标题】href=""中的空字符串与\'#\' [重复]

【英文标题】：Empty string vs '#' in href="" [duplicate]href=""中的空字符串与'#' [重复]

【发布时间】：2014-07-25 08:03:51

【问题描述】：

在Bootstrap CSS examples 中，所有占位符链接都有href="#"。

我了解href="#" 提供了类似preventDefault() 的行为，但没有JS。还有其他使用href="#"的理由吗？

如果您以这种方式使用href="#"，那么使用<button> 不是更“正确”吗？

【问题讨论】：

我个人会完全避免#，它会导致跳转到页面顶部。使用javascript:void(0) 它可以使用和不使用javascript，因为它在任何一种情况下都不会做任何事情

我建议避免使用href="#"，因为如果不阻止默认行为，浏览器将滚动到顶部，href="javascript:;" 没有这个问题。

您认为href="#"“提供preventDefault()-like 行为”的假设是不正确的。为避免浏览器跳转到文档顶部，您仍需要在事件上调用 preventDefault()。

w3.org/TR/2012/WD-html5-20121025/links.html#attr-hyperlink-href 如果存在，它必须是有效的 URL

Miguel 是正确的——如果你真的只是想让它防止默认，并且仍然觉得由于某种原因需要包含 href，最正确的实现是 <a href="#" onclick="event.preventDefault()">An empty link!</a>——或者去掉onclick 并在单独的 js 中处理事件。最好的一般方法是，就像我在下面的回答中那样，简单地不指定 href，因为这现在是有效的，而且我不相信您的用户可能遇到的旧浏览器会遇到问题（尽管缺少的 href 无效在 html4)

【参考方案1】：

我推荐 MDN 作为理解 HTML 标准的更好资源，而不是引导示例。 Bootstrap 通常非常专注于将样式混合到您的 HTML 本身中，并且通常是围绕“正确”做事方式的捷径。也就是说，它通常非常漂亮并且可以快速完成很多事情，并且就像编程中的任何事情一样，您可以使用它编写好的或坏的代码。

'href' 属性是以前的 HTML 规范中的必需属性，因此您总是需要它。 href="#" 是一种快速而肮脏的方式，基本上忽略了它。 html5 规范中不再需要它，并且没有 href 专门用于创建占位符链接，如下所述： https://developer.mozilla.org/en/docs/Web/HTML/Element/a

【讨论】：

"没有 href 专门用于创建占位符链接" 它实际上是一个超链接目标。

【参考方案2】：

尽管有 MDN，但我更喜欢 w3c（我的意思是标准）。

https://www.w3.org/TR/2012/WD-html5-20121025/links.html#attr-hyperlink-href

如果存在，它必须是一个有效的 URL - 但它不是必需的属性。

【讨论】：

根据规范，空字符串是有效的 URL；请参阅与此重复的另一个问题。