Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Thẻ <base> trong HTML là một phần tử tương đối ít được biết đến, gần đây đã trở thành một phần chính thức của HTML5. Nó cho phép bạn làm hai việc:
- Thiết lập URL mà bạn chọn như là cơ sở cho tất cả các URL tương đối.
- Thiết lập liên kết mặc định cho thuộc tính target.
Cài đặt và trường hợp sử dụng
Phần tử <base> được định nghĩa trong phần <head> và bạn có thể chỉ sử dụng nó một lần cho mỗi tài liệu. Bạn nên đặt nó càng sớm càng tốt trong phần head của bạn vì vậy bạn có thể bắt đầu sử dụng nó từ đó. Hai thuộc tính của nó là href và target. Bạn có thể sử dụng một trong hai thuộc tính này, hoặc cả hai cùng một lúc.
Ví dụ 1: Lối tắt để nạp các tài nguyên
Ví dụ bạn có một trang web lưu tất cả các hình ảnh và CSS của nó trong một thư mục có tên "assets". Bạn có thể định nghĩa thẻ <base> của bạn như sau:
1 |
<head>
|
2 |
<base href="http://www.myepicsite.com/assets/"> |
3 |
</head>
|
Điều này sau đó sẽ cho phép bạn tải bất kỳ hình ảnh hoặc CSS như thế này:
1 |
<head>
|
2 |
<base href="http://www.myepicsite.com/assets/"> |
3 |
<link rel="stylesheet" href="style.css"> |
4 |
</head>
|
5 |
<body>
|
6 |
<img src="image01.png" /> |
7 |
</body>
|
Liên kết tới style.css sẽ được phân giải thành http://www.myepicsite.com/assets/style.css và image01.png sẽ nạp từ http://www.myepicsite.com/assets/image01.png.
Ví dụ 2: URL nội tại
Nếu bạn có một domain cấp độ cao nhất chuyển tiếp đến một thứ gì đó giống như http://thisrocks.com/app/ và tất cả các liên kết nội tại cần bao gồm app/ trong URL của chúng.
Bạn có thể thiết lập URL cơ sở của bạn như thế này:
1 |
<base href="http://thisrocks.com/app/"> |
Từ đó mỗi khi bạn muốn liên kết từ một trang nội tại này đến một trang nội tại khác bạn có thể sử dụng:
1 |
<a href="anotherpage.htm">LINK</a> |
Liên kết này sẽ được phân giải thành http://thisrocks.com/app/anotherpage.htm.
Ví dụ 3: Liên kết Target mặc định
Bạn cũng có thể sử dụng <base> để thiết lập target mặc định cho tất cả các liên kết trên trang web của bạn. Nếu bạn đã sử dụng:
1 |
<base target="_blank"> |
.. .bất kỳ liên kết không được thiết lập target của riêng nó sẽ mở một cửa sổ mới. Bạn có thể sử dụng thuộc tính target với hoặc không cần một thuộc tính href đi kèm.
Chức năng này có thể hữu ích cho các nội dung được nạp thông qua một iFrame, như bạn sẽ có thể tự động có tất cả các liên kết trong đó nhắm mục tiêu đến frame cha.
Nhược điểm
Mặc dù url <base> có thể thuận tiện, nhưng nhược điểm của nó nằm xung quanh một thực tế rằng sau khi xác định nó một lần thì bạn sẽ bị mắc kẹt với nó. Bạn chỉ có thể sử dụng nó theo một cách duy nhất và sau đó nó sẽ ảnh hưởng đến tất cả các URL. Bất cứ nơi nào mà bạn không muốn sử dụng giá trị mặc định trong thẻ <base> của bạn, thì bạn phải thay thế chúng.
Bạn có nên sử dụng nó để phân giải thư mục assets của bạn như chúng tôi đã làm ở trên, và sau đó muốn liên kết từ một trang này đến trang khác trong cùng một trang web của bạn, thì bạn không thể làm như vậy với HTML thông thường của <a href="page.html">Page</a>.
Điều này là bởi vì URL cơ sở đang là http://www.myepicsite.com/assets/ thì người truy cập web của bạn sẽ được gửi đến http://www.myepicsite.com/assets/page.html.
Như vậy bạn sẽ phải thay thế cài đặt thẻ <base> của bạn bằng cách sử dụng URL tuyệt đối thay vào đó, tức là <a href="http://www.myepicsite.com/page.html">Page</a>.
Liên kết trong trang
Khi sử dụng <base>, bạn cũng có thể gặp các vấn đề với các liên kết trong trang.
Thông thường, một liên kết như <a href="#top">Back to Top</a> sẽ giữ cho bạn trên cùng một trang, nhưng chuyển đến vị trí của một phần tử mang id = "top", ví dụ như nó sẽ phân giải thành http://thisrocks.com/app/article.html#top.
Tuy nhiên nếu bạn đang sử dụng một thẻ <base> với một thuộc tính href thì bạn được gửi đến URL cơ sở với #top được nối vào phía sau, ví dụ như http://thisrocks.com/app/#top.
Một lần nữa, trong trường hợp này bạn sẽ phải thay thế thiết lập mặc định trong thẻ <base> của bạn bằng cách xác định trang mà bạn muốn liên kết thành tương đối, ví dụ như <a href="article.html#top">Back to Top</a>.
Nơi <base> hoạt động tốt nhất
Thẻ <base> được sử dụng tốt nhất trong trường hợp bạn biết nơi nào bạn sẽ có thể phát huy đầy đủ quyền kiểm soát việc sử dụng của tất cả các URL, tức là bạn biết bạn sẽ có thể ghi đè các mặc định khi cần thiết. Nếu bạn đang tạo một theme cho một CMS nơi mà có rất nhiều biến không biết đây có thể là một ý tưởng tốt để cho <base> thoát khỏi mớ hỗ độn.
Tuy nhiên, nếu bạn đang xây dựng một trang web HTML tĩnh thì <base> có thể rất hữu ích. Đây là trường hợp thậm chí tốt hơn nếu bạn đang sử dụng một ngôn ngữ templating như Jade hoặc Handlebars cho phép bạn đặt lối tắt như <a href="{url}#top">Back to Top</a>, do đó, nếu bạn cần thay thế cài đặt mặc định thì nó vẫn nhanh chóng và dễ dàng.
Nếu bạn có một ý tưởng tốt về những gì nội dung của dự án sẽ, và việc sử dụng các URL và các liên kết của nó là hoàn toàn dưới sự kiểm soát của bạn, bạn có thể thấy thẻ <base> giúp bạn tiết kiệm rất nhiều thời gian.
Đọc thêm về <base> tại W3C wiki và đặc tả HTML5:
