Cách tạo liên kết đến các phần trên cùng một trang trong html w3schools

Question

Phần tử HTML

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

6 (hoặc phần tử neo), với 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 của nó, tạo siêu liên kết đến các trang web, tệp, địa chỉ email, vị trí trong cùng một trang hoặc bất kỳ thứ gì khác mà URL có thể giải quyết

Nội dung chính Show

Thuộc tính
Thuộc tính không dùng nữa
Liên kết đến một URL tuyệt đối
Liên kết đến các URL tương đối
Liên kết đến một phần tử trên cùng một trang
Liên kết đến một địa chỉ email
Liên kết với các số điện thoại
Using the download attribute to save a as a PNG
An ninh và sự riêng tư
khả năng tiếp cận
Văn bản liên kết mạnh
sự kiện onclick
Liên kết bên ngoài và liên kết đến các tài nguyên không phải HTML
Bỏ qua liên kết
Kích thước và khoảng cách

Nội dung trong mỗi

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

6 phải cho biết đích của liên kết. Nếu 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, nhấn phím enter trong khi tập trung vào 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 sẽ kích hoạt nó

Thử nó

Thuộc tính

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

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

1

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;
}

2

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 cho 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 href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

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

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

41). 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

Ghi chú

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

1 chỉ hoạt động đối với các URL có cùng nguồn gốc hoặc lược đồ

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 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 href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
  49, thì Chrome và Firefox sẽ ưu tiên thuộc tính đó và coi đó là 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 tuyến

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

7

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

51 URL

Địa chỉ email có

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

52 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="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>

53

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

54

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

55

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

56

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

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

57 với 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>

58 tới các URL. Thông thường để theo dõi

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

59

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

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

40. Tiêu đề

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

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

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

42. Tiêu đề

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

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

```
<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
44. 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="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
45. 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="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
46. 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="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
47. 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="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
48 (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="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
49. 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

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

40

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

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

41

Vị trí hiển thị URL được liên kết, làm tên cho ngữ cảnh duyệt web (tab, cửa sổ hoặc

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

42). Các từ khóa sau đây có ý nghĩa đặc biệt đối với nơi tải URL

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

43. bối cảnh duyệt web hiện tại. (Mặc định)

```
<a href="//example.com">Scheme-relative URLa>
<a href="/en-US/docs/Web/HTML">Origin-relative URLa>
<a href="./p">Directory-relative URLa>
```
44. 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ế

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

45. 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ư

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

43

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

47. 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, cư xử như

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

43

Ghi chú. Đặt

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

49 trên 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 hoàn toàn cung cấp hành vi

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

40 giống như đặt

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

62 không đặt

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

63

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

64

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

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

65 Không dùng nữa

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

Ghi chú. 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;
}

4 trên URL được liên kết

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

67 Không dùng nữa

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

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

68. Danh sách tọa độ được phân tách bằng dấu phẩy

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

69 Không dùng nữa

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

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

40 và

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

69 đều có thể được sử dụng trên

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

6, miễn là chúng có giá trị giống hệt nhau

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

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

40

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

44 Không dùng nữa

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

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

68 Không dùng nữa

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

Ghi chú. Thay vào đó, hãy sử dụng phần tử

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

47 cho bản đồ hình ảnh

ví dụ

Liên kết đến một URL tuyệt đối

HTML

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

2

Kết quả

Liên kết đến 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 đến một phần tử trên cùng một trang

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

4

Ghi chú. Bạn có thể sử dụng

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

48 hoặc đoạn trống (

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

49) để liên kết đến đầu trang hiện tại, như được định nghĩa trong đặc tả HTML

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 thư mới, hãy sử dụng lược đồ

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

52

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

5

Để biết chi tiết về

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

52 URL, chẳng hạn như bao gồm chủ đề hoặc nội dung, hãy xem Liên kết email hoặc RFC 6068

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

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

4

Hành vi liên kết

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

51 khác nhau tùy theo khả năng của thiết bị

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

Trang web có thể thực hiện cuộc gọi điện thoại với

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

33, chẳng hạn như

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

34

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

51

Using the download attribute to save a as a PNG

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

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

36 dưới dạng hình ảnh, bạn có thể tạo 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;
}

5 đượ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

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

HTML

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

4

CSS

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

6

JavaScript

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

4

Kết quả

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ể gây hậu quả đối với bảo mật và quyền riêng tư của người dùng. Xem tiêu đề

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

41. mối quan tâm về quyền riêng tư và bảo mật đối với thông tin

Việc sử 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>

49 mà không có

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

03 và

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

62 khiến trang web dễ bị tấn công khai thác API

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

63, 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

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

49 hoàn toàn cung cấp khả năng bảo vệ giống như cài đặt

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

62. Xem khả năng tương thích của trình duyệt để biết chi tiết

khả năng tiếp cận

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

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"

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

3

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

0

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

sự kiện onclick

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

7 thành

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

09 hoặc

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

10 để ngăn trang làm mới, sau đó lắng nghe các sự kiện

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

11 của chúng

Các giá trị

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

7 không có thật này gây ra hành vi không mong muốn khi sao chép/kéo liên kết, mở liên kết trong tab/cửa sổ mới, đánh dấu trang hoặc khi JavaScript đang tải, lỗi hoặc bị vô hiệu hóa. Chúng cũng truyền đạt ngữ nghĩa không chính xác cho các công nghệ hỗ trợ, như trình đọc màn hình

Sử dụng một

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

13 thay thế. Nói chung, bạn chỉ nên sử dụng siêu liên kết để điều hướng đến một URL thực

Liên kết bên ngoài và liên kết đến các tài nguyên không phải HTML

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

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

49 hoặc liên kết trỏ đến tệp tải xuống phải cho biết điều gì sẽ xảy ra khi liên kết được theo dõi

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

1

Liên kết đến tài nguyên không phả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>

2

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 biểu tượng đó có văn bản thay thế

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

3

WebAIM. Liên kết và siêu văn bản - Hypertext Links
MDN / Tìm hiểu về WCAG, Hướng dẫn 3. 2
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

Bỏ qua 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>

15 trỏ đến phần đầu của nội dung chính của trang. Thông thường, CSS ẩn liên kết bỏ qua ngoài màn hình cho đến khi tập trung

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

4

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

5

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 các 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 thế nào để. Sử dụng Bỏ qua các liên kết Điều hướng
MDN / Tìm hiểu về WCAG, Hướng dẫn 2. 4 lời giải thích
Hiểu Tiêu chí Thành công 2. 4. 1

Kích thước và khoảng cách

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

programming html

Cách tạo liên kết đến các phần trên cùng một trang trong html w3schools

Thử nó

Thuộc tính

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

ví dụ

Liên kết đến một URL tuyệt đối

HTML

Kết quả

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

HTML

Kết quả

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

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

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

Using the download attribute to save a as a PNG

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

HTML

CSS

JavaScript

Kết quả

An ninh và sự riêng tư

khả năng tiếp cận

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

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

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

sự kiện onclick

Liên kết bên ngoài và liên kết đến các tài nguyên không phải HTML

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

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

Bỏ qua liên kết

Kích thước và khoảng cách

Kích thước

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội