Hướng dẫn how do you reference an anchor in html? - làm thế nào để bạn tham khảo một anchor trong html?

Thử nó

Thuộc tính

Các thuộc tính của yếu tố này bao gồm các thuộc tính toàn cầu.

a {
  display: block;
  margin-bottom: 0.5em;
}

Khiến trình duyệt coi URL được liên kết là tải về. Có thể được sử dụng có hoặc không có giá trị:

• Không có giá trị, trình duyệt sẽ đề xuất tên tệp/tiện ích mở rộng, được tạo từ nhiều nguồn khác nhau:
  • Tiêu đề

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    2 HTTP
  • Phân đoạn cuối cùng trong đường dẫn URL
  • Loại phương tiện (từ tiêu đề

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    3, bắt đầu URL

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    4 hoặc

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    5 cho URL

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    6)
• Xác định một giá trị cho thấy nó là tên tệp.

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  7 và

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  8 Các ký tự được chuyển đổi thành dấu gạch dưới (

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  9). Hệ thống tập tin có thể cấm các ký tự khác trong tên tệp, vì vậy trình duyệt sẽ điều chỉnh tên được đề xuất nếu cần thiết.

Note:

• a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  1 chỉ hoạt động cho các URL đồng có nguồn gốc hoặc các chương trình

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  6 và

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  4.
• Cách các trình duyệt xử lý tải xuống thay đổi theo trình duyệt, cài đặt người dùng và các yếu tố khác. Người dùng có thể được nhắc trước khi tải xuống bắt đầu hoặc tệp có thể được lưu tự động hoặc nó có thể tự động mở, trong một ứng dụng bên ngoài hoặc trong chính trình duyệt.
• Nếu tiêu đề

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  2 có thông tin khác nhau từ thuộc tính

  a {
    display: block;
    margin-bottom: 0.5em;
  }
  

  1, hành vi kết quả có thể khác nhau:
  • Nếu tiêu đề chỉ định

    
    <p><a href="#Section_further_down"> Jump to the heading below a>p>
    
    
    <h2 id="Section_further_down">Section further downh2>
    

    5, nó sẽ được ưu tiên hơn tên tệp được chỉ định trong thuộc tính

    a {
      display: block;
      margin-bottom: 0.5em;
    }
    

    1.
  • Nếu tiêu đề chỉ định một cách xử lý

    
    <p><a href="#Section_further_down"> Jump to the heading below a>p>
    
    
    <h2 id="Section_further_down">Section further downh2>
    

    7, Chrome và Firefox ưu tiên thuộc tính và coi nó là một bản tải xuống. Các phiên bản Firefox cũ (trước 82) ưu tiên tiêu đề và sẽ hiển thị nội dung nội dung.

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

URL mà siêu liên kết chỉ đến. Các liên kết không bị giới hạn trong các URL dựa trên HTTP-chúng có thể sử dụng bất kỳ chương trình URL nào được hỗ trợ bởi các trình duyệt:

• Các phần của một trang có URL phân đoạn
• Các mảnh tệp phương tiện với các đoạn phương tiện
• Số điện thoại với

  
  <p><a href="#Section_further_down"> Jump to the heading below a>p>
  
  
  <h2 id="Section_further_down">Section further downh2>
  

  9 URLS
• Địa chỉ email với URL

  <a href="mailto:">Send email to nowherea>
  

  0
• Mặc dù các trình duyệt web có thể không hỗ trợ các sơ đồ URL khác, các trang web có thể với

  <a href="mailto:">Send email to nowherea>
  

  1

<a href="mailto:">Send email to nowherea>

Gợi ý về ngôn ngữ của con người của URL được liên kết. Không có chức năng tích hợp. Các giá trị được phép giống như thuộc tính toàn cầu

<a href="mailto:">Send email to nowherea>

<a href="mailto:">Send email to nowherea>

Một danh sách các URL được phân tách không gian. Khi liên kết được theo dõi, trình duyệt sẽ gửi các yêu cầu

<a href="mailto:">Send email to nowherea>

