相关文章推荐
被表白的盒饭  ·  <video>：视频嵌入元素 - ...·  1 月前    · 
踏实的刺猬  ·  【mysql】子查询-腾讯云开发者社区-腾讯云·  2 年前    · 
文质彬彬的手套  ·  宫颈癌免疫治疗新星：TIGIT单抗-Ocip ...·  2 年前    · 
知识渊博的硬币  ·  使用设计器向 ListView 控件添加列 ...·  2 年前    · 
Code  ›  <a>：超連結元素 - HTML：超文本標記語言 | MDN
mdn input 超文本
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Reference/Elements/a
无聊的金针菇
2 月前
This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

* Some parts of this feature may have varying levels of support.

Learn more <li><a href="https://example.com">Website</a></li> <li><a href="mailto:m.bluth@example.com">Email</a></li> <li><a href="tel:+123456789">Phone</a></li> margin-bottom: 0.5rem;

此元素的屬性包括 全域屬性 。

download

導致瀏覽器將連結的 URL 視為下載。可與或不與 filename 值一起使用：

沒有值時，瀏覽器將從各種來源生成的文件名/擴展名提供建議：

  • Content-Disposition HTTP 標頭
  • URL 路徑 中的最終段落
  • Content-Type 標頭中的 媒體類型 ，以及 data: URL 的開頭，或是 blob: URL 的 Blob.type 。

    • filename ：定義值可建議作為文件名。 / 和 \ 字符將轉換為底線（ _ ）。檔案系統可能禁止文件名中的其他字符，因此如果需要，瀏覽器將調整建議的名稱。

  • download 只適用於 同源 URL ，或者 blob: 和 data: 方案。
  • 瀏覽器如何處理下載因瀏覽器、用戶設置和其他因素而異。用戶在下載開始之前可能會收到提示，文件可能會自動保存，或者它可能會自動打開，無論是在外部應用程序中還是在瀏覽器本身中。
  • 如果 Content-Disposition 標頭與 download 屬性的信息不同，則結果行為可能不同：
  • 如果標頭指定了 filename ，則優先於 download 屬性中指定的文件名。
  • 如果標頭指定了 inline 的配置，Chrome 和 Firefox 會將屬性視為下載並優先處理它。舊版 Firefox（82 版之前）會優先處理標頭並在內聯中顯示內容。
  • 使用 mailto: URL 的電子郵件地址
  • 使用 sms: URL 的短信文字消息
  • 儘管網頁瀏覽器可能不支持其他 URL 方案，但網站可以使用 registerProtocolHandler() 進行設置
    • hreflang

    指示連結 URL 的人類語言的提示。沒有內建功能。允許的值與 全域 lang 屬性 相同。

    URL 的空格分隔列表。當點擊連結時，瀏覽器將向這些 URL 發送 POST 請求，內容為 PING 。通常用於跟蹤。

    referrerpolicy

    跟隨連結時發送的 引用者 的程度。

  • no-referrer ：不發送 Referer 標頭。
  • no-referrer-when-downgrade ：不發送 Referer 標頭至沒有 TLS （ HTTPS ）的 來源 。
  • origin ：發送的引用者將僅限於引用頁面的來源：其 協定 、 主機 和 通訊埠 。
  • origin-when-cross-origin ：發送給其他來源的引用者將僅限於協定、主機和端口。對同一來源的導航仍將包含路徑。
  • same-origin ：對於 同一來源 ，將發送引用者，但跨來源請求將不包含引用者信息。
  • strict-origin ：僅在協定安全級別保持不變時（HTTPS→HTTPS）發送文件的源作為引用者，但不要將其發送給不太安全的目的地（HTTPS→HTTP）。
  • strict-origin-when-cross-origin （默認值）：對於同一來源請求，發送完整的 URL；僅在協定安全級別保持不變時（HTTPS→HTTPS）發送源；對於不太安全的目的地（HTTPS→HTTP），不發送標頭。
  • unsafe-url ：引用者將包括來源 和 路徑（但不包括 片段 、 密碼 或 用戶名 ）。 此值不安全 ，因為它將來自 TLS 保護資源的來源和路徑洩露給不安全的來源。

    • 連結 URL 的關係，作為空格分隔的連結類型。

    target

    要在何處顯示連結 URL，作為 瀏覽上下文 （一個選項卡、窗口或 <iframe> ）的名稱。以下關鍵字對於加載 URL 的位置具有特殊意義：

  • _self ：當前瀏覽上下文。（默認）
  • _blank ：通常是一個新選項卡，但用戶可以配置瀏覽器以打開新窗口。
  • _parent ：當前瀏覽上下文的父級。如果沒有父級，則與 _self 行為相同。
  • _top ：最上層的瀏覽上下文。具體來說，這意味著當前上下文的祖先中的「最高」上下文。如果沒有祖先，則與 _self 行為相同。
  • _unfencedTop ：允許嵌入的 有圍欄框架 導航到最頂層框架（即超出有圍欄框架根的遍歷，與其他保留目標不同）。請注意，如果在有圍欄框架上下文之外使用此選項，則導航仍將成功，但它不會像保留關鍵字那樣運作。
    • 將 target="_blank" 設置在 <a> 元素上，隱含提供了與設置 rel="noopener" 相同的 rel 行為，它不設置 window.opener 。

    提示連結 URL 的格式，使用 MIME 類型 。沒有內建功能。

    已棄用的屬性

    charset

    指示連結 URL 的 character encoding 。

    這個屬性已棄用， 不應該被作者使用 。請在連結的 URL 上使用 HTTP Content-Type 標頭。

    coords

    與 shape 屬性 一起使用。逗號分隔的座標列表。

    用於在頁面中定義可能的目標位置。在 HTML 4.01 中， id 和 name 都可以在 <a> 上使用，只要它們具有相同的值。

    請改用全域屬性 id 。

    指定反向連結；與 形狀屬性 相反。由於非常混亂而被棄用。

    shape

    圖像地圖中超連結區域的形狀。

    請改用     <area> 元素代替圖像地圖。

    html 
    <a href="//example.com">Scheme-relative URL</a>
