html5 레이아웃 예제

Sem imagem cadastrada

당신이 볼 수 있듯이, 나는 단지 폭을 변경하여

  • 및 소셜 블록에 대한 1 열 레이아웃을 부동하여 블로그 롤 블록에 대한 3 열 레이아웃을하고 있습니다. 이것은 이미 그 자체로 아주 잘 작동하지만 나를 귀찮게하는 한 가지가 있습니다. 각 링크를 분리하기 위해 추가 한 테두리 : 나는 단지 구조가 잘못된 http://www.iandevlin.com/blog/2013/01/html5/the-main-element 기사 대신 기사를 사용해야한다고 설명하는 기사를 보았습니다! 섹션은 기사 내부에 위치해야 합니다. http://html5doctor.com이 (놀랍게도 일반적인) 예제에 대한 몇 가지 좋은 기사가 시각적 레이아웃을 복제합니다. 무의미한 것보다 더 나쁜 것은 페이지에 하나의 주제와 3 개의 하위 주제가 아닌 4 개의 다른 주제가 포함되어 있음을 나타냅니다. 기계에 오해의 소지가 있는 정보를 명시적으로 제공하면 컴퓨터에 부정적인 영향을 미칩니다. 섹션 특성은 아티클을 포함하기 위한 것이 아니며, 그 외의 경우도 있습니다. 이 예제를 참조하십시오: 헤더, 바닥글, 탐색 및 main: 가장 중요한 요소가 있는 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article 초간단한 예제를 참조하십시오. 참고: 모든 브라우저가 문자 인코딩을 올바르게 읽도록 하려면 전체 문자 인코딩 선언이 문서의 처음 512자 내에 포함되어야 합니다. 또한 예제 사이트에서 다음의 요소와 같은 모든 콘텐츠 기반 요소 앞에 나타나야 합니다. 흠……</p> <p>그것은 그렇게 명확하지 않다, 그것은? 고려: http://www.turtleblog.co.uk/2011/04/whats-new-to-html5/ 이것은 html5doctor가 말하는 것과 일치하지 않는 것처럼 보입니다. 아티클 태그는 섹션 태그를 사용하는 위치에 사용해야 하며 그 반대의 경우도 마찬가지입니다. 의심스러운 경우 스펙을 참조하십시오: https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element https://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element Elements는 다른 요소를 중첩할 수 있습니다. 예를 들어, 아티클에는 고유한<br /> <header> <footer>(위에서<br /> <h1>볼 수 있음) 및<br /> <nav>(앵커 링크)가 좋은 예입니다. 나는이 `슈퍼 중첩`의 그림을 제공하지 않은, 그리고 그에 대한 이유가있다: 이것은 SEO 블로그이며, SEO 관점에서, 지금까지 의미 HTML5의 논리를 밀어에서 진정한 이점은 없다. 문서 및 섹션은 초보자입니다 – p a와 h1은 이전 (기초?) 요소의 안정성을 반영하는 동안 주변되었습니다 예를 들어: 스타일 시트 헤더 {너비에 태그 {너비:940px; 여백:자동; 패딩:0;} 다음은 비 의미 체계 HTML 요소의 예입니다. 콘텐츠가 표시되는 방법을 브라우저에 전달하는 소유자로만 사용할 수 있습니다. 페이지에 포함된 콘텐츠가 수행하는 역할에 대한 정보는 제공하지 않습니다. 이 줄에서 HTML5는 이전 구문과 거의 다릅니다.</p> <p>페이지 제목(머리 내부의 유일한 필수 요소)은 항상 동일하게 선언되며, 포함된 메타 태그는 이러한 태그가 배치될 위치를 나타내는 선택적 예일 뿐입니다. 당신은 당신이 원하는만큼 여기에 유효한 메타 요소를 넣을 수 있습니다. CSS 그리드 레이아웃 모듈은 행과 열이 있는 그리드 기반 레이아웃 시스템을 제공하므로 플로트 및 위치를 사용하지 않고도 웹 페이지를 보다 쉽게 디자인할 수 있습니다. </p> </div><!--/.entry-content --> </div><!--/.page-body --> </div><!--/.page-hold --> </div><!--/.page-page --> <div class="site-finish"> <div class="finish"> <div class="finish-container container"> <a class="btn-more btn-link btn" href="#topo"> <span class="icon fa fa-chevron-circle-up" aria-hidden="true"></span> <span class="text">Voltar ao topo</span> </a><!--/.btn-more --> <a class="btn-home btn-link btn" href="http://trocandosaberes.com.br/"> <span class="icon fa fa-home" aria-hidden="true"></span> <span class="text">Página inicial</span> </a><!--/.btn-home --> </div><!--/.finish-container --> </div><!--/.finish --> </div><!--/.site-finish --> </div><!--/.site-mainer --> <div class="site-footer"> <div class="footer" id="footer" role="contentinfo"> <div class="footer-container container"> <nav class="footer-sitemap" id="footer-sitemap" role="navigation"> <div class="nav-pills nav"></div> </nav><!--/.footer-sitemap --> <div class="footer-partner"> <span class="partner-txt">Apoio</span> <a class="partner-img skip-external" href="http://ihf.com.br/" title="Instituto Helena Florisbal"> <img src="http://trocandosaberes.com.br/wp-content/themes/ts2016/dist/images/logotipo-ihf.png" alt="Logotipo do Instituto Helena Florisbal" /></a> </div><!--/.footer-partner --> <div class="footer-copyright"> <span class="cp">© 2019 Trocando Saberes. Fundação Dorina Nowill para Cegos.</span> <span class="rg">Todos os direitos reservados.</span> <span class="by"><a cass="by-link" href="http://espiralinterativa.com/?utm_source="> Produzido por Espiral Interativa. </a></span><!--/.by --> </div><!--/.footer-copyright --> <div class="footer-stamps"> <a class="skip-external" href="http://www.w3.org/WAI/WCAG2AAA-Conformance"> <img src="http://www.w3.org/WAI/wcag2AA" alt="Nível de conformidade triplo A, W3C WAI 2.0"></a> </div><!--/.footer-stamps --> </div><!--/.footer-container --> </div><!--/.footer --> </div><!--/.site-footer --> </div><!--/.site --> <div class="site-modal modal fade" id="site-modal" tabindex="-1" role="dialog" aria-labelledby="lbl-site-modal" aria-hidden="true"> <div class="site-modal-dialogs modal-dialog"> <div class="site-modal-content modal-content"> <div class="site-modal-head modal-head"> <button type="button" class="modal-close close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h2 class="modal-title" id="lbl-site-modal"></h2> </div><!--/.site-modal-head --> <div class="site-modal-body modal-body"> </div><!--/.site-modal-body --> <div class="site-modal-feet modal-feet"> <button type="button" class="btn-default btn" data-dismiss="modal"> Fechar</button> </div><!--/.site-modal-feet --> </div><!--/.site-modal-content --> </div><!--/.site-modal-dialogs --> </div><!--/.site-modal --> <script type='text/javascript' src='http://trocandosaberes.com.br/wp-content/themes/ts2016/dist/scripts/main-357379ebc3.js'></script> <script type='text/javascript' src='http://trocandosaberes.com.br/wp-includes/js/wp-embed.min.js?ver=4.5.19'></script> </body> </html>