目录
如何使用 HTML 图形标签?
实现 HTML 图标记的示例
示例#1
Example #3
Conclusion
Recommended Article
首页 web前端 html教程 HTML 图形标签

HTML 图形标签

Sep 04, 2024 pm 04:24 PM
html html5 HTML Tutorial HTML Properties HTML tags

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.我们使用了

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

将可选地出现在 html 文档和网页中,它可以在 html
之前或之后使用。标签规格。只有一个
元素将用在
的内部。元素;此外,它还嵌套了一些其他子标签元素,例如 HTML 图形标签等等,将在中多次使用元素。

实现 HTML 图标记的示例

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

示例#1

代码:


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

登录后复制

输出:

HTML 图形标签

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:

HTML 图形标签

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:

HTML 图形标签

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

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中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML 中的表格边框 HTML 中的表格边框 Sep 04, 2024 pm 04:49 PM

HTML 表格边框指南。在这里,我们以 HTML 中的表格边框为例,讨论定义表格边框的多种方法。

HTML 中的嵌套表 HTML 中的嵌套表 Sep 04, 2024 pm 04:49 PM

这是 HTML 中嵌套表的指南。这里我们讨论如何在表中创建表以及相应的示例。

HTML 左边距 HTML 左边距 Sep 04, 2024 pm 04:48 PM

HTML 左边距指南。在这里,我们讨论 HTML margin-left 的简要概述及其示例及其代码实现。

HTML 表格布局 HTML 表格布局 Sep 04, 2024 pm 04:54 PM

HTML 表格布局指南。在这里,我们详细讨论 HTML 表格布局的值以及示例和输出。

HTML 输入占位符 HTML 输入占位符 Sep 04, 2024 pm 04:54 PM

HTML 输入占位符指南。在这里,我们讨论 HTML 输入占位符的示例以及代码和输出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在这里我们还分别讨论了 HTML 有序列表和类型的介绍以及它们的示例

HTML onclick 按钮 HTML onclick 按钮 Sep 04, 2024 pm 04:49 PM

HTML onclick 按钮指南。这里我们分别讨论它们的介绍、工作原理、示例以及各个事件中的onclick事件。

在 HTML 中移动文本 在 HTML 中移动文本 Sep 04, 2024 pm 04:45 PM

HTML 中的文本移动指南。在这里我们讨论一下marquee标签如何使用语法和实现示例。

See all articles