HTML5 시맨틱 태그 실행 정보(블로그 페이지)

HTML5+CSS3을 사용하여 블로그 페이지를 만들어 보세요. 전체적인 효과 레이아웃은 다음과 같습니다.



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

　HTML5 구조



HTML5 코드를 작성할 때 단순히 html5 ;section> 태그에

태그를 사용하지 않는 것이 매우 중요합니다. 대신에.

의미상 여전히

요소가 좋은 선택인 경우가 있습니다. 예를 들어 래퍼 또는 컨테이너 p

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

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

를 래핑하는 데 사용되는

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



처음에는

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

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



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

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

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

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

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

그 중 하나가 placeholder 속성입니다.



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




위 HTML5 시맨틱 태그 실천에 관한 글(블로그 페이지)은 모두 편집자가 공유한 내용입니다. PHP 중국어 넷(www.php.cn)!