H5 의미 태그 실제 사례

이번에는 H5 시맨틱 태그의 실제 사례를 가져오겠습니다. H5 시맨틱 태그 사용 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

페이지 레이아웃은 html5 요소를 기반으로 합니다. 따라서 시작하기 전에 HTML5 요소에 익숙해지고 그 의미가 레이아웃에 적합한지 확인하는 것이 중요합니다.

　HTML5 구조

HTML5 코드를 작성할 때 html5의

태그를

태그로 바꾸지 않는 것이 매우 중요합니다. 때때로

요소는 의미상 여전히 좋은 선택입니다. 예를 들어 래퍼 또는 컨테이너 div

기존 div 요소를 대체하는 데 사용할 수 있는 새로운 태그 중 하나는

요소에는 페이지의 기본 탐색 메뉴

를 래핑하는 데 사용되는

요소를 배치할 수도 있습니다. 앵커를 포함하는 h1 요소는 블로그 제목입니다.

처음에는

을 사용하여 페이지 내용을 포장했지만 일부 문서를 읽은 후에 이것이 의미상 100% 정확하지 않다는 것을 느꼈습니다. 여전히 div 요소를 선택하세요.

div 요소 내에서 각 블로그 게시물은 자체 기사 요소로 래핑됩니다.

일련의 블로그 아래에는 페이지가 매겨진 한 쌍의 링크가 있습니다. 일반적으로 페이지 매김 링크의 중요성은

(기본 탐색뿐만 아니라 여러 위치에서 사용할 수 있음) 요소

와 동일하지 않습니다. 하지만 이 블로그 레이아웃은 여전히 ​​페이지 매김 링크를 기본 탐색으로 취급합니다.

요소가 수정되기 전에는 의미상 사이드바에 대한 특정 요소가 없었습니다. 그러나 이제 구문 문제에 대한 걱정 없이 side 요소를 안전하게 사용할 수 있습니다.

이 예에서 side 요소에는 여러 섹션 요소가 포함되어 있습니다. 사이드바 하단에 간단한 검색창이 있습니다. 이를 통해 HTML5 양식의 몇 가지 새로운 기능에 액세스할 수 있습니다.

그 중 하나는 자리 표시자 속성입니다.

레이아웃은 바닥글 요소로 끝납니다. 이 예에서는 바닥글 요소의 너비가 전체 페이지에 걸쳐 있도록 바닥글 요소를 div 컨테이너 외부에 배치해야 합니다.

header {
	margin: 0 0 98px 0; 
}
	
	header h1 {
		float: left; font-size: 36px;
		font-weight: normal;
	}
	
	header nav {
		float: right; text-align: right;
		padding: 6px 0 0 0;
	}
		header nav ul {
			list-style: none;
		}
			header nav li {
				float: left; font-size: 18px;
				width: 136px; margin: 0 0 0 20px;
			}
			
			header nav li:nth-child(1):before {
				content: "1. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(2):before {
				content: "2. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(3):before {
				content: "3. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(4):before {
				content: "4. ";
				color: #a2a2a2;
			}
			header nav li:nth-child(5):before {
				content: "5. ";
				color: #a2a2a2;
			}
#sidebar {
width: 292px; float: left;
padding: 4px 0 0 0;
}
#sidebar h3 {
font-size: 18px; font-weight: normal;
margin: 0 0 25px 0;
}
#sidebar ul {
list-style: none;
}
#sidebar section {
margin: 0 0 47px 0;
}
#sidebar #about a.more {
display: block; text-align: right;
}
#sidebar #categories {
width: 136px; float: left; 
margin: 0 20px 0 0;
}
#sidebar #social {
width: 136px; float: left; 
}
#footer-container {
	background: rgba(0,0,0,0.2); 
	overflow: hidden;
}
	footer {
		width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;
	}
	footer #credits {
		list-style: none; float: left; 
		}			
		footer #credits li {
			float: left; margin: 0 6px 0 0;
		}
			footer #credits li.wordpress a {
				display: block; width: 20px; height: 20px;
				background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;
			}
			footer #credits li.spoongraphics a {
				display: block; width: 25px; height: 20px;
				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
			}
				
		footer #back-top {
			float: right; font-size: 12px;
		}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5에서 드래그 앤 드롭 효과를 만드는 방법

H5를 사용하여 카메라를 호출하는 방법

H5와 호환되지 않는 이전 버전의 브라우저를 처리하는 방법 정보 그리고 C3

위 내용은 H5 의미 태그 실제 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!