＜pre＞ ＜textarea＞ ＜code＞标签区别

这篇文章里面放的大都是我自己写程序的时候遇到的一些小问题，其实都是自己没有掌握的点，别人看起来应该很简单啦，但写下来能提醒自己，也能鼓励一下自己，这条路也不好走哇。

<pre> <textarea> <code>三个标签区别：之所以要说这个，是因为我在写代码的时候遇到这样的问题：需要把html源代码在网页中显示出来，直接写<>这样的标签显然会被浏览器解析，因此我查了一下，可以用&lt;代替< ，&gt;代替>，但是直接这样写会失去代码中的换行等具体格式，非常难读，因此就使用了专门的标签实现。

　　<pre>：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可。

　　将代码放在<pre>中的源码：

　　

<pre>
&lt;div id="div1"&gt;
&lt;p id="p1"&gt;这是一个段落&lt;/p&gt;
&lt;p id="p2"&gt;这是另一个段落&lt;/p&gt;
&lt;/div&gt;

&lt;script&gt;
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
&lt;/script&gt;
</pre>

　　注意此时仍需要用&lt;代替< ，&gt;代替>。

　　效果：

　　

　　<textarea>:标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

　　源代码与上述相同，效果图为：

　　

　　<code>标签用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

　　<code>的效果图：