首页 > 编程 > HTML > 正文

html中的锚点

2020-03-24 17:48:25
字体:
来源:转载
供稿:网友

一、页面内跳转的锚点设置

页面内的跳转需要两步:

方法一:

①:设置一个锚点链接<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

②:要跳转到的页面中要设置锚点,方法见一种的步骤②,两个方法任选其一。

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

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