html의 코드태그와 프리태그에 대한 자세한 설명

머리말

며칠 전 한 동료가 코드 태그와 프리 태그에 관해 질문을 했습니다. 그런데 이 두 태그가 합쳐지면 문제가 발생합니다. 그래서 정리해봤습니다. 이 기사에서는 코드 태그와 사전 태그, 정의, 차이점, 응용 프로그램 및 이 두 가지를 함께 사용하는 방법에 중점을 둘 것입니다. 그리고 이 두 태그가 중첩되면 서로 다른 브라우저가 이 중첩을 어떻게 해석하는지 알아보세요.

1. 중첩 순서

코드 태그와 pre 태그는 중첩될 수 있습니다. 이전 버전의 Firefox에서 코드 태그와 pre 태그의 중첩을 구문 분석할 때 순서가 일치하면 브라우저가 나타납니다. 부적절했습니다. DOM 구조 구문 분석 오류 문제는 어떻습니까? 이는 Firefox 자체의 문제일 뿐이며 최신 버전에서는 이미 이를 올바르게 구문 분석할 수 있습니다. 올바른 구문 분석이란 DOM 구조를 올바르게 구문 분석할 수 있음을 의미합니다. 전체적으로 이 두 태그의 중첩 순서는 이제 임의적일 수 있습니다. DOM 구조 구문 분석 오류가 없습니다.

다음 코드를 작성할 때:

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

브라우저는 이를 올바르게 구문 분석합니다.

위 코드에 대한 FF 브라우저의 분석

2. 사전 태그 및 코드 태그 관련 생략 규칙 HTML5

최신 HTML5 사양에서는 닫는 태그를 생략할 수 있는 태그를 정의합니다. 예를 들어

태그는 닫는 태그를 생략하여

태그로 작성할 수 있습니다. pre 태그와 code 태그는 p 태그와 동일합니다. HTML5 표준에서는 다음도 생략 가능합니다. 파싱된 결과는 위의 파싱된 결과와 동일합니다.

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

         Firefox, IE9 및 Chrome은 모두 올바르게 구문 분석할 수 있습니다. HTML5 표준에 따른 태그 생략 사양을 읽어보는 것이 좋습니다. 즉, 위의 두 가지 작성 방법이 맞습니다.

그런데 한 가지 주의할 점은 IE9의 기본 표준 사양이 아래 그림과 같다는 점입니다.

Firefox 및 Chrome의 기본 표준은 아래 그림입니다.

대체로 모두 정확합니다. DOM 구조는 동일합니다. 물론 공간은 노드로 간주될 수도 있다. 깊게 다루진 않겠습니다.

3. 코드 태그 및 사전 태그 정의

코드 태그:

1. 코드 태그 정의: 태그는 컴퓨터 소스 코드 또는 기계가 읽을 수 있는 기타 텍스트 콘텐츠를 나타내는 데 사용됩니다. 소프트웨어 코드 작성자는 코드를 작성할 때 코드 형식을 사용하므로 이 <code> 태그는 소프트웨어 코드 작성자를 위해 설계되었으며, 코드 태그의 텍스트는 고정 너비의 텔레타이프 글꼴(Courier)을 사용합니다. .

2. 코드 태그의 적용은 컴퓨터 프로그램 소스 코드나 기계가 읽을 수 있는 기타 텍스트 콘텐츠를 나타내는 데에만 사용해야 합니다. 태그의 기능은 다음과 같습니다. 텍스트를 고정폭 글꼴로 변경하고, 또 다른 기능은 이 텍스트가 소스 코드임을 암시하는 것입니다. 그런 다음 두 번째 기능에 따르면 향후 브라우저는 자체 실제 상황에 따라 효과를 추가할 수 있습니다. 예를 들어, 프로그래머의 브라우저는 <code> 조각을 찾아 <a href="http://www.php.cn/code/6276.html" target="_blank">loops</a> 및 <a href="http://www.php.cn/code/10324.html" target="_blank">조건문</a> 등의 특수 들여쓰기와 같은 몇 가지 추가 텍스트 서식 지정을 수행할 수 있습니다.

3. 코드 태그의 예, 아래에서 코드 태그가 없는 텍스트 조각과 코드 태그가 있는 텍스트 조각의 형식 차이를 확인할 수 있습니다. 이는 코드 태그의 첫 번째 기능만을 보여줍니다. 이 코드에 대해 브라우저에 힌트를 주는 소스 프로그램의 기능은 특정 브라우저에 표시되어야 합니다.浏 브라우저에서 다음 코드의 표시 효과는 다음과 같습니다.

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의 코드태그와 프리태그에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!