超連結 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>
捲軸滑順效果
<style>
html,
body {
scroll-behavior: smooth;
}
</style>