简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

HTML5에서 바닥글 태그를 사용하는 방법을 알고 있나요? , HTML5의 바닥글 태그는 무엇을 의미하나요?

寻∝梦
풀어 주다： 2018-08-15 15:30:57
원래의
21564명이 탐색했습니다.

HTML5에서 바닥글 태그를 사용하는 방법을 알고 있나요? , HTML5의 바닥글 태그는 무엇을 의미하나요? 이 문서에서는 HTML5의 바닥글 태그에 대한 정의와 구체적인 사용법, 바닥글의 표준 속성, 페이지 하단에 배치하는 간단한 구현 방법을 소개합니다.

HTML5의 바닥글 태그 정의 및 사용법:

태그는 섹션이나 문서의 바닥글을 정의합니다.

일반적으로 이 요소에는 작성자 이름, 문서가 작성된 날짜 및/또는 연락처 정보가 포함됩니다.

문서에서는 여러 개의

요소를 정의할 수 있습니다.

예

문서 바닥글: 

<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의 차이점#🎜 🎜#

태그는 HTML 5의 새로운 태그입니다.

팁: 바닥글을 사용하여 연락처 정보를 삽입하는 경우 바닥글 요소 내부에
요소를 사용해야 합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
HTML5中footer标签 HTML5中footer置于页面最底部的一种简单方法
원천：php.cn
이전 기사：HTML5의 섹션 태그란 무엇입니까? HTML5에서 섹션 태그를 중앙에 배치하는 방법은 무엇입니까? 다음 기사：HTML5의 hgroup은 무엇을 합니까? HTML5에서 hgroup 태그의 구체적인 사용법은 여기를 클릭하여 살펴보세요.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
SQL Count()에도 0이 필요합니다. 테이블이 하나만 있고 0으로 시작하는 태그의 각 항목을 계산하고 싶습니다. 이제 다음을 시도합니다. SELECT tag,COUNT(start)ASAnzahl,us...
에서 2024-04-06 19:48:53
0
1
449
흰색으로 설정된 HR 태그가 반투명한 이유는 무엇입니까? 나는 HTML(부트스트랩 포함)과 CSS를 가지고 있습니다. 내 HTML에는 클래스가 있는 <hr> 태그가 있고 CSS에는 테두리 스타일이 있습니다. ...
에서 2024-04-06 16:13:26
0
1
500
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
고정 위치의 자식이 부모의 패딩을 무시함 고정 요소가 헤더 뒤로 이동하는 것을 방지하는 방법은 무엇입니까? 현재 코드 조각은 상위 항목에 padding-top을 사용합니다. 또한 추가 하위 항목에 mar...
에서 2024-04-06 11:42:51
0
1
338
웹 사이트 페이지에서 로컬에 설치된 라이브러리 사용 Windows 운영 체제용으로 작성되고 최신 브라우저의 system32에 등록된 라이브러리(.dll, .ocx)를 사용하여 사이트 작업 및 계산 논리의 일부 기능...
에서 2024-04-05 00:15:49
0
1
3563
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！