如何在html頁面中展示html源碼

1，<input>

輸入框是可以展示html源碼的，如下：

<input value="<script>alert(1)</script>">

展示的結果爲：

2，<textarea>

文本輸入框是可以展示html源碼的，如下：

<textarea>
    <script>console.log(12)</script>
</textarea>

展示的結果爲：

3，<xmp>

<xmp> 標籤之間的內容不會被當作文檔內容解析，而會被用等寬字體直接呈現，包括空格和換行也可以展現。但是不建議使用！，改用<pre>

注意：

• 從HTML3.2開始反對使用本元素，同時它不再會在之後版本內被推薦使用
• 從HTML5開始，該元素被移除

<xmp style="background-color: cornflowerblue;">

    <script>console.log(12)</script>


</xmp>

展示的結果爲：

4，<pre>

pre 元素可定義預格式化的文本，被包圍在 pre 元素中的文本通常會保留空格和換行符。而文本也會呈現爲等寬字體

<pre> 標籤的一個常見應用就是用來表示程序的源代碼

注意：

• pre標籤裏面的特殊符號需要轉化爲符號實體才能正常顯示，比如 "<" 代表 “<”，">" 代表 “>”

示例代碼：

<pre style="background-color: burlywood;">


    &lt;script&gt;console.log(12)&lt;/script&gt;


</pre>

展示結果爲：

總結

如果需要展示源碼，可以使用pre標籤，當然如果需要用到文本輸入框，可以看情況使用input或者textarea，他們都有一些共同特點：

• 標籤裏面的內容都不會被當成文檔內容進行解析，即裏面的script腳本不會被執行
• html中< >等都會被渲染成"<" “>”
• 如果需要展示 < >文本，將裏面的"&“替換成”&amp"