HTML5_html5 튜토리얼 기술의 div, 기사 및 섹션의 차이점 및 사용법 소개

WBOY
풀어 주다: 2016-05-16 15:48:56
원래의
1827명이 탐색했습니다.

최근에 html5를 배우고 있는데, 일부 태그가 바뀌어서 조금 불편한 느낌이 듭니다. 특히 3개의 태그 div와 섹션 기사를 확인하고 웹페이지 레이아웃을 html5와 css3로 사용해 보았습니다. 아래는 여러분의 참고를 위해 방금 마련한 간단한 웹 페이지입니다. 먼저 살펴보고 최소한 html5의 구조에 대해 알아보세요.

div

HTML 사양: "div 요소는 전혀 특별한 의미가 없습니다."

이 태그는 우리가 보고 사용하는 태그입니다. 대부분의 라벨입니다. 그 자체로는 의미가 없으며 레이아웃과 스타일 또는 스크립팅을 위한 후크로 사용됩니다.

section
HTML 사양: “섹션 요소는 문서 또는 애플리케이션의 일반적인 섹션을 나타냅니다. 이 맥락에서 섹션은 일반적으로 다음과 같은 주제별 콘텐츠 그룹입니다.

div의 의미와 반대로 간단히 말하면 section은 의미를 갖는 div이지만 실제로는 그렇게 간단하다고 생각하지 않습니다. 섹션은 일반적으로 제목이 있는 주제별 콘텐츠를 나타냅니다. 이것을 보면 블로그 게시물이나 별도의 댓글에서 섹션을 사용하면 된다고 생각할 수도 있습니다. 계속 읽어보세요:

“저자는 요소의 내용을 배포하는 것이 타당할 경우 섹션 요소 대신 기사 요소를 사용하는 것이 좋습니다. 관련이 있는 경우 섹션을 대체하기 위해 기사를 사용해야 합니다.

그럼 섹션은 언제 사용해야 할까요? 그런 다음 다음을 보십시오.

“섹션의 예로는 장, 탭 대화 상자의 다양한 탭 페이지 또는 웹 사이트의 홈 페이지를 소개를 위한 섹션으로 나눌 수 있습니다. 뉴스 항목 및 연락처 정보.”

일반적인 적용 시나리오에는 기사의 장, 태그 대화 상자의 탭 또는 논문의 번호가 매겨진 섹션이 포함됩니다. 웹사이트의 홈페이지는 소개, 뉴스, 연락처 정보 등의 섹션으로 나눌 수 있습니다. 사실 저는 여기서 전달되는 정보에 매우 관심이 많습니다. 왜냐하면 아래에 소개할 섹션과 기사가 모듈형 애플리케이션에 더 적합하다고 생각하기 때문입니다. 이 주제는 향후 특별 기사에서 논의될 것이므로 여기서는 건너뛰겠습니다. 지금은.

W3C에서는 다음과 같이 경고합니다.

“섹션 요소는 스타일 지정 목적이나 스크립팅 편의를 위해 요소가 필요한 경우 작성자가 사용하는 것이 좋습니다. 대신 div 요소를 사용하세요. 섹션 요소는 요소의 내용이 문서 개요에 명시적으로 나열되는 경우에만 적합합니다."

섹션은 단순한 컨테이너 태그 그 이상입니다. 태그가 단지 스타일을 지정하거나 스크립팅을 용이하게 하기 위한 것인 경우 div를 사용해야 합니다. 일반적으로 섹션은 요소의 콘텐츠가 문서 개요에 명시적으로 나타날 때 적합합니다.


article
HTML 사양: “article 요소는 문서, 페이지, 애플리케이션 또는 사이트에서 독립적인 구성을 나타내며 원칙적으로 독립적으로 배포하거나 재사용할 수 있습니다. , 예를 들어 신디케이션에서.”
article은 섹션보다 더 명확한 의미를 가지며 관련 콘텐츠의 독립적이고 완전한 블록을 나타내는 특수 섹션 태그입니다. 일반적으로 기사에는 제목 섹션(보통 머리글에 포함됨)이 있고 바닥글이 있는 경우도 있습니다. 섹션은 주제별 콘텐츠이기도 하지만 기사 자체는 구조와 콘텐츠 측면에서 독립적이고 완전합니다.

HTML 사양에는 기사에 적용 가능한 몇 가지 시나리오가 나열되어 있습니다. "포럼 게시물, 잡지나 신문 기사, 블로그 항목, 사용자가 제출한 댓글, 대화형 위젯이나 가젯 또는 기타 독립적인 콘텐츠 항목이 될 수 있습니다.

기사가 삽입된 경우." 기사 내부 기사의 내용은 외부 기사의 내용과 연관되는 것을 원칙으로 합니다. 예를 들어, 블로그 게시물에서 사용자가 제출한 댓글이 포함된 기사는 포함된 블로그 게시물 기사 내에 숨겨야 합니다.