<a href="/zh-TW/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>
  display: block;
  margin-bottom: 0.5em;
    
    鏈接到同一頁面上的元素
    
    
    html
    <!-- <a> element links to the section below -->
<p><a href="#Section_further_down">Jump to the heading below</a></p>
<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>
你可以使用 href="#top" 或空片段（href="#"）來鏈接到當前頁面的頂部，如 HTML 規範中所定義。
    
    
    鏈接到電子郵件地址
    
    
    要創建鏈接，讓用戶可以使用他們的電子郵件程序打開新消息，請使用 mailto: 方案：
    

    html
    <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

    有關 mailto: URL 的詳細信息，例如包括主題或正文，請參見電子郵件鏈接或 RFC 6068。
    
    
    鏈接到電話號碼
    
    
    html
    <a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

    tel: 鏈接的行為因設備能力而異：
    

  • 手機設備會自動撥打號碼。
    • 

  • 大多數操作系統都有可以撥打電話的程序，如 Skype 或 FaceTime。
    • 

  • 網站可以使用 registerProtocolHandler 來打電話，例如 web.skype.com。
    • 

  • 其他行為包括將號碼保存到聯繫人中，或將號碼發送到另一個設備。
    • 

    有關 tel: URL 方案的語法、其他功能和詳細信息，請參見 RFC 3966。
    
    
    使用 download 屬性將 <canvas> 另存為 PNG
    
    
    要將 <canvas> 元素的內容保存為圖像，你可以創建一個鏈接，其中 href 是使用 JavaScript 創建的 data: URL 的畫布數據，而 download 屬性提供下載的 PNG 文件的文件名：
    

    具有處存鏈接的範例繪畫應用程式
    

    html
    <p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my painting</a>
