Figure는 html5의 새로운 태그인가요?-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

Figure는 html5의 새로운 태그인가요?

青灯夜游

May 18, 2022 pm 04:21 PM

htmlhtml5

그림은 새로운 태그입니다. Figure는 이미지, 차트, 사진 등과 같은 독립적인 흐름 콘텐츠를 지정하는 데 사용되는 HTML5의 새로운 의미 태그입니다. Figure의 콘텐츠는 일반적으로 기본 콘텐츠와 관련되어 있으며 요소의 위치는 독립적입니다. 네, 삭제해도 웹페이지의 다른 콘텐츠에는 영향을 미치지 않습니다.

Figure는 html5의 새로운 태그인가요?

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

는 HTML 5에 추가된 새로운 의미 태그인 HTML 5의 새로운 태그입니다.

은 독립적인 스트림 콘텐츠(이미지, 차트, 사진, 코드 등)를 지정하는 데 사용됩니다.

그림의 콘텐츠는 일반적으로 메인 콘텐츠와 관련이 있지만 요소의 위치는 메인 콘텐츠와 독립적입니다. 삭제된 경우 문서 흐름에 영향을 주어서는 안 됩니다. 즉, 그림이 삭제된 경우 웹 페이지의 다른 콘텐츠에 영향을 미치지 않습니다.

참고:

요소 내용의 개요는 문서의 주요 개요에서 제외됩니다.
요소는
요소와 함께 사용할 수 있습니다.

요소는
요소의 제목을 정의하는 데 사용됩니다.

요소에 제목을 연결하려면(첫 번째 또는 마지막 하위 요소로)

그림 및 figcaption 태그 사용의 이점

그림을 검색하면 그림, 차트, 사진, 코드 및 기타 미디어가 여기에 저장되어 있다는 것을 알게 될 것이며 기사 및 기타 물건이 여기에 저장되어 있다고 생각하지 않을 것입니다. 검색 엔진은 검색을 더 빠르고 편리하게 만듭니다.

반면에 프로그래머들은 이 라벨을 보면 여기에 존재하는 것이 읽기 쉬운 그림과 기타 매체라는 것을 알게 될 것입니다.

Figure는 html5의 새로운 태그인가요?

예:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>figure和 figcaption元素的使用</title>
	</head>
	<body>
		<p>被称作“第四代体育馆”的“鸟巢”国家体育场是 2008年北京奥运会的标志性建筑，它位于北京北四环边，包含在奥林匹克国家森林公园之中。占地面积 20.4万平方米，总建筑面积 25.8万平方米，拥有
			9.1万个固定座位，内设餐厅、运动员休息室、更衣室等。2008年奥运会期间，承担开幕式、闭幕式、田径比赛、男子足球决赛等赛事活动。</p>
		<figure>
			　 <figcaption>北京鸟巢</figcaption>
			　 <p>拍摄者：XXXX，拍摄时间：2020 年 09 月</p>
			　 <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/image/618/758/942/1652861905236705.png?x-oss-process=image/resize,p_40"  class="lazy"   alt="">
			　</figure>
	</body>

</html>

Figure는 html5의 새로운 태그인가요?

(학습 동영상 공유: html 동영상 튜토리얼, 웹 프론트엔드)

위 내용은 Figure는 html5의 새로운 태그인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS : 같은 DOM에서 여러 ID를 사용할 수 있습니까?May 14, 2025 am 12:20 AM

아니요, 당신은 uplemultipleidsinthesamedom.1) idsmustbeuniqueperhtmlspecification, andusingduplicatescancauseSconsistentBrowserBehavior.2) useclassesforstylingmultipleelements, attributesectorscendats eftibutes 및 descenderfortrecture

HTML5의 목표 :보다 강력하고 액세스 가능한 웹 생성May 14, 2025 am 12:18 AM

html5aimstoenhancewebcapabilities, MakingItmoredynamic, Interactive, and Accessible.1) itsupportsmultimediaelementslikeand, 2) SemanticlementsImpreveAcessibilityandCodeReardability.3) 특징적인 부대, 응답 Whebappl

HTML5의 중요한 목표 : 웹 개발 및 사용자 경험 향상May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelopmentandusereerexperiencetroughsemanticstructure, multimediaintegration 및 performanceimprovements

html5 : 안전합니까?May 14, 2025 am 12:15 AM

html5isnotinherentlyinsecure, buttsfeaturescanleadtosecurityRiskSifMisusedOrimProperSimplemented.1) USETHETSANDTRIFICEINIFRAMESTOCONTROLEMEDEDEDENDENDENDENDENDENDENDENDENDENTANDENTANDERVULNERABILITIESLIKECLIKEJACKINGINITIONSLIKECLIKETHOING.2) 피난처에 대한 비난을 피하십시오

이전 HTML 버전과 비교할 때 HTML5 목표May 14, 2025 am 12:14 AM

html5aimedtoenhanceWebDevelopmentByIntrictionmanticalLiticalEmentements, nativeMultiMediasupport, 개선 된 정보 및 및 플린 컨테이션, html4andxhtml.1) itintructed -temantictagsiver ,, 개선 부양

CSS : ID 선택기를 사용하는 것이 좋지 않습니까?May 13, 2025 am 12:14 AM

ID 선택기를 사용하는 것은 본질적으로 CSS에서 나쁘지 않지만주의해서 사용해야합니다. 1) ID 선택기는 고유 한 요소 또는 JavaScript 후크에 적합합니다. 2) 일반적인 스타일의 경우 클래스 선택기가보다 유연하고 유지 관리 가능하므로 사용해야합니다. ID 및 클래스 사용의 균형을 유지함으로써보다 강력하고 효율적인 CSS 아키텍처를 구현할 수 있습니다.

HTML5 : 2024 년 목표May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONERFINEMENTANDENDEND 및 최적화, NOTNEWFEATURES.1) 최적화 된 렌더링을 향상시킵니다

HTML5가 개선하려고했던 주요 영역은 무엇입니까?May 13, 2025 am 12:12 AM

html5aimedtoimprovewebdevelopmentinfourkeyareas : 1) Multimediasupport, 2) Semantictructure, 3) Formcapabilities, 및 4) OfflineandStorageOptions.1) Html5intrudceDandlements, Simplifying MediaembeddingandenUsereXperxpercepence.2) NewSmanticallementalmentalmentementlementmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentmentalments

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.