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

-Tag geschrieben werden, wobei das schließende Tag weggelassen wird. Das Pre-Tag und das Code-Tag sind die gleichen wie das P-Tag. Unter dem HTML5-Standard ist auch Folgendes korrekt. Das analysierte Ergebnis ist dasselbe wie das oben analysierte Ergebnis.

<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 

Nach dem Login kopieren

      在浏览器中的显示效果为：

      左边的灰色的线是浏览器视窗的最左端呢，跟代码在文档中距离左边边距的距离是一样的呢。

四、code标签和pre标签之间的关系

      通过定义我们可以知道code标签和pre标签之间的关系，两者的共同点是应用上类似，都主要应用于浏览器显示计算机中的源代码。 但是两者之间还是有很大不同的，code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的 样式处理，pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。那么这个时候我们可以想象一下，code标签和pre标签可不可以一块使用呢？答案是可以的，code标签和pre标签是 可以嵌套使用的，但是必须注意两者的嵌套顺序。

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Code-Tags und des Pre-Tags in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!