Detailed explanation of code tag and pre tag in html

Preface

A few days ago, a colleague asked me a question about code tags and pre tags. Well, yes, these two tags came together. question. So I summarized it. This article will focus on the code tag and pre tag, their definitions, differences, applications, and how to use these two guys together. And when these two tags are nested, how different browsers interpret this nesting.

1. Nesting order

Code tags and pre tags can be nested. It should be pointed out that a previous version of Firefox parsed the nesting of code tags and pre tags. , improper order will cause the browser to parse the DOM structure incorrectly. This is just a problem of Firefox itself, and the latest version can already parse it correctly. Correct parsing refers to being able to parse the DOM structure correctly. All in all, the nesting order of these two tags can now be arbitrary. There will be no DOM structure parsing errors.

When we write the following code:

##

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

## FF browser’s analysis of the above code

2. Regarding the omission rules of pre tags and code tags under

The latest HTML5 specification defines tags that can omit the closing tag. For example, the

tag can be written as the

tag, omitting the closing tag. The pre tag and code tag are the same as the p tag. The end tag can be omitted. Under the HTML5 standard, the following is also correct. The parsed result is the same as the above parsed result.

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

But one thing to note is that the default standard specification under IE9 is the picture below.

All in all, they are all correct. The DOM structure is the same. Of course, spaces may be regarded as nodes. I won’t discuss it in depth.

3. Definition of code tag and pre tag

Code tag:

1. Definition of code tag: tag, used to represent computer source code or Text content that can be read by other machines. Software code writers are used to the code format when writing code, so this tag is designed for software code writers. The text in the code tag will use a fixed-width, teletype-like font (Courier). display.

2. The application of code tags should only be used to represent computer program source code or other text content that can be read by machines. The functions of the tag include: changing the text into a fixed-width font; and another function is to imply that this text is source code. Then according to the second function, in the future the browser may add effects according to its own actual situation. For example, the programmer's browser may look for fragments and perform some additional text formatting, such as

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

标签用来定义预格式化的文本，被包围在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