html &

code标签:是行内元素

1、定义: 标签， 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式，那么这个标签就是为软件代码编写者设计的， code标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。

2、应用:应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。

3. 标签的功能有：将文本变成等宽字体；还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能，将来浏览器可能会根据自己的实际情况添加效果。例如，程序员的浏览器可能会寻找 片段，并执行某 些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

4、示例: 我们可以看看下面不加code标签的文本片段和加上code标签的文本片段之间的格式上的区别。需要注意的是，这里只是演示了code标签的第一个功能，至于暗示浏览器这段代码时源程序的功能，需要在具体的浏览器上才能显示。

如下代码:

document.getELementById("a");
document.getELementById("b");
document.getELementById("c");



document.getELementById("d");

在浏览器器的显示效果为:

效果图.png

pre标签: 块级元素

1、pre标签的定义，

标签用来定义预格式化的文本，被包围在pre标签中的文本通常会保留空格和换行符， 而文本也会呈现出等宽字体。同样，pre标签的一个常见的应用便是用来保存计算机中的源代码文本。
 
 
2、pre标签的功能，pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是，需要注意的是， 可以导致段落断开的标签（例如标题、
 和 
 标签）绝不能包含在 
 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。 当把其他标签（比如  标签）放到 
 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。
 
 
3、pre标签的示例：下面的代码(html中的源代码)
 
 
 
 
  这就是
            pre标签
  显示
                          效果!!!

 
 
在浏览器中显示效果:
 
 
 
  
 
   
 
     
   
 
  
 
  

    效果图.png 
  
 
 
 
 
 
  
code标签和pre标签之间的关系
 
 
 
 
共同点:是应用上类似，都主要应用于浏览器显示计算机中的源代码。
 不同点:
 code标签的一个功能是暗示浏览器code标签所包围的文本是计算机源代码，浏览器可以做出自己的样式处理;
 pre标签则没有这项功能，但是pre标签可以保留文本中的空格和换行符，保留文本中的空格和换行符是计算机源代码显示 所必须的样式。
 
 
code标签和pre标签是可以嵌套使用的，但是必须注意两者的嵌套顺序.
 
 
 
  
分别在什么情况下使用?
 
 
 
 
 
  
如果想要内联显示代码，那么应该使用 标签
 
 
 
 
 
 
  
  
  hello world 
  hello sdftyworld         
  hello worldsdgh
  
 
 
效果:
 
 
 
  
 
   
 
     
   
 
  
 
  

    效果图.png 
  
 
 
 
 
 
  
如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用 
标签
 
 
 
 
 
 
 
hello world
 
hello sdftyworld
 
hello worldsdgh

 
 
效果:
 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    Paste_Image.png