질문은 무엇이 "완전한 독립 콘텐츠"로 간주되는가 하는 것입니다. 가장 쉽게 알 수 있는 방법 중 하나는 RSS 피드에서 콘텐츠가 완전한지 확인하는 것입니다. 콘텐츠가 맥락 없이 완전하고 독립적인지 확인하세요.

예:

html 페이지:



코드 복사코드는 다음과 같습니다. 다음:





初学html5
















<섹션>


HTML5 CSS3 웹페이지



고통 자체가 중요하기 때문에 엘리트비바무스 코칭을 추진하게 되었고 이를 목표로 삼았습니다. 마이케나스는 그 발효를 싫어합니다. 이 수업은 Hymenaean 프로젝트를 통해 결혼을 통해 해안으로 향하는 조용한 파트너에게 적합합니다. Fusce sagittis porta mauris, 법 집행 기관의 화살에 두려움을 두는 것이 중요합니다. 하지만 의료진에게는 통증 완화가 필요합니다. 풀비나르 때까지. 그러나 그것은 나쁜 생각이며, 그렇게 알려져 왔습니다. 배는 무서워요, 임신이 중요해요, 큰 술이에요. 우리는 살고 있고 지금 이야기하고 있습니다. 고객은 매우 중요합니다. 고객은 고객을 따릅니다. 누군가에게는 조금. 결과에 대한 책임은 울트리시티 회원에게 있습니다. 재스민 소스 내 에로스. 집 다음에는 부동산 차량이 뒤따를 것입니다. 춥거나 컸어요.


목록 항목 시연

















<제쳐두고>


< 그런 식으로 저자는 단지 국은 그 어느 때보 다 완벽합니다. Aenean vulputate interdum ague, sed dapibus mi ultricies conballis. 이제부터 채팅도 해보고, 안되면 꾸며보세요. 항상 레이어를 투자합니다. 내일은 eu nibh lorem 하지만 의료진의 생명을 걱정하고 미워하는 것이 중요합니다. 그는 부자가 아니며 엘레펜드하기가 매우 쉽습니다. Maecenas는 축구가 타겟이 되지 않고 재미있기를 원합니다. 완전 부드러워서 기분이 좋아집니다. 모든 사람이 재산을 관리해야 합니다. 아이들의 슬픔의 아이들의 삶. 고객은 매우 중요합니다. 고객은 고객을 따릅니다. 그러나 캠페인의 과정은 울람코퍼의 계곡이 될 것입니다. 인생이 커지기 전까지는 수영장도 없고 뒷마당도 없습니다. 이환의 경우 발열 자체나 침상의 경과가 아닌 궤양을 관리하는 것이 중요합니다. 샐러드에 들어가지도 않을 때까지. 보기 흉하지 않다면 이제 누가 인생의 직업을 가지겠습니까.





<바닥글>
&복사; 저작권 Dave Woods 2009




css 페이지:


코드 복사

@charset "utf-8";
/* CSS 문서 */
#container{
너비: 840px;
여백: 20px 자동;
배경:#fff;
패딩:30px;
오버플로:숨김;
}
/*--------------- 헤더 ---*/
#main-navigation {
border-bottom:5px solid #666;
}
#main-navigation ul{
overflow:hidden;
폭:100%;
목록 스타일:없음;
글꼴 크기:1.6em;
}
#main-navigation li{
float:left;
}
#main-navigation li a{
배경:#999;
여백: 0 5px 0 0;
패딩:5px 30px;
디스플레이:블록;
색상:#fff;
텍스트 장식:없음;
}
#main-navigation li.current a{
배경:#666;
}
#main-navigation li a:hover{
배경:#777;
}
/*--------------- 기사 -------------- ----------*/
기사{
너비:100%;
오버플로:숨김;
}
섹션{
float:left;
폭:500px;
}
/*---------------기사 -------------- ----------*/
옆으로{
float:right;
폭:310px;
}
/*--------------- 기사 -------------- ----------*/
바닥글{
너비:840px;
여백:20px 자동;
글꼴 크기:1.4em;
텍스트 정렬:가운데;
}

总结:
div 섹션 기사 ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用 作样式화화자脚本性钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文, 作为完整的独立存에서 一段内容,则就适用 기사。原则上来说,能使用 기사的时候,也是可以使사용 섹션 的,但是实际上,假如使사용 기사 更合适,那么就不要使use 섹션 。nav 및 제쳐두고 的使用也是如此,这两个标签也是特殊的 섹션, 使사용 nav 및 제쳐두고 更合适的情况下, 也不要使use 섹션 了.

对于 div 와 section, 기사 以及其他标签的区分比较简单.对于 섹션 과 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能작품은 包含的内容也 ​​섹션에 있습니다.能算作独立的一块,但是它只能算是组成整体的一分,기사 才是一个完整的整体.

最后附上我的首个html5页face源码:http://xiazai.jb51.net/201308/yuanma/demoh5_jb51.net.rar
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