html中的锚点
赵宁
管理员
管理员
  • UID2
  • 粉丝91
  • 关注99
  • 发帖数140
  • 社区居民
  • 荣誉会员
  • 原创写手
  • VIP会员
  • 优秀斑竹
  • 喜欢达人
  • 忠实会员
  • 最爱沙发
  • 社区明星
  • 追星一族
阅读:1528回复:0

html中的锚点

楼主#
更多 发布于:2019-01-11 16:54
[color=#3c3c3c][/color]
[color=#3c3c3c]一、页面内跳转的锚点设置[/color]
[color=#3c3c3c] 页面内的跳转需要两步:[/color]
[color=#3c3c3c] 方法一:[/color]
[color=#3c3c3c] ①:设置一个锚点链接<a href="#miao">去找喵星人</a>;(注意:href属性的属性值最前面要加#)[/color]
[color=#3c3c3c] ②:在页面中需要的位置设置锚点<a name="miao"></a>;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容[/color]
[color=#3c3c3c] 方法二:[/color]
[color=#3c3c3c] ①:同方法一的①[/color]
[color=#3c3c3c] ②:设置锚点的位置 <h3 id="miao">喵星人基地</h3>;在要跳转到的位置的标签中添加一个id属性,属性值与①中href的属性值一样,不加#[/color]
[color=#3c3c3c] 方法二不用单独添加一个a标签来专门设置锚点 ,只在需要的位置的标签中添加一个id即可。[/color]
[color=#3c3c3c]小案例:[/color]
[color=#3c3c3c]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/color]
[color=#3c3c3c]<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">[/color]
[color=#3c3c3c]<head>[/color]
[color=#3c3c3c] <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">[/color]
[color=#3c3c3c] <title>萌宠集结号</title>[/color]
[color=#3c3c3c]</head>[/color]
[color=#3c3c3c]<body>[/color]
[color=#3c3c3c] <ul>[/color]
[color=#3c3c3c] <li><a href="#miao">去找喵星人</a></li>[/color]
[color=#3c3c3c] <li><a href="#wang">去找汪星人</a></li>[/color]
[color=#3c3c3c] <li><a href="#meng">其他萌物</a></li>[/color]
[color=#3c3c3c] </ul>[/color]
[color=#3c3c3c] <a name="miao"></a><!--设置锚点方法1-->[/color]
[color=#3c3c3c] <h3 id="miao">喵星人基地</h3><!--设置锚点方法2-->[/color]
[color=#3c3c3c] <p>喵喵喵~</p>[/color]
[color=#3c3c3c] <p>喵喵喵~</p>[/color]
[color=#3c3c3c] <p>喵喵喵~</p>[/color]
[color=#3c3c3c] <p>喵喵喵~</p>[/color]
[color=#3c3c3c] <p>喵喵喵~</p>[/color]
[color=#3c3c3c] <p>喵喵喵~</p>[/color]
[color=#3c3c3c] <a name="wang"></a>[/color]
[color=#3c3c3c] <p>汪汪汪~</p>[/color]
[color=#3c3c3c] <p>汪汪汪~</p>[/color]
[color=#3c3c3c] <p>汪汪汪~</p>[/color]
[color=#3c3c3c] <p>汪汪汪~</p>[/color]
[color=#3c3c3c] <p>汪汪汪~</p>[/color]
[color=#3c3c3c] <p>汪汪汪~</p>[/color]
[color=#3c3c3c] <a name="meng"></a>[/color]
[color=#3c3c3c] <p>萌萌萌~</p>[/color]
[color=#3c3c3c] <p>萌萌萌~</p>[/color]
[color=#3c3c3c] <p>萌萌萌~</p>[/color]
[color=#3c3c3c] <p>萌萌萌~</p>[/color]
[color=#3c3c3c] <p>萌萌萌~</p>[/color]
[color=#3c3c3c] <p>萌萌萌~</p>[/color]
[color=#3c3c3c]</body>[/color]
[color=#3c3c3c]</html>[/color]
[color=#3c3c3c]二、跨页面跳转[/color]
[color=#3c3c3c]①:设置锚点链接,在href中的路径后面追加:#+锚点名,即可[/color]
[color=#3c3c3c] 如:<a href="萌宠集结号.html#miao">跳转到萌宠集结号页面</a>[/color]
[color=#3c3c3c]②:要跳转到的页面中要设置锚点,方法见一种的步骤②,两个方法任选其一。[/color]
[backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][color=#ff0000][font=Tahoma, Simsun, sans-serif]源码下载:请添加学习交流QQ群,群文件下载[/font][/color][/font][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif] [/font][/font][/font][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][/font][/font][/font][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][/font][/font][/font][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][/font][/font][/font][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][/font][/font][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][/font][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][/font][/font][/backcolor][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][/font][/backcolor]
[size=5][backcolor=#ffffff][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif][font=Tahoma, Simsun, sans-serif]点击链接加群:[url=https://jq.qq.com/?_wv=1027&k=5eVyoCc]点击链接加入群【未来脚步-学习交流】[/url][/font][/font][/font][/font][/backcolor][/size]

分享

游客

返回顶部