HTML図タグ

HTML は Web サイトを強調表示するための多くのタグに使用されており、各タグには HTML 定義済み要素の独自の機能と専門性があります。 また、HTML タグの 1 つは HTML 要素をブロックするために使用され、他の HTML ナビゲーション Web ページの影響を受けない Web ページ上のユーザー コンテンツのスペース領域を分離するために使用されます。主に、Web ページ上の画像、ビデオ、および一部のユーザー Web コンテンツ用のスペースを分離するために使用されます。これはほとんどの Web サイトで使用されており、フロントエンド開発者がコードの問題を特定するために使用されます。

構文:

の構文tag は、カスタム タグなど、使用する HTML の事前定義タグと同じです。

<figure>
----some presentation codes like image,videos and animations inserted-----
</figure>

上記のコードが示すように、HTML ドキュメント内で Figure タグを使用しています。画像、ビデオ、アニメーションなどを使用します。ユーザーの要件に基づいて、Web ページを作成およびデザインします。

HTMLのFigureタグの使い方

1. HTML では、figure タグは主に個々の HTML コンテンツに対する自己完結型のフォーカスを表します。これは Web サイトの作成に使用され、画像のキャプションなどのフォーカス オプションでさらに多くの可能性が得られます。 、Web サイト内のビデオ、アニメーションなど。これらに焦点を当て、

を使用して Web ページ内に表示するために使用されます。 html要素。 figcaption はテキストと画像の両方のコンテンツをキャプチャするために使用され、ビデオ形式は Web ページドキュメントの単一ユニットで参照されます。

2. ユーザーの要件と魅力的な機能に基づいた HTML ドキュメントには、画像、ビデオなどを使用しました。また、イラスト、図、フローチャート、Web ページの一部のコード スニペットを使用することもできます。また、HTML ドキュメントのメイン アプリケーション フローでも参照され、HTML ナビゲーションのメイン フローに影響を与えることなく、インデックス、付録などの Web ページ内のドキュメントの別の部分に移動します。 figcaption オプションでは、要素は親子関係にノードを挿入するために使用されます。ノードもドキュメントの最初と最後の子を使用して挿入します。

3. この要素は、HTML コンテンツがドキュメントのメイン フローの影響を受けないすべてのドキュメント領域に対してマークアップを使用するすべての接続詞を使用することを目的としています。 HTML フロー コンテンツの位置は、HTML メイン ワークフローから独立しています。 タグは、HTML 要素のデフォルトの動作で HTML ドキュメントのいくつかの特定の属性を受け入れます。 「accesskey、c​​lass、contenteditable、contextmenu、dir、draggable、dropzone、hidden、id、itemid、itemprop、itemref、itemscope、itemtype、lang、spellcheck、style、tabindex、title、translate」などの属性これらの属性の動作は、それぞれの場合に異なります。 HTML ドキュメントの Figure タグ内で使用される属性。

4. Figure タグは、コンテンツ属性のイベント ハンドラー メカニズムにも使用されます。特定のイベント ハンドラーの特定の属性を受け入れます。特定の属性とイベント ハンドラーの名前は両方とも同じになります。これは、HTML 要素の関数とその機能の範囲として最も一般的に使用されます。特定のイベント属性の内容を利用して、ユーザーのブラウザが JavaScript などの特定のスクリプトで実行されるように指示します。通常、JavaScript は二重引用符内に挿入する必要があります。

5.

を使用しました。

と同じタグ要素要素は HTML に含まれますが、これら 2 つのタグにはいくつかの違いがあります。 HTML コンテンツが Web ページに表示される場合、Web ページに単に関連するために使用されますが、Web サイトでは必須ではありません。

を使用できます。 タグを使用できますが、HTML コンテンツは不可欠です。Web ページの位置は Web サイトの主な目的とはみなされません。 を使用できます。タグ。したがって、ユーザーの要件に基づいて両方のタグを使用でき、ユーザーの観点からはより便利になります。

6.

バナー広告のような画像を使用するとします。その状況では図タグは役に立ちません。 を使用できます。タグを HTML の事前定義タグ要素の代替ソースとして使用します。通常、

オプションで HTML ドキュメントや Web ページに含めることができ、HTML

の前後で使用できます。タグ仕様。

は 1 つだけです。要素は

の内部で使用されます。要素;また、ネストされており、 のような他の子タグ要素も含まれています。などは、 内で複数回使用されます。要素。

HTML Figure タグの実装例

以下は HTML Figure タグの例です:

例 #1

コード:

<figure>
<img src="/static/imghw/default1.png" data-src="TEst.jpg" class="lazy" alt="HTML図タグ"   style="max-width:90%">
</figure>

出力:

Example #2

Code:

<figure>
<img src="/static/imghw/default1.png" data-src="TEst.jpg" class="lazy" alt="HTML図タグ"   style="max-width:90%">
<figcaption>Welcoe To My Domain <a href="https://pixabay.com/images/search/nature/">Welcome User</a></figcaption>
</figure>

Output:

Example #3

Code:

<figure>
<img src="/static/imghw/default1.png" data-src="TEst.jpg" class="lazy" alt="HTML図タグ"   style="max-width:90%">
<img src="/static/imghw/default1.png" data-src="Test1.jpg" class="lazy" alt="HTML図タグ"   style="max-width:90%">
<img src="/static/imghw/default1.png" data-src="Test2.jpg" class="lazy" alt="HTML図タグ"   style="max-width:90%">
<figcaption><marquee>Welcome To My Domain</marquee></figcaption>
<button type="buttton" onclick="alert('Good Day')">Welcome User</button>
</figure>

Output:

The above examples will see the figure tag usage of the html web pages in the different ways we can see the first example is normally the figure tag element is used in the html body with some fixed-width length it will show the output as fixed-format of images second example same as first, but additionally multiple img tags are used with their attributes. The final example we use with the additional alert menu when we click the button is fully undercover the user impressive methodology but based on the user requirements, we can add the additional feature whomever we use our web page frequently for the business impacts. Not only javascript, we can use some other front end scripts; also, it will support the javascript libraries like jqueries, Reactjs, etc.

Conclusion

We can use most of the html tags on the web page for user impressive and attractive mode of the business. Even though we have many possibilities in the

tag element, when we compared it to the other tags like the

element, it is mostly used with some features and advantages rather than the other similar tags. It also supports the browser compatibility mode and html5 version.

Recommended Article

This is a guide to HTML figure Tag. Here we discuss the Introduction to HTML figure Tag and its Examples along with Code Implementation and Output. you can also go through our suggested articles to learn more –

1. Span Tag in HTML
2. SUP Tag in HTML
3. div Tag in HTML
4. Canvas Tag in HTML

以上がHTML図タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。