HTML的转义问题

在HTML中若要显示代码，一般使用code标签。如显示JavaScript代码：console.log('Hello');等。但如果要显示HTML代码，则需特别注意两个特殊字符：<及>。只要遇到成对的这两个字符，浏览器在解析阶段就会认为里面包含的就是特定的HTML元素。因此，若要显示这两个字符，我们必须经过转义（Escaping），即在HTML代码中分别使用<及>来代替它们，以此来告诉浏览器，请不要将它们解析为标准的HTML元素。

例如，假设我们要在代码中显示<div>aaa<div>。如果我们在HTML中如实编写，则会出现下面的效果：

aaa

结果只有aaa，前后的<div>及</div>不见了，这是因为浏览器将其解析为这是一个div元素，因此按div元素的样式来渲染该元素。在本页面中，只有一个CSS样式，它为每个div元素都加了边框：

因此，在本页面中，凡是出现了边框的，都可以证明是被浏览器解析为div元素。对于div元素，上面的显示效果没有任何错误。但这不是我们所想要的效果，我们的目标是：要原汁原味地显示<div>aaa<div>。因此，我们必须经过转义。应这样编写代码：

为什么出现了&？因为<是字符<的转义。浏览器又要试图将其解析为<。为避免出现这种情况，我们需要对&这个第三个特殊字符进行转义：在代码中使用&来取代它。

唉，又丑又麻烦。实际上，当写上面这段代码时，为了要达到显示这段代码的真实效果，我被迫又对&进行了第三次的转义。真的是太累了。

因此，我决定编写一个自定义的HTML标签esc-code来简化此问题。

不转义

在HTML网页中编写下面代码：

这里，esc-code标签没有escaped属性，因此不需要转义，让浏览器自由解析。效果：

浏览器按<div>标签来解析，因此出现了边框。

转义

在HTML网页中编写下面代码：

这里，esc-code标签加了一个escaped属性，因此需要转义。经转义后，浏览器自然认为它们不再是<div>标签。效果：

HTML代码得以原汁原味地输出。需注意的是，上面的断行信息丢失了，5行变成了1行。这是因为原始的code只不过是一个行内（inline）标签，若要保留断行信息，应在其外面加一个pre标签，如<pre><code></code></pre>，由pre标签来应对是否需要保留空白字符及如何断字的问题。

与pre标签组合使用

                            

                                
aaa
                                
bbb
                                
ccc
                            
                        

                            <div>
                                <div>aaa</div>
                                <div>bbb</div>
                                <div>ccc</div>
                            </div>