Detaillierte Erläuterung des Code-Tags und des Pre-Tags in HTML

Vorwort

Vor ein paar Tagen hat mir ein Kollege eine Frage zu Code-Tags und Pre-Tags gestellt. Also habe ich es zusammengefasst. Dieser Artikel konzentriert sich auf das Code-Tag und das Pre-Tag, ihre Definitionen, Unterschiede, Anwendungen und wie man diese beiden Typen zusammen verwendet. Und wenn diese beiden Tags verschachtelt sind, wie interpretieren unterschiedliche Browser diese Verschachtelung?

1. Verschachtelungsreihenfolge

Code-Tags und Pre-Tags können verschachtelt werden. Es sollte darauf hingewiesen werden, dass eine frühere Version von Firefox die Verschachtelung von Code-Tags und Pre-Tags falsch durchgeführt hat Dies führt dazu, dass der Browser die DOM-Struktur falsch analysiert. Dies ist nur ein Problem von Firefox selbst und die neueste Version kann es bereits korrekt analysieren. Korrektes Parsen bezieht sich auf die Fähigkeit, die DOM-Struktur korrekt zu analysieren. Insgesamt kann die Verschachtelungsreihenfolge dieser beiden Tags nun beliebig sein. Es treten keine Fehler beim Parsen der DOM-Struktur auf.

Wenn wir den folgenden Code schreiben:

<pre class="brush:php;toolbar:false">
    <code>
        hello world    </code>

Der Browser analysiert Folgendes korrekt:

FF-Browser-Analyse des obigen Codes

2. Bezüglich der Auslassungsregeln von Pre-Tags und Code-Tags unter HTML5

Die neueste HTML5-Spezifikation definiert Tags, die das schließende Tag weglassen können. Beispielsweise kann das

<pre class="brush:php;toolbar:false">
    <code>
          hello world

Firefox, IE9 und Chrome können es alle korrekt analysieren. Es wird empfohlen, die Tag-Auslassungsspezifikation gemäß dem HTML5-Standard zu lesen: Das heißt, die beiden oben genannten Schreibweisen sind korrekt.

Beachten Sie jedoch, dass die Standardspezifikation unter IE9 das Bild unten ist.

Der Standardstandard unter Firefox und Chrome ist das Bild unten.

Alles in allem sind sie alle richtig. Die DOM-Struktur ist dieselbe. Natürlich können Räume als Knoten betrachtet werden. Ich werde nicht näher darauf eingehen.

3. Definition von Code-Tag und Pre-Tag

Code-Tag:

1. Definition von Code-Tag: Textinhalte, die von anderen Maschinen gelesen werden können. Software-Code-Autoren sind beim Schreiben von Code an das Code-Format gewöhnt, daher ist dieses -Tag für Software-Code-Autoren konzipiert. Der Text im Code-Tag verwendet eine Schriftart mit fester Breite (Courier). .

2. Die Verwendung von Code-Tags sollte nur zur Darstellung von Computerprogramm-Quellcode oder anderen Textinhalten verwendet werden, die von Maschinen gelesen werden können. Zu den Funktionen des -Tags gehören: Ändern des Textes in eine Schriftart mit fester Breite und eine weitere Funktion besteht darin, zu implizieren, dass es sich bei diesem Text um Quellcode handelt. Gemäß der zweiten Funktion kann der Browser in Zukunft entsprechend seiner eigenen tatsächlichen Situation Effekte hinzufügen. Beispielsweise kann der Browser des Programmierers nach -Fragmenten suchen und einige zusätzliche Textformatierungen durchführen, z. B. spezielle Einrückungen von -Schleifen und bedingte -Anweisungen usw.

3. Beispiel eines Code-Tags. Wir können uns den Formatunterschied zwischen dem Textfragment ohne Code-Tag und dem Textfragment mit Code-Tag unten ansehen. Es ist zu beachten, dass dies nur die erste Funktion des Code-Tags demonstriert. Die Funktion des Quellprogramms, die dem Browser Hinweise auf diesen Code gibt, muss in einem bestimmten Browser angezeigt werden.

Der Anzeigeeffekt des folgenden Codes im Browser ist:

1 <code>
2     document.getELementById("id1");
3     document.getELementById("id2");
4     document.getELementById("id3");
5 </code>
6 <br>
7 document.getELementById("id4");

Der Anzeigeeffekt ist:

Sehen Sie den Unterschied ? Ha ha. Schauen wir uns als nächstes das Pre-Tag an.

Pre-Tag:

1、pre标签的定义，

标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。</p><p>      2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre class="brush:php;toolbar:false"> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 <a> 标签）放到 <br/><pre class="brush:php;toolbar:false"> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。</p><p>      3、pre标签的示例：下面的代码(html中的源代码)</p><p class="cnblogs_code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 1 <pre class="brush:php;toolbar:false"> 
 2     &lt;html&gt; 
 3     &lt;head&gt; 
 4     &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt; 
 5     &lt;/script&gt; 
 6     &lt;/head&gt; 
 7     &lt;body&gt; 
 8     &lt;script type=&quot;text/javascript&quot;&gt; 
 9     xmlDoc=&lt;<font color="blue">a href="dom_loadxmldoc.asp"&gt;loadXMLDoc&lt;/a&gt;</font>(&quot;books.xml&quot;);
 10     document.write(&quot;xmlDoc is loaded, ready for use&quot;);
 11     &lt;/script&gt;
 12     &lt;/body&gt;
 13     &lt;/html&gt;
 14