Liên kết HTML

HTML sử dụng liên kết siêu văn bản để kết nối với tài liệu khác trên mạng.

Liên kết gần như có thể tìm thấy trong tất cả các trang web. Bấm vào liên kết để nhảy từ một trang sang trang khác.

Ví dụ

Tạo liên kết siêu văn bản
Ví dụ này minh họa cách tạo liên kết trong tài liệu HTML.
Sử dụng hình ảnh làm liên kết
Ví dụ này minh họa cách sử dụng hình ảnh làm liên kết.

(Bạn có thể tìm thêm ví dụ ở cuối trang.)

Liên kết siêu văn bản HTML (liên kết)

Liên kết có thể là một từ, một cụm từ hoặc một nhóm từ, cũng có thể là một hình ảnh, bạn có thể nhấp vào những nội dung này để nhảy sang tài liệu mới hoặc một phần nào đó của tài liệu hiện tại.

Khi bạn di chuột đến một liên kết nào đó trên trang web, mũi tên sẽ đổi thành một đôi tay nhỏ.

Chúng ta tạo liên kết bằng cách sử dụng thẻ <a> trong HTML.

Có hai cách sử dụng thẻ <a>:

  1. Bằng cách sử dụng thuộc tính href - Tạo liên kết đến tài liệu khác
  2. Bằng cách sử dụng thuộc tính name - Tạo dấu sách trong tài liệu

Đọc thêm:Tôi là gì?

Cú pháp liên kết HTML

Mã HTML liên kết rất đơn giản. Nó tương tự như thế này:

<a href="url">Text liên kết</a>

Thuộc tính href xác định mục tiêu của liên kết.

Văn bản giữa thẻ mở và thẻ đóng được hiển thị như liên kết.

Ví dụ

<a href="http://www.codew3c.com/">Thăm CodeW3C.com</a>

Dòng mã trên hiển thị như sau:Thăm CodeW3C.com

Bấm vào liên kết này sẽ đưa người dùng đến trang chủ của CodeW3C.com.

Lưu ý:"Text liên kết" không nhất thiết phải là văn bản. Ảnh hoặc các yếu tố HTML khác cũng có thể là liên kết.

HTML Liên kết - thuộc tính target

Sử dụng thuộc tính Target, bạn có thể xác định tài liệu được liên kết hiển thị ở đâu.

Dòng này sẽ mở tài liệu trong cửa sổ mới:

<a href="http://www.codew3c.com/" target="_blank">Thăm CodeW3C.com!</a>

Thử ngay

HTML Liên kết - thuộc tính name

Thuộc tính name xác định tên của điểm dán (anchor).

Bạn có thể sử dụng thuộc tính name để tạo dấu sách trong trang HTML.

Điểm dán sẽ không hiển thị theo cách đặc biệt nào, nó đối với người đọc là không nhìn thấy.

Khi sử dụng điểm dán tên (named anchors), chúng ta có thể tạo liên kết trực tiếp đến điểm dán này (ví dụ như một phần nhỏ trong trang), giúp người dùng không cần phải cuộn trang liên tục để tìm thông tin cần thiết.

Cú pháp đặt tên điểm dán:

<a name="label">Điểm dán (hiển thị trên trang)</a>

Lưu ý:Tên của điểm dán có thể là bất kỳ tên nào bạn thích.

Lưu ý:Bạn có thể sử dụng thuộc tính id để thay thế thuộc tính name, đặt tên cho điểm dán vẫn hiệu quả.

Ví dụ

Trước tiên, chúng ta đặt tên cho điểm dán trong tài liệu HTML (tạo một dấu sách):

<a name="tips">Lưu ý cơ bản - Cách sử dụng hữu ích</a>

Sau đó, chúng ta tạo liên kết đến điểm dán này trong cùng một tài liệu:

<a href="#tips">Cách sử dụng hữu ích</a>

Bạn cũng có thể tạo liên kết đến điểm dán này trên các trang khác:

<a href="http://www.codew3c.com/html/html_links.asp#tips">Cách tiếp cận hữu ích</a>

Trong đoạn mã trên, chúng ta đã thêm ký hiệu # và tên chốt vào cuối URL để có thể liên kết trực tiếp đến chốt tips.

Hiệu quả cụ thể:Cách tiếp cận hữu ích

Lưu ý cơ bản - Cách tiếp cận hữu ích:

Ghi chú:Hãy luôn thêm dấu gạch chéo ngược vào thư mục con. Nếu bạn viết liên kết như sau: href="http://www.codew3c.com/html", nó sẽ tạo ra hai yêu cầu HTTP đến máy chủ. Điều này là vì máy chủ sẽ thêm dấu gạch chéo ngược vào địa chỉ này và tạo ra một yêu cầu mới, như sau: href="http://www.codew3c.com/html/".

Lưu ý:Chốt thường được sử dụng để tạo mục lục ở đầu tài liệu lớn. Bạn có thể đặt một chốt cho mỗi chương và sau đó đặt các liên kết đến các chốt này ở trên cùng tài liệu. Nếu bạn thường truy cập Bách khoa toàn thư Baidu, bạn sẽ phát hiện ra rằng hầu hết các từ điển đều sử dụng cách dẫn航 này.

Lưu ý:Nếu trình duyệt không tìm thấy chốt đã định nghĩa, nó sẽ định vị đến đầu tài liệu. Không có lỗi xảy ra.

Các ví dụ khác

Mở liên kết trong cửa sổ trình duyệt mới
Ví dụ này minh họa cách mở một trang trong cửa sổ trình duyệt mới, như vậy người truy cập không cần rời khỏi trang web của bạn.
Liên kết đến vị trí khác nhau trong cùng trang
Ví dụ này minh họa cách sử dụng liên kết để chuyển đến phần khác của tài liệu.
Thoát khỏi khung
Ví dụ này minh họa cách thoát khỏi khung, nếu trang của bạn bị cố định trong khung.
Tạo liên kết email
Ví dụ này minh họa cách liên kết đến một email. (Ví dụ này chỉ hoạt động sau khi cài đặt chương trình khách hàng email.)
Tạo liên kết email 2
Ví dụ này minh họa liên kết email phức tạp hơn.

Thẻ liên kết HTML

Thẻ Mô tả
<a> Định nghĩa chốt.