Thẻ neo trong Internalhtml

Các thuộc tính của phần tử này bao gồm các thuộc tính toàn cục

Làm cho trình duyệt coi URL được liên kết là một bản tải xuống. Có thể được sử dụng có hoặc không có giá trị

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

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

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

    3
  • Đ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;
    }
    

    4, phần đầu của URL

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

    5 hoặc

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

    6 đối với URL

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

    7)

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

  2. xác định một giá trị gợi ý nó là tên tệp. Các ký tự

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

  9 và

  <!-- <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>
  

  0 được chuyển đổi thành dấu gạch dưới (

  <!-- <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>
  

  1). Hệ thống tệp 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

lớp

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

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

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

  7 và

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

  5
• Cách trình duyệt xử lý tải xuống khác nhau tùy 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 quá trình tải xuống bắt đầu hoặc tệp có thể được lưu tự động hoặc tệp có thể tự động mở trong ứ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;
  }
  

  3 có thông tin khác với thuộc tính

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

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

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

    2, thì 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 bố trí của

    <!-- <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>
    

    9, thì Chrome và Firefox sẽ ưu tiên thuộc tính đó và coi đó là nội dung 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 tuyến

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

• Các phần của trang có các đoạn tài liệu
• Phần văn bản cụ thể với các đoạn văn bản
• Các phần của tệp phương tiện với các đoạn phương tiện
• Số điện thoại có

  <a href="mailto:[email protected]">Send email to nowhere</a>
  

  1 URL
• Địa chỉ email có

  <a href="mailto:[email protected]">Send email to nowhere</a>
  

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

  <a href="mailto:[email protected]">Send email to nowhere</a>
  

  3

Gợi ý về ngôn ngữ 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 với thuộc tính toàn cầu

<a href="mailto:[email protected]">Send email to nowhere</a>

Danh sách các URL được phân tách bằng dấu cách. Khi liên kết được nhấp vào, trình duyệt sẽ gửi yêu cầu

<a href="mailto:[email protected]">Send email to nowhere</a>

<a href="mailto:[email protected]">Send email to nowhere</a>

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

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  0. Tiêu đề

  <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

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

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  2. Tiêu đề

  <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  1 sẽ không được gửi tới nguồn gốc nếu không có TLS (HTTPS)

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  4. Người giới thiệu đã gửi sẽ được giới hạn ở 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 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  5. Liên kết giới thiệu được gửi đến các nguồn gốc khác sẽ được giới hạn ở lược đồ, máy chủ lưu trữ và cổng. Điều hướng trên cùng một gốc sẽ vẫn bao gồm đường dẫn

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  6. Một liên kết 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ó nhiều nguồn gốc sẽ không chứa thông tin liên kết giới thiệu

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

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

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  8 (mặc định). Gửi một URL đầy đủ khi thực hiện một yêu cầu có cùng nguồn gốc, chỉ gửi nguồn gốc khi mức độ bảo mật của giao thức không thay đổi (HTTPS→HTTPS) và không gửi tiêu đề tới đích kém an toàn hơn (HTTPS→HTTP)

• <a href="tel:+49.157.0156">+49 157 0156</a>
  <a href="tel:+1(800)555-0123">(800) 555-0123</a>
  

  9. Người giới thiệu sẽ bao gồm nguồn gốc và đường dẫn (chứ không phải đoạn, mật khẩu hoặc tên người dùng). Giá trị này không an toàn vì nó làm rò rỉ nguồn gốc và đường dẫn từ tài nguyên được bảo vệ bằng TLS đến nguồn gốc không an toàn

Mối quan hệ của URL được liên kết dưới dạng các loại liên kết được phân tách bằng dấu cách

