什么是href =“＃”以及为什么使用它？

时间：2011-01-31 19:34:03

标签： html hyperlink

在许多网站上，我看到有href="#"的链接。这是什么意思？它用于什么？

9 个答案:

答案 0 :(得分：300)

关于超链接：

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

哈希：

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

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

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

滚动到顶部：

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

<强> See this demo.

根据 w3 documentation.

，这是预期的行为

超链接占位符：

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

关于锚标签：

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

See this demo 展示风格和行为差异。

答案 1 :(得分：82)

将“＃”符号作为某事物的href意味着它不指向不同的URL，而是指向同一页面上的另一个id或name标记。例如：

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

但是，如果没有身份证或姓名，那么它就会“无处可去”。

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

答案 2 :(得分：28)

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

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

答案 3 :(得分：22)

无序列表通常是为了将它们用作菜单而创建的，但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>

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

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

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

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

答案 4 :(得分：14)

不幸的是，<a href="#">最常见的用途是懒惰程序员，他们想要可点击的非超链接javascript编码元素，其行为类似于锚点，但他们不能被添加cursor: pointer;或{ {1}}类的样式用于非超链接元素，而且懒得将:hover设置为href。

这个问题是一个javascript:void(0);或另一个{@ 1}}不可避免地会出现javascript错误，并且带有onclick javascript错误的锚点始终会跟随<a href="#" onclick="some_function();">。通常，这最终会成为页面顶部的恼人跳转，但对于使用href的网站，<base>会被视为<a href="#">，从而导致意外导航。 如果正在生成任何可记录的错误，除非您启用持久性日志，否则在后一种情况下您将看不到它们。

如果锚元素 用作非锚点，应该将<a href="[base href]/#">设置为href，以便优雅退化。

我只是浪费了两天时间调试一个应该简单刷新页面的随机意外页面重定向，最后将其追踪到一个提升javascript:void(0);点击事件的函数。用<a href="#">替换#修复它。

我周一要做的第一件事就是清除javascript:void(0);所有实例的项目。

答案 5 :(得分：12)

据我所知，它通常是一个占位符，用于附加了一些JavaScript的链接。通过执行JavaScript代码来提供链接的要点;支持JS的浏览器然后忽略真正的链接目标。如果浏览器不支持JS，则哈希标记实际上将链接转换为无操作。另请参阅unobtrusive JavaScript。

答案 6 :(得分：11)

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

来自Mozilla Developer Network：

  

href

     

这是定义a的锚点的唯一必需属性   超文本源链接，但在HTML5中不再需要。省略   此属性创建占位符链接。 href属性   表示链接目标，URL或URL片段。一个URL   fragment是一个以哈希标记（＃）开头的名称，用于指定   当前文档中的内部目标位置（ID）。

另外，根据HTML5 spec：

  

如果a元素没有href属性，则该元素表示a   占位符，否则链接可能放在哪里   是相关的，只包含元素的内容。

答案 7 :(得分：11)

使用href =＆＃34;＃＆＃34;对于空链接，它会将您带到页面顶部，这可能不是所需的操作。 为避免这种情况，对于旧浏览器或非HTML5文档类型，请使用

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

答案 8 :(得分：0)

href属性定义链接资源的URL。如果anchor标签没有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>
相关问题
最新问题