HTML5에서 바닥글 태그를 사용하는 방법을 알고 있나요? , HTML5의 바닥글 태그는 무엇을 의미하나요?
- 寻∝梦원래의
- 2018-08-15 15:30:5721580검색
HTML5에서 바닥글 태그를 사용하는 방법을 알고 있나요? , HTML5의 바닥글 태그는 무엇을 의미하나요? 이 문서에서는 HTML5의 바닥글 태그에 대한 정의와 구체적인 사용법, 바닥글의 표준 속성, 페이지 하단에 배치하는 간단한 구현 방법을 소개합니다.
HTML5의 바닥글 태그 정의 및 사용법:
c37f8231a37e88427e62669260f0074d 태그는 섹션이나 문서의 바닥글을 정의합니다.
일반적으로 이 요소에는 작성자 이름, 문서가 작성된 날짜 및/또는 연락처 정보가 포함됩니다.
문서에서는 여러 개의 c37f8231a37e88427e62669260f0074d 요소를 정의할 수 있습니다.
예
문서 바닥글:
<footer>This document was written in 2010</footer><!DOCTYPE HTML> <html> <body> <footer>This document was written in 2010.</footer> </body> </html>
HTML 4.01과 HTML 5의 차이점#🎜 🎜#
c37f8231a37e88427e62669260f0074d 태그는 HTML 5의 새로운 태그입니다. 팁: 바닥글을 사용하여 연락처 정보를 삽입하는 경우 바닥글 요소 내부에 208700f394e4cf40a7aa505373e0130b 요소를 사용해야 합니다.HTML 바닥글의 표준 속성:
class, contenteditable, contextmenu, dir, draggable, id, irrelevant,# 🎜🎜#lang, ref, Registrationmark, tabindex, template, title
html5 구문 구조 - TOP
1 Grammar
<</span>footer> PHP中文网<</span>br /> 学习CSS，找DIV+CSS资源上PHP中文网! </</span>footer>
2.예 footer 요소 태그에 id
<</span>footer id=”abc”> PHP中文网<</span>br /> 学习CSS，找DIV+CSS资源上PHP中文网! </</span>footer>
3을 추가합니다. class
<</span>footer class=”yanshi”> PHP中文网<</span>br /> 学习CSS，找DIV+CSS资源上PHP中文网! </</span>footer>
4를 추가합니다. Knowledge 확장
html5 개발에서 footer 태그를 사용할 때 , 그냥 일반 div 태그로 취급하지만 일반적으로 웹사이트의 하단 레이아웃에 사용됩니다. 일반적으로 웹페이지에는 하단 영역이 하나만 있으므로 바닥글은 한 번만 사용하는 것이 가장 좋습니다.
참고: HTML5의 새로운 기능이며 IE8 이하와 호환되지 않으므로 주의해서 사용하세요.
인터넷에서 페이지 하단에 간단한 구현 방법을 보고 이제 공유해봅니다
Demand: 가끔 페이지 내용이 짧을 때, 열 수 없습니다. 브라우저 높이가 높지만 바닥글이 창의 가장 낮은 끝에 있도록 하고 싶습니다.
아이디어: 바닥글의 상위 레이어의 최소 높이는 100%입니다. 바닥글의 높이는 상위 레이어의 위치를 기준으로 완전히 아래쪽(하단: 0)으로 설정됩니다. 상위 레이어에 예약되어 있습니다.
html 코드:
XML/HTML 코드 콘텐츠를 클립보드에 복사
<!-- 父层 -->
<div id="wapper">
<!-- 主要内容 -->
<div id="main-content">
</div>
<!-- 页脚 -->
<div id="footer">
</div>
</div>CSS는 다음과 같습니다.
CSS 클립보드에 내용을 코드 복사합니다
#wapper{
position: relative; /*重要！保证footer是相对于wapper位置绝对*/
height: auto; /* 保证页面能撑开浏览器高度时显示正常*/
min-height: 100% /* IE6不支持，IE6要单独配置*/
}
#footer{
position: absolute; bottombottom: 0; /* 关键 */
left:0; /* IE下一定要记得 */
height: 60px; /* footer的高度一定要是固定值*/
}
#main-content{
padding-bottom: 60px; /*重要！给footer预留的空间*/
}이때 다른 브라우저에서는 정상적으로 표시가 되지만 IE 6에서는 별도로 처리해야 합니다:
CSS 코드 내용을 클립보드에 복사 클립보드# 🎜🎜#
<!--[if IE 6]->
<style>
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/
</style>
<![endif]-->알겠습니다. 이 기사에서 제가 말씀드릴 수 있는 내용은 그게 전부입니다. 헤더에 대한 기사도 나올 예정이니 다들 클릭해서 살펴보시길 바랍니다.
【관련 추천】
HTML IMG 태그의 속성은 무엇인가요? IMG 태그 사용법 이해하기
HTML5에서 웹이란 무엇인가요? 웹 스토리지의 요소는 무엇인가요?
위 내용은 HTML5에서 바닥글 태그를 사용하는 방법을 알고 있나요? , HTML5의 바닥글 태그는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!