首页 > 编程 > HTML > 正文

html中的锚点和页面跳转

2020-03-24 17:32:20
字体:
来源:转载
供稿:网友
一、页面内跳转的锚点设置
页面内的跳转需要两步:
方法一:
①:设置一个锚点链接 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  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教程

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表