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

Anfänger lernen einige HTML-Tags (1)

Anfänger können HTML lernen, indem sie einige HTM...

Tutorial zu HTML-Tabellen-Tags (34): Zeilenspannen-Attribut ROWSPAN

In einer komplexen Tabellenstruktur erstrecken si...

10 hervorragende Web-UI-Bibliotheken/Frameworks

1. IT Mill-Toolkit IT Mill Toolkit ist ein Open-S...

MySQL-Methode zur Sperrensteuerung für Parallelität

Inhaltsverzeichnis Vorwort 1. Optimistisches Sper...

Detaillierte Erläuterung der Vue-Projektverpackung

Inhaltsverzeichnis 1. Zugehörige Konfiguration Fa...

Zabbix-Überwachungslösung – die neueste offizielle Version 4.4 [empfohlen]

Zabbix 12.10.2019 Chenxin siehe https://www.zabbi...

js, um einen 3D-Karusselleffekt zu erzielen

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

Implementierung der Miniprogramm-Aufzeichnungsfunktion

Vorwort Bei der Entwicklung eines Miniprogramms b...

Allgemeine Probleme mit der Regelpriorität beim Nginx-Standort

Inhaltsverzeichnis 1. Standort / Matching 2. Stan...

Detaillierte Erklärung der Getter-Verwendung in vuex

Vorwort Mit Vuex können wir im Store „Getter“ def...

element-ui Markieren Sie die Koordinatenpunkte nach dem Hochladen des Bildes

Was ist Element-UI element-ui ist eine auf Vue.js...

19 MySQL-Optimierungsmethoden im Datenbankmanagement

Nach der MySQL-Datenbankoptimierung kann nicht nu...