如何在網頁中添加純文本代碼？

Question

我知道這是可能的，因爲這個網站做它，但我試圖研究如何，只是得到了一堆垃圾，所以如何將標籤添加到網站段落，而不需要瀏覽器將其解釋爲代碼。

例如，如果我有<p><div></div></p>，我希望div在瀏覽器中顯示爲文本，但不會將瀏覽器解釋爲html。這很複雜嗎？

我一直在爲學校編寫教程，如果我可以直接將代碼以文本形式添加到網頁而不是圖像，那麼學生可以複製並粘貼它，這會更容易。

Answer 1

看看這個網站本身是如何實現這一點：

<p>For example, if I have <code>&lt;p&gt;&lt;div&gt;&lt;/div&gt;&lt;/p&gt;</code>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?</p> 

您需要更換<和>與他們的HTML字符實體。

Answer 2

使用標籤的HTML實體/特殊字符，如<（小於）

&lt;p&gt; in html -> <p> in browser 

你也可以寫<p>，因爲沒有關於開始標記不確定性。

許多語言已經建立了方法，將HTML特殊字符，如PHP的htmlspecialchars

Answer 3

您需要轉義HTML標記，即小於號。將它寫爲<，它將在HTML頁面上顯示爲<。

Answer 4

你想看看HTML Entities。

例如，如果您希望<字符出現在網站上，則可以編寫此HTML代碼：<。這些都是五個基本HTML Entities和他們的源代碼等同於：

< &lt; 
> &gt; 
" &quot; 
' &apos; 
& &amp; 

如果您正在使用的編程語言（如PHP或ASP.NET），則有可能是一個內置的命令，將做轉換（分別爲htmlspecialchars()和Server.HtmlEncode）。

Answer 5

您的html需要不在標籤中。如果你使用<>標籤，你將它轉換成代碼而不是文本，如果我在
的中間寫<br>那麼它會這樣做你需要用代碼來編寫代碼。 < > (< >) 然後你得到你所需要的。

Answer 6

您還可以查看語法高亮顯示，具體取決於您需要在網頁上插入未解釋的代碼的頻率。以下是較受歡迎的一個：

http://alexgorbatchev.com/SyntaxHighlighter/

Answer 7

使用後重新格式化文本和</PRE>塊前的標籤<PRE>。 這些標記之間的文本呈現爲等寬字符，並在與原始文件相同的點處具有換行符和空格。這可能有助於在不添加大量HTML代碼的情況下呈現詩歌。試試這個：

 
Mary had a little lamb. 
    Its fleece was white as snow. 
And everywhere that Mary went 
    the lamb was sure to go. 

Answer 8

我剛剛發現在CSS-技巧一個更簡單的解決方案...... 只要有你最外層的包裝是一個「前」標籤，接着是「代碼」標籤，然後裏面的代碼標籤將您的代碼放在pamentalhesis中。

Answer 9

最簡單的方法來做到這一點，而不必重新格式化使用實體的文本是使用JQuery。

<div id="container"></div> 

<script> 
    $('#container').text("<div><h1>Hello!</h1><p>I like you.</p></div>"); 
</script> 

如果然後做alert($('#container').prop('innerHTML'));，你<div><h1>Hello!</h1><p>I like you.</p></div>

是多麼有用的技巧是一定程度上取決於您的材料的來源。

Answer 10

有很多種方法來使用：

1. 更換<與<

   `<h1>This is heading </small></h1>` 
   

2. 將裏面的代碼</xmp><xmp>標籤

   <xmp> 
       <ul> 
        <li>Coffee</li> 
        <li>Tea</li> 
       </ul> 
   </xmp> 
   

我不推薦其他方法，因爲它們不適用於所有瀏覽器，如<plaintext>或<listing>。

Answer 11

以便在網頁中添加純文本代碼，我們需要做的HTML字符在出文本這五個字符轉義：

< as &lt;
> as &gt;
& as &amp;
' as &apos;
" as &quot;

（OR）

我們可以直接使用<xmp>標記如：

<xmp>Code with HTML Tags like <div> etc. </xmp>