HTML 程式札記 : <a> 超連結

無論是跳轉到另一個網頁，還是在同一頁面內導航，HTML 超連結都扮演著關鍵角色。本文將簡單的介紹 HTML 超連結的基礎語法和使用方法。

HTML 超連結基礎

HTML 連結，通常指的是超文本連結，在 HTML 中主要透過<a>標籤來實現。

基本語法

HTML 連結的基本語法非常簡單：

<a href="目標網址">連結文字</a>

這裡，href屬性指定了連結的目標地址，而連結文字則是顯示給使用者看的文本。

開啟方式

連結預設是在當前窗口打開，但你可以透過target屬性改變這一點。例如：

<a href="https://www.example.com" target="_blank">新窗口打開</a>

在這個範例中，target="_blank"會讓連結在新的瀏覽器標籤或窗口中打開。

HTML 超連結進階使用

錨點連結

HTML 連結不僅可以連結到不同的網頁，還可以連接到同一頁面中的特定部分。這通常透過錨點（Anchor）來實現。

<!-- 定義錨點 -->
<h2 id="section1">第一節</h2>

<!-- 建立到錨點的連結 -->
<a href="#section1">跳轉到第一節</a>

在這裡，id屬性用於標記頁面中的特定位置，而href中的#後跟著該ID，表示這是一個錨點連結。

圖片連結

你也可以將圖片作為連結：

<a href="https://www.example.com">
    <img src="image.jpg" alt="描述">
</a>

這樣，圖片image.jpg就成了一個指向https://www.example.com的連結。

郵件連結

HTML 還支持建立郵件地址的連結，這可以通過mailto協議實現。

<a href="mailto:[email protected]">發送郵件</a>

點擊這個連結將會打開用戶的預設郵件客戶端，並創建一封寫給[email protected]的郵件。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