Liên kết HTML
Các liên kết được tìm thấy trong gần như tất cả các trang web. Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác.
Liên kết HTML - Siêu liên kết
Các liên kết HTML là các siêu liên kết.
Bạn có thể nhấp vào một liên kết và chuyển đến một tài liệu khác.
Khi bạn di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ.
Lưu ý: Một liên kết không nhất thiết phải là văn bản. Một liên kết có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào khác!
Liên kết HTML - Cú pháp
Thẻ HTML <a>xác định một siêu liên kết. Nó có cú pháp sau:
<a href="url">link text</a>
Thuộc tính quan trọng nhất của <a> phần tử là
hrefthuộc tính, nó cho biết đích của liên kết.
Văn bản liên kết là phần sẽ hiển thị cho người đọc.
Nhấp vào văn bản liên kết, sẽ đưa người đọc đến địa chỉ URL được chỉ định.
Thí dụ
Ví dụ này cho thấy cách tạo liên kết đến W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt:
- Một liên kết không được truy cập được gạch chân và có màu xanh lam
- Một liên kết đã truy cập được gạch chân và có màu tím
- Một liên kết đang hoạt động được gạch chân và có màu đỏ
Mẹo: Tất nhiên, các liên kết có thể được tạo kiểu bằng CSS, để có một cái nhìn khác!
Liên kết HTML - Thuộc tính mục tiêu
Theo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một mục tiêu khác cho liên kết.
Thuộc targettính chỉ định nơi để mở tài liệu được liên kết.
Thuộc targettính có thể có một trong các giá trị sau:
_self- Vỡ nợ. Mở tài liệu trong cùng một cửa sổ / tab khi nó được nhấp vào_blank- Mở tài liệu trong một cửa sổ hoặc tab mới_parent- Mở tài liệu trong khung chính_top- Mở tài liệu trong toàn bộ phần thân của cửa sổ
Thí dụ
Sử dụng target = "_ blank" để mở tài liệu được liên kết trong tab hoặc cửa sổ trình duyệt mới:
<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
URL tuyệt đối so với URL tương đối
Cả hai ví dụ trên đều đang sử dụng URL tuyệt đối (địa chỉ web đầy đủ) trong hrefthuộc tính.
Liên kết cục bộ (liên kết đến một trang trong cùng một trang web) được chỉ định bằng một URL tương đối (không có phần "https: // www"):
Thí dụ
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Liên kết HTML - Sử dụng Hình ảnh làm Liên kết
Để sử dụng hình ảnh làm liên kết, chỉ cần đặt <img>
thẻ bên trong <a>thẻ:
Thí dụ
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Liên kết đến một địa chỉ email
Sử dụng
mailto:bên trong
hrefthuộc tính để tạo liên kết mở chương trình email của người dùng (để cho phép họ gửi email mới):
Thí dụ
<a href="mailto:[email protected]">Send email</a>
Nút dưới dạng liên kết
Để sử dụng nút HTML làm liên kết, bạn phải thêm một số mã JavaScript.
JavaScript cho phép bạn chỉ định những gì xảy ra tại một số sự kiện nhất định, chẳng hạn như một lần nhấp vào nút:
Thí dụ
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Mẹo: Tìm hiểu thêm về JavaScript trong Hướng dẫn JavaScript của chúng tôi .
Tiêu đề liên kết
Thuộc titletính chỉ định thông tin bổ sung về một phần tử. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi chuột di chuyển qua phần tử.
Thí dụ
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
Tìm hiểu thêm về URL tuyệt đối và URL tương đối
Thí dụ
Sử dụng một URL đầy đủ để liên kết đến một trang web:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Thí dụ
Liên kết đến một trang nằm trong thư mục html trên trang web hiện tại:
<a href="/html/default.asp">HTML tutorial</a>
Thí dụ
Liên kết đến một trang nằm trong cùng thư mục với trang hiện tại:
<a href="default.asp">HTML tutorial</a>
Bạn có thể đọc thêm về đường dẫn tệp trong chương Đường dẫn tệp HTML .
Tóm tắt chương
- Sử dụng
<a>phần tử để xác định một liên kết - Sử dụng
hrefthuộc tính để xác định địa chỉ liên kết - Sử dụng
targetthuộc tính để xác định nơi mở tài liệu được liên kết - Sử dụng
<img>phần tử (bên trong<a>) để sử dụng hình ảnh làm liên kết - Sử dụng
mailto:lược đồ bên tronghrefthuộc tính để tạo liên kết mở chương trình email của người dùng
Thẻ liên kết HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .