<a>标签 href属性值为#或以#开头的意思

原创于 2015-04-25 07:59:31 发布 · 9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#a标签 href属性值为#或以#开头

html+css 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个实例展示了如何使用HTML中的锚点和超链接。文章详细解释了如何创建指向页面内部特定位置的链接，以及如何让这些链接引导用户回到页面顶部。配合JavaScript动态生成的内容，读者可以直观地感受到锚点链接的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

比如说当一个页面里面有一个这样的标签 <a name="hello" >name为hello的锚点</a>

这个<a>标签可以称之为一个"锚点"

当然页面上还有这两个超链接<a>标签。

<a href="#hello">回到name为hello的锚点</a><br>
<a href="#">回到顶层</a>

好那么现在开始讲解： href="#hello" 的时该<a>标签可以回到页面内一个name属性为hello的一个<a>标签(name="hello")。

当href="#"的时候该超链接<a>标签可以回到页面顶端。

下面来看实际的代码来体验下效果。

html 代码:

<span style="font-size:18px;"><div id="area1"></div>
<a name="hello" >name为hello的锚点</a>
<div id="area2"></div>
<a href="#hello">回到name为hello的锚点</a><br>
<a href="#">回到顶层</a></span>

javascript脚本段:

<span style="font-size:18px;"><script type="text/javascript">

	$(document).ready(function()
			{
						for(var i = 0 ; i < 20 ; i++)
						{
								$("#area1").append("<p>helloworld " + i + "</p>");
						}

						for(var i = 0 ; i < 40 ; i++)
						{
								$("#area2").append("<p>helloworld " + i + "</p>");
						}
			});

</script></span>