Heim > Artikel > Web-Frontend > Was ist Leerzeichen? Der Einfluss von Leerzeichen auf die HTML-Struktur
Leerzeichen: Leerzeichen, Tabulatoren, Zeilenumbrüche
Hinweis: Wenn der Browser HTML analysiert, werden alle Leerzeichen in einem Leerzeichen zusammengeführt
Eine schlechte Struktur führt zu unerwarteten Ergebnissen:
Das Tag wird umbrochen:
<span style="color: #008080">1</span> <span style="color: #008000"><!--</span><span style="color: #008000">文本域结束标签 换行导致placeholder无法正确表示</span><span style="color: #008000">--></span><span style="color: #008080">2</span> <span style="color: #0000ff"><</span><span style="color: #800000">textarea </span><span style="color: #ff0000">id</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="description"</span><span style="color: #ff0000"> rows</span><span style="color: #0000ff">="5"</span><span style="color: #ff0000"> cols</span><span style="color: #0000ff">="30"</span><span style="color: #ff0000"> wrap</span><span style="color: #0000ff">="physical"</span><span style="color: #ff0000"> placeholder</span><span style="color: #0000ff">="这是一个多行输入框,输入您的个人描述"</span><span style="color: #0000ff">><br></</span><span style="color: #800000">textarea</span><span style="color: #0000ff">></span>
Es gibt Leerzeichen zwischen den Tags:
1 <!--文本域标签之间有空格,导致placeholder无法正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述"> </textarea>
Ergebnis: leer
Grund: Da der Formularbereich Leerzeichen (Leerzeichen, Tabulatoren, Zeilenumbrüche) enthält, werden die Leerzeichen im Textbereich als Inhalt betrachtet und verhindern, dass der Platzhaltertext angezeigt wird.
Korrekte Bedienung:
1 <!--文本域开始标签与结束标签紧挨着,placeholder正确表示-->2 <textarea id="description" name="description" rows="5" cols="30" wrap="physical" placeholder="这是一个多行输入框,输入您的个人描述"></textarea>
Ergebnis: Sitzplatz belegt! ! !
Standardmäßig gibt es einen Abstand von ungefähr „4 Pixel“ zwischen Inline-Block-Elementen (verschiedene Browser sind unterschiedlich verfügbar). Größen).
1 <ul>2 <li>item1</li>3 <li>item2</li>4 <li>item3</li>5 <li>item4</li>6 <li>item5</li>7 </ul>
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 ul { 6 list-style: none outside none; 7 padding: 10px; 8 background: green; 9 text-align: center;10 }11 ul li {12 display: inline-block;13 *display: inline;14 zoom: 1;15 background: orange;16 padding: 5px;17 }
Ursache: verursacht durch Leerzeichen zwischen Tags.
Lösung: Zu diesem Zeitpunkt können Sie die Struktur von HTML ändern, sodass das End-Tag des vorherigen Li mit dem Anfang des nächsten Li verbunden wird und Leerzeichen entfernt werden.
1 <ul>2 <li>item1</li3 ><li>item2</li4 ><li>item3</li5 ><li>item4</li6 ><li>item5</li>7 </ul>
Sie können hier klicken, um die Demo auszuprobieren
Natürlich sind Leerzeichen auch Zeichen, und das können Sie Entfernen Sie sie auch, indem Sie CSS-Stile wie Buchstabenabstand und Wortabstand festlegen. Einzelheiten finden Sie unter: So lösen Sie den Leerraumabstand von Inline-Block-Elementen
sind beispielsweise die folgende Zeile Pausen und Räume.
<span style="color: #0000ff"><</span><span style="color: #800000">div</span><span style="color: #0000ff">></span><span style="color: #000000">They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.</span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">><br></span>
结果:浏览器解析的时候只保留单词之间的空白符被合并为一个空格。 They can stay 72-hours within the Shandong province after they have entered China via the Qingdao International Airport.
white-space: normal |. pre | -wrap |. pre-line |. inherit
normal: 合并空白符,允许自动换行 nowrap: 合并空白符,不允许自动换行 pre-line: 合并空白符(不包括换行符),允许自动换行 pre: 不合并空白符,不允许自动换行 pre-wrap: 不合并空白符,允许自动换行(在pre基础上,保留自动换行)
Weitere Informationen finden Sie unter: Demo
ErgänzungEinen hinzufügenPunkt: CSS3 wurde hinzugefügt zwei neue Zeilenumbrucheigenschaften: Zeilenumbruch und Wortumbruch.
Das obige ist der detaillierte Inhalt vonWas ist Leerzeichen? Der Einfluss von Leerzeichen auf die HTML-Struktur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!