HTML/CSS-Grundlagen - Einige Vorsichtsmaßnahmen beim Schreiben von HTML-Code (unbedingt lesen)

Die Warnhinweise in diesem Artikel haben nichts mit der Browserkompatibilität zu tun. Sie sind hauptsächlich eine Zusammenfassung einiger kleiner Probleme, auf die ich im Projekt gestoßen bin. Obwohl die Probleme klein sind, sind sie manchmal sehr beunruhigend. Ich werde sie hier aufzeichnen und sie hier weiterhin hinzufügen, wenn später solche Probleme auftreten.

1. Abstand zwischen Inline-Tags

Unter normalen Umständen gibt es beim Schreiben von HTML-Code Gewohnheiten wie Zeilenumbrüche und Einrückungen, wie zum Beispiel

Der Anzeigeeffekt ist

In der Mitte befindet sich ein leerer Raum. Der Grund hierfür ist, dass aufeinanderfolgende Leerzeichen, Wagenrückläufe oder Zeilenumbrüche zwischen zwei Inline-Tags (oder wenn „display: inline“ oder „inline-block“ festgelegt ist) diese Symbole standardmäßig als Leerzeichen behandelt werden.

Wenn wir beispielsweise zwischen zwei Div-Tags „ddd dd d“ hinzufügen, ist der Effekt wie folgt. Unabhängig davon, wie viele aufeinanderfolgende Leerzeichen vorhanden sind, ist der endgültige Effekt nur ein Leerzeichen.

Dies ist vergleichbar mit dem direkten Schreiben von Zeichen in ein Inline-Element.

Bei Inline-Elementen werden jedoch führende und nachfolgende Leerzeichen entfernt .

Die Erinnerung lautet also:

Beim Anordnen von Inline-Elementen müssen Sie die Tags nahe beieinander halten, wenn Sie Leerzeichen zwischen ihnen vermeiden möchten.

Versuchen Sie beim Ausfüllen des Inhalts eines Inline-Elements .innerText oder .textContent zu verwenden (Firefox unterstützt innerText nicht, diese Eigenschaft jedoch).

Wenn Sie in HTML-Code Leerzeichen schreiben müssen, verwenden Sie bitte die Leerzeichendarstellungsmethode von HTML.

An diesem Punkt glaube ich, dass manche Leute ein verzerrtes Verständnis von Inline-Elementen haben. Das sogenannte Inline ist das Gegenteil vom sogenannten „Block“. Inline-Elemente bilden keine Blöcke. Sie fühlen sich wie fließendes Wasser an, das um Hindernisse herumfließt. Beispielsweise Quellcode

Anzeigeeffekt

Der Inhalt im Span ist in zwei Abschnitte unterteilt und stellt keinen vollständigen Block mehr dar.

2. Der Standardrand des Body-Tags

Dazu gibt es nichts zu sagen. Moderne Browser (die CSS3 unterstützen) und IE8 haben einen Standard-CSS-Style-Rand: 8px für den Body. Einige andere Tags sind auch so, deshalb werde ich hier keine Beispiele geben. Oftmals benötigen wir dies nicht und wir brauchen eine ähnliche Einstellung zu Beginn des allgemeinen Projektstils.

3. Spezielle Leerzeichen verursachen Anzeigestörungen

Beispielsweise scheint der folgende Quellcode kein Problem zu haben

Tatsächlich steht vor dem a-Tag ein abnormales Leerzeichen und der Anzeigeeffekt ist wie folgt

Die Breite von a und die Breite von #myDIV sollten gleich sein, und a schwebt, aber der Anzeigeeffekt ist umbrochen. Das ist zu verrückt, oder?

Der normale Anzeigeeffekt ist

Schauen wir uns einmal an, was dieses abnormale Leerzeichen ist.

Das erste ist ein abnormales Leerzeichen und seine URI-Komponente ist als „%E3%80%80“ codiert.

Das zweite ist ein normales Leerzeichen, dessen URI-Komponente als „%20“ kodiert ist.

Die dritte ist eine normale Tabulatortaste, deren URI-Komponente als „%20%20%20%20“ codiert ist, was eigentlich 4 Leerzeichen sind.

Du siehst es. Daher kann dieser Grund manchmal die Ursache für den abnormalen Ausführungseffekt des auf die Website kopierten Codes sein.

Fortsetzung folgt. Wenn mir später noch weitere Punkte einfallen, werde ich diese ergänzen. Ich hoffe auch, dass Sie einige damit zusammenhängende Punkte ansprechen können, und ich werde sie auf jeden Fall hinzufügen.

Der obige Artikel „HTML/CSS-Grundlagen – Mehrere Warnhinweise beim Schreiben von HTML-Code (unbedingt lesen)“ ist der gesamte Inhalt, den der Herausgeber mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/chuaWeb/p/5053644.html