html中的锚点和页面跳转_html-js-css

概述html中的锚点和页面跳转一、页面内跳转的锚点设置
页面内的跳转需要两步：
方法一：
①：设置一个锚点链接<a href="#miao">去找喵星人</a>；（注意：href属性的属性值最前面要加#）
②：在页面中需要的位置设置锚点<a name="miao"></a>；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容
方法二：
①：同方法一的①
②：设置锚点的位置 <h3 ID="miao">喵星人基地</h3>；在要跳转到的位置的标签中添加一个ID属性，属性值与①中href的属性值一样，不加#
方法二不用单独添加一个a标签来专门设置锚点，只在需要的位置的标签中添加一个ID即可。

小案例：

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><Meta http-equiv="Content-Type" content="text/HTML;charset=UTF-8"><Title>萌宠集结号</Title></head><body><ul><li><a href="#miao">去找喵星人</a></li><li><a href="#wang">去找汪星人</a></li><li><a href="#meng">其他萌物</a></li></ul><a name="miao"></a><!--设置锚点方法1--><h3 ID="miao">喵星人基地</h3><!--设置锚点方法2--><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p><p>喵喵喵~</p><a name="wang"></a><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p><p>汪汪汪~</p><a name="meng"></a><p>萌萌萌~</p><p>萌萌萌~</p><p>萌萌萌~</p><p>萌萌萌~</p><p>萌萌萌~</p><p>萌萌萌~</p></body></HTML>

二、跨页面跳转

①：设置锚点链接，在href中的路径后面追加：#+锚点名，即可
如：<a href="萌宠集结号.HTML#miao">跳转到萌宠集结号页面</a>
②：要跳转到的页面中要设置锚点，方法见一种的步骤②，两个方法任选其一。总结

以上是内存溢出为你收集整理的html中的锚点和页面跳转全部内容，希望文章能够帮你解决html中的锚点和页面跳转所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1013727.html