天天看點

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>