如何在HTML文件中插入代码示例?

I want to place an example of code without the tags being processed?

我想要放置一个没有处理标签的代码示例?

11 个解决方案

#1

Xmp tag will work:

Xmp标签将工作:

<xmp>
   ...code...
</xmp>

ETA: As of this writing this still works in all major browsers, but as others have pointed out it has officially been obsoleted in HTML5 [link]. Browsers could stop rendering it any day without warning or notice and it should be avoided for production sites. Still, there is no replacement that doesn't involve HTML encoding your string manually or using iframe trickery. It still has a place in my personal utility page tool-belt, but I would not consider it for a client.

ETA:在撰写本文时，它仍然适用于所有主流浏览器，但正如其他人指出的那样，它已经正式在HTML5中被淘汰。浏览器可以在没有任何警告或通知的情况下停止渲染，生产站点应该避免这种情况。尽管如此，没有不涉及HTML编码您的字符串手工或使用iframe欺骗的替换。它仍然在我的个人实用工具页面工具带中占有一席之地，但我不认为它适用于客户。

#2

The <pre> tag allows you to display text with whitespaces and line breaks as-is. Also, code must be entity-encoded: For example, the code sample

标记允许您显示带有空格和换行符的文本。此外，代码必须是实体编码的:例如，代码示例

 <html>
   <head><title></title></head>
   <body></body>
 </html>

will become

将成为

<pre>&lt;html>
  &lt;head>&lt;title>&lt;/title>&lt;/head>
  &lt;body>&lt;/body>
&lt;/html></pre>

< encodes into < & encodes into &

<编码& lt;&编码成,< p>

PHP htmlentities does the job:

PHP htmlentities:

<pre><?php echo htmlentities($code) ?></pre>

<textarea> does the job too: it also allow the code to be copied.

也做这个工作:它还允许复制代码。</p>

#3

To present code in HTML typically one would use the <code> tag.

要在HTML中显示代码，通常需要使用标记。

Your question isn't very clear, and I don't know what you mean by "without the tags being processed". If you're saying that you want to present a fragment of HTML as code in an HTML page (for example), then you need to "escape" the HTML tags so that the web client doesn't attempt to parse them.

你的问题不是很清楚，我也不知道你所说的“没有标签被处理”是什么意思。如果您想在HTML页面(例如)中显示HTML片段作为代码，那么您需要“转义”HTML标记，以便web客户端不尝试解析它们。

To do this, you should use the entity > for the greater-than angle bracket, and < for the less-than bracket.

为此，您应该使用实体>比尖括号，和<小于支架。

#4

put it in a text area, its an html tag that will prevent all text inside him to be rendered

把它放在一个文本区域中，它是一个html标记，可以防止他的所有文本被呈现。

#5

If you're using an XHTML <!DOCTYPE> declaration, then you could use CDATA sections:

如果您正在使用XHTML 声明，则可以使用CDATA section:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
 <head>
     <title>My Example</title>
 </head>
 <body>
     <h1>Example!</h1>
     <pre><code>
     <![CDATA[
         <div>
             <ol>
                 <li>a</li>
                 <li>b</li>
                 <li>c</li>
             </ol>
         </div>
     ]]>
     </code></pre>
 </body>
</html>

Note that you'll want to use a .xhtml file extension and you'll want to consider serving these documents with a Content-Type: application/xhtml+xml header.

注意，您希望使用.xhtml文件扩展名，并考虑使用内容类型:application/xhtml+xml头来处理这些文档。

#6

Try:

试一试:

<xmp></xmp>

或

<code></code>

for exemple:

为例:

<pre>
     <xmp><!-- your html code --></xmp>
</pre>

<pre>
     <code><!-- your html code --></code>
</pre>

bye

再见

#7

The only thing I can think of is just converting all your ‘<’ and ‘>’ to ‘&lt’ and ‘&gt’ respectively

我唯一能想到的就是把你的“<”和“>”分别转换成“<”和“>”

#8

Make it a comment.

使它成为一个评论。

<p>This will be rendered.</p>
<!-- from here on, this is a comment
<p>This won't be rendered.</p>
end of comment -->
<p>This will be rendered too.</p>

#9

Beyond putting your code in 'pre' tags and escaping th '<' and'>' you may want to look as syntax highlighting. A good library for this was written by Alex Gorbatchev.

除了将代码放入“pre”标记中和转义为“<”和“>”之外，您可能还希望将其作为语法突出显示。一个很好的图书馆是由Alex Gorbatchev写的。

http://alexgorbatchev.com/SyntaxHighlighter/

#10

Run the HTML you wish to display though htmlspecialchars() to properly escape the code you wish to display if you're using PHP. Do NOT use htmlentities() because your browser will choke on extended characters. Just make sure your page's encoding is set correctly in the <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> if you are outputting UTF-8 for example.

使用htmlspecialchars()来运行您希望显示的HTML，以适当地摆脱希望显示的代码，如果您使用的是PHP。不要使用htmlentities()，因为浏览器会阻塞扩展字符。只需确保在。

Good luck.

祝你好运。

#11

You can use textarea with this way.

你可以用这种方式使用textarea。

<textarea class="form-control" rows="25">
    <form action=".. " method="post" id="postForm">
        <table>
            <tr>
                <td>Name:</td>
                <td><input type="text" name="name" id="name" value="Customer Name" /></td>
            </tr>
        </table>
    </form>                                     
    </textarea>

Note this use Bootstrap 3, if you want pure html remove textarea class and rows attribute.

注意，如果您想要纯html，请使用Bootstrap 3删除textarea类和rows属性。

#1