Computer >> Máy Tính >  >> Lập trình >> HTML

Cách sử dụng Thuộc tính HTML href

Thuộc tính href

href thuộc tính là một trong những thuộc tính quan trọng nhất trong HTML.

href được sử dụng để chỉ định URL cho:

  • Siêu liên kết (còn được gọi là "liên kết").
  • Hoặc để nhập các tài nguyên bên ngoài, chẳng hạn như kiểu và tập lệnh.

Trường hợp sử dụng phổ biến nhất cho href là thêm các liên kết bên trong hoặc bên ngoài (URL) trên phần tử neo <a> :

<a href="link-path">Click</a>

Hãy tạo một liên kết đưa người dùng đến trang đầu khi bạn nhấp vào liên kết đó.

Chúng tôi sẽ gọi nó là Nhà riêng.

Đầu tiên, chúng tôi xác định phần tử neo:

<a>Home</a>

Bây giờ để tạo <a> phần tử vào một siêu liên kết, chúng tôi thêm href thuộc tính:

<a href>Home</a>

Và gán giá trị cho nó là "/" :

<a href="/">Home</a>

Cách nó hiển thị trong trình duyệt:

Trang chủ

Để có biện pháp tốt, chúng ta hãy chia nhỏ ví dụ về phần tử neo:

  • <a> là một thẻ liên kết mở
  • </a> là một thẻ cố định đóng
  • Home là nội dung (phần duy nhất hiển thị trong trình duyệt)
  • href là một thuộc tính tên
  • = là một toán tử gán
  • "/" là một thuộc tính giá trị

Trên trang web này, phần tử neo chính xác này đang bao bọc biểu trưng TechStacker ở góc trên cùng bên trái của tiêu đề (nếu bạn nhấp vào nó, bạn sẽ được đưa đến trang đầu).

Bạn sẽ thường thấy ví dụ mã chính xác này được sử dụng bên trong thanh điều hướng của trang web <nav>...</nav> .

Giả sử trang web của bạn có tổng cộng 3 trang, ví dụ:Trang chủ, Giới thiệu, Liên hệ và bạn muốn đặt nội bộ liên kết cho chúng.

Đầu tiên, tài liệu HTML của mỗi trang phải được đặt tên như vậy:

  • Trang chủ phải là index.html
  • Giới thiệu phải là about.html
  • Địa chỉ liên hệ phải là contact.html

Và sau đó, bạn xác định các tuyến trang tương đối (URL) cho mỗi tài liệu như sau:

<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>

Bây giờ bạn có thể bọc từng phần tử neo bên trong <nav> phần tử:

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>

Bây giờ bạn có một thành phần điều hướng mà bạn có thể đặt trong đầu trang, chân trang, hoặc thanh bên trên trang web của bạn.

Nếu bạn muốn liên kết đến một trang web khác không phải của riêng bạn, bạn sử dụng bên ngoài định dạng liên kết, nơi bạn chỉ định một đường dẫn tuyệt đối:

<a href="https://www.youtube.com">Link to YouTube.com</a>

Tôi sẽ sử dụng cơ hội này để liên kết với kênh YouTube của riêng mình:

Liên kết đến kênh YouTube của tôi (TechStacker).