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>

The browser parses it correctly:

## FF browser’s analysis of the above code

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

HTML5

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

Firefox, IE9 and Chrome can all parse it correctly. It is recommended that you read the tag omission specification under the HTML5 standard: that is, the above two ways of writing are correct.

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

The default standard under Firefox and Chrome 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 <code> 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 <code> fragments and perform some additional text formatting, such as

loops

and conditional judgmentspecial indentation of statements, etc. . 3. Example of code tag, we can look at the format difference between the text fragment without code tag and the text fragment with code tag below. It should be noted that this only demonstrates the first function of the code tag. As for the function of the source program that hints to the browser, this code needs to be displayed on a specific browser.

The display effect of the following code on the browser is:

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

The display effect is:

## You see the difference, haha. Let’s look at the pre tag next.

pre tag:

      1、pre标签的定义，

标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。<p>      2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、</p><p> 和 </p><address> 标签）绝不能包含在 <pre class="brush:php;toolbar:false"> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如 <a> 标签）放到 <br><pre class="brush:php;toolbar:false"> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。<p>      3、pre标签的示例：下面的代码(html中的源代码)</p><p class="cnblogs_code"><br></p><pre class="brush:php;toolbar:false"> 1 <pre class="brush:php;toolbar:false"> 
 2     100db36a723c770d327fc0aef2ce13b1 
 3     93f0f5c25f18dab9d176bd4f6de5d30e 
 4     8f1fce76f77d4e6f6c69e7fe3c3a1bbb 
 5     2cacc6d41bbb37262a98f745aa00fbf0 
 6     9c3bca370b5104690d9ef395f2c5f8d1 
 7     6c04bd5ca3fcae76e30b72ad730ca86d 
 8     8019067d09615e43c7904885b5246f0a 
 9     xmlDoc=77893f97a0dd82388e0d49872b282c31loadXMLDoc5db79b134e9f6b82c0b36e0489ee08ed("books.xml");
 10     document.write("xmlDoc is loaded, ready for use");
 11     2cacc6d41bbb37262a98f745aa00fbf0
 12     36cc49f0c466276486e50c850b7e4956
 13     73a6ac4ed44ffec12cee46588e518a5e
 14 

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

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

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

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

The above is the detailed content of Detailed explanation of code tag and pre tag in html. For more information, please follow other related articles on the PHP Chinese website!