HTML 圖形標籤

Html 用於許多標記來突出顯示網站，每個標記都有自己的功能和 html 預定義元素的特殊性。 還有一個html標籤是用來遮蔽html元素的，用來分隔網頁上使用者內容的空間區域，不受其他html導航網頁的影響。主要用於分隔網頁上的圖像、影片和一些使用者網頁內容的空間。它用於大多數網站，供前端開發人員識別程式碼問題。

文法：

的語法標籤與它將使用的 html 預定義標籤相同，例如自訂標籤。

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

上面的程式碼顯示，我們在html文件中使用了figure標籤；我們將使用圖像、影片或動畫等；根據使用者的需求，我們將建立和設計網頁。

如何使用 HTML 圖形標籤？

1. 在HTML 中，figure 標籤主要代表對各個html 內容的獨立焦點，它將用於創建網站，並且透過焦點選項（如圖像標題）發揮更大的潛力網站中的內容、影片和動畫。這些東西都是有焦點的，是用

來顯示在網頁中的。 html 元素。 Figcaption用於擷取文字和圖片等內容，影片格式以網頁文件的單一單元表示。

2.基於使用者需求和有吸引力的功能的html文件我們使用圖像、視訊等。我們也可以在網頁中使用插圖、圖表、流程圖和一些程式碼片段；它還被html 文件的主要應用流程引用，它將移動到網頁中文件的另一部分，如索引、附錄等，而不影響html導航的主要流程。在figcaption選項中，該元素將用於插入父子關係中的節點；節點也使用文件的第一個和最後一個子節點進行插入。

3. 此元素旨在與所有文件區域使用標記的所有連詞一起使用，html 內容不受文件主要流程的影響。 html 流程內容的位置獨立於 html 主流程。 標籤將接受 html 文件的一些特定屬性以及 html 元素的預設行為。諸如“accesskey、c​​lass、contenteditable、contextmenu、dir、draggable、dropzone、hidden、id、itemid、itemprop、itemref、itemscope、itemtype、lang、拼字檢查、樣式、tabindex、title、translate”之類的屬性，這些屬性的行為會有所不同，當每個在figure標籤內的html文件中使用的屬性。

4.figure 標籤也將用於內容屬性的事件處理機制；它接受特定事件處理程序的特定屬性。特定屬性和事件處理程序的名稱將相同。最常用的是 html 元素功能及其特性的範圍。使用特定的事件屬性內容，它告訴使用者瀏覽器執行特定的腳本，例如JavaScript。一般來說，JavaScript 需要插入雙引號內。

5.我們使用了

;與

相同的標籤元素HTML 中的元素，但這兩個標籤之間有一些區別。如果網頁中顯示的html內容只是用來簡單的與網頁相關，但在網站中不是必須的，我們可以使用

標籤，但html內容是必不可少的，它在網頁中的位置不被視為網站的主要目的，我們可以使用

;標籤。所以根據使用者的需求，我們可以同時使用這兩個標籤，從使用者的角度來看會比較方便。

6. 如果假設我們使用橫幅廣告人物標籤之類的圖像在這種情況下沒有幫助，我們可以使用 ;標籤作為 html 中預定義標籤元素的替代來源。通常，

將可選地出現在 html 文件和網頁中，它可以在 html

之前或之後使用。標籤規格。只有一個

元素會用在

的內部。元素;此外，它還嵌套了一些其他子標籤元素，例如 等等，將在中多次使用元素。

實作 HTML 圖標記的範例

以下是 HTML 圖形標籤的範例：

範例#1

代碼：

<figure>
<img src="TEst.jpg" alt="HTML 圖形標籤"   style="max-width:90%">
</figure>

輸出：

Example #2

Code:

<figure>
<img src="TEst.jpg" 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="TEst.jpg" alt="HTML 圖形標籤"   style="max-width:90%">
<img src="Test1.jpg" alt="HTML 圖形標籤"   style="max-width:90%">
<img src="Test2.jpg" 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中文網其他相關文章！