HTML5에서 태그 요소를 사용하는 방법
H5에
HTML5
이전에 했던 일을 기억하세요. HTML5 버전 이전에는 웹 페이지 하단에 저작권을 배치할 때 id="footer" 또는 class="footer"를 사용하는 것이 관례였습니다. HTML 튜토리얼 태그에 대해 자세히 알아보세요!
예를 들어 전통적인 html 레이아웃코드:
<div id=”footer”> 学习PHP，上www.php.cn! </div>
그러나 html5에서는 일반적으로 사용되는 "바닥글"이라는 이름이 html5 요소 태그 멤버로 추가됩니다.
html5 구문구조
1. 구문
<footer>
第一行
学习PHP，上www.php.cn!
</footer>2. 바닥글 태그에 ID 추가
<footer id=”abc”>
第一行
学习PHP，上www.php.cn!
</footer>3. 바닥글 태그에 클래스 추가
<footer class=”yanshi”>
第一行
学习PHP，上www.php.cn!
</footer>4. html5 개발에서는 그냥 일반 div 태그로 취급하지만 일반적으로 웹사이트의 하단 레이아웃에 사용됩니다. 일반적으로 웹페이지에는 하단 영역이 하나만 있으므로 바닥글은 한 번만 사용하는 것이 가장 좋습니다.
참고:
IE 브라우저와 호환되지 않으므로 주의해서 사용하세요. tml5 바닥글 사용 레이아웃 사례
기존 div 태그 레이아웃과 바닥글 태그 레이아웃을 비교하고 관찰하여 바닥글 태그를 마스터하세요. 동시에 바닥글에 클래스를 추가하고 비교를 위해 빨간색 글꼴을 설정합니다.
1. 완전한 HTML5 레이아웃 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>footer </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">
第一行
学习PHP，上www.php.cn!
</div>
<p>html5 footer标签布局</p>
<footer>
第一行
学习PHP，上www.php.cn!
</footer>
<p>html5 footer标签布局设置class</p>
<footer class="color-F00">
第一行
学习PHP，上www.php.cn!
</footer>
</body>
</html>위는 기존의 html div 태그와 html5 바닥글 태그 레이아웃을 사용하고 바닥글에 대한 클래스도 설정합니다.
이것이
위 내용은 HTML5에서 태그 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7569
15
1386
52
87
11
61
19
28
107
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
