recherche

Maison >interface Web >tutoriel HTML >Utilisez des balises sémantiques pour écrire votre HTML compatible avec IE6,7,8_HTML/Xhtml_Webpage Production

Utilisez des balises sémantiques pour écrire votre HTML compatible avec IE6,7,8_HTML/Xhtml_Webpage Production

WBOY
WBOYoriginal
2016-05-16 16:36:131631parcourir

HTML5 ajoute plus de balises sémantiques, comme l'en-tête, le pied de page, la navigation... N'ayons plus besoin d'utiliser la méthode suivante pour mettre en page la page lors de sa rédaction :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <div class="en-tête" >Voici la têtediv>
  2. <div class="contenu" >Il s'agit de la zone de contenu intermédiairediv>
  3. <div class="pied de page" >C'est le bas div>

Et vous pouvez le disposer de cette façon :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. <en-tête>Voici l'en-têteen-tête>
  2. <contenu>C'est la zone de contenu intermédiairecontenu>
  3. <pied de page>C'est le bas pied de page> 

Mais IE ne prend pas en charge forward, donc si nous voulons qu'il prenne en charge IE6, 7 et 8, nous devons ajouter un peu de code en js et css, comme suit :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. document.createElement("en-tête");
  2. document.createElement("content");
  3. document.createElement("pied de page");

css :

en-tête, contenu, pied de page{display:block}

Ce qui précède signifie personnaliser une balise comme en-tête et la configurer pour bloquer l'affichage. Le code complet est joint ci-dessous :

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >
  2. <html>
  3. <tête>
  4. <méta charset="utf- 8"> 
  5. <titre>Utilisez des balises sémantiques pour écrire votre HTML, compatible avec IE6,7, 8 titre>
  6. <style> 
  7. *{margin:0;padding:0;}
  8. en-tête, contenu, pied de page{display:block}
  9. en-tête{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
  10. contenu{width:600px;height:250px;line-height:250px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
  11. pied de page{width:600px;height:150px;line-height:150px;border:1px solid #000;margin:10px auto;text-align:center;font-size:24px}
  12. style>
  13. <script type="texte/ javascript"> 
  14. document.createElement("en-tête");
  15. document.createElement("content");
  16. document.createElement("pied de page");
  17. script>
  18. tête>
  20. <corps>
  21. <en-tête>Voici l'en-têteen-tête>
  22. <contenu>C'est la zone de contenu intermédiairecontenu>
  23. <pied de page>C'est le bas pied de page>
  24. corps>
  25. html>

Parlons de quelque chose sans rapport. Pourquoi avons-nous besoin d'écrire du HTML de manière sémantique ?

Tout d'abord, le code est facile à lire. Lorsque d'autres personnes examinent votre code, ils peuvent le comprendre en un coup d'œil ; deuxièmement, il est avantageux pour les robots des moteurs de recherche d'ignorer en grande partie le balisage utilisé pour les performances et uniquement. se concentrer sur le balisage sémantique.

Alors dépêchez-vous et commencez à écrire votre HTML avec des balises sémantiques. En plus, ce n’est pas difficile, non ?

Annexe 1 :

L'article ci-dessus utilise des balises sémantiques pour écrire votre HTML et est compatible avec IE6, 7 et 8. C'est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous prendrez en charge Script. Maison.

Adresse originale : http://www.cnblogs.com/shouce/p/5385701.html

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：Explication détaillée de l'utilisation des balises de titre et des balises de paragraphe dans la production de pages XHTML_HTML/Xhtml_WebArticle suivant：Explication détaillée de l'utilisation des balises de titre et des balises de paragraphe dans la production de pages XHTML_HTML/Xhtml_Web

Articles Liés

Voir plus