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

Sequentielles und zufälliges Schreiben auf Linux-Festplatten

1. Einleitung ● Zufälliges Schreiben führt dazu, ...

Hinweise zu den Formularkomponenten des Elements

Elementform und Codeanzeige Weitere Einzelheiten ...

Schritte zum Erstellen des Projekts vite+vue3+element-plus

Verwenden Sie vite, um ein vue3-Projekt zu erstel...

Mehrere Möglichkeiten zum Ändern des MySQL-Passworts

Vorwort: Bei der täglichen Verwendung der Datenba...

Implementierung der Docker-Bereitstellung des SQL Server 2019 Always On-Clusters

Inhaltsverzeichnis Docker-Bereitstellung Always o...

Vue definiert private Filter und grundlegende Nutzung

Die Methoden und Konzepte privater und globaler F...

Tutorial zur Installation und Konfiguration der Centos7-MySQL-Datenbank

1. Systemumgebung Die Systemversion nach dem Yum-...

Lösung zur Codeaufteilung im Vue-Projekt

Inhaltsverzeichnis Hintergrund Zweck Vor der Spal...

Zusammenfassung der bei der Arbeit häufig verwendeten Linux-Befehle

Verwenden Sie bei der Arbeit mehr Open-Source-Too...

WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}

Vorwort Bei der WeChat-Applet-Entwicklung (native...

Wie füge ich ein Website-Symbol hinzu?

Der erste Schritt besteht darin, eine Software zur...