>  기사  >  웹 프론트엔드  >  HTML 그림 태그

HTML 그림 태그

WBOY
WBOY원래의
2024-09-04 16:24:27670검색

Html은 웹사이트를 강조하기 위해 많은 태그에 사용되며, 각 태그에는 HTML 사전 정의 요소의 고유한 기능과 특수성이 있습니다. 또한 html 태그 중 하나는 html 요소를 차단하는 데 사용되며 웹 페이지의 사용자 콘텐츠 공간 영역을 분리하는 데 사용되며 다른 html 탐색 웹 페이지의 영향을 받지 않습니다. 주로 웹 페이지에서 이미지, 동영상, 일부 사용자 웹 콘텐츠의 공간을 분리하는 데 사용됩니다. 대부분의 웹사이트에서 사용되며 프런트 엔드 개발자가 코드 문제를 식별하는 데 사용됩니다.

구문:

의 구문 태그는 맞춤 태그처럼 사용할 HTML 사전 정의 태그와 동일합니다.


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

위 코드는 HTML 문서에서 Figure 태그를 사용하고 있음을 보여줍니다. 우리는 이미지, 비디오, 애니메이션 등을 사용할 것입니다. 사용자 요구사항에 따라 웹페이지를 제작하고 디자인해 드립니다.

HTML 그림 태그는 어떻게 사용하나요?

1. HTML에서 그림 태그는 주로 개별 HTML 콘텐츠에 대한 독립적인 초점을 나타냅니다. 이는 웹 사이트를 만드는 데 사용되며 이미지 캡션과 같은 초점 옵션으로 더 많은 잠재력을 발휘합니다. , 비디오, 애니메이션 등이 웹사이트에 있습니다. 이러한 것들이 집중되어 있으며

을 사용하여 웹페이지에 표시하는 데 사용됩니다. HTML 요소. 무화과 캡션은 텍스트와 사진 등의 내용을 모두 캡처하는 데 사용되며, 비디오 형식은 웹 페이지 문서의 단일 단위로 참조됩니다.

2. 사용자 요구 사항과 매력적인 기능을 기반으로 한 html 문서에는 이미지, 비디오 등을 사용했습니다. 웹 페이지의 일부 코드 스니펫에는 일러스트레이션, 다이어그램, 플로차트도 사용할 수 있습니다. 이는 또한 html 문서의 주요 애플리케이션 흐름과 함께 참조되며 html 탐색의 주요 흐름에 영향을 주지 않고 색인, 부록 등과 같은 웹 페이지에 있는 문서의 다른 부분으로 이동합니다. figcaption 옵션에서 요소는 부모-자식 관계에 노드를 삽입하는 데 사용됩니다. 노드는 또한 문서의 첫 번째와 마지막 하위 항목을 사용하여 삽입합니다.

3. 이 요소는 HTML 내용이 문서의 주요 흐름에 영향을 받지 않는 모든 문서 영역에 대해 마크업을 사용하는 모든 접속사를 사용하도록 의도되었습니다. html 흐름 콘텐츠의 위치는 html 기본 작업 흐름과 무관합니다. 태그는 html 요소의 기본 동작과 함께 html 문서의 일부 특정 속성을 허용합니다. "accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hided, id, itemid, itemprop, itemref, itemscope, itemtype, lang, 맞춤법 검사, 스타일, tabindex, title, 번역"과 같은 속성 동작은 각각의 경우에 따라 달라집니다. 그림 태그 내의 HTML 문서에 사용되는 속성.

4. Figure 태그는 콘텐츠 속성에 대한 이벤트 핸들러 메커니즘에도 사용됩니다. 특정 이벤트 핸들러의 특정 속성을 허용합니다. 특정 속성과 이벤트 핸들러의 이름은 동일합니다. html 요소의 함수와 특징의 범위로 가장 많이 사용됩니다. 특정 이벤트 속성 콘텐츠의 도움으로 사용자 브라우저가 JavaScript와 같은 특정 스크립트로 실행되도록 알려줍니다. 일반적으로 자바스크립트는 큰따옴표 안에 삽입해야 합니다.

5.

6. 배너 광고 그림 태그와 같은 이미지를 사용하는 것이 도움이 되지 않을 경우 HTML 그림 태그 html 사전 정의 태그 요소에 대체 소스로 태그를 추가합니다. 일반적으로

html
태그 사양.
요소는
내부에 사용됩니다. 요소; 또한 중첩되어 있고 HTML 그림 태그와 같은 다른 하위 태그 요소도 있습니다. 등은 요소.

HTML 그림태그 구현 예시

다음은 HTML 그림 태그의 예입니다.

예시 #1

코드:


<figure>
<img src="TEst.jpg" alt="HTML 그림 태그"   style="max-width:90%">
</figure>

출력:

HTML 그림 태그

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:

HTML 그림 태그

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:

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으로 문의하세요.
이전 기사:HTML의 옵션 태그다음 기사:HTML의 옵션 태그