iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0

今天我們來看看超連結標籤及屬性 !

超連結標籤

  • <a>:連結到另一個頁面,最常使用的屬性是href

範例

<body>
    <p>點擊以下連結跳轉到Google:</p>
    <a href="https://www.google.com">前往Google</a>
</body>

https://ithelp.ithome.com.tw/upload/images/20240924/20168630TZ3Smi1rQ2.png

屬性

  1. <href> : 這是超連結的目標位置,定義當用戶點擊連結時,將跳轉到的 URL 或資源。

  2. <target> :定義連結點擊後在哪裡打開目標頁面。

    • _self(默認值) : 在當前視窗或框架中打開。
    • _blank : 在在新視窗或標籤中打開連結。
    • _parent : 在父框架中打開(用於框架)。
    • _top : 在頂層框架中打開,跳脫出所有框架。
  3. <rel> : 定義當 target="_blank" 使用時,瀏覽器之間的關係。

    • noopener:防止新窗口中的頁面獲取到來源頁面。
    • nofollow:告訴搜索引擎不要跟踪此連結。
    <a href="https://www.google.com" target="_blank" rel="noopener">Google</a>
    
  4. <title>
    提供關於元素的額外信息,當用戶將滑鼠懸停在元素上時,會出現一個提示框。該屬性可用於超連結、圖片和其他HTML元素。
    範例 :

    <a href="https://www.google.com" title="點擊前往 Google 網站">訪問 Google 網站</a>
    

    當用戶將滑鼠懸停在 "訪問 Google 網站" 上時,會顯示 "點擊前往 Google 網站" 的提示信息。
    https://ithelp.ithome.com.tw/upload/images/20240924/20168630RpqZZISdin.png

今天先介紹到這裡,謝謝觀看!/images/emoticon/emoticon08.gif


上一篇
探險日記 DAY 14
下一篇
探險日記 DAY 16
系列文
30天前端之旅:探索web開發的探險日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言