javascript - 在页面中，除了xmp，textarea以及js转义外，还有什么办法可以让html标签在不被浏览器解析而正常显示呢？

Question

如标题内容，请问各位还有什么其他方案吗？谢谢啦~

Answer 1

要符合“内部的html标签不被解析”，我们根据HTML5的标准，分元素类别讨论吧：

1. Void Elements，如br等。
   他们不允许有内部文本。
2. Foreign Elements，如svg和mathml的相关标签
   跟xml语法一致，他们内部文本若不想被当作标签解析，只有用<![CDATA[和]]>包裹
3. RCDATA elements：即textarea 和 title。
   他们不能嵌套自身，内部的实体会被转义，内部的<不会被当作tag open解析。
   因此，他们内部的其他标签自然不会被解析。
4. Raw text elements：即script 和 style。
   他们不能嵌套自身，内部的实体不会被转义，内部的<不会被当作tag open解析。
   因此，他们内部的其他标签自然不会被解析。
5. Normal elements，普通的元素，基本上上列没有提及的都属于这一列，包括pre和code。
   他们的特点是，内部的实体会被转义，内部的<可能根据上下文，被当作tag open解析。
   他们内部的文本若想展示标签文本而不解析，必须先转义<为<，>为>

---

如果目标是让HTML标签文本内容正常显示而不被解析，最简单的方案是嵌入到<script type="text/html">或<script type="text/template">内部，并加上display: block即可。

HTML4旧有的有xmp、listing和plaintext类似于HTML5的Raw text elements，可以包含标签而不解析，内部实体不被转义，但是已经在HTML5中废弃。

Answer 2

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/plaintext
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/listing

Answer 3