HTML5 그림 태그는 무엇을 의미하나요? HTML5 그림 태그 사용법에 대한 자세한 설명

HTML5 그림 태그는 무엇을 의미하나요? HTML5 그림 태그를 사용하는 방법을 알고 싶으십니까? 다음으로 HTML5 그림 태그의 정의와 사용법(예제 포함)을 주로 다룬 기사를 소개하겠습니다. .

태그는 독립적인 스트림 콘텐츠(이미지, 차트, 사진, 코드 등)를 지정합니다. <그림> 요소의 내용은 주 내용과 관련이 있어야 하며, 요소의 위치는 주 내용과 독립적이어야 합니다. 제거해도 문서 흐름에 영향을 주지 않습니다.

HTML5 태그의 예:

PRC를 설명하는 문서의 하위 섹션:

<figure>
  <h1>PRC</h1>
  <p>The People&#39;s Republic of China was born in 1949...</p>
</figure>

팁: 요소 그룹에 캡션을 추가하려면

그림 요소는 요소의 조합이며 선택적으로 제목도 포함됩니다. 그림 태그는 웹사이트 제작 페이지의 독립적인 콘텐츠를 나타내는 데 사용됩니다. 웹페이지에서 이를 제거해도 웹페이지의 다른 콘텐츠에는 영향을 미치지 않습니다. 그림으로 표현되는 내용은 그림, 통계 차트, 코드 예시 등이 될 수 있습니다.

참고: Figure 요소에는 figcaption 요소가 하나만 배치될 수 있으며, 다른 요소는 무제한으로 배치될 수 있습니다.

HTML5 그림 태그의 역할:

전에 매우 흥미로운 휠을 보았습니다. JavaScript 코드를 사용하지 않고 구현된 Hover 효과는 모두 HTML + CSS였습니다. 리뷰어와 함께 소스 코드를 살펴보았습니다. 도구를 사용하여 HTML의 기본 구조는 다음과 같습니다.

<figure class="effect-julia">
  <img src="img/21.jpg" alt="img21"/>
  <figcaption>
    <h2>Passionate <span>Julia</span></h2>
    <div>
      <p>Julia dances in the deep dark</p>
      <p>She loves the smell of the ocean</p>
      <p>And dives into the morning light</p>
    </div>
    <a href="#">View more</a>
  </figcaption>         
</figure>

그리고 제가 구현한 소스 코드의 HTML 부분의 코드, 비교 예:

<div class="hover-area area-Julia">
  <img src="imgs/21.jpg" height="360" width="480">
  <h3>PASSIONATE<strong>JULIA</strong></h3>
  <ul>
    <li>Julia dances in the deep dark.</li>
    <li>She loves the smell of the ocean</li>
    <li>And dives into the morning light</li>
  </ul>
</div>

명백한 차이점은 원본 코드가 새 태그 < HTML5의 Figure> 페이지의 기본 구성에 대해서는 이번 새로운 HTML5 태그

에 대해 간략하게 설명하겠습니다.

문서의 주류와 독립적이라는 점을 공식 문서에서 언급하고 있다는 점도 언급할 만합니다. 또한 이 태그에 포함된 콘텐츠는 독립적이고 이동 가능해야 하며 주류 콘텐츠에 영향을 주지 않아야 한다는 점도 언급하고 있습니다. 그러면 위에서 언급한 설명은

와 같은 선택적 하위 태그

의 내용입니다.

이제 다시 만들 계획이었던 휠로 돌아가서, 그림의 모든 설명 내용을

태그로 묶으면 의미와 코드 구조 측면에서 더 명확해질 것이라는 사실을 발견했습니다.

HTML 4.01과 HTML 5의 차이점

태그는 HTML 5의 새로운 태그입니다.

【관련 추천】

HTML5 태그는 무엇을 의미하나요? HTML5 태그의 기본 사용법에 대한 자세한 설명

HTML5의 헤더 태그는 무엇을 의미하나요? HTML5에서 헤더 태그를 사용하는 방법을 알고 있나요?

위 내용은 HTML5 그림 태그는 무엇을 의미하나요? HTML5 그림 태그 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!