<canvas width="300" height="300"></canvas>

    css
    html {
  font-family: sans-serif;
canvas {
  background: #fff;
  border: 1px dashed;
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;

    JavaScript
    

    js
    const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
c.fillStyle = "hotpink";
let isDrawing;
function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI * 2);
    c.closePath();
    c.fill();
canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));
document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
    
    安全性和隱私
    
    
    <a> 元素可能對用戶的安全性和隱私造成影響。有關信息，請參見 Referer 標頭：隱私和安全問題。
    

    在不使用 rel="noreferrer" 和 rel="noopener" 的情況下使用 target="_blank" 會使網站容易受到 window.opener API 攻擊，但請注意，在新版瀏覽器中，設置 target="_blank" 隱含地提供了與設置 rel="noopener" 相同的保護機制。詳細信息請參見瀏覽器相容性。
    
    
    無障礙議題
    
    
    強鏈接文字
    
    
    鏈接內容應指示鏈接的目的地，即使是在上下文之外。
    

    無障礙性差的弱鏈接文字
    

    一個常見的錯誤是只將「點擊此處」或「這裡」之類的詞作為鏈接：
    

    html
    <p>Learn more about our products <a href="/products">here</a>.</p>

    強鏈接文字
    

    幸運的是，這是一個容易解決的問題，而且實際上比無法訪問的版本還要短！
    

    html
    <p>Learn more <a href="/products">about our products</a>.</p>

    輔助軟件有捷徑可以列出頁面上的所有鏈接。然而，強鏈接文字有益於所有用戶——「列出所有鏈接」的快捷方式模擬了視覺用戶快速掃描頁面的方式。
    
    
    常常將錨點元素誤用為假按鈕，將它們的 href 設置為 # 或 javascript:void(0) 以防止頁面刷新，然後監聽它們的 click 事件。
    

    這些虛假的 href 值在複製/拖動鏈接、在新標籤/窗口中打開鏈接、書籤或當 JavaScript 加載、錯誤或禁用時會引起意外行為。它們也向輔助技術（如螢幕閱讀器）傳遞了不正確的語義。
    

    請改用 <button>。一般來說，你應該僅將超鏈接用於導航到實際 URL。
    
    
    外部鏈接和鏈接到非 HTML 資源
    
    
    通過 target="_blank" 在新標籤/窗口中打開的鏈接，或者指向下載文件的鏈接應該指示當鏈接被點擊時會發生什麼。
    

    視力受損的人、使用螢幕閱讀技術進行導航的人或存在認知問題的人，在新標籤、窗口或應用程序意外打開時可能會感到困惑。較舊的螢幕閱讀軟件甚至可能不會宣告這種行為。
    

    在新標籤/窗口中打開的鏈接
    

    html
    <a target="_blank" href="https://www.wikipedia.org">
  Wikipedia (opens in new tab)

    鏈接到非 HTML 資源
    

    html
    <a href="2017-annual-report.ppt">2017 Annual Report (PowerPoint)</a>

    如果使用圖標來表示鏈接行為，請確保它具有 alt 文本：
    

    html
    <a target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg" />
<a href="2017-annual-report.ppt">
  2017 Annual Report
  <img alt="(PowerPoint file)" src="ppt-icon.svg" />

  • WebAIM: 鏈接和超文本——超文本鏈接
    • 

  • MDN / 了解 WCAG，指導方針 3.2
    • 

  • G200: 僅在必要時從鏈接中打開新窗口和新標籤
    • 

  • G201: 在打開新窗口時給予用戶高級警告
    • 
    
    跳轉鏈接是一個盡可能放在 <body> 內容的最前面的鏈接，指向頁面主要內容的開頭。通常，CSS 將跳轉鏈接隱藏在螢幕之外，直到被聚焦為止。




    

    

    html
    <body>
  <a href="#content" class="skip-link">Skip to main content</a>
  <header>…</header>
  <!-- The skip link jumps to here -->
  <main id="content"></main>
</body>

    css
    .skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
