溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html中錨點和頁面跳轉(zhuǎn)的示例

發(fā)布時間：2021-02-23 09:57:05 來源：億速云 閱讀：369 作者：清風(fēng) 欄目：web開發(fā)

這篇“html中錨點和頁面跳轉(zhuǎn)的示例”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“html中錨點和頁面跳轉(zhuǎn)的示例”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內(nèi)容吧。

html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

一、頁面內(nèi)跳轉(zhuǎn)的錨點設(shè)置
頁面內(nèi)的跳轉(zhuǎn)需要兩步：
方法一：
①：設(shè)置一個錨點鏈接<a href="#miao">去找喵星人</a>；（注意：href屬性的屬性值最前面要加#）
②：在頁面中需要的位置設(shè)置錨點<a name="miao"></a>；（注意：a標(biāo)簽中要寫一個name屬性，屬性值要與①中的href的屬性值一樣，不加#）標(biāo)簽中按需填寫必要的文字，一般不寫內(nèi)容
方法二：
①：同方法一的①
②：設(shè)置錨點的位置 <h4 id="miao">喵星人基地</h4>；在要跳轉(zhuǎn)到的位置的標(biāo)簽中添加一個id屬性，屬性值與①中href的屬性值一樣，不加#
方法二不用單獨添加一個a標(biāo)簽來專門設(shè)置錨點 ，只在需要的位置的標(biāo)簽中添加一個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>萌寵集結(jié)號</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><!--設(shè)置錨點方法1-->
<h4 id="miao">喵星人基地</h4><!--設(shè)置錨點方法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>

二、跨頁面跳轉(zhuǎn)

①：設(shè)置錨點鏈接，在href中的路徑后面追加：#+錨點名，即可
如：<a href="萌寵集結(jié)號.html#miao">跳轉(zhuǎn)到萌寵集結(jié)號頁面</a>
②：要跳轉(zhuǎn)到的頁面中要設(shè)置錨點，方法見一種的步驟②，兩個方法任選其一。

感謝你的閱讀，希望你對“html中錨點和頁面跳轉(zhuǎn)的示例”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領(lǐng)會，快去試試吧，如果想閱讀更多相關(guān)知識點的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手