專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-02-16 09:07:56 來源：動力節(jié)點 瀏覽939次
1.向錨元素添加一個id屬性，為頁面的部分命名。屬性的值可以是單詞或短語(使用短語時請記住不要有空格，請改用破折號或下劃線)。
<a id="anchor-name">The name where you want to jump</a>
或者，您還可以使用以下類型的錨：
標題中的錨點：<h2 id="anchor-name">部分名稱</h2>
圖像中的錨點：<img id="anchor-name" src="/images/imgname.jpeg"/>
段落中的錨點：<p id="anchor-name">段落名稱</p>
請記住，每個id在頁面上只能出現(xiàn)一次。
2.使用鏈接目標的id創(chuàng)建超鏈接，前面帶有 #。
<a href="#anchor-name">Jump to the part of the page with the “anchor-name” id </a>
現(xiàn)在，只需添加首選文本，您就可以瀏覽頁面部分。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-content {
height: 100vh;
text-align: justify;
}
</style>
</head>
<body>
<h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
<p class="main-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</p>
<p>Go to the
<a href="#Lorem_Ipsum">top</a>.
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.main-content {
height: 100vh;
text-align: justify;
}
h2 {
color: #1c87c9;
}
h2:target {
color: white;
background: #1c87c9;
}
</style>
</head>
<body>
<h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
<div class="main-content ">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</p>
</div>
<p>Go to the
<a href="#Lorem_Ipsum">top</a>.
</p>
</body>
</html>
您也可以從其他網(wǎng)站鏈接到您的錨鏈接。為此，添加 URL 后跟 # 和錨值。這種用法有兩種類型。
鏈接到同一域中的另一個頁面：
<a href="/learn-html/html-links.html#html_links">Go to the HTML Links in our website.</a>
來自另一個網(wǎng)站的鏈接：
<a >Go to the main page of Wikipedia .</a>
從另一個網(wǎng)頁鏈接到錨點的示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2 id="Lorem_Ipsum">Lorem Ipsum</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
<a href="/learn-html/html-links.html#html_links">Go to the HTML Links in our website.</a>
</p>
<p>
<a >Go to the main page of Wikipedia.</a>
</p>
</body>
</html>
通過上述介紹，相信大家對創(chuàng)建HTML跳轉(zhuǎn)鏈接代碼已經(jīng)有所了解，大家如果對此比較感興趣，想了解更多相關(guān)知識，不妨來關(guān)注一下動力節(jié)點的Java在線學(xué)習(xí)，里面的課程內(nèi)容細致全面，從入門到精通，對大家的學(xué)習(xí)一定會有所幫助。
初級 202925
初級 203221
初級 202629
初級 203743
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號