Heim > Artikel > Web-Frontend > Drei Punkte, auf die Sie beim Schreiben von HTML-Code achten müssen
Drei Punkte, auf die Sie beim Schreiben von HTML-Code achten müssen
- php中世界最好的语言Original
- 2018-01-22 10:48:371836Durchsuche
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>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:
<p id="myDIV">
<p>p1</p> ddd dd d <p>p2</p>
<span> d dd d </span>
</p>2. Der Standard-Randrahmen des Body-Tags
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;
}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>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.
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!