Petua Pantas: Cara yang betul untuk menggunakan Elemen Rajah & Figcaption

unsur -unsur

dan figure adalah tag HTML5 yang dipasangkan secara semantik yang sering digunakan bersama untuk meningkatkan struktur kandungan dan kebolehcapaian. Panduan ini menawarkan amalan terbaik untuk pelaksanaan yang betul. figcaption

elemen

merangkumi kandungan serba lengkap, seperti ilustrasi, coretan kod, atau gambar rajah. Penempatannya dalam dokumen itu tidak mengubah makna keseluruhan. Secara kritis, tidak setiap imej memerlukan elemen figure; hanya mereka yang merupakan unit maklumat bebas. figure

Pelbagai imej dalam angka: Pelbagai imej yang berkaitan boleh tinggal di dalam satu

elemen:

figure

<figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

Beyond Images:

elemen

tidak terhad kepada imej. Ia sesuai untuk:

figure

Blok kod

• Video
• klip audio
• Iklan
Contoh dengan blok kod:

<figure>
  <code>
    p {
      color: #333;
      font-family: Helvetica, sans-serif;
      font-size: 1rem;
    }
  </code>
</figure>

Angka bersarang:

bersarang

elemen boleh diterima apabila sesuai secara logik. Menggunakan atribut ARIA dapat meningkatkan lagi semantik:

figure

<figure role="group">
  <figcaption>Dog breeds</figcaption>
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Adorable Maltese Terrier</figcaption>
  </figure>
  <figure>
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
    <figcaption>Cute black labrador</figcaption>
  </figure>
</figure>

Penggunaan Figcaption yang berkesan:

elemen

menyediakan kapsyen atau legenda untuk

. Walaupun tidak selalu diperlukan, apabila digunakan, ia harus diletakkan sama ada sebelum atau selepas kandungan dalam figcaption: figure figure

atau:

<figure>
  <figcaption>Three different breeds of dog.</figcaption>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

<figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>Three different breeds of dog.</figcaption>
</figure>

figcaptions kaya:

untuk kapsyen yang lebih terperinci, menggabungkan tajuk dan perenggan:

<figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018848099968.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <figcaption>
    <h2>Puppy School</h2>
    <p>Championship Class of 2016</p>
  </figcaption>
</figure>

Soalan Lazim (Soalan Lazim):

Seksyen Soalan Lazim yang disediakan masih tidak berubah, kerana ia secara tepat menangani soalan -soalan umum mengenai penggunaan

dan

. Maklumat itu sudah ringkas dan berstruktur dengan baik. figure

Atas ialah kandungan terperinci Petua Pantas: Cara yang betul untuk menggunakan Elemen Rajah & Figcaption. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!