Dieses Mal werde ich Ihnen drei Punkte vorstellen, auf die Sie beim Schreiben von HTML-Code achten müssen. Was sind die Vorsichtsmaßnahmen beim Schreiben von HTML-Code?
Die Warnpunkte, über die ich in diesem Artikel sprechen möchte, haben nichts mit der Browserkompatibilität zu tun. Sie sind hauptsächlich eine Zusammenfassung mehrerer kleiner Probleme, auf die ich im Projekt gestoßen bin Ich werde sie hier aufzeichnen. Wenn es später solche Probleme gibt, werde ich sie weiterhin hinzufügen.
1. Abstand zwischen Inline-Tags
Normalerweise gibt es beim Schreiben von HTML-Code Gewohnheiten wie Zeilenumbrüche und Einrückungen, wie z. B.
<head>
<meta charset="utf-8">
<style>
html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}
#myDIV {
width: 200px;
height: 200px;
background-color: #ff0;
}
#myDIV > p{
width: 50px;
height: 50px;
display: inline-block;
background-color: #f00;
}
</style>
</head>
<body>
<p id="myDIV">
<p>p1</p>
<p>p2</p>
</p>
</body>Nach dem Login kopieren
In der Mitte ist ein Leerzeichen. Der Grund dafür ist, dass diese Symbole standardmäßig als Leerzeichen verarbeitet werden, wenn zwischen zwei Inline-Tags fortlaufende Leerzeichen, Wagenrückläufe und Zeilenvorschübe vorhanden sind (oder die Anzeige eingestellt ist: inline oder inline-block).
Wenn wir beispielsweise „ddd dd d d“ zwischen zwei p-Tags hinzufügen, ist der Effekt wie folgt, egal wie viele verbundene Leerzeichen es gibt, der endgültige Effekt ist nur ein Leerzeichen
Dies ähnelt dem Schreiben der Zeichenklasse direkt in das Inline-Element , aber innerhalb verknüpfter Elemente werden führende und nachfolgende Leerzeichen entfernt.
Was Sie also beachten müssen, ist Folgendes:
Wenn Sie beim Anordnen von Inline-Elementen Leerzeichen zwischen Tags vermeiden müssen, müssen Sie die Tags eng miteinander verbinden.
Versuchen Sie, .innerText oder .textContent zu verwenden, wenn Sie Inhalte für Inline-Elemente eingeben (Firefox unterstützt innerText nicht, unterstützt aber dieses Attribut).
Wenn Sie Leerzeichen in den HTML-Code schreiben müssen, verwenden Sie bitte die Leerzeichendarstellungsmethode von HTML.
Trotzdem denke ich, dass einige Leute ein voreingenommenes Verständnis von Inline-Elementen haben. Das sogenannte Inline ist das Gegenteil des sogenannten „Blocks“. Inline-Elemente sind nicht in Blöcken angeordnet und fühlen sich an, als würde Wasser umherfließen, wenn sie auf Hindernisse stoßen. Beispielsweise ist der Inhalt im Quellcode
span in zwei Absätze unterteilt und kein vollständiger Block mehr.
<p id="myDIV">
<p>p1</p> ddd dd d <p>p2</p>
<span> d dd d </span>
</p>Nach dem Login kopieren
2. Der Standard-Randrahmen des Body-Tags
Dazu gibt es nichts zu sagen. Der Body moderner Browser (unterstützt CSS3) und IE8 haben standardmäßig einen CSS-Rand: 8px . Einige andere Labels haben dies auch, daher werde ich hier kein Beispiel nennen. Oft brauchen wir es nicht. Wir brauchen eine ähnliche Einstellung zu Beginn des allgemeinen Projektstils.
3. Spezielle Leerzeichen verursachen Anzeigeanomalien
Zum Beispiel scheint es im Quellcode unten kein Problem zu geben
html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}Nach dem Login kopieren
Tatsächlich in Vor dem a-Tag befindet sich ein ungewöhnliches Leerzeichen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
margin: 0;
padding:0;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#myDIV {
width: 200px;
height: 40px;
background-color: #ff0;
}
#myDIV a{
float: left;
width: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<p class="tabbable" id="tabs" style="border:none;">
<!-- 页面标签列表 -->
<p id="myDIV" style="">
<a data-toggle="tab" href="#tab-content-0" >test0</a>
</p>
</p>
</body>
</html>Nach dem Login kopieren
Die Breite von a sollte mit der Breite von #myDIV übereinstimmen, und a ist schwebend, aber die Anzeige Der Effekt ist ein Zeilenumbruch, der auch verrückt ist, nicht wahr?
Der normale Anzeigeeffekt ist
Schauen wir uns 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 normale Leerzeichen, sein URI-Komponentencode ist „%20“
Der dritte ist ein normaler Tab-Build, sein URI-Komponentencode ist „%20%20%20%20“, was eigentlich 4 Leerzeichen ist.
Das sieht man. Daher kann die abnormale Leistung des auf der Website kopierten Codes manchmal aus diesem Grund verursacht werden.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Detaillierte Beispiele zur HTML-Textformatierung
Grundlagen der HTML-Bearbeitung (ein Muss für Anfänger)
So verwenden Sie HTML-Titel, Absätze, Zeilenumbrüche, horizontale Linien und Sonderzeichen
Das obige ist der detaillierte Inhalt vonDrei Punkte, auf die Sie beim Schreiben von HTML-Code achten müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
