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
21601 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!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage