HTMLのcodeタグとpreタグについて詳しく解説

前書き

数日前、同僚が code タグと pre タグについて質問しました。これら 2 つのタグが一緒になると、問題が発生します。ということでまとめてみました。この記事では、code タグと pre タグ、その定義、違い、用途、およびこれら 2 つを一緒に使用する方法に焦点を当てます。これら 2 つのタグがネストされている場合、さまざまなブラウザーがこのネストをどのように解釈するか。

1. ネスト順序

code タグと pre タグはネストできます。以前のバージョンの Firefox が code タグと pre タグのネストを解析した場合、ブラウザはその順序に従って表示されることに注意してください。不適切でした。DOM 構造の解析エラーの問題についてはどうですか?これは Firefox 自体の問題であり、最新バージョンではすでに正しく解析できます。正しい解析とは、DOM 構造を正しく解析できることを指します。全体として、これら 2 つのタグのネスト順序は任意にできるようになりました。 DOM 構造解析エラーは発生しません。

次のコードを書くと:

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

ブラウザはそれを正しく解析します:

FFブラウザによる上記コードの解析

2. preタグとcodeタグについて 以下の省略ルールHTML5

最新の HTML5 仕様では、終了タグを省略できるタグが定義されています。たとえば、

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

Firefox、IE9、Chrome はすべて正しく解析できます。 HTML5標準におけるタグ省略仕様を読むことをお勧めします。つまり、上記の2つの書き方が正しいことになります。

ただし、注意すべき点が 1 つあります。IE9 でのデフォルトの標準仕様は以下の図であるということです。

Firefox と Chrome のデフォルト標準は下の図です。

全体として、それらはすべて正しいです。 DOM 構造は同じです。もちろん、空間をノードとみなしてもよい。それについては深く話しません。

3. code タグと pre タグの定義

コード タグ:

1. コード タグの定義: マシンが読み取ることができるコンピューターのソース コードまたはその他のテキスト コンテンツを表すために使用されます。ソフトウェア コード作成者はコードを記述するときにコード形式に慣れているため、この コード タグ内のテキストは固定幅のテレタイプのようなフォント (Courier) を使用します。

2. code タグの適用は、コンピューター プログラムのソース コードや、機械が読み取ることができるその他のテキスト コンテンツを表すためにのみ使用する必要があります。 タグの機能には、テキストを固定幅フォントに変更する機能と、このテキストがソース コードであることを示す機能があります。次に 2 番目の機能に従って、将来的にはブラウザが実際の状況に応じてエフェクトを追加する可能性があります。たとえば、プログラマのブラウザは フラグメントを検索し、ループや条件文の特別なインデントなどの追加のテキスト書式設定を実行する場合があります。

3. コードタグの例。以下では、コードタグのないテキストフラグメントとコードタグのあるテキストフラグメントの形式の違いを確認できます。これは code タグの最初の機能を示しているだけであることに注意してください。このコードをブラウザに示唆するソース プログラムの機能は、特定のブラウザ上で表示される必要があります。ブラウザ上の次のコードの表示効果は次のとおりです:

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