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”之类的属性，这些属性的行为会有所不同，当每个html 文档中figure 标签中使用的属性。

4.figure 标签还将用于内容属性的事件处理机制；它接受特定事件处理程序的特定属性。特定属性和事件处理程序的名称将相同。最常用的是 html 元素功能及其特性的范围。借助特定的事件属性内容，它告诉用户浏览器运行特定的脚本，例如JavaScript。一般来说，JavaScript 需要插入双引号内。

5.我们使用了

;与

相同的标签元素HTML 中的元素，但这两个标签之间有一些区别。如果网页中显示的html内容只是用来简单的与网页相关，但在网站中不是必须的，我们可以使用

标签，但html内容是必不可少的，它在网页中的位置不被视为网站的主要目的，我们可以使用

;标签。所以根据用户的需求，我们可以同时使用这两个标签，从用户的角度来看会更方便。

6. 如果假设我们使用横幅广告人物标签之类的图像在这种情况下没有帮助，我们可以使用 ;标签作为 html 中预定义标签元素的替代源。通常，

将可选地出现在 html 文档和网页中，它可以在 html

之前或之后使用。标签规格。只有一个

元素将用在

的内部。元素;此外，它还嵌套了一些其他子标签元素，例如 等等，将在中多次使用元素。

实现 HTML 图标记的示例

以下是 HTML 图形标签的示例：

示例#1

代码：

<figure>
<img src="/static/imghwm/default1.png" data-src="TEst.jpg" class="lazy" alt="HTML 图形标签"   style="max-width:90%">
</figure>

输出：

Example #2

Code:

<figure>
<img src="/static/imghwm/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/imghwm/default1.png" data-src="TEst.jpg" class="lazy" alt="HTML 图形标签"   style="max-width:90%">
<img src="/static/imghwm/default1.png" data-src="Test1.jpg" class="lazy" alt="HTML 图形标签"   style="max-width:90%">
<img src="/static/imghwm/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中文网其他相关文章！