Các siêu liên kết được trình duyệt web sử dụng để di chuyển từ trang này sang trang khác. Tuy nhiên, bạn cũng có thể di chuyển đến một khu vực khác trên cùng một trang. Các phần sau đây chỉ cho bạn cách liên kết đến phần trên cùng, dưới cùng hoặc một phần cụ thể trên trang web. Chọn một phương pháp từ danh sách sau hoặc khám phá cả hai tùy chọn
Ghi chú
Ngày nay, tất cả các trình duyệt vẫn nhận ra "#" là cách khả thi để di chuyển lên đầu hoặc cuối trang. Tuy nhiên, phương pháp này không được dùng nữa và có thể không hoạt động trong các phiên bản HTML trong tương lai. Chúng tôi khuyên bạn nên sử dụng phương thức id thay vì phương thức này hiện tại và linh hoạt hơn
Sử dụng #top hoặc #bottom
The following examples use #top and #bottom with the Top
Bottom
Kết quả
Sử dụng bộ chọn id
Trong CSS, "id" là một bộ chọn được sử dụng để chỉ định một khu vực mà một liên kết sẽ trỏ đến, tương tự như anchor trong HTML. Điều thú vị khi sử dụng id là bạn có thể tạo liên kết đến bất kỳ thành phần nào trên trang, thay vì chỉ phần trên cùng hoặc dưới cùng. Trong các phần sau, chúng tôi chỉ cho bạn cách áp dụng id cho thẻ HTML và sau đó là cách liên kết với nó. Hai ví dụ sau liên kết đến đoạn mở đầu ở đầu trang này
Sử dụng bộ chọn #id
Hyperlinks are utilized by a web browser to move from one page to another...
Tạo một liên kết đến bộ chọn
Take me to the opening paragraph.
Kết quả
Sử dụng bộ chọn #id từ một trang khác
Bạn cũng có thể chuyển đến một phần cụ thể của trang web khác bằng cách thêm #selector vào URL của trang.
Take me to the opening paragraph.
Kết quả
Hoàn thành ví dụ mã trang HTML
Đoạn mã sau cho biết cách cả hai neo #top và #bottom và bộ chọn id đều có thể được sử dụng trên cùng một trang
Liên kết hoặc siêu liên kết là kết nối từ tài nguyên web này sang tài nguyên web khác. Liên kết cho phép người dùng di chuyển liền mạch từ trang này sang trang khác, trên bất kỳ máy chủ nào ở bất kỳ đâu trên thế giới
Một liên kết có hai đầu, được gọi là neo. Liên kết bắt đầu tại điểm neo nguồn và trỏ đến điểm neo đích, có thể là bất kỳ tài nguyên web nào, ví dụ: hình ảnh, âm thanh hoặc clip video, tệp PDF, tài liệu HTML hoặc một phần tử trong chính tài liệu đó, v.v.
Theo mặc định, các liên kết sẽ xuất hiện như sau trong hầu hết các trình duyệt
- Một liên kết chưa đượ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 hoạt động được gạch dưới và màu đỏ
Tuy nhiên, bạn có thể ghi đè lên điều này bằng CSS. Tìm hiểu thêm về liên kết tạo kiểu
Cú pháp liên kết HTML
Các liên kết được chỉ định trong HTML bằng cách sử dụng thẻ
Một liên kết hoặc siêu liên kết có thể là một từ, nhóm từ hoặc hình ảnh
văn bản liên kết
Bất cứ thứ gì giữa thẻ mở và thẻ đóng sẽ trở thành một phần của liên kết mà người dùng nhìn thấy và nhấp vào trong trình duyệt. Dưới đây là một số ví dụ về các liên kết
Google Search
Tutorial Republic
Thuộc tính href
chỉ định mục tiêu của liên kết. Giá trị của nó có thể là một URL tuyệt đối hoặc tương đối
URL tuyệt đối là URL bao gồm mọi phần của định dạng URL, chẳng hạn như giao thức, tên máy chủ và đường dẫn của tài liệu, v.v. g. , //www.google.com/
, //www.example.com/form.php
, v.v. Trong khi, các URL tương đối là các đường dẫn liên quan đến trang, e. g. , contact.html
,
About Us
Google
0, v.v. URL tương đối không bao giờ bao gồm tiền tố About Us
Google
1 hoặc About Us
Google
2Đặt mục tiêu cho liên kết
Thuộc tính
About Us
Google
3 cho trình duyệt biết nơi mở tài liệu được liên kết. Có bốn mục tiêu được xác định và mỗi tên mục tiêu bắt đầu bằng ký tự gạch dưới [About Us
Google
4]
5 — Mở tài liệu được liên kết trong một cửa sổ hoặc tab mớiAbout Us Google
6 — Mở tài liệu được liên kết trong cửa sổ chínhAbout Us Google
7 — Mở tài liệu được liên kết trong cùng một cửa sổ hoặc tab với tài liệu nguồn. Đây là giá trị mặc định, do đó không cần thiết phải chỉ định rõ ràng giá trị nàyAbout Us Google
8 — Mở tài liệu được liên kết trong cửa sổ trình duyệt đầy đủAbout Us Google
Hãy thử ví dụ sau để hiểu cách hoạt động cơ bản của mục tiêu liên kết
About Us
Google
Mẹo. Nếu trang web của bạn được đặt bên trong khung nội tuyến, bạn có thể sử dụng
About Us
Google
9 trên các liên kết để thoát ra khỏi khung nội tuyến và hiển thị trang đích trong cửa sổ trình duyệt đầy đủTạo dấu neo đánh dấu
Bạn cũng có thể tạo các liên kết dấu trang để cho phép người dùng chuyển đến một phần cụ thể của trang web. Dấu trang đặc biệt hữu ích nếu bạn có một trang web rất dài
Tạo dấu trang là một quy trình gồm hai bước. trước tiên hãy thêm thuộc tính
Jump to Section A0 vào phần tử mà bạn muốn nhảy, sau đó sử dụng giá trị thuộc tínhSection A
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Jump to Section A0 đứng trước dấu thăng [Section A
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Jump to Section A2] làm giá trị của thuộc tínhSection A
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
href
của thẻ
, như minh họa trong ví dụ sauJump to Section ASection A
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Mẹo. Bạn thậm chí có thể chuyển đến một phần của trang web khác bằng cách chỉ định URL của trang đó cùng với dấu neo [i. e.
Jump to Section A5] trong thuộc tínhSection A
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
href
, ví dụ: Jump to Section A7Section A
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Tạo liên kết tải xuống
Bạn cũng có thể tạo liên kết tải xuống tệp theo cách giống hệt như đặt liên kết văn bản. Chỉ cần trỏ URL đích tới tệp bạn muốn có sẵn để tải xuống
Trong ví dụ sau, chúng tôi đã tạo liên kết tải xuống cho các tệp ZIP, PDF và JPG
Download Zip file
Download PDF file
Download Image file
Ghi chú. Khi bạn nhấp vào liên kết trỏ đến tệp PDF hoặc tệp hình ảnh, tệp sẽ không được tải trực tiếp xuống ổ cứng của bạn. Nó sẽ chỉ mở tệp trong trình duyệt web của bạn. Hơn nữa, bạn có thể lưu hoặc tải xuống ổ cứng của mình thường xuyên