html锚点简单使用

Posted 2021-06-16 蜜桃婷婷酱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html锚点简单使用相关的知识，希望对你有一定的参考价值。

在项目开发中锚点可以丰富客户体验,比如说点击一个菜单定位去页面的某个位置,常见的就是返回顶部等,下面简单介绍下锚点的使用

锚点离不开`<a></a>`标签,简单介绍下`<a></a>`超链接的一些常用例子

1.链接访问地址

<a href="http://www.baidu.com">点我去百度！！！</a>

2.空链接不访问

<a href="#">点我去百度！！！</a>

3.链接访问js函数

<a href="javascript:test();">测试</a>

   function test(){
		alert();
	}

4.链接带参数

<a href="javascript:test('张三');">测试</a>

   function test(name){
		alert(name);
	}

暂时想起来这几种常用的用法,欢迎大家留言评论补充

锚点就是借助<`a></a>`标签超链接的特性基础进行的补充,下面介绍几种实现方式

方法1 同页面用name属性

点击跳转链接:<a href="#menu1">去菜单1</a><br>
被跳转链接:<a name="menu1">菜单1</a>

方法2 同页面用id属性比方法1安全因为id是唯一的

点击跳转链接:<a href="#menu1">去菜单1</a><br>
被跳转链接:<a id="menu2">菜单1</a>

方法3 不同页面使用锚点跳转

跳转页面:<a href="test.html#bottom">去test页面底部</a>
被跳转页面:<a id="bottom">我是test.html的底部</a>

简单的例子(我是用记事本写的代码比较简便)

<html>
<head></head>
<body>
	<a href="test.html#bottom">去test页面底部</a>
	<a name="top">我是顶部</a>
	<a href="#bottom">去底部</a>
	<a href="#menu1">去菜单1</a><br><a href="#menu2">去菜单2</a>
 	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<a name="menu1">菜单1</a>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<a id="menu2">菜单2</a>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<a id="bottom">我是底部</a>
	<a href="#top">去顶部</a>
</body>
</html>