logo标签列表

我需要在HTML的<pre>标签里进行转义，应该转义哪些内容？

htmlhtml-encode
23

我在博客中使用<pre>标签来发布代码。我知道我必须将<更改为&lt;，将>更改为&gt;。还有其他需要转义的字符以正确显示html吗？

顺便问一下，这是什么样的博客？底层的博客软件可能已经翻译了一些用户输入。 - Mr Lister
这是WordPress，但我总是直接编写纯文本HTML。 - Alec Jacobson
这不应该取决于您想要生成适当的HTML还是XHTML（即XML）吗？ - Joachim Breitner
1
您不必将 > 更改为 &gt;。除非标签已打开，否则 > 不会被视为标签结束符号，如果您将 < 更改为 &lt;，就没有办法打开标签，因此 > 没有特殊含义。但是您需要将 & 更改为 &amp;（并且这需要在包括和号的其他更改之前完成）。 - kindall
4个回答
16

如果您在博客中使用<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>

简而言之，对于 pre 标签的内容，与其他标签一样进行 HTML 编码。

这样做可能会产生预期的结果，但它能通过HTML验证吗？是的，你只需要在_HTML_中转义特殊字符即可。 - Mori
这个引用所指的HTML使用了&&。 - Salman A
我刚刚尝试了你的代码 <pre>if (i && j) return;</pre>，并且通过了验证。CSS和JavaScript代码块中的特殊字符不需要转义。 - Mori
11

TL;DR

请注意<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语言中，字符串通常在单引号或双引号之间编写 - 如果您用双引号包装字符串=>您应该转义双引号（可能使用\），如果您用单引号包装字符串=>转义单引号（可能使用\）...

最常见的 - 服务器端语言转义（例如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和Node.textContent并不是同一件事情！您可以在上面的MDN文档链接中了解更多区别。

jQuery（一个JS库）

jQuery有$jqueryEl.text()来实现这个目的：
$('.mySomething .test').text("<html><head></head><body class=\"test\">...");

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

-1

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

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

pre标签最初的用意是为了在标记中保留一些特殊字符，这些字符在非可编辑表面上可能无法显示（例如：制表符、换行符、多个空格等），它可以给这些字符提供一个空间（你也可以使用textarea实现相同的效果，但是textarea是可编辑的）。另外，在过去的某些时期，有时会使用pre标签来显示表格数据。 - JMP
-5

使用这个，不用担心任何问题。

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

你需要启用jQuery才能使其正常工作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接