.skip-link:focus {
  top: 0;

    跳轉鏈接讓使用鍵盤的用戶可以跳過在多個頁面中重複出現的內容，例如頭部導航。
    

    對於使用輔助技術，如切換控制、語音命令或口杖/頭桿進行導航的人來說，跳轉鏈接尤其有用，因為移動過程中重複鏈接的行為可能很費勁。
    

  • WebAIM：「跳轉導航」鏈接
    • 

  • 如何使用跳過導航鏈接
    • 

  • MDN / 了解 WCAG，指導方針 2.4 說明
    • 

  • 理解成功標準 2.4.1
    • 
    
    尺寸與相近性
    

    互動元素，例如連結，應該提供足夠大的區域，以便輕鬆地啟動它們。這有助於各種人，包括那些有運動控制問題的人以及使用不精確輸入（例如觸摸螢幕）的人。建議的最小尺寸為 44×44 CSS 像素。
    

    在散文內容中僅包含文本的鏈接不受此要求的限制，但確保有足夠的文本被超鏈接以便輕鬆啟動仍然是一個好主意。
    

  • 理解成功標準 2.5.5：目標尺寸
    • 

  • 目標尺寸和 2.5.5
    • 

  • 快速測試：大觸摸目標
    • 

    放置在視覺上相鄰的互動元素，例如連結，應該有空間將它們分開。間距有助於運動控制問題的人，否則他們可能會意外啟動錯誤的互動內容。
    

    間距可以使用 CSS 屬性如 margin 創建。
    

  • 手抖和大按鈕問題
    • 

  • <link> 類似於 <a>，但用於對用戶不可見的元數據超鏈接。
    • 

  • :link 是一個 CSS 虛擬類，將匹配 <a> 元素，其中 href 屬性中的 URL 尚未被用戶訪問過。
    • 

  • :visited 是一個 CSS 虛擬類，將匹配 <a> 元素，其中 href 屬性中的 URL 曾經被用戶訪問過。
    • 

  • :any-link 是一個 CSS 虛擬類，將匹配具有 href 屬性的 <a> 元素。
    • 

  • 文字片段是添加到 URL 中的用戶代理指令，允許內容作者鏈接到頁面上的特定文本，而不需要 ID。
    • 
      
    1. HTML：超文本標記語言
    2. Guides
    3. 內容類型
    4. Comments
    5. Date and time formats
    6. Constraint validation
    7. Viewport meta element
    8. Responsive images
    9. Microdata
    10. Microformats
    11. 怪異模式與標準模式
    12. HTML cheatsheet
    13. How to
    14. Define terms with HTML
    15. Use data attributes
    16. Use cross-origin images
    17. Add a hitmap on top of an image
    18. Author fast-loading HTML pages
    19. Add JavaScript
    20. Reference
    21. Elements
      1. <a>
      2. <abbr>
      3. <acronym>

      4. <address>
      5. <area>
      6. <article>
      7. <aside>
      8. <audio>
      9. <b>
      10. <base>
      11. <bdi>
      12. <bdo>
      13. <big>

      14. <blockquote>
      15. <body>
      16. <br>
      17. <button>
      18. <canvas>
      19. <caption>
      20. <center>

      21. <cite>
      22. <code>
      23. <col>
      24. <colgroup>
      25. <data>
      26. <datalist>
      27. <dd>
      28. <del>
      29. <details>
      30. <dfn>
      31. <dialog>
      32. <dir>

      33. <div>
      34. <dl>
      35. <dt>
      36. <em>
      37. <embed>
      38. <fencedframe>

      39. <fieldset>
      40. <figcaption>
      41. <figure>
      42. <font>

      43. <footer>
      44. <form>
      45. <frame>

      46. <frameset>

      47. <h1>
      48. <head>
      49. <header>
      50. <hgroup>
      51. <hr>
      52. <html>
      53. <i>
      54. <iframe>
      55. <img>
      56. <input>
      57. <ins>
      58. <kbd>
      59. <label>
      60. <legend>
      61. <li>
      62. <link>
      63. <main>
      64. <map>
      65. <mark>
      66. <marquee>

      67. <menu>
      68. <meta>
      69. <meter>
      70. <nav>
      71. <nobr>

      72. <noembed>

      73. <noframes>

      74. <noscript>
      75. <object>
      76. <ol>
      77. <optgroup>
      78. <option>
      79. <output>
      80. <p>
      81. <param>

      82. <picture>
      83. <plaintext>

      84. <pre>
      85. <progress>
      86. <q>
      87. <rb>

      88. <rp>
      89. <rt>
      90. <rtc>

      91. <ruby>
      92. <s>
      93. <samp>
      94. <script>
      95. <search>
      96. <section>
      97. <select>
      98. <selectedcontent>

      99. <slot>
      100. <small>
      101. <source>
      102. <span>
      103. <strike>

      104. <strong>
      105. <style>
      106. <sub>
      107. <summary>
      108. <sup>
      109. <table>
      110. <tbody>
      111. <td>
      112. <template>
      113. <textarea>
      114. <tfoot>
      115. <th>
      116. <thead>
      117. <time>
      118. <title>
      119. <tr>
      120. <track>
      121. <tt>

      122. <u>
      123. <ul>
      124. <var>
      125. <video>
      126. <wbr>
      127. <xmp>

    22. Attributes
      1. accept
      2. autocomplete
      3. capture
      4. content
      5. crossorigin
      6. dirname
      7. disabled
      8. elementtiming
      9. for
      10. form
      11. max
      12. maxlength
      13. min
      14. minlength
      15. multiple
      16. pattern
      17. placeholder
      18. readonly
      19. rel
      20. required
      21. size
      22. step
    23. Global attributes
      1. accesskey
      2. anchor


      3. autocapitalize
      4. autocorrect
      5. autofocus
      6. HTML class 全域屬性
      7. contenteditable
      8. data-*
      9. dir
      10. draggable
      11. enterkeyhint
      12. exportparts
      13. hidden
      14. id
      15. inert
      16. inputmode
      17. is
      18. itemid
      19. itemprop
      20. itemref
      21. itemscope
      22. itemtype
      23. lang
      24. nonce
      25. part
      26. popover
      27. slot
      28. HTML spellcheck 全域屬性
      29. HTML style 全域屬性
      30. tabindex
      31. HTML title 全域屬性
      32. translate
      33. virtualkeyboardpolicy

      34. writingsuggestions
    24. Attributes by element
      1. <input> type
        1. <input type="button">
        2. <input type="checkbox">
        3. <input type="color">
        4. <input type="date">
        5. <input type="datetime-local">
        6. <input type="email">
        7. <input type="file">
        8. <input type="hidden">
        9. <input type="image">
        10. <input type="month">
        11. <input type="number">
        12. <input type="password">
        13. <input type="radio">
        14. <input type="range">
        15. <input type="reset">
        16. <input type="search">
        17. <input type="submit">
        18. <input type="tel">
        19. <input type="text">
        20. <input type="time">
        21. <input type="url">
        22. <input type="week">
      2. <script> type
        1. importmap
        2. speculationrules

      3. <meta>
        1. color-scheme
        2. referrer
        3. robots
        4. theme-color
        5. viewport
      4. <meta> http-equiv
    25. Attribute values
      1. rel keywords
        1. rel="alternate stylesheet"
        2. rel="compression-dictionary"

        3. rel="dns-prefetch"
        4. rel="manifest"
        5. rel="me"
        6. rel="modulepreload"
        7. rel="noopener"
        8. rel="noreferrer"
        9. rel="preconnect"
        10. rel=prefetch
        11. rel=preload
        12. rel=prerender
     
    推荐文章
    被表白的盒饭  ·  <video>：视频嵌入元素 - HTML（超文本标记语言） | MDN
    1 月前
    踏实的刺猬  ·  【mysql】子查询-腾讯云开发者社区-腾讯云
    2 年前
    文质彬彬的手套  ·  宫颈癌免疫治疗新星：TIGIT单抗-Ociperlimab欧司珀利单抗_肿瘤_国家癌症中心_研究进展
    2 年前
    知识渊博的硬币  ·  使用设计器向 ListView 控件添加列 - Windows Forms .NET Framework | Microsoft Learn
    2 年前
    今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
    删除内容请联系邮箱 2879853325@qq.com
    Code - 代码工具平台
    © 2024 ~ 沪ICP备11025650号