HTML新增超連結、錨點的方法及作用詳解（附影片）-html知識-PHP中文網

首頁

每日程式設計

html知識

HTML新增超連結、錨點的方法及作用詳解（附影片）

藏色散人

Sep 11, 2018 pm 04:15 PM

超連結錨點

本篇文章主要為大家介紹HTML中超連結錨點分別是如何加入設定的以及作用是什麼。

HTML超連結和錨點的概念，相信大多數朋友都已經非常了解了，但是對於html剛入門的新手小白們來說，html怎麼添加超連結錨點的這個問題可能還有點不清楚。那麼這篇文章就是針對新手朋友來介紹的，希望對需要的朋友有幫助！

下面我們透過具體的HTML程式碼範例，為大家詳細解說。

HTML中新增超連結錨點的程式碼範例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<a href="http://www.php.cn">PHP中文网</a>

<a href="#one">第一篇文章</a>
<a href="#two">第二篇文章</a>
<a href="#three">第三篇文章</a>

<a name="one"></a>
<h1 id="第一篇文章">第一篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a name="two"></a>
<h1 id="第二篇文章">第二篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a name="three"></a>
<h1 id="第三篇文章">第三篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a href="">回到顶部</a>
</body>
</html>

在此段落程式碼中，我們主要用到了HTML中的標籤，當我們直接在a標籤中加入href="要跳轉的連結位址" 屬性後，就可以實現文字超連結。例如上述的這段程式碼PHP中文網，就是實現了點擊PHP中文網這個字段時就可以直接跳到指定的連結頁面。

當我們在a標籤中，加上 name=「 #錨點名稱」屬性後，就是表示設定了錨點連結。那麼在正文中，你可以在指定位置設定錨點，也就是在a標籤中加上 name=「錨點名」。注意這裡就不要加#符號了。

那麼上述程式碼，整體效果如下圖：

HTML新增超連結、錨點的方法及作用詳解（附影片）