Vị trí hiển thị URL được liên kết, dưới dạng tên cho ngữ cảnh duyệt web (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 painting</a>
</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 painting</a>
  </p>
  
  <canvas width="300" height="300"></canvas>
  

  3. bối cảnh duyệt web hiện tại. (Vỡ nợ)

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

  4. thường là một tab mới, nhưng người dùng có thể định cấu hình 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 painting</a>
  </p>
  
  <canvas width="300" height="300"></canvas>
  

  5. bối cảnh duyệt web chính của bối cảnh hiện tại. Nếu không có cha mẹ, cư xử như

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

  3

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

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

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

  3

lớp. Đặt ____38_______9 trên các phần tử ____0_______6 ngầm cung cấp hành vi _____38_______0 giống như cài đặt ____48_______2 không đặt ____48_______3

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

không dùng nữa

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

lớp. Thuộc tính này không được dùng nữa và các tác giả không nên sử dụng. Sử dụng tiêu đề HTTP

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

Được sử dụng với. Danh sách tọa độ được phân tách bằng dấu phẩy

Điều gì được yêu cầu để xác định vị trí mục tiêu có thể có trong một trang. TrongHTML4. 01,

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

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 URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

lớp. Thay vào đó, hãy sử dụng thuộc tính toàn cầu

Chỉ định một liên kết đảo ngược; . Không dùng nữa vì rất khó hiểu

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

lớp. Thay vào đó, hãy 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())
  );

HTML

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

kết quả

HTML

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

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

kết quả

<!-- <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>

lớp. Bạn có thể sử dụng

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

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

<a href="mailto:[email protected]">Send email to nowhere</a>

<a href="mailto:[email protected]">Send email to nowhere</a>

Để biết chi tiết về

<a href="mailto:[email protected]">Send email to nowhere</a>

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

<a href="mailto:[email protected]">Send email to nowhere</a>

• Thiết bị di động tự động quay 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 cuộc gọi, như Skype hoặc FaceTime
• Các trang web có thể thực hiện cuộc gọi điện thoại với

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

  3, chẳng hạn như

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

  4
• 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ề lược đồ URL

<a href="mailto:[email protected]">Send email to nowhere</a>

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

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

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

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

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

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

HTML

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

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

CSS

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

JavaScript

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ả

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

<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(800)555-0123">(800) 555-0123</a>

Việc sử dụng

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

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

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

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 painting</a>
</p>

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

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

Nội dung bên trong liên kết phải cho biết liên kết đi đến đâu, ngay cả khi nằm ngoài ngữ cảnh

Không thể truy cập, văn bản liên kết yếu

Một sai lầm phổ biến đáng buồn là chỉ liên kết các từ "bấm vào đây" hoặc "ở đây"

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

Văn bản liên kết mạnh

May mắn thay, đây là một bản sửa lỗi dễ dàng và nó thực sự ngắn hơn phiên bản không truy cập được

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

Phần mềm hỗ trợ có các phím tắt để liệt kê tất cả các liên kết trên một trang. Tuy nhiên, văn bản liên kết mạnh mang lại lợi ích cho tất cả người dùng — lối tắt "liệt kê tất cả các liên kết" mô phỏng cách người dùng sáng mắt quét nhanh các trang

Các phần tử neo thường bị lạm dụng làm nút giả bằng cách đặt

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

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

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

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

Các giá trị

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

Sử dụng một

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

Liên kết mở trong tab/cửa sổ mới thông qua

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

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

Những người có tình trạng thị lực kém, điều hướng với sự hỗ trợ của công nghệ đọc màn hình hoặc có vấn đề về nhận thức có thể bị nhầm lẫn khi một tab, cửa sổ hoặc ứng dụng mới mở ra bất ngờ. Phần mềm đọc màn hình cũ hơn thậm chí có thể không thông báo hành vi

Liên kết mở tab/cửa sổ mới

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

Liên kết đến tài nguyên không phải HTML

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

Nếu một biểu tượng được sử dụng để biểu thị hành vi liên kết, hãy đảm bảo rằng biểu tượng đó có

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

• WebAIM. Liên kết và siêu văn bản - Liên kết siêu văn bản
• G200. Chỉ mở các cửa sổ và tab mới từ một liên kết khi cần thiết
• G201. Đưa ra cảnh báo nâng cao cho người dùng khi mở một cửa sổ mới

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 URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>

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

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

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

Bỏ qua liên kết đặ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 công tắc, khẩu lệnh hoặc thanh miệng/đầu đũa, trong đó hành động di chuyển qua các liên kết lặp đi lặp lại có thể tốn nhiều công sức

• WebAIM. Liên kết "Bỏ qua Điều hướng"
• Làm cách nào để. Sử dụng Bỏ qua điều hướng sang trái
• Hiểu Tiêu chí Thành công 2. 4. 1

Kích thước

Các yếu tố tương tác, như liên kết, được đặt gần nhau nên có khoảng cách ngăn cách chúng. Giãn cách giúp những người có vấn đề về đ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