什么是 href="#"为什么使用它? [英] What is href="#" and why is it used?
问题描述
在许多网站上，我看到带有 href="#" 的链接.这是什么意思?有什么用?
关于超链接:
锚标记的主要用途 - <a></a> - 作为 超链接.这基本上意味着他们带你去某个地方.超链接需要 href 属性，因为它指定了一个位置.
哈希:
哈希 - # 在超链接中指定窗口应滚动到的 html 元素 ID.
href="#some-id" 将滚动到当前页面上的元素，例如
href="//site.com/#some-id" 将转到 site.com 并滚动到该页面上的 ID.
滚动到顶部:
href="#" 不指定 id 名称，但确实有相应的位置 - 页面顶部.单击带有 href="#" 的锚点会将滚动位置移动到顶部.
这是根据 w3 文档的预期行为.
超链接占位符:
超链接占位符有意义的一个例子是在模板预览中.在模板的单页演示中，我经常看到 <a href="#"> 这样的锚标记是一个超链接，但不会去任何地方.为什么不将 href 属性留空?空白的 href 属性实际上是指向当前页面的超链接.换句话说，它会导致页面刷新.正如我所讨论的，href="#" 也是一个超链接，会导致滚动.因此，超链接占位符的最佳解决方案实际上是 href="#!" 这里的想法是希望页面上没有带有 id="!"(谁做的！?)，因此超链接没有任何内容 - 所以什么也没有发生.
关于锚标签:
您可能想知道的另一个问题是，为什么不关闭 href 属性?".我听到的一个常见反应是 href 属性是必需的，因此它应该"出现在锚点上.这是错误的！href 属性仅在锚实际是超链接时才需要！阅读 来自 w3 的内容.那么，为什么不把它留给占位符呢?浏览器呈现元素的默认样式，并将更改没有 href 属性的锚标记的默认样式.相反，它将被视为常规文本.它甚至会改变浏览器关于元素的行为.将鼠标悬停在没有 href 属性的锚点上时，将不会显示状态栏(屏幕底部).最好在锚点上使用占位符 href 值，以确保将其视为超链接.
看这个演示展示风格和行为的差异.
On many websites I see links that have href="#". What does it mean? What is it used for?
About hyperlinks:
The main use of anchor tags - <a></a> - is as hyperlinks. That basically means that they take you somewhere. Hyperlinks require the href property, because it specifies a location.
Hash:
A hash - # within a hyperlink specifies an html element id to which the window should be scrolled.
href="#some-id" would scroll to an element on the current page such as <div id="some-id">.
href="//site.com/#some-id" would go to site.com and scroll to the id on that page.
Scroll to Top:
href="#" doesn't specify an id name, but does have a corresponding location - the top of the page. Clicking an anchor with href="#" will move the scroll position to the top.
This is the expected behavior according to the w3 documentation.
Hyperlink placeholders:
An example where a hyperlink placeholder makes sense is within template previews. On single page demos for templates, I have often seen <a href="#"> so that the anchor tag is a hyperlink, but doesn't go anywhere. Why not leave the href property blank? A blank href property is actually a hyperlink to the current page. In other words, it will cause a page refresh. As I discussed, href="#" is also a hyperlink, and causes scrolling. Therefore, the best solution for hyperlink placeholders is actually href="#!" The idea here is that there hopefully isn't an element on the page with id="!" (who does that!?) and the hyperlink therefore refers to nothing - so nothing happens.
About anchor tags:
Another question that you may be wondering is, "Why not just leave the href property off?". A common response I've heard is that the href property is required, so it "should" be present on anchors. This is FALSE! The href property is required only for an anchor to actually be a hyperlink! Read this from w3. So, why not just leave it off for placeholders? Browsers render default styles for elements and will change the default style of an anchor tag that doesn't have the href property. Instead, it will be considered like regular text. It even changes the browser's behavior regarding the element. The status bar (bottom of the screen) will not be displayed when hovering on an anchor without the href property. It is best to use a placeholder href value on an anchor to ensure it is treated as a hyperlink.
See this demo demonstrating style and behavior differences.
这篇关于什么是 href="#"为什么使用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
