不同页面锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#" name="top"></a>
<p><a href="锚链接.html#shuiguo">水果</a></p>
<p><a href="锚链接.html#shucai">蔬菜</a></p>
<p><a href="锚链接.html#yundong">运动</a></p>
</body>
</html>
展示效果:将会跳转到本地链接地址
相同页面锚链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="#" name="top"></a>
<p><a href="#shuiguo">水果</a></p>
<p><a href="#shucai">蔬菜</a></p>
<p><a href="#yundong">运动</a></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1><a href="#" name="shuiguo">水果</a></h1>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>葡萄</li>
<li>梨</li>
<li>西瓜</li>
<li>樱桃</li>
<li>菠萝</li>
<li>橙子</li>
<li>柚子</li>
<li>芒果</li>
</ul>
<a href="#top">返回顶部</a>
<h2><a href="#" name="shucai">蔬菜</a></h2>
<ul>
<li>西红柿</li>
<li>黄瓜</li>
<li>土豆</li>
<li>芹菜</li>
<li>蒜薹</li>
<li>西葫芦</li>
<li>香菇</li>
<li>菠菜</li>
<li>豆角</li>
<li>油菜</li>
</ul>
<a href="#top">返回顶部</a>
<h3><a href="#" name="yundong">运动</a></h3>
<ul>
<li>游泳</li>
<li>短跑</li>
<li>长跑</li>
<li>拔河</li>
<li>篮球</li>
<li>足球</li>
<li>铅球</li>
<li>滑冰</li>
<li>滑板</li>
<li>跳远</li>
</ul>
<a href="#top">返回顶部</a>
</body>
</html>
展示效果：点击水果、蔬菜、运动会跳转到当前页面name名为shuiguo、yundong等的位置，下文展示只有返回顶部生效
水果
- 香蕉
- 苹果
- 葡萄
- 梨
- 西瓜
- 樱桃
- 菠萝
- 橙子
- 柚子
- 芒果
蔬菜
- 西红柿
- 黄瓜
- 土豆
- 芹菜
- 蒜薹
- 西葫芦
- 香菇
- 菠菜
- 豆角
- 油菜
运动
- 游泳
- 短跑
- 长跑
- 拔河
- 篮球
- 足球
- 铅球
- 滑冰
- 滑板
- 跳远