Html 什么是 href="#" 以及为什么使用它？

What is href="#" and why is it used?

提问by Samir Ghobril

On many websites I see links that have href="#". What does it mean? What is it used for?

在许多网站上，我看到带有href="#". 这是什么意思？它是干什么用的？

回答by m59

About hyperlinks:

关于超链接：

The main use of anchor tags - <a></a>- is as hyperlinks. That basically means that they take you somewhere. Hyperlinks require the hrefproperty, because it specifies a location.

锚标记的主要用途<a></a>是作为超链接。这基本上意味着他们带你去某个地方。超链接需要该href属性，因为它指定了一个位置。

Hash:

哈希：

A hash - #within a hyperlink specifies an html element id to which the window should be scrolled.

#超链接中的哈希值指定了窗口应滚动到的 html 元素 ID。

href="#some-id"would scroll to an element on the current page such as <div id="some-id">.

href="#some-id"将滚动到当前页面上的元素，例如<div id="some-id">.

href="//site.com/#some-id"would go to site.comand scroll to the id on that page.

href="//site.com/#some-id"将转到site.com并滚动到该页面上的 id。

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.

href="#"不指定 id 名称，但确实有相应的位置 - 页面顶部。单击一个锚点href="#"会将滚动位置移动到顶部。

See this demo.

看到这个演示。

This is the expected behavior according to the w3 documentation.

根据w3 文档，这是预期的行为。

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 hrefproperty blank? A blank hrefproperty 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.

超链接占位符有意义的一个例子是在模板预览中。在模板的单页演示中，我经常看到<a href="#">这样的锚标记是一个超链接，但不会去任何地方。为什么不把href属性留空？空白href属性实际上是指向当前页面的超链接。换句话说，它会导致页面刷新。正如我所讨论的，href="#"也是一个超链接，并导致滚动。因此，超链接占位符的最佳解决方案实际上是href="#!"这里的想法是希望页面上没有元素id="!"（是谁做的！？），因此超链接没有任何参考 - 所以什么也没有发生。

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 hrefproperty is required, so it "should" be present on anchors. This is FALSE! The hrefproperty 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.

您可能想知道的另一个问题是，“为什么不关闭 href 属性？”。我听到的一个常见反应是该href属性是必需的，因此它“应该”出现在锚点上。这是错误的！href仅当锚点实际上是超链接时才需要该属性！从 w3阅读此内容. 那么，为什么不把它留给占位符呢？浏览器呈现元素的默认样式，并将更改没有 href 属性的锚标记的默认样式。相反，它将被视为常规文本。它甚至会改变浏览器关于元素的行为。将鼠标悬停在没有 href 属性的锚点上时，将不会显示状态栏（屏幕底部）。最好在锚点上使用占位符 href 值，以确保将其视为超链接。

See this demodemonstrating style and behavior differences.

请参阅此演示，展示风格和行为差异。

回答by u476945

Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:

将“#”符号作为某些内容的 href 意味着它不指向不同的 URL，而是指向同一页面上的另一个 id 或名称标签。例如：

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

However, if there is no id or name then it goes "no where."

但是，如果没有 id 或 name，那么它就“无处可去”。

Here's another similar question asked HTML Anchors with 'name' or 'id'?

这是另一个类似的问题，问HTML Anchors with 'name' or 'id'?

回答by Tyler Treat

It's a link that links to nowhere essentially (it just adds "#" onto the URL). It's used for a number of different reasons. For instance, if you're using some sort of JavaScript/jQuery and don't want the actual HTML to link anywhere.

它本质上是一个链接到任何地方的链接（它只是在 URL 上添加了“#”）。它用于许多不同的原因。例如，如果您使用某种 JavaScript/jQuery 并且不希望实际的 HTML 链接到任何地方。

It's also used for page anchors, which is used to redirect to a different part of the page.

它还用于页面锚点，用于重定向到页面的不同部分。

回答by Aufgeschissener Kunde

Unfortunately, the most common use of <a href="#">is by lazy programmers who want clickable non-hyperlink javascript-coded elements that behave like anchors, but they can't be arsed to add cursor: pointer;or :hoverstyles to a class for their non-hyperlink elements, and are additionally too lazy to set hrefto javascript:void(0);.

不幸的是，最常见的用途<a href="#">是懒惰的程序员，他们想要可点击的非超链接 javascript 编码元素，其行为类似于锚点，但他们无法为非超链接元素添加cursor: pointer;或:hover样式到类中，并且另外懒得设置href到javascript:void(0);。

The problem with this is that one <a href="#" onclick="some_function();">or another inevitably ends up with a javascript error, and an anchor with an onclick javascript error always ends up following its href. Normally this ends up being an annoying jump to the top of the page, but in the case of sites using <base>, <a href="#">is handled as <a href="[base href]/#">, resulting in an unexpected navigation. Ifany logable errors are being generated, you won't see them in the latter case unless you enable persistent logs.

问题在于，一个<a href="#" onclick="some_function();">或另一个不可避免地以 javascript 错误结束，并且带有 onclick javascript 错误的锚点总是在其href. 通常，这最终会令人讨厌地跳转到页面顶部，但在使用 的站点的情况下，<base>,<a href="#">被处理为<a href="[base href]/#">，从而导致意外导航。 如果正在生成任何可记录的错误，除非启用持久日志，否则在后一种情况下您将看不到它们。

