💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Hiển thị hình ảnh
📌
Kết luận
Hiển thị hình ảnh bằng <img src="URL" alt="Mô tả">
📝 Mã thực tế tại đây
<img src="https://placehold.co/200x100" alt="Ảnh mẫu">Thẻ img có gì đặc biệt?
Thẻ<img> khác với các thẻ như <h1> hay <p> ở chỗ nó **không có thẻ đóng**. Nó được gọi là thẻ tự đóng.
| Thuộc tính | Ý nghĩa | Vai trò |
|---|---|---|
src | Source | Địa chỉ (URL) của hình ảnh |
alt | Alternative | Văn bản thay thế (hiển thị khi ảnh lỗi hoặc cho người khiếm thị) |
Tại sao thuộc tính alt lại quan trọng?
alt không chỉ dành cho trường hợp ảnh bị lỗi không tải được. Nó còn cực kỳ quan trọng cho "khả năng truy cập" (accessibility). Các phần mềm đọc màn hình cho người khiếm thị sẽ đọc nội dung trong alt để họ hiểu được bức ảnh đó vẽ gì. Vì vậy, đừng bao giờ quên thuộc tính này nhé.
Lưu ý về kích thước ảnh
Ảnh quá lớn sẽ khiến trang web tải chậm. Bạn nên tối ưu hóa kích thước hình ảnh trước khi đưa lên web. Bạn có thể sử dụng [Công cụ nén ảnh](/vi/tools/image-compress/) của chúng tôi để làm điều này một cách dễ dàng.Tổng kết
- Dùng thẻ<img> để hiển thị hình ảnh
- Thẻ <img> không có thẻ đóng
- src là địa chỉ ảnh, alt là phần mô tả bắt buộc
Hãy thử trong phần bài tập
Hãy thử hiển thị hình ảnh từ địa chỉ https://placehold.co/200x100 với mô tả là "Ảnh mẫu" nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Hãy hiển thị hình ảnh từ địa chỉ https://placehold.co/200x100. Đặt thuộc tính alt là 'Ảnh mẫu'.
Gợi ý khi gặp khó khăn
Sử dụng thẻ img. Thẻ này bắt buộc phải có thuộc tính src và alt.