Rumah hujung hadapan web html tutorial html5标签figure、figcaption的区别比较

html5标签figure、figcaption的区别比较

Jun 27, 2017 am 09:38 AM
h5 html5 Label

定义和用法

标签定义 figure 元素的标题(caption)。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

浏览器支持

所有主流浏览器都支持

标签。

HTML 4.01 与 HTML 5 之间的差异

标签是 HTML 5 中的新标签。

figure、figcaption,这俩个标签都是定义图文的

常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:


  •   

    title


  • 而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。

    figure标签规定独立的流内容(图像、图表、照片、代码)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    figcaption 标签定义 figure 元素的标题。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。 

    那么上面的代码就变成了:

    <figure>
    <figcaption>title</figcaption>
    <img src="test.jpg"  />
    </figure>
    Salin selepas log masuk

    Atas ialah kandungan terperinci html5标签figure、figcaption的区别比较. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    Video Face Swap

    Video Face Swap

    Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

    Artikel Panas

    <🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja
    3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Nordhold: Sistem Fusion, dijelaskan
    3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
    Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut
    3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    Notepad++7.3.1

    Notepad++7.3.1

    Editor kod yang mudah digunakan dan percuma

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan

    Hantar Studio 13.0.1

    Hantar Studio 13.0.1

    Persekitaran pembangunan bersepadu PHP yang berkuasa

    Dreamweaver CS6

    Dreamweaver CS6

    Alat pembangunan web visual

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    Topik panas

    Tutorial Java
    1666
    14
    Tutorial PHP
    1273
    29
    Tutorial C#
    1252
    24
    Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

    Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

    Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

    Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

    HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

    Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

    Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

    Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

    Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

    Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

    Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

    Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

    Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

    Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

    Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

    Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

    See all articles