If an anchor element isused as a non-anchor it shouldhave its hrefset to javascript:void(0);for the sake of gracefuldegradation.

如果锚定元件被用作一个非锚定它应具有其href设置为javascript:void(0);用于起见优雅降级。

I just wasted two days debugging a random unexpected page redirect that should have simply refreshed the page, and finally tracked it down to a function raising the click event of an <a href="#">. Replacing the #with javascript:void(0);fixed it.

我只是浪费了两天时间调试一个随机的意外页面重定向，该重定向应该只是刷新页面，最后将其追踪到一个引发<a href="#">. 更换#与javascript:void(0);固定它。

The first thing I'm doing Monday is purging the project of all instances of <a href="#">.

我周一要做的第一件事是清除项目中所有<a href="#">.

回答by Alan Wells

Unordered lists are often created with the intent of using them as a menu, but an lilist item is text. Because the list liitem is text, the mouse pointer will not be an arrow, but an "I cursor". Users are accustomed to seeing a pointing finger for a mouse pointer when something is clickable. Using an anchor tag ainside of the litag causes the mouse pointer to change to a pointing finger. The pointing finger is a lot better for using the list as a menu.

创建无序列表通常是为了将它们用作菜单，但li列表项是文本。因为列表li项是文本，所以鼠标指针不会是箭头，而是“I 光标”。当某些东西可点击时，用户习惯于看到指向鼠标指针的手指。在标签a内使用锚标签li会导致鼠标指针变为指向手指。用手指将列表用作菜单要好得多。

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

If the list is being used for a menu, and doesn't need a link, then a URL doesn't need to be designated. But the problem is that if you leave out the hrefattribute, text in the <a>tag is seen as text, and therefore the mouse pointer is back to an I-cursor. The I-cursor might make the user think that the menu item is not clickable. Therefore, you still need an href, but you don't need a link to anywhere.

如果列表用于菜单，并且不需要链接，则不需要指定 URL。但问题是，如果您省略该href属性，则<a>标签中的文本将被视为文本，因此鼠标指针将返回到 I 光标。I 光标可能会让用户认为菜单项不可点击。因此，您仍然需要一个href，但不需要指向任何地方的链接。

You could use lots of divor ptags for a menu list, but the mouse pointer would be an I-cursor for them also.

您可以为菜单列表使用许多div或p标签，但鼠标指针也将是它们的 I 光标。

You could use lots of buttons stacked on top of each other for a menu list, but the list seems to be preferable. And that's probably why the href="#"that points to nowhere is used in anchor tags inside of list tags.

您可以使用许多堆叠在一起的按钮作为菜单列表，但列表似乎更可取。这可能就是为什么在href="#"列表标签内的锚标签中使用指向无处的原因。

You can set the pointer style in CSS, so that is another option. The href="#"to nowhere might just be the lazy way to set some styling.

您可以在 CSS 中设置指针样式，这是另一种选择。该href="#"无处可能只是偷懒的方法来设置一些样式。

回答by RationalRabbit

The problem with using href="#" for an empty link is that it will take you to the top of the page which may not be the desired action. To avoid this, for older browsers or non-HTML5 doctypes, use

对空链接使用 href="#" 的问题是它会将您带到页面顶部，而这可能不是您想要的操作。为避免这种情况，对于较旧的浏览器或非 HTML5 文档类型，请使用

<a href="javascript:void(0)">Goes Nowhere</a>

回答by Doug Richardson

As some of the other answers have pointed out, the aelement requires an hrefattribute and the #is used as a placeholder, but it is also a historical artifact.

正如其他一些答案所指出的那样，a元素需要一个href属性，并且#用作占位符，但它也是一个历史工件。

From Mozilla Developer Network:

来自Mozilla 开发者网络：

href

This was the single required attribute for anchors defining a hypertext source link, but is no longer required in HTML5. Omitting this attribute creates a placeholder link. The href attribute indicates the link target, either a URL or a URL fragment. A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID) within the current document.

href

这是定义超文本源链接的锚点的唯一必需属性，但在 HTML5 中不再需要。省略此属性会创建一个占位符链接。href 属性指示链接目标，可以是 URL 或 URL 片段。URL 片段是一个以井号 (#) 开头的名称，它指定当前文档中的内部目标位置（一个 ID）。

Also, per the HTML5 spec:

此外，根据 HTML5规范：

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

如果 a 元素没有 href 属性，则该元素表示一个占位符，用于在其他情况下放置链接的位置（如果链接是相关的），则仅由元素的内容组成。

回答by zoul

As far as I know it's usually a placeholder for links that have some JavaScript attached to them. The main point of the link is served by executing the JavaScript code; browsers with JS support then ignore the real link target. If the browser does not support JS, the hash mark essentially turns the link into a?no?op. See also unobtrusive JavaScript.

据我所知，它通常是附加了一些 JavaScript 的链接的占位符。链接的要点是通过执行 JavaScript 代码提供的；支持 JS 的浏览器然后忽略真正的链接目标。如果浏览器不支持 JS，哈希标记本质上会将链接变成一个?no?op。另请参阅不显眼的 JavaScript。

回答by Sheo Dayal Singh

The href attribute defines the URL of the resource of a link. If the anchor tag does not have href tag then it will not become hyperlink. The href attribute have the following values:

href 属性定义链接资源的 URL。如果锚标签没有 href 标签，那么它不会成为超链接。href 属性具有以下值：

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>