Chỉ định URL cơ sở tài liệu với phần tử HTML

Trang web được xây dựng với một loạt các liên kết, trỏ đến các trang và nguồn như hình ảnh và bảng định kiểu. Có hai cách để chỉ định URL liên kết đến các nguồn này: hoặc sử dụng một đường dẫn tuyệt đối hoặc đường dẫn tương đối.

Đường dẫn tuyệt đối đề cập đến đích cụ thể, thông thường, nó bắt đầu bằng tên miền (cùng với HTTP) như www.domain.com/destination/source.jpg. Đường dẫn tương đối thì ngược lại: đích liên kết phụ thuộc vào vị trí gốc hoặc trong hầu hết các trường hợp tên miền của trang web của bạn.

Một đường dẫn tương đối điển hình sẽ trông như thế này dưới đây:

Nếu tên miền trang web của bạn là, ví dụ, hongkiat.com đường dẫn hình ảnh sẽ giải quyết hongkiat.comimages_2 / specifying-document-base-url-with-html-base-Element.png. Bạn nên hiểu điều này nếu bạn đã phát triển trang web trong một thời gian.

Nhưng hầu hết các bạn có thể chưa nghe về thành phần. Thẻ HTML này đã xuất hiện từ HTML4, nhưng rất ít thấy sự triển khai của nó trong tự nhiên. W3C mô tả thành phần này là:

“Phần tử cơ sở cho phép tác giả chỉ định URL cơ sở tài liệu cho mục đích giải quyết các URL tương đối và tên của bối cảnh duyệt mặc định cho các mục đích của các siêu liên kết sau.”

Điều này về cơ bản quyết định URL cơ sở cho đường dẫn tương đối trong các trang web. Thay vì phụ thuộc vào vị trí gốc hoặc tên miền của trang web của bạn, bạn có thể chỉ ra nó ở một nơi khác, có thể như URL nơi tài nguyên của bạn nằm trong CDN (Mạng phân phối nội dung). Hãy xem cách nó thực sự hoạt động.

Sử dụng phần tử cơ sở

Các được định nghĩa dọc theo và các thẻ trong . Cho ví dụ sau, chúng tôi đặt URL cơ sở cho Google.

Thông số kỹ thuật này sẽ ảnh hưởng đến tất cả các đường dẫn trong tài liệu, bao gồm một đường dẫn được chỉ định trong href thuộc tính và src của những hình ảnh. Vì vậy, giả sử chúng ta có biểu định kiểu, hình ảnh và liên kết trong tài liệu được đặt với một đường dẫn tương đối như thế này, ví dụ:

  Liên kết neo

Mặc dù trang web của chúng tôi ở dưới bản demo.hongkiat.com đường dẫn tương đối sẽ đề cập đến hongkiat.maxcdn.com, theo đường dẫn cơ sở được chỉ định trong nhãn. Hãy thử di chuột qua liên kết và trình duyệt sẽ cho bạn biết đường dẫn chính xác đến đâu.

Tất cả các đường dẫn tương đối cuối cùng sẽ là:

  Liên kết neo

Đặt mục tiêu Liên kết mặc định

Ngoài việc xác định URL cơ sở, Thẻ cũng có thể đặt mục tiêu liên kết mặc định thông qua Mục tiêu thuộc tính. Nói rằng bạn muốn tất cả các liên kết trong tài liệu để mở trong trình duyệt tab mới, đặt Mục tiêu với _chỗ trống, như vậy.

Hạn chế

Các thẻ, tuy nhiên, giữ một vài cảnh báo trong một số trường hợp:

Đầu tiên hỗ trợ trình duyệt rất tuyệt vời; nó hoạt động trong IE6. Nhưng, IE6 nghĩ rằng nó yêu cầu một thẻ đóng . Điều này có thể gây ra vấn đề phân cấp trong tài liệu, nếu thẻ đóng không được chỉ định. Một cách đơn giản nhanh chóng để giải quyết vấn đề này là bằng cách thêm kết thúc trong một bình luận, .

Nếu bạn đang sử dụng # kết hợp với để liên kết đến các phần trong tài liệu, bạn có thể gặp sự cố trong Internet Explorer 9. Thay vì chuyển đến phần được đề cập, Internet Explorer 9 sẽ tải lại trang.

Hơn nữa, một khoảng trống href sẽ dẫn đến URL cơ sở thay vì liên kết đến thư mục hiện tại nơi trang nằm (đây là hành vi mặc định của trình duyệt), điều này có thể gây ra sự cố tham chiếu không mong muốn.

Gói lại

Các là một tính năng HTML tiện dụng có thể đơn giản hóa việc tham chiếu liên kết trong tài liệu web. Sử dụng thẻ một cách thận trọng để giảm thiểu những cạm bẫy. Thực hiện theo các tài liệu tham khảo dưới đây để biết thêm về nhãn:

URL tuyệt đối và tương đối - MSDN
Phần tử cơ sở HTML - W3C