<a href="mailto:">Send email to nowherea>

<a href="mailto:">Send email to nowherea>

Bao nhiêu người giới thiệu để gửi khi theo liên kết.

• <a href="mailto:">Send email to nowherea>
  

  8: Tiêu đề

  <a href="mailto:">Send email to nowherea>
  

  9 sẽ không được gửi.

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  0: Tiêu đề

  <a href="mailto:">Send email to nowherea>
  

  9 sẽ không được gửi đến nguồn gốc mà không có TLS (HTTPS).

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  2: Người giới thiệu đã gửi sẽ được giới hạn trong nguồn gốc của trang giới thiệu: sơ đồ, máy chủ và cổng của nó.

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  3: Người giới thiệu được gửi đến nguồn gốc khác sẽ được giới hạn trong chương trình, máy chủ và cổng. Điều hướng trên cùng một nguồn gốc vẫn sẽ bao gồm đường dẫn.

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  4: Người giới thiệu sẽ được gửi cho cùng một nguồn gốc, nhưng các yêu cầu có nguồn gốc chéo sẽ không chứa thông tin giới thiệu.

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  5: Chỉ gửi nguồn gốc của tài liệu dưới dạng người giới thiệu khi mức bảo mật giao thức vẫn giữ nguyên (HTTPS → HTTPS), nhưng không gửi nó đến đích ít an toàn hơn (HTTPS → HTTP).

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  6 (mặc định): Gửi URL đầy đủ khi thực hiện yêu cầu đồng nghĩa, chỉ gửi nguồn gốc khi mức bảo mật giao thức vẫn giữ nguyên (HTTPS → HTTPS) và không gửi tiêu đề đến đích ít an toàn hơn (HTTPS → HTTP).

• <a href="tel:+49.157.0156">+49 157 0156a>
  <a href="tel:+1(555)5309">(555) 5309a>
  

  7: Người giới thiệu sẽ bao gồm nguồn gốc và đường dẫn (nhưng không phải là đoạn, mật khẩu hoặc tên người dùng). Giá trị này không an toàn, bởi vì nó rò rỉ nguồn gốc và đường dẫn từ các tài nguyên được bảo vệ TLS đến nguồn gốc không an toàn.This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

Mối quan hệ của URL được liên kết là các loại liên kết được phân tách không gian.

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

Nơi hiển thị URL được liên kết, làm tên cho bối cảnh duyệt web (một tab, cửa sổ hoặc

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

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

  1: Bối cảnh duyệt web hiện tại. (Mặc định)

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

  2: Thường là một tab mới, nhưng người dùng có thể định cấu hình các trình duyệt để mở một cửa sổ mới thay thế.

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

  3: Bối cảnh duyệt cha mẹ của hiện tại. Nếu không có cha mẹ, hành xử như

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

  1.

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

  5: Bối cảnh duyệt trên cùng (bối cảnh "cao nhất" là tổ tiên của hiện tại). Nếu không có tổ tiên, hành xử như

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

  1.

Lưu ý: Cài đặt

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

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

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

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

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

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

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

Gợi ý ở định dạng URL được liên kết với loại MIME. Không có chức năng tích hợp.

Thuộc tính không dùng nữa

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

Gợi ý về mã hóa ký tự của URL được liên kết.

Lưu ý: Thuộc tính này không được sử dụng và không nên được sử dụng bởi các tác giả. Sử dụng tiêu đề HTTP

a {
  display: block;
  margin-bottom: 0.5em;
}

a {
  display: block;
  margin-bottom: 0.5em;
}

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

Được sử dụng với thuộc tính

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

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

Được yêu cầu xác định một vị trí mục tiêu có thể trong một trang. Trong HTML 4.01,

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

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

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Lưu ý: Sử dụng thuộc tính toàn cầu

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

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

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

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()
);

Chỉ định một liên kết ngược; ngược lại với thuộc tính

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

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

Hình dạng của vùng siêu liên kết trong bản đồ hình ảnh.

Lưu ý: Sử dụng phần tử

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

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()
);

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

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()
);

