Heim >Web-Frontend >HTML-Tutorial >HTML5

HTML5
-Tag-Element, HTML-Tutorial zum CSS-Layout der unteren Fußzeile

巴扎黑Original: 2017-06-27 09:50:123600Durchsuche

HTML5 c37f8231a37e88427e62669260f0074d-Tag-Element fügt ein neues HTML5-Tag für das untere Fußzeilenelement in HTML 5 hinzu und versteht das Fußzeilen-CSS-Layout-Tutorial, um c37f8231a37e88427e62669260f0074d wirklich zu beherrschen und zu verstehen >Denken Sie daran: Als wir vor der vorherigen HTML5-Version das Urheberrecht unten auf der Webseite angegeben haben, waren wir es gewohnt, id="footer" oder class="footer" zu verwenden. Erfahren Sie mehr über HTML-Tutorial-Tags!

Zum Beispiel traditionelles

HTML-Layout

Aber in HTML5 wird dieser häufig verwendete Name „Fußzeile“ als HTML5-Element-Tag-Mitglied hinzugefügt.

html5-Syntax

-Struktur – TOP1. Grammatik

3 >

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

Hinweis: c37f8231a37e88427e62669260f0074d ist neu in HTML5 und nicht kompatibel mit IE8 und niedrigeren

IE-Browsern

, also verwenden Sie es mit Vorsicht.

2. HTML5-Fußzeilen-Nutzungslayout – TOP

Beherrschen Sie das Fußzeilen-Tag, indem Sie das traditionelle div-Tag-Layout und das Fußzeilen-Tag-Layout vergleichen und beobachten. Fügen Sie gleichzeitig der Fußzeile Klasse hinzu und legen Sie die rote Schriftart zum Vergleich fest.

1. Vollständiger HTML5-Layout-Beispielcode

Das Obige verwendet das traditionelle HTML-Div-Tag und das HTML5-Fußzeilen-Tag-Layout und legt außerdem eine Klasse für die Fußzeile fest.

2. HTML5-Layout-Browser-Screenshot

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>footer 在线演示 DIVCSS5</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">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </div> 
  <p>html5 footer标签布局</p> 
  <footer>
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer> 
  <p>html5 footer标签布局设置class</p> 
  <footer class="color-F00">
    　　&copy; DIVCSS5.COM 版权所有
   <br /> 　　学习CSS，找DIV+CSS资源上DIVCSS5! 
  </footer>   
 </body>
</html>

HTML-Code, HTML5-Fußzeilenlayout und Browser-Browsing-Effekt-Spleißdiagramm

Zum Testen erforderlich Für den Layouteffekt des HTML5-Fußzeilen-Tags müssen Sie den IE-Browser testen, der HTML5 unterstützt. Es wird empfohlen, den Test mit dem Browser Google Chrome oder dem Browser Win IE9 oder höher durchzuführen.

Das obige ist der detaillierte Inhalt vonHTML5

Stellungnahme：

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

Vorheriger Artikel：Die Verwendung des -Tags in HTMLNächster Artikel：Die Verwendung des -Tags in HTML

In Verbindung stehende Artikel

Mehr sehen

HTML5 -Tag-Element, HTML-Tutorial zum CSS-Layout der unteren Fußzeile

In Verbindung stehende Artikel

HTML5
-Tag-Element, HTML-Tutorial zum CSS-Layout der unteren Fußzeile