HTML5 <footer> 태그 요소 html 하단 바닥글 CSS 레이아웃 튜토리얼-HTML 튜토리얼-php.cn

HTML5

巴扎黑

풀어 주다： 2017-06-27 09:50:12

원래의

3636명이 탐색했습니다.

HTML5

를 완전히 마스터하고 이해하려면 바닥글 CSS 레이아웃 튜토리얼을 이해하세요. 이전 html5 버전에서는 웹페이지 하단에 저작권을 표시할 때 id="footer" 또는 class="footer"를 사용하는 것이 관례였습니다. HTML 튜토리얼 태그에 대해 자세히 알아보세요!

예: 기존 html 레이아웃코드:

하지만 html5에서는 일반적으로 사용되는 "footer"라는 이름이 html5 요소 태그 멤버로 추가됩니다.

1. html5 구문 구조 - TOP

1. Grammar

2. 바닥글 요소 태그에 ID 추가

3. 바닥글 태그에 클래스 추가

> ;

4. 지식 확장
HTML5 개발에서 footer 태그를 사용할 때는 일반 div 태그처럼 취급할 수 있지만 일반적으로 웹사이트의 하단 레이아웃에 사용됩니다. 일반적으로 웹페이지에는 하단 영역이 하나만 있으므로 바닥글은 한 번만 사용하는 것이 가장 좋습니다.

참고:

2. HTML5 바닥글 사용 레이아웃 사례 - TOP

기존 div 태그 레이아웃과 바닥글 태그 레이아웃을 비교하고 관찰하여 바닥글 태그를 마스터하세요. 동시에 바닥글에 클래스를 추가하고 비교를 위해 빨간색 글꼴을 설정합니다.

1. 완전한 HTML5 레이아웃 예제 코드

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>footer 在线演示 DIVCSS5</title> 
  <style> body{text-align:center} /* 传统布局CSS */  #footer{color:#CCC; background:#630202;border-top:1px solid #871515; padding:10px 0 30px 0; width:100%}  /* HTML5布局样式 直接对footer元素设置样式 */  footer{ background:#CCC;border-top:1px solid #000; padding:10px 0 30px 0; width:100%} .color-F00{ color:#F00}  </style> 
 </head> 
 <body> 
  <p>传统html 使用div布局</p> 
  <div id="footer">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </div> 
  <p>html5 footer标签布局</p> 
  <footer>
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer> 
  <p>html5 footer标签布局设置class</p> 
  <footer class="color-F00">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer>   
 </body>
</html>

로그인 후 복사

위는 전통적인 html div 태그와 html5 바닥글 태그 레이아웃을 사용하고 바닥글에 대한 클래스도 설정합니다.

2. HTML5 레이아웃 브라우저 스크린샷

HTML5 <footer> 태그 요소 html 하단 바닥글 CSS 레이아웃 튜토리얼