html5 새로운 태그 그림, 그림 캡션 응용 프로그램 예제

Wulin.com의 기사 소개 (www.vevb.com) : 원래 두 기사에서 그림과 그림을 설명하고 싶었지만이 두 레이블은 그림과 텍스트를 정의하여 모두가 함께 설명 할 수 있습니다.

XHTML 및 HTML을 작성할 때 사람들은 종종 사진 목록, 그림 + 제목 또는 그림 + 제목 + 간단한 설명을 사용합니다. 이전의 기존 글쓰기 :

<li>

<img src = /> <p> 제목 < /p>

</li>

HTML5에서 새로운 태그는 이미지 목록, 즉 그림 태그를보다 의미 적으로 정의 할 수 있습니다.

W3C에 의해 제공된 정의 : 그림 태그는 독립적 인 스트리밍 컨텐츠 (이미지, 차트, 사진, 코드 등)를 지정합니다. 그림 요소의 내용은 기본 내용과 관련되어야하지만 삭제되면 문서 흐름에 영향을 미치지 않아야합니다.

예제 코드 :

<그림>

Huangpu 강의 루푸 다리 </p>

<img src = shanghai_lupu_bridge.jpg 너비 = 350 높이 = 234 />

</그림>

그림은 원래 li 태그를 교체하는 데 사용되며 누가 p 태그를 대체 할 것인가? 대답은 : Figcaption입니다

W3C에 의해 할당 된 정의 : Figcaption 태그는 그림 요소의 제목 (캡션)을 정의합니다. 그림 요소는 그림 요소의 첫 번째 또는 마지막 자식 요소의 위치에 배치해야합니다.

위의 코드는 다음과 같습니다.

<그림>

Huangpu 강의 루푸 다리 </figcaption>

<img src = shanghai_lupu_bridge.jpg 너비 = 350 높이 = 234 />

</그림>