Thẻ source được sử dụng để chỉ định tài nguyên đa phượng tiện cho các phần tử media ví dụ như video, audio, hình ảnh.
Thẻ source cho phép bạn xác định các tệp đa phương tiện sẽ được hiển thị thay thế tùy thuộc vào phương tiện, hỗ trợ codec hoặc truy vấn media.
Ví dụ bạn muốn thay đổi hình ảnh hiển thị khi người dùng thay đổi kích thước cửa sổ trình duyệt, khi đó bạn nên sử dụng thẻ picture kết hợp với nhiều thẻ source để xác định hình ảnh hiển thị cho mỗi kích thước cửa sổ khác nhau.
Cách sử dụng
Ví dụ: sử dụng thẻ source kết hợp với thẻ media để thay đổi hình ảnh hiển thị khi người dùng thay đổi kích thước cửa số trình duyệt.
Bài viết này được đăng tại [kiso.vn]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Học html miễn phí tại kiso.vn</h1> <picture> <source media="(min-width: 800px)" srcset="black.jpg"> <source media="(min-width: 600px)" srcset="blue.jpg"> <img src="yellow.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html>
Kết quả với các kích thước cửa sổ:
width lớn hơn 600px:
width lớn hơn 800px:
width nhỏ hơn 600:
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chínhCách sử dụng1. Bảo vệ khỏi tấn công DoS...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chínhCách sử dụng1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng hoạt động trên Linux như một firewall được phát hành miễn phí để tăng tính bảo mật cho...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chínhCách sử dụngV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5. Bypass lỗ hổng khi trang web sử dụng đường dẫn đầy đủ Xét đoạn code php sau: <?php...
Directory traversal vulnerabilities (phần 3)
Nội dung chínhCách sử dụngV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ hổng xảy ra khi sử dụng các hàm đọc file và tin tưởng đầu vào người dùng Xét...
Directory traversal vulnerabilities (phần 2)
Nội dung chínhCách sử dụngIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ lập trình khác nhau, điểm xuất hiện các lỗ hổng Directory traversal cũng khác nhau. Lỗ hổng thường...