javascript - HTML 实体在浏览器中以不同方式呈现

Question

我正在学习字符编码，但现在有点困惑。

在下面的代码中，在控制台中我得到的输出为 '>' 并且浏览器将其正确呈现为 '>>' .

<div id="test">&gt;</div>
</body>
<script type="text/javascript">
x = document.getElementById("test").innerHTML;
console.log(x);
</script>

但是，如果我使用此实体 '℘' 代替 '>'，我在控制台和浏览器中都获得了呈现的输出。

这两个实体之间有什么区别，为什么在控制台中显示不同？

Answer 1

当您在控制台日志中写入元素时，浏览器会应用 HTML 序列化，如第 8.3 节所述 Serializing HTML fragments W3C HTML5 规范。子句末尾的转义规则指定:

1. 用字符串“&”替换所有出现的“&”字符。

2. 将任何出现的 U+00A0 NO-BREAK SPACE 字符替换为字符串“ ”。

3. 如果在属性模式下调用算法，替换任何字符串“””中“””字符的出现次数。

4. 如果算法没有在属性模式下被调用，替换任何在字符串“<”中出现“<”字符，以及任何在字符串“>”中出现“>”字符。

因此，在将元素内容写入日志时，& 符号和不间断空格呈现为字符引用，其他字符也是如此。当浏览器从您的 HTML 标记构造内部表示 DOM 时，它会替换引用 ℘通过实际的“℘”字符。所有字符引用都会发生类似的操作，包括 > ，但是所提到的两个字符都呈现为引用，无论它们在 HTML 源代码中是如何表示的。