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 タグ、code タグは p タグと同じです。HTML5 規格では以下も省略可能です。解析結果は上記の解析結果と同じです。

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

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

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

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

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

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

コード タグ:

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

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

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 タグを見てみましょう。

プレタグ:

      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标签是 可以嵌套使用的，但是必须注意两者的嵌套顺序。

以上がHTMLのcodeタグとpreタグについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。