21

我在我的博客中使用<pre>标签来发布代码。我知道我必须改变<to&lt;和>to &gt;。我需要为正确的 html 转义任何其他字符吗？

4

4 回答 4

14

如果您使用该<pre>标签在您的博客上显示 HTML 标记会发生什么：

<pre>Use a <span style="background: yellow;">span tag with style attribute</span> to hightlight words</pre>

这将通过 HTML 验证，但它会产生预期的结果吗？没有。正确的方法是：

<pre>Use a &lt;span style=&quot;background: yellow;&quot;&gt;span tag with style attribute&lt;/span&gt; to hightlight words</pre>

另一个例子：如果你使用pre标签来显示一些其他的语言代码，仍然需要HTML编码：

<pre>if (i && j) return;</pre>

这可能会产生预期的结果，但它是否通过了 HTML 验证？没有。正确的方法是：

<pre>if (i &amp;&amp; j) return;</pre>

长话短说，HTML 编码 pre 标记的内容就像您使用其他标记一样。

于 2012-10-22T11:07:11.467 回答
8

TL;博士

请注意，这<pre>仅适用于样式，因此您必须转义所有 HTML。

只为你 HTML“化石”：使用<xmp>标签

这不是众所周知的，但它确实存在，甚至 chrome 仍然支持它，但是不建议依赖使用一对<xmp>标签- 它只是为您提供 HTML 化石，但这是处理您的个人内容的一种非常简单的方法，例如文档。甚至 w3.org Wiki 在其示例中也说：“不，真的。不要使用它。”

您可以将任何 HTML（不包括</xmp>结束标记）放入其中<xmp></xmp>

<xmp>
<html> <br> just any other html tags...
</xmp>

正确的版本

正确的版本可以被认为是存储为字符串的 HTML，并在一些转义功能/机制的帮助下显示。

请记住一件事——类 C 语言中的字符串通常写在单引号或双引号之间——如果你将字符串包裹在 double => 中，你应该转义双精度数（可能使用\），如果你将字符串包裹在单引号中 => 转义单打（可能与\）...

最常见的 - 服务器端语言转义（例如在 PHP 中）

服务器端脚本语言通常有一些内置函数来转义 HTML。

<?php
   $html = "<html> <br> or just any other HTML"; //store html
   echo htmlspecialchars($html); //display escaped html
?>

请注意，在 PHP 8.1中进行了更改，因此您不再需要指定ENT_QUOTES标志：

标志从 ENT_COMPAT 更改为 ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401。

客户端方式（JavaScript / JS&jQuery 中的示例）

在客户端脚本中可以实现与服务器端类似的方法。

纯 JavaScript

没有功能，但有默认行为，如果您设置元素innerText或节点textContent：

document.querySelector('.myTest').innerText = "<html><head>...";
document.querySelector('.myTest').textContent = "<html><head>...";

HTMLElement.innerText和不是一回事！您可以在上面的 MDN 文档链接中找到更多关于差异的信息Node.textContent

jQuery（一个 JS 库）

jQuery$jqueryEl.text()为此目的：
$('.mySomething .test').text("<html><head></head><body class=\"test\">...");

只需记住与服务器端相同的事情 - 在类 C 语言中，将包含字符串的引号转义。

于 2015-04-29T14:43:32.720 回答
-1

为了在您的标记中发布代码，我建议使用<code>标记。它的工作方式与 pre 相同，但在语义上被认为是正确的。

否则，<code> 和 <pre> 只需要对尖括号进行编码。

于 2009-08-13T16:42:00.970 回答
-5

使用它，不要担心它们中的任何一个。

<pre>
${fn:escapeXml('
  <!-- all your code -->
')};
</pre>

您需要启用 jQuery 才能使其工作。

于 2014-12-17T23:15:31.530 回答