简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

Wissen Sie, wie man das Footer-Tag in HTML5 verwendet? , was bedeutet das Footer-Tag in HTML5?

寻∝梦
Freigeben： 2018-08-15 15:30:57
Original
21565 Leute haben es durchsucht

Wissen Sie, wie man das Footer-Tag in HTML5 verwendet? , was bedeutet das Footer-Tag in HTML5? In diesem Artikel werden Ihnen die Definition und spezifische Verwendung des Fußzeilen-Tags in HTML5 sowie die Standardattribute in der Fußzeile und die einfache Implementierungsmethode für die Platzierung am Ende der Seite vorgestellt.

Die Definition und Verwendung des Fußzeilen-Tags in HTML5:

definiert die Fußzeile eines Abschnitts oder Dokuments.

Normalerweise enthält dieses Element den Namen des Autors, das Datum, an dem das Dokument erstellt wurde, und/oder Kontaktinformationen.

In einem Dokument können mehrere

Beispiel

Dokumentfußzeile: 

<footer>This document was written in 2010</footer><!DOCTYPE HTML>
<html>
<body>
<footer>This document was written in 2010.</footer>
</body>
</html>
Nach dem Login kopieren

Unterschiede zwischen HTML 4.01 und HTML 5

Tags sind neue Tags in HTML 5.

Tipp: Wenn Sie eine Fußzeile zum Einfügen von Kontaktinformationen verwenden, sollten Sie das Element

verwenden.

Standardattribute der Fußzeile in HTML:

Klasse, Inhalt editierbar, Kontextmenü, Verzeichnis, ziehbar, ID, irrelevant,

Sprache, Referenz, Registrierungszeichen , Tabindex, Vorlage, Titel

HTML5-Syntaxstruktur – TOP

1. Fügen Sie id

<</span>footer> 
　　PHP中文网<</span>br /> 
　　学习CSS，找DIV+CSS资源上PHP中文网! 
</</span>footer>
Nach dem Login kopieren

3 zum Fußzeilenelement-Tag hinzu . Fügen Sie die Klasse 

<</span>footer id=”abc”> 
　　PHP中文网<</span>br /> 
　　学习CSS，找DIV+CSS资源上PHP中文网! 
</</span>footer>
Nach dem Login kopieren

zum Fußzeilen-Tag hinzu. 4. Wissenserweiterung

Wenn wir das Fußzeilen-Tag in der HTML5-Entwicklung verwenden, können wir es wie ein gewöhnliches div-Tag behandeln, es wird jedoch im Allgemeinen für verwendet das untere Layout der Website. Im Allgemeinen hat eine Webseite nur einen unteren Bereich, daher ist es am besten, die Fußzeile nur einmal zu verwenden.

Hinweis: Es ist neu in HTML5 und nicht mit IE8 und niedriger kompatibel. Verwenden Sie es daher mit Vorsicht.

Ich habe unten auf der Seite im Internet eine einfache Implementierungsmethode gesehen und teile sie jetzt mit Ihnen

Anforderung: Manchmal, wenn der Seiteninhalt kurz ist und die Höhe nicht unterstützen kann des Browsers, aber ich hoffe, dass die Fußzeile am unteren Ende des Fensters sein kann.

Idee: Die Mindesthöhe der übergeordneten Ebene der Fußzeile beträgt 100 %. Die Höhe der Fußzeile muss absolut unten sein (unten: 0). in der übergeordneten Ebene.

HTML-Code:

XML/HTML-Code Inhalt in Zwischenablage kopieren

<</span>footer class=”yanshi”> 
　　PHP中文网<</span>br /> 
　　学习CSS，找DIV+CSS资源上PHP中文网! 
</</span>footer>
Nach dem Login kopieren

CSS lautet wie folgt:

CSS-Code Inhalt in Zwischenablage kopieren

<!-- 父层 -->     
<div id="wapper">     
    <!-- 主要内容 -->     
    <div id="main-content">     
    </div>     
    <!-- 页脚 -->     
    <div id="footer">     
    </div>     
</div>
Nach dem Login kopieren

Zu diesem Zeitpunkt können andere Browser normal angezeigt werden, aber IE 6 muss separat verarbeitet werden:

CSS-Code kopiert den Inhalt in die Zwischenablage

#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预留的空间*/     
}
Nach dem Login kopieren

Okay, dieser Artikel Das ist alles Ich möchte es dir sagen. Der Artikel zum Header wird auch veröffentlicht, ich hoffe, dass jeder reinklickt und reinschaut.


[Verwandte Empfehlungen]

Was sind die Attribute des HTML-IMG-Tags? Verstehen Sie die Verwendung des IMG-Tags


Was ist Web in HTML5? Was sind die Elemente im Webspeicher?

Das obige ist der detaillierte Inhalt vonWissen Sie, wie man das Footer-Tag in HTML5 verwendet? , was bedeutet das Footer-Tag in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
HTML5中footer标签 HTML5中footer置于页面最底部的一种简单方法
Quelle：php.cn
Vorheriger Artikel：Was ist das Abschnitts-Tag in HTML5? Wie zentriere ich das Abschnitts-Tag in HTML5? Nächster Artikel：Was macht hgroup in HTML5? Die spezifische Verwendung des hgroup-Tags in HTML5 finden Sie hier.
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
SQL Count() erfordert ebenfalls 0 Ich habe nur eine Tabelle und möchte jeden Eintrag eines Tags zählen, der mit 0 beginnt. J...
Aus 2024-04-06 19:48:53
0
1
449
Warum ist mein HR-Tag durchscheinend, wenn es auf die einfarbige Farbe Weiß eingestellt ist? Ich habe ein HTML (mit Bootstrap) und ein CSS, in meinem HTML habe ich ein <hr>-Tag,...
Aus 2024-04-06 16:13:26
0
1
500
Wie kann ich dafür sorgen, dass mein Bild auf der Hauptanzeige der Seite erscheint? Ich möchte einige Fotos über NASAAPI erhalten. Diese Fotos werden dann im Miniaturbild und...
Aus 2024-04-06 15:33:12
0
1
433
Die Polsterung des Elternteils wird vom klebrig positionierten Kind ignoriert Wie kann verhindert werden, dass klebrige Elemente hinter den Header gelangen? Das aktuell...
Aus 2024-04-06 11:42:51
0
1
338
Verwenden Sie lokal installierte Bibliotheken auf Website-Seiten Ist es möglich, Bibliotheken (.dll, .ocx), die für Windows-Betriebssysteme geschrieben und...
Aus 2024-04-05 00:15:49
0
1
3563
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！