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

So entwerfen und erstellen Sie adaptive Webseiten

Mit der Verbreitung von 3G nutzen immer mehr Mens...

Ubuntu16.04 erstellt eine php5.6-Webserverumgebung

Ubuntu 16.04 installiert standardmäßig die PHP7.0...

Einige Tipps zum Schreiben leistungsstarker HTML-Anwendungen

Wie können Sie die Leistung einer Webseite verbes...

Nexus verwendet Nginx-Proxy zur Unterstützung des HTTPS-Protokolls

Hintergrund Alle Unternehmenswebsites müssen das ...

So konfigurieren Sie mehrere Tomcats mit Nginx-Lastausgleich unter Linux

Die Methoden zur Installation von Nginx und mehre...

JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern

In diesem Artikel wird der spezifische Code zur I...

Eine detaillierte Einführung in den Lade- und Analyseprozess von HTML-Seiten

Die Reihenfolge, in der der Browser HTML lädt und ...