專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2022-02-16 09:07:56 來源：動力節點 瀏覽1009次
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在頁面上只能出現一次。
2.使用鏈接目標的id創建超鏈接，前面帶有 #。
<a href="#anchor-name">Jump to the part of the page with the “anchor-name” id </a>
現在，只需添加首選文本，您就可以瀏覽頁面部分。
<!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>
您也可以從其他網站鏈接到您的錨鏈接。為此，添加 URL 后跟 # 和錨值。這種用法有兩種類型。
鏈接到同一域中的另一個頁面：
<a href="/learn-html/html-links.html#html_links">Go to the HTML Links in our website.</a>
來自另一個網站的鏈接：
<a >Go to the main page of Wikipedia .</a>
從另一個網頁鏈接到錨點的示例：
<!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>
通過上述介紹，相信大家對創建HTML跳轉鏈接代碼已經有所了解，大家如果對此比較感興趣，想了解更多相關知識，不妨來關注一下動力節點的Java在線學習，里面的課程內容細致全面，從入門到精通，對大家的學習一定會有所幫助。
Java實驗班
0基礎 0學費 15天面授
Java就業班
有基礎 直達就業
Java夜校直播班
業余時間 高薪轉行
Java在職加薪班
工作1~3年，加薪神器
Java架構師班
工作3~5年，晉升架構
提交申請后，顧問老師會電話與您溝通安排學習
官方微信
官方抖音
京公網安備 11030102010736號