Tóm Tắt
Tag base là gì
Tag Base là một thẻ html được dùng trong việc xác định một đường dẫn cơ sở cho đường dẫn tương đối trong trang. Ngoài ra thẻ base còn dùng để định dạng kiểu mở liên kết cho tất cả các liên kết chưa được định dạng thuộc tính target.
Đọc qua câu định nghĩa chắc những bạn chưa hiểu được ý nghĩa của thẻ tag base. Mình sẽ đưa ra những ví dụ để lý giải đơn cử hơn cho từng trường hợp .
Trường hợp thứ nhất:
Thẻ base được sử dụng để xác định một đường dẫn cơ sở cho đường dẫn tương đối trong html. Đường dẫn cơ sở này sẽ nối với tất cả các đường dẫn tương đối ở website để trở thành đường dẫn tuyệt đối. Các bạn xem ví dụ ở dưới.
Tìm hiểu thêm : Phân biệt đường dẫn tương đối, tuyệt đối trong html
| 1234567891011121314 |
|
Ở ví dụ này, mình sử dụng đường dẫn cơ sở là:”https://final-blade.com/wp-content/uploads/2017/01/“.
Tiếp theo mình sử dụng đường dẫn tương đối ở thẻ img: “tao-lien-ket-bang-the-a-trong-html.jpg“.
Như vậy trình duyệt sẽ tự hiểu và nối đường dẫn cơ sở với đường dẫn tương đối lại. Và chúng ta sẽ có đường dẫn tuyệt đối như sau: “https://final-blade.com/wp-content/uploads/2017/08/tag-area-la-gi.jpg“.
Nhưng các bạn chứ ý thêm là trong ví dụ trên mình có sử dụng thẻ để và mình cho đường dẫn tuyệt đối vào: “https://final-blade.com/a-href-la-gi-tao-lien-ket-bang-the-a-trong-html.html“. Vì đây đã là đường dẫn tuyệt đối nên trình duyệt không nối thêm đoạn đường dẫn cơ sở của mình vào nữa. Các bạn xem kết quả ở dưới nhé.
See the Pen Ví dụ về thẻ base trong html by alantien ( @ alantien ) on CodePen. 0
Trường hợp thứ hai
Thẻ base dùng để định dạng kiểu mở liên kết cho tất cả các liên kết chưa được định dạng thuộc tính target. Mình có một ví dụ như ở dưới
| 1234567891011121314 |
H ọcCSS |
Như bạn đã thấy, ở ví dụ này mình sử dụng những thành phần sau :
Thẻ base :
Thẻ a thứ nhất: <a href=”https://final-blade.com/web-development/hoc-html”>Học HTML
. Ở thẻ này mình không cho thuộc tính target
Thẻ a thứ hai : Học CSS. Còn ở thẻ này mình để thuộc tính target là _self.
Nhắc lại ý nghĩa của thuộc tính target trong html
- _bank : Mở ra liên kết ở 1 tab mới
- _self : Mở ra liên kết ở tab hiện tại
Kết quả nhận được như sau. Các bạn hoàn toàn có thể bấm vào để hiểu hơn .
Có lẽ không khó để nhận ra điều khác biệt giữa 2 thẻ a đúng không nào? Thẻ a thứ nhất vì không được gắn thuộc tính target nên trình duyệt sẽ lấy target của thẻ base. Ngược lại thẻ a thứ hai đã có thuộc tính target nên sẽ không bị ảnh hưởng.
Qua 2 trường hợp trên những bạn đã hiểu được công dụng của thẻ base rồi. Ngoài ra những bạn hoàn toàn có thể phối hợp 2 trường hợp lại làm một nữa. Xem ví dụ nhé .
| 1234567891011121314 |
|
Lưu ý:
Nếu bạn cần sử dụng thẻ
| 12345 |
…… |
Cách trình duyệt tương hỗ thẻ base trong html
| HTML Tag | |||||
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes |
Các trình duyệt hiện nay đều hỗ trợ tốt cho thẻ
Các thuộc tính của thẻ
Cách sử dụng:
Bảng thuộc tính
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| href | URL | href=”index.html” | Xác định các đường cơ bản cho tất cả các đường tương đối trong trang. |
| target | _blank _parent _self _top framename |
target=”_blank” | Xác định kiểu mở tất cả các liên kết trong trang. Không được hỗ trợ trong DTD Strict |
Lời kết
Trên đây là tất cả kiến thức mình biết về thẻ
Tag base là gì | Thẻ Base và thuộc tính target trong html
4.6 (92%) 10 votes
Xem thêm: Marquee Là Gì – Thẻ Marquee Trong Html
Source: https://final-blade.com
Category: Kiến thức Internet
