Hướng dẫn figure image css - hình ảnh css

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Dai Phong (you can also view the original English article)

Thẻ

được giới thiệu cùng với HTML5 một thời gian khá lâu trước đây, tuy vậy bạn có thể vẫn chưa quen với những gì mà nó làm, hoặc làm thế nào nó có thể được sử dụng trong rất nhiều tình huống khác nhau. Trong hướng dẫn này, bạn sẽ tìm hiểu sự khác biệt giữa thẻ
so với các thẻ khác, và làm thế nào bạn có thể bắt đầu sử dụng nó để nâng cao cách bạn nhóm các phần tử trong mã đánh dấu của bạn.

Đây là một bài hướng dẫn ở cấp độ cơ bản, nhưng cũng sẽ đóng vai trò như là một bài tham khảo hữu ích dành cho những đối tượng khác.

Trường hợp sử dụng điển hình của thẻ

Đầu tiên hãy xem những gì HTML5 Doctor đã nói về vấn đề này:

Thẻ figure trình diễn một đơn vị nội dung, có thể đi kèm với một chú thích, tự xác định nội dung của riêng nó, thường được xem như là một đơn vị độc lập khỏi dòng chảy chính của tài liệu, và có thể được di chuyển khỏi dòng chảy chính của tài liệu mà không làm ảnh hưởng đến ý nghĩa của tài liệu. -Richard Clark

Vì vậy, phần tử figure xác định nội dung của riêng nó, chẳng hạn như hình minh họa và các hình ảnh. Điều này có nghĩa rằng bạn sẽ luôn luôn sử dụng thẻ figure để chứa thứ gì đó khác.

Một trong những quan niệm sai lầm thường gặp đó là thẻ figure chỉ có thể được sử dụng cho hình ảnh. Trong thực tế, nó có thể được dùng để nhóm bất kỳ thứ gì lại nhau với nhau, gồm có, nhưng không giới hạn, hình ảnh, video, âm thanh, và các đoạn code.

Xác định cấu trúc trang

Thẻ figure là một phần riêng, có nghĩa là nó có thể cô lập nội dung của nó khỏi cấu trúc của phần tử cha. Bất cứ thứ gì bên trong thẻ figure không đóng góp vào đề cương tài liệu bên ngoài nó. Nó hoạt động như là một phần tử cấu trúc của trang và do đó có thể chứa các tiêu đề của riêng mình, bắt đầu với một

Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
1 và phân cấp xuống
Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
1,
Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
3 và vân vân, nhưng điều này không ảnh hưởng đến hệ thống phân cấp bên ngoài nó:

Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Hệ thống phân cấp trong thẻ figure không ảnh hưởng lên cấu trúc của phần tử cha.

Các phần tử như thế này thường được sử dụng để giới thiệu các nội dung bên ngoài tài liệu như trích dẫn một ví dụ.

Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
4 là một ví dụ khác về một phần tử riêng.

Hình ảnh

Dưới đây là một ví dụ điển hình về cách thẻ figure có thể được sử dụng để hiển thị một hình ảnh.

Hướng dẫn figure image css - hình ảnh css

Bây giờ, bạn có thể nghĩ, "Tại sao phải gói thẻ img của tôi trong một mã đánh dấu phụ?" Đó là một câu hỏi hợp lý, nhưng bạn sẽ hiểu một khi bạn nhận ra rằng một

có thể chứa nhiều hơn một phần tử con, chẳng hạn như một chú thích.

Cũng có một thẻ cho một chú thích, hay đúng hơn là,

Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
7. Xét đến điều này, bạn sẽ có thể sử dụng nó theo cách sau đây.

Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!

Nhiều hình ảnh

Sử dụng một loạt các phần tử

Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
8 để hiển thị hình ảnh cùng nhau cũng rất tốt, mặc dù mỗi hình ảnh riêng độc lập như là khối mã của riêng nó, hoàn toàn không liên quan đến bất kỳ cái khác. Trong trường hợp nơi mà những hình ảnh chia sẻ một mối quan hệ nào đó thì thẻ figure là vị cứu tinh. Ba hình ảnh này có liên quan và chia sẻ một bản tóm tắt duy nhất trong
Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
7.

Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Three different images, grouped together as a figure, and being captioned with figcaption.

Sử dụng
cho khối mã

Khả năng nhóm các phần tử của thẻ figure không dừng lại ở đây. Có thể bạn muốn nhóm một số code trực tiếp, cùng với một chú thích, trong hướng dẫn, ví dụ vậy, thì bạn có thể sử dụng figure

Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
7 theo cách sau đây:

Life is good, said HTML5 to XHTML.

In this code block, we see HTML5 speaking to XHTML.

figure có thể được sử dụng theo cách này với

Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Three different images, grouped together as a figure, and being captioned with figcaption.
6,
Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Three different images, grouped together as a figure, and being captioned with figcaption.
7 và
Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Hướng dẫn figure image css - hình ảnh css
Three different images, grouped together as a figure, and being captioned with figcaption.
8, giúp dễ dàng nhóm các khối code.

Tổng kết

Rất đơn giản! Bạn đã học được cách sử dụng phần tử figure, cùng với

Hướng dẫn figure image css - hình ảnh css
What's up? I am a caption!
7 và các phần tử khác để nhóm nhiều phần tử lại với nhau. Hiện bạn đang sử dụng phần tử figure như thế nào? Liệu nó có thay đổi sau khi bạn đọc hướng dẫn nhanh này? Hãy nói cho chúng tôi biết trong phần bình luận nhé!