Inhaltsverzeichnis
figure里的多张图片
figure中放入其他元素
figure中嵌套 figure
正确使用 figcaption
你也可以在 figcaption中使用流元素
PuppySchool
Heim Web-Frontend HTML-Tutorial [HTML] 正确使用 Figure 和 Figcaption 标签(译)_html/css_WEB-ITnose

[HTML] 正确使用 Figure 和 Figcaption 标签(译)_html/css_WEB-ITnose

Jun 21, 2016 am 08:49 AM

原文: Quick Tip: The Right Way to Use Figure & Figcaption Elements

figure和 figcaption元素通常作为两个语义化的标签并一起使用。如果你没看过 这个细则,没有机会在项目中使用他们,或者不知道如何使用他们,那么这里提供一些提示以便你们正确使用。

figure标签通常用于图片元素:

<figure>  <img src="/static/imghw/default1.png"  data-src="dog.jpg"  class="lazy" alt="Maltese Terrier"></figure> 
Nach dem Login kopieren

figure标签是一种独立于上下文的单元。这意味着无论你要把它移到什么地方,都不会影响他在文档的含义。

因此,我们也要记得,并不是所有的图像都是 figure。

figure里的多张图片

你可以在 figure中放入许多 img标记如果它们和你的内容相关。

<figure>  <img src="/static/imghw/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">  <img src="/static/imghw/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">  <img src="/static/imghw/default1.png"  data-src="dog3.jpg"  class="lazy" alt="Golden Retriever"></figure> 
Nach dem Login kopieren

figure中放入其他元素

figure元素中不仅仅只能放入图片,你也可以放入以下内容:

  • 代码块,
  • 视频,
  • 音频片段,或者
  • 广告。

这里是一个 figure中放入代码块的例子:

<figure>  <pre class="brush:php;toolbar:false">    <code>      p {          color: #333;          font-family: Helvetica, sans-serif;          font-size: 1rem;      }    </code>  
Nach dem Login kopieren

figure中嵌套 figure

如果合理的话,你可以在 figure中嵌套 figure。在这里,ARIA 和 role属性的使用可以提高语义化。

<figurerole="group">  <figcaption>Dogbreeds</figcaption>  <figure>    <img src="/static/imghw/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">    <figcaption>AdorableMalteseTerrier</figcaption>  </figure>  <figure>    <img src="/static/imghw/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">    <figcaption>Cuteblacklabrador</figcaption>  </figure></figure> 
Nach dem Login kopieren

想要更多的了解如何搭配 ARIA 使用 figure和 figcaption,请看我之前写的文章 how to use ARIA effectively with HTML5。

正确使用 figcaption

figcaption标签用于说明 figure的标题或者内容。

并不是每个 figure都需要 figcaption。

但是,当使用 figcaption的时候,它应该成为 figure的开头或者最后一个 block:

<figure>  <figcaption>Threedifferentbreedsofdog.</figcaption>  <img src="/static/imghw/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">  <img src="/static/imghw/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">  <img src="/static/imghw/default1.png"  data-src="dog3.jpg"  class="lazy" alt="Golden Retriever"></figure> 
Nach dem Login kopieren

或者

<figure>  <img src="/static/imghw/default1.png"  data-src="dog1.jpg"  class="lazy" alt="Maltese Terrier">  <img src="/static/imghw/default1.png"  data-src="dog2.jpg"  class="lazy" alt="Black Labrador">  <img src="/static/imghw/default1.png"  data-src="dog3.jpg"  class="lazy" alt="Golden Retriever">  <figcaption>Threedifferentbreedsofdog.</figcaption></figure> 
Nach dem Login kopieren

你也可以在 figcaption中使用流元素

如果你希望给你的图像增加更多语义,你可以使用一些元素,比如 h1和 p。

<figure>  <img src="/static/imghw/default1.png"  data-src="dogs.jpg"  class="lazy" alt="Group photo of dogs">  <figcaption>    <h2 id="PuppySchool">PuppySchool</h2>    <p>ChampionshipClass of 2016</p>  </figcaption></figure> 
Nach dem Login kopieren

你有一些其他的关于 figure或者 figcaption的小提示么?

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt? Mar 04, 2025 pm 12:32 PM

Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu? Mar 04, 2025 pm 02:39 PM

Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Was ist der Zweck des & lt; Meter & gt; Element?

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Was ist der Zweck des & lt; datalist & gt; Element?

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Was ist der Zweck des & lt; Fortschritts & gt; Element?

See all articles