[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>
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>
figure中放入其他元素
figure元素中不仅仅只能放入图片,你也可以放入以下内容:
- 代码块,
- 视频,
- 音频片段,或者
- 广告。
这里是一个 figure中放入代码块的例子:
<figure> <pre class="brush:php;toolbar:false"> <code> p { color: #333; font-family: Helvetica, sans-serif; font-size: 1rem; } </code>
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>
想要更多的了解如何搭配 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>
或者
<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>
你也可以在 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>
你有一些其他的关于 figure或者 figcaption的小提示么?

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

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?

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?

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 ist der Zweck des & lt; datalist & gt; Element?

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