什么是href =“#”,为什么使用它?

html HTML

StafanHarry

2020-03-23

在许多网站上,我看到了具有的链接href="#"这是什么意思?这有什么用途?

第2984篇《什么是href =“#”,为什么使用它?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

7个回答
乐达蒙小卤蛋 2020.03.23

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>
JinJin 2020.03.23

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

来自Mozilla开发人员网络

href

这是定义超文本源链接的锚的唯一必需属性,但在HTML5中不再需要。省略此属性将创建一个占位符链接。href属性指示链接目标,可以是URL或URL片段。URL片段是一个名称,其前面带有一个井号(#),该井号指定了当前文档中的内部目标位置(ID)。

另外,按照HTML5 规范

如果a元素没有href属性,则该元素代表一个占位符,如果不相关,则可能已放置了链接,该链接仅由元素的内容组成。

Davaid小卤蛋 2020.03.23

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

<a href="javascript:void(0)">Goes Nowhere</a>
Gil伽罗小宇宙 2020.03.23

据我所知,通常是链接的占位符,链接中附加了一些JavaScript。链接的要点是通过执行JavaScript代码提供的;具有JS支持的浏览器然后忽略实际的链接目标。如果浏览器不支持JS,则井号实际上将链接变成无操作。另请参见简洁的JavaScript

Stafan 2020.03.23

将“#”符号用作href表示某些内容,它不是指向其他URL,而是指向同一页面上的另一个id或名称标签。例如:

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

但是,如果没有ID或名称,那么它将“无处可去”。

这是另一个类似的问题,问带有“ name”或“ id”的HTML锚点吗?

2020.03.23

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

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

理查德前端 2020.03.23

通常创建无序列表的目的是将它们用作菜单,但是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,但不需要链接到任何地方。

您可以在菜单列表中使用divp标签,但鼠标指针也将是它们的I光标。

您可以将许多按钮堆叠在一起,以获得一个菜单列表,但该列表似乎更可取。这可能就是为什么在href="#"列表标签内的定位标签中使用指向无处那个。

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android