Đặc tính

Ví dụ

Liên kết với một url tuyệt đối

HTML

<a href="https://www.mozilla.com"> Mozilla a>

Kết quả

Liên kết với các URL tương đối

HTML

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

a {
  display: block;
  margin-bottom: 0.5em;
}

Kết quả

Liên kết với các URL tương đối

<p><a href="#Section_further_down"> Jump to the heading below a>p>


<h2 id="Section_further_down">Section further downh2>

Kết quả

Liên kết với một phần tử trên cùng một trang

<a href="mailto:">Send email to nowherea>

Liên kết đến một địa chỉ email

Để tạo các liên kết mở trong chương trình email của người dùng để cho phép họ gửi tin nhắn mới, hãy sử dụng sơ đồ Send email to nowhere 0:

<a href="tel:+49.157.0156">+49 157 0156a>
<a href="tel:+1(555)5309">(555) 5309a>

Để biết chi tiết về URL

<a href="mailto:">Send email to nowherea>

• Liên kết với số điện thoại

• 
  <p><a href="#Section_further_down"> Jump to the heading below a>p>
  
  
  <h2 id="Section_further_down">Section further downh2>
  

  9 Hành vi liên kết thay đổi theo khả năng của thiết bị:
• Thiết bị di động tự động số.
• Hầu hết các hệ điều hành đều có các chương trình có thể thực hiện các cuộc gọi, như Skype hoặc FaceTime.

Các trang web có thể gọi điện thoại với

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

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()
);

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

Các hành vi khác bao gồm lưu số vào danh bạ hoặc gửi số đến một thiết bị khác.

Xem RFC 3966 để biết cú pháp, các tính năng bổ sung và các chi tiết khác về sơ đồ URL

<p><a href="#Section_further_down"> Jump to the heading below a>p>


<h2 id="Section_further_down">Section further downh2>

Sử dụng thuộc tính tải xuống để lưu A dưới dạng PNG

HTML

<p>
  Paint by holding down the mouse button and moving it.
  <a href="" download="my_painting.png">Download my paintinga>
p>

<canvas width="300" height="300">canvas>

Kết quả

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

Liên kết với các URL tương đối

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

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()
);

Kết quả

Liên kết với các URL tương đối

Kết quả

Liên kết với một phần tử trên cùng một trang

Liên kết đến một địa chỉ email

Để tạo các liên kết mở trong chương trình email của người dùng để cho phép họ gửi tin nhắn mới, hãy sử dụng sơ đồ Send email to nowhere 0:

Để biết chi tiết về URL

<a href="mailto:">Send email to nowherea>

Liên kết với số điện thoại

<p><a href="#Section_further_down"> Jump to the heading below a>p>


<h2 id="Section_further_down">Section further downh2>

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

Để tạo các liên kết mở trong chương trình email của người dùng để cho phép họ gửi tin nhắn mới, hãy sử dụng sơ đồ

<a href="mailto:">Send email to nowherea>

0:

Để biết chi tiết về URL

<a href="mailto:">Send email to nowherea>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Liên kết với số điện thoại

Jump to the heading below

Section further down

Thiết bị di động tự động số.

Hầu hết các hệ điều hành đều có các chương trình có thể thực hiện các cuộc gọi, như Skype hoặc FaceTime.

Các trang web có thể gọi điện thoại với

const canvas = document.querySelector('canvas');
const c = canvas.getContext('2d');
c.fillStyle = 'hotpink';

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()
);

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

Các hành vi khác bao gồm lưu số vào danh bạ hoặc gửi số đến một thiết bị khác.

Xem RFC 3966 để biết cú pháp, các tính năng bổ sung và các chi tiết khác về sơ đồ URL

<p><a href="#Section_further_down"> Jump to the heading below a>p>


<h2 id="Section_further_down">Section further downh2>

Sử dụng thuộc tính tải xuống để lưu A dưới dạng PNG

Để lưu nội dung của phần tử

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

