Thuộc tính href của thẻ <a> trong HTML

Thẻ HTML <a>

Định nghĩa và cách sử dụng

href Thuộc tính quy định URL của trang mà liên kết chỉ định.

href Giá trị của thuộc tính có thể là URL tương đối hoặc tuyệt đối của bất kỳ tài liệu hợp lệ nào, bao gồm phần nhận diện và đoạn mã JavaScript. Nếu người dùng chọn nội dung trong thẻ <a>, trình duyệt sẽ cố gắng tìm kiếm và hiển thị href Thuộc tính chỉ định URL của tài liệu mà URL này đại diện, hoặc danh sách các biểu thức JavaScript, phương pháp và hàm cần thực hiện.

Nếu href Nếu thuộc tính không tồn tại, thẻ <a> sẽ không phải là liên kết.

Lưu ý:Bạn có thể liên kết đến đầu trang của trang hiện tại bằng href="#top" hoặc href="#"!

Tạo liên kết văn bản

Một thẻ <a> tham chiếu đến tài liệu khác có thể có dạng sau:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Hướng dẫn trực tuyến</a>

Trình duyệt hiển thị cụm từ "CodeW3C.com Hướng dẫn trực tuyến" bằng các hiệu ứng đặc biệt (thường là văn bản màu xanh dương có dấu gạch dưới), để người dùng biết rằng nó là một liên kết có thể truy cập vào tài liệu khác. Như vậy:

CodeW3C.com Hướng dẫn trực tuyến

Người dùng có thể sử dụng các tùy chọn trong trình duyệt để tự mình chỉ định màu văn bản, thiết lập màu văn bản liên kết trước và sau liên kết.

Lưu ý:Có thể sử dụng CSS ảoThêm các樣式 phức tạp và đa dạng vào liên kết văn bản.

Tạo liên kết hình ảnh

Liên kết phức tạp hơn có thể chứa hình ảnh. LOGO này là một liên kết hình ảnh, nhấp vào hình ảnh này, bạn có thể quay lại trang chủ của W3school:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

Mã trên sẽ thêm một liên kết quay lại trang chủ cho LOGO của CodeW3C.com:

CodeW3C.com Hướng dẫn trực tuyến

Hầu hết các trình duyệt đồ họa sẽ đặt viền đặc biệt xung quanh hình ảnh là một phần của liên kết. Bằng cách đặt hình ảnh của trong thẻ <img>, Thuộc tính viềnĐặt thành 0 có thể xóa viền của liên kết. Cũng có thể sử dụng Thuộc tính viền của CSSĐể thay đổi toàn cục樣式 viền của phần tử.

Mô hình

Ví dụ 1

Thuộc tính href quy định đích của liên kết:

<a href="https://www.codew3c.com">Truy cập CodeW3C.com</a>

Thử trực tiếp

Ví dụ 2

Cách sử dụng hình ảnh như liên kết:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

Thử trực tiếp

Ví dụ 3

Cách liên kết đến địa chỉ email:

<a href="mailto:someone@example.com">Gửi email</a>

Thử trực tiếp

Ví dụ 4

Cách liên kết đến số điện thoại:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Thử trực tiếp

Ví dụ 5

Cách liên kết đến một phần khác trên cùng trang:

<a href="#section2">Chuyển sang chương 2</a>

Thử trực tiếp

Ví dụ 6

Cách liên kết đến JavaScript:

<a href="javascript:alert('Hello World!');">Thực hiện JavaScript</a>

Thử trực tiếp

Cú pháp

<a href="URL">

Giá trị thuộc tính

Giá trị Mô tả
URL

URL liên kết.

Giá trị có thể:

  • URL tuyệt đối - chỉ đường đến trang web khác (ví dụ href="http://www.example.com/index.html")
  • URL tương đối - chỉ đường đến tệp trong trang web (ví dụ href="index.html")
  • Liên kết đến phần tử có id cụ thể trong trang (ví dụ href="#section2")
  • Các giao thức khác (ví dụ https://, ftp://, mailto:, file: v.v.)
  • Văn bản script (ví dụ href="javascript:alert('Hello');")

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ

Thẻ HTML <a>