Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

HTML5 fügt weitere semantische Tags hinzu, wie etwa Kopf- und Fußzeile, Navigation usw., sodass wir beim Schreiben von Seiten nicht mehr die folgende Methode zum Layouten verwenden müssen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < div   class = "header" > Dies ist der Header </ div >   
  2. < div   class = "content" > Dies ist der mittlere Inhaltsbereich </ div >   
  3. < div   class = "footer" > Dies ist der untere Teil </div>     

Und Sie können es folgendermaßen anordnen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <header> Dies ist die Kopfzeile </header>   
  2. < content > Dies ist der mittlere Inhaltsbereich </ content >   
  3. < footer > Dies ist der untere Teil </ footer >     

Aber IE unterstützt Forward nicht. Wenn wir also IE6, 7, 8 unterstützen möchten, müssen wir wie folgt einen kleinen Code in JS und CSS hinzufügen:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. Dokument.createElement("Kopfzeile");
  2. document.createElement("Inhalt");
  3. document.createElement("Fußzeile");

CSS:

Kopfzeile, Inhalt, Fußzeile {Anzeige: Block}

Das Obige bedeutet, ein Tag als Header anzupassen und es auf Blockanzeige einzustellen. Der vollständige Code ist unten angehängt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html >   
  3. <Kopf>   
  4. < Meta   Zeichensatz = "utf-8" >   
  5. < title > Verwenden Sie semantische Tags zum Schreiben Ihres HTML, kompatibel mit IE6,7,8 </ title >   
  6. < Stil >   
  7. *{Rand:0;Padding:0;}
  8. Kopfzeile, Inhalt, Fußzeile {Anzeige: Block}
  9. Header {Breite: 600px; Höhe: 150px; Zeilenhöhe: 150px; Rahmen: 1px durchgezogen #000; Rand: 10px automatisch; Textausrichtung: zentriert; Schriftgröße: 24px}
  10. Inhalt {Breite: 600px; Höhe: 250px; Zeilenhöhe: 250px; Rahmen: 1px durchgezogen #000; Rand: 10px automatisch; Textausrichtung: zentriert; Schriftgröße: 24px}
  11. Fußzeile {Breite: 600px; Höhe: 150px; Zeilenhöhe: 150px; Rahmen: 1px durchgezogen #000; Rand: 10px automatisch; Textausrichtung: zentriert; Schriftgröße: 24px}
  12. </ Stil >   
  13. < Skript   Typ = "Text/Javascript" >   
  14. Dokument.createElement("Kopfzeile");
  15. document.createElement("Inhalt");
  16. document.createElement("Fußzeile");
  17. </ Skript >   
  18. </ Kopf >   
  19.     
  20. < Textkörper >   
  21. <header> Dies ist die Kopfzeile </header>   
  22. < content > Dies ist der mittlere Inhaltsbereich </ content >   
  23. < footer > Dies ist der untere Teil </ footer >   
  24. </ Körper >   
  25. </ html >   

Reden wir über etwas Irrelevantes. Warum sollten wir HTML semantisch schreiben?

Erstens ist der Code leicht zu lesen. Wenn andere Ihren Code ansehen, können sie ihn auf einen Blick verstehen. Zweitens ist es vorteilhaft für SEO. Suchmaschinen-Crawler ignorieren die zur Präsentation verwendeten Tags weitgehend und konzentrieren sich nur auf semantische Tags.

Beginnen Sie also mit dem Schreiben Ihres HTML-Codes unter Verwendung semantischer Tags. Das ist doch nicht so schwer, oder?

Anhang 1:

Der obige Artikel über die Verwendung semantischer Tags zum Schreiben Ihres HTML, das mit IE6, 7 und 8 kompatibel ist, ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen und ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/shouce/p/5385701.html

<<:  SQL-Übung: Datenoperation für Benutzerinformationen in einer Online-Mall-Datenbank

>>:  Ubuntu-Installation Matlab2020b, ausführliches Tutorial und Ressourcen

Artikel empfehlen

Allgemeine Datumsvergleichs- und Berechnungsfunktionen in MySQL

Implementierung des Zeitvergleichs in MySql unix_...

Reparaturlösung für inkonsistenten MySQL GTID-Master und -Slave

Inhaltsverzeichnis Lösung 1: Replikate neu erstel...

Allgemeine Array-Operationen in JavaScript

Inhaltsverzeichnis 1. verketten() 2. beitreten() ...

Implementierungsbeispiel eines Nginx+Tomcat-Load-Balancing-Clusters

Inhaltsverzeichnis Einführung 1. Fallübersicht 2....

Zusammenfassung der sieben grundlegenden XHTML-Codierungsregeln

1. Alle Tags müssen ein entsprechendes End-Tag hab...

Detaillierte Analyse der MySQL MDL-Metadatensperre

Vorwort: Wenn Sie eine SQL-Anweisung in MySQL aus...

So konfigurieren Sie Benutzerrollenberechtigungen in Jenkins

Die Jenkins-Konfiguration von Benutzerrollenberec...