、頁面內跳轉的錨點設置
頁面內的跳轉需要兩步:
方法一:
①:設置一個錨點鏈接<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>
②:要跳轉到的頁面中要設置錨點,方法見一種的步驟②,兩個方法任選其一。
超鏈接除了可以鏈接特定的文件和網站之外,還可以鏈接到網頁內的特定內容。這可以使用<a>標簽name或id屬性,創建一個文檔內部的書簽。也就是說,可以創建指向文檔片段的鏈接。
例如,使用以下命名可以將網頁中的文本,“你好”定義為一個內部書簽,書簽名稱為“name1”。
<a name="name1">你好</a>
在網頁中的其它位置可以插入超鏈接引用該書簽,引用命名如下:
<a href="#name">使用內部書簽</a>
一般網頁內容比較多的網站會采用這種方法,如一個電子書網頁。
下面就使用錨鏈接制造一個電子書網頁。
(1)編寫代碼如下圖所示:
(2)在瀏覽器中打開文件,預覽效果圖如下所示,由于內容較少,還看不出效果 。
(3)為每一個詩詞添加內容,完善后的代碼如下:
(4)在瀏覽器中打開文件,預覽整體效果圖如下所示:
(5)單擊《書憤二首》,頁面會自動跳轉《書憤二首》對應的內容,如下所示:
更多精彩等你來學習哦!
了方便用戶在 Chrome 中輕松分享內容,谷歌于近日推出了一項新功能 —— 允許用戶在使用期間,或多或少地創建錨標記(anchor tags)。據悉,這些標記其實屬于小型的 HTML 標簽,能夠直接定位到一個網頁的特定位置。資深網民對此應該不會感到陌生,尤其是在那些幫助搜索者查找問題答案的工具上。
需要指出的是,你實際上并未看到那些標簽,而是從搜索引擎直接跳轉到了網頁上的某個部分的“小鏈接”。
在次之前,這項功能僅面向 Web 開發者開放。如果你想分享最新一期《大西洋月刊》上的一段話,用起來就不那么方便了。
好消息是,谷歌現在為 Chrome 用戶提供了一項被稱作“滾動到文本”(Sroll-to-text)的新功能,目前隱藏在“標記”(flag)后面。
其允許用戶創建一個超鏈接,其中包括了您要分享的內容信息,有效扮演一個錨標記的角色。
這意味著,用戶能夠將新聞文章中的單詞或段落分享給其他人,然后直接彈出(跳轉)到你希望他們看到的頁面部分(而無需導引至這里),從而節省大量的時間。
目前谷歌正在 Chrome Canary 分支測試這項功能,如果一切順利,其有望在今年 4 月抵達 Chrome 的其它分支。
[編譯自:MSPU]
*請認真填寫需求信息,我們會在24小時內與您取得聯系。