2 dưới dạng hình ảnh, bạn có thể tạo một liên kết trong đó

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

7 là dữ liệu Canvas dưới dạng URL

a {
  display: block;
  margin-bottom: 0.5em;
}

4 được tạo bằng JavaScript và thuộc tính

a {
  display: block;
  margin-bottom: 0.5em;
}

1 cung cấp tên tệp cho tệp PNG đã tải xuống:

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Ứng dụng vẽ ví dụ với liên kết lưu

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

CSS

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

• JavaScript
• An ninh và sự riêng tư
• Các yếu tố

  <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  6 có thể có hậu quả cho bảo mật và quyền riêng tư của người dùng. Xem tiêu đề

  <a href="mailto:">Send email to nowherea>
  

  9: Mối quan tâm về quyền riêng tư và bảo mật để biết thông tin.
• Sử dụng

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

  7 mà không có

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

  9 và

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

  0 làm cho trang web dễ bị tổn thương bởi các cuộc tấn công khai thác API

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

  1 (Mô tả lỗ hổng), mặc dù lưu ý rằng, trong các phiên bản trình duyệt mới hơn, cài đặt

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

  7 hoàn toàn cung cấp bảo vệ tương tự như cài đặt

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

  0. Xem Khả năng tương thích trình duyệt để biết chi tiết.

Bỏ qua các liên kết

Liên kết bỏ qua là một liên kết được đặt càng sớm càng tốt trong nội dung

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

Bỏ qua các liên kết cho phép người dùng bàn phím bỏ qua nội dung được lặp lại trong nhiều trang, chẳng hạn như điều hướng tiêu đề.

Các liên kết bỏ qua đặc biệt hữu ích cho những người điều hướng với sự trợ giúp của công nghệ hỗ trợ như điều khiển chuyển đổi, lệnh thoại hoặc gậy miệng/đũa đầu, trong đó hành động di chuyển qua các liên kết lặp đi lặp lại có thể gây tốn nhiều công sức.

• Webaim: Liên kết "Bỏ qua điều hướng"
• Cách làm: Sử dụng các liên kết điều hướng bỏ qua
• MDN / Hiểu WCAG, Hướng dẫn 2.4 Giải thích
• Hiểu tiêu chí thành công 2.4.1

Kích thước và sự gần gũi

Kích thước

Các yếu tố tương tác, như các liên kết, sẽ cung cấp một khu vực đủ lớn để dễ dàng kích hoạt chúng. Điều này giúp nhiều người, bao gồm cả những người có vấn đề điều khiển động cơ và những người sử dụng các đầu vào không chính xác như màn hình cảm ứng. Nên kích thước tối thiểu 44 × 44 pixel CSS.

Các liên kết chỉ có văn bản trong nội dung văn xuôi được miễn yêu cầu này, nhưng vẫn là một ý tưởng tốt để đảm bảo đủ văn bản được liên kết với nhau để dễ dàng được kích hoạt.

• Hiểu tiêu chí thành công 2.5.5: Kích thước mục tiêu
• Kích thước mục tiêu và 2.5.5
• Kiểm tra nhanh: Các mục tiêu cảm ứng lớn

Sự gần gũi

Các yếu tố tương tác, giống như các liên kết, được đặt trong sự gần gũi trực quan nên có không gian ngăn cách chúng. Khoảng cách giúp những người có vấn đề điều khiển động cơ, những người có thể vô tình kích hoạt nội dung tương tác sai.

Khoảng cách có thể được tạo bằng các thuộc tính CSS như

<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

• Bàn tay và sự run rẩy khổng lồ

Xem thêm

• <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  13 tương tự như

  <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  6, nhưng đối với các siêu liên kết siêu dữ liệu vô hình đối với người dùng.

• <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  15 là một lớp giả CSS sẽ khớp với các phần tử

  <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  6 với các thuộc tính

  <a href="//example.com">Scheme-relative URLa>
  <a href="/en-US/docs/Web/HTML">Origin-relative URLa>
  <a href="./p">Directory-relative URLa>
  

  7 hợp lệ.