Để có chú thích hình ảnh HTML bên dưới hình ảnh, hãy đặt phần tử sau phần tử
Trình duyệt Chrome
8+
Bờ rìa
Tất cả các
firefox
4+
I E
9+
Ô-pê-ra
11+
Cuộc đi săn
5. 1+
Hỗ trợ trình duyệt di động
Trình duyệt Chrome
Tất cả các
firefox
4+
Ô-pê-ra
11+
Cuộc đi săn
5. 1+
Chủ đề trước Chủ đề tiếp theo
Ngôn ngữ lập trình web HTML không cung cấp thẻ cụ thể để thêm chú thích vào hình ảnh. Mặc dù nó có thẻ, nhưng nó dùng để thêm nhãn vào bảng – không phải cho hình ảnh. Có hai cách để tạo hình ảnh có chú thích tách biệt với văn bản của bạn. Bạn có thể sử dụng một
thẻ, nhẹ và có khả năng tùy biến cao với CSS hoặc bạn có thể sử dụng bảng, yêu cầu nhiều mã hơn nhưng tạo kiểu cấu trúc ngay lập tức
Using a
1
Tạo thẻ div của bạn và đặt hình ảnh của bạn trong đó. Nếu bạn định sử dụng nhiều hình ảnh trên toàn bộ trang web của mình, hãy sử dụng lớp CSS. Nó có thể trông giống như thế này
2
Thêm ngắt dòng – – và nhập chú thích của bạn bên dưới hình ảnh. Đóng div. Mã HTML của bạn sẽ trông như thế này
Chú thích hình ảnh.
3
Tạo kiểu cho lớp chú thích trong CSS của bạn. Những điều cơ bản cho chú thích nên bao gồm văn bản nhỏ hơn và được căn giữa bên dưới hình ảnh, cũng như một số lề xung quanh hình ảnh để văn bản không chạy vào chú thích. Nếu bạn muốn văn bản bao quanh hình ảnh và chú thích, bạn cũng sẽ cần một dấu phẩy. Chú thích CSS của bạn có thể trông như thế này
chú thích { lề. 5px; . trung tâm; . chữ nghiêng; . 12px; . bên trái;
Sử dụng bảng
1
Start a table with one row (
) with one cell (
). Start with your image. This would look something like this:
2
Tạo một hàng khác với một ô cho chú thích của bạn và đóng bảng của bạn, như vậy
Chú thích hình ảnh.
3
Thêm một lớp vào toàn bộ bảng của bạn () hoặc vào ô chú thích của bạn (). Tùy thuộc vào việc bạn muốn chỉ tạo kiểu cho văn bản bên dưới hình ảnh hay áp dụng một kiểu cho toàn bộ bảng. Bạn sẽ áp dụng cùng một kiểu dáng CSS cho chú thích bảng như bạn làm với một
