超連結 a

提供網頁連結能力,連結位置與目前網域不同時,稱為『外部連結』,反之為『內部連結』

外部連結

<a href="https://www.google.com/">To Google</a>

建立一個連結到 https://www.google.com/ 的超連結,顯示內容為 To Google

內部連結

<a href="/about.html">About</a>

建立一個連結到 https://{{ domain }}/about.html 的超連結,顯示內容為 About

{{ domain }} 頁面當下網域

例如當下網域為 https://www.test.com/ 則此超連結為 https://www.test.com/about.html

開啟目標

目前的超連結,都會將頁面直接轉跳到目的網頁

這是因為還有一個屬性 target 我們沒宣告,預設為 _self

如果想要點擊後,跳出一個新的分頁顯示,將 target 的數值設定為 _blank

<a href="https://www.google.com/" target="_blank">To Google</a>

錨點

id 當成目標位置,使用 # 表示

<div id="top">Top</div>

<a href="#top">To top</a>

demo

捲軸滑順效果

<style>
    html,
    body {
        scroll-behavior: smooth;
    }
</style>