Maison > Article > interface Web > HTML5

HTML5
élément de balise html pied de page inférieur tutoriel de mise en page CSS

巴扎黑original: 2017-06-27 09:50:123496parcourir

L'élément de balise HTML5

Rappelez-vous Lorsque nous indiquions les droits d'auteur en bas de la page Web avant la version HTML5 précédente, nous avions l'habitude d'utiliser id="footer" ou class="footer". Apprenez-en davantage sur les balises du didacticiel HTML !

Par exemple,

mise en page HTML traditionnelleCode :

Mais en html5, ce nom couramment utilisé de "pied de page" est ajouté en tant que membre de balise d'élément html5.

syntaxe HTML5 - TOP

1. Grammaire

Pour apprendre le CSS, recherchez les ressources DIV+CSS sur DIVCSS5 !

2 Ajoutez un identifiant à la balise de l'élément de pied de page

3. >

< ;footer class=”yanshi”> © DIVCSS5.COM Tous droits réservés
Pour apprendre le CSS, recherchez les ressources DIV+CSS sur DIVCSS5 ! 🎜> 4. Expansion des connaissances

Lorsque nous utilisons la balise footer dans le développement HTML5, nous pouvons la traiter comme une balise div ordinaire, mais elle est généralement utilisée pour la mise en page inférieure du site Web. Généralement, une page Web ne comporte qu’une seule zone inférieure. Il est donc préférable de n’utiliser le pied de page qu’une seule fois.

Remarque :

navigateur IE

, utilisez-le donc avec prudence.

2. Cas de disposition d'utilisation du pied de page HTML5 - TOP

Maîtrisez la balise de pied de page en comparant et en observant la disposition traditionnelle des balises div et la disposition des balises de pied de page. En même temps, ajoutez une classe au pied de page et définissez la police rouge à des fins de comparaison.

1. Exemple de code de mise en page HTML5 complet

Ce qui précède utilise la balise html div traditionnelle et la mise en page de la balise de pied de page html5, et définit également la classe pour le pied de page.

2. Capture d'écran du navigateur de mise en page HTML5

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

Disposition du pied de page HTML5 du code HTML et diagramme d'épissage de l'effet de navigation du navigateur

HTML5 <footer> élément de balise html pied de page inférieur tutoriel de mise en page CSS Obligatoire pour tester Pour l'effet de mise en page de la balise de pied de page html5, vous devez tester le navigateur IE qui prend en charge HTML5. Il est recommandé de tester avec le navigateur Google Chrome ou le navigateur Win IE9 ou supérieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：L'utilisation de la balise en HTMLArticle suivant：L'utilisation de la balise en HTML

Articles Liés

Voir plus

HTML5 élément de balise html pied de page inférieur tutoriel de mise en page CSS

Articles Liés

HTML5
élément de balise html pied de page inférieur tutoriel de mise en page CSS