Figure は HTML5 の新しいタグですか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Figure は HTML5 の新しいタグですか?

青灯夜游

May 18, 2022 pm 04:21 PM

html html5

figure は新しいタグです。 Figure は HTML5 の新しいセマンティックタグで、画像、チャート、写真などの独立したフローコンテンツを指定するために使用されます。Figure のコンテンツは通常、メインコンテンツに関連しており、要素の位置はメインコンテンツから独立しています。はい、削除しても、Web ページ内の他のコンテンツには影響しません。

Figure は HTML5 の新しいタグですか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

は HTML 5 の新しいタグであり、html5 に追加された新しいセマンティックタグです。

は、独立したストリームコンテンツ (画像、チャート、写真、コードなど) を指定するために使用されます。

図の内容は通常、メインの内容に関連しており、要素の位置はメインの内容から独立しています。削除してもドキュメントフローには影響しません。つまり、図が削除されても、Web ページ内の他のコンテンツには影響しません。

注:

要素コンテンツの概要は、文書の主要な概要から除外されます。
要素は
要素と一緒に使用できます。

要素は、
要素のタイトルを定義するために使用されます。

を
要素に挿入して、タイトルをそれに関連付けます (最初または最後の子要素として)

Figure タグと figcaption タグを使用する利点

検索エンジンが Figure を検索すると、写真、図表、写真、コード、その他のメディアがここに保存されていることがわかります。ここに保存されているのは記事やその他のものだと考えてください。検索エンジンを使用すると、検索がより速く、より便利になります。

一方、プログラマがこのラベルを見ると、ここに存在するのは読みやすい画像やその他のメディアであることがわかります。

Figure は HTML5 の新しいタグですか?

例:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>figure和 figcaption元素的使用</title>
	</head>
	<body>
		<p>被称作“第四代体育馆”的“鸟巢”国家体育场是 2008年北京奥运会的标志性建筑，它位于北京北四环边，包含在奥林匹克国家森林公园之中。占地面积 20.4万平方米，总建筑面积 25.8万平方米，拥有
			9.1万个固定座位，内设餐厅、运动员休息室、更衣室等。2008年奥运会期间，承担开幕式、闭幕式、田径比赛、男子足球决赛等赛事活动。</p>
		<figure>
			　 <figcaption>北京鸟巢</figcaption>
			　 <p>拍摄者：XXXX，拍摄时间：2020 年 09 月</p>
			　 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/618/758/942/1652861905236705.png"  class="lazy"   alt="">
			　</figure>
	</body>

</html>

ログイン後にコピー

Figure は HTML5 の新しいタグですか?