调查：对照HTML标准检查HTML序列化规范性

[AmeroHan]

对照HTML Standard # Serializing HTML fragments。

---

11月22日更新：

还需要检查13.1 Writing HTML documents，因为它说：

This section only applies to documents, authoring tools, and markup generators.

[AmeroHan]

规范提到

While the exact order of attributes is implementation-defined, and may depend on factors such as the order that the attributes were given in the original markup, the sort order must be stable, such that consecutive invocations of this algorithm serialize an element's attributes in the same order.

需要检查attribute的顺序是否稳定。

[AmeroHan]

For historical reasons, this algorithm does not round-trip an initial U+000A LINE FEED (LF) character in pre, textarea, or listing elements, even though (in the first two cases) the markup being round-tripped can be conforming. The HTML parser will drop such a character during parsing, but this algorithm does not serialize an extra U+000A LINE FEED (LF) character.

若按照标准，a.pre '\nline'应序列化为

<pre>
line</pre>

然而浏览器在解析pre元素时，会忽略紧跟<pre>的第一个LF，这可能并不符合ACandy用户的期望。所以，ACandy或许应故意将其序列化为

<pre>

line</pre>

——吗？

[AmeroHan]

Escaping a string (for the purposes of the algorithm above) consists of running the following steps:

1. Replace any occurrence of the "&" character by the string "&".
2. Replace any occurrences of the U+00A0 NO-BREAK SPACE character by the string " ".
3. If the algorithm was invoked in the attribute mode, replace any occurrences of the """ character by the string """.
4. If the algorithm was not invoked in the attribute mode, replace any occurrences of the "<" character by the string "<", and any occurrences of the ">" character by the string ">".

根据3和4，属性值中的“<”和“>”不转义（或不用转义），但Chrome事实上是转义了的，Firefox与标准一致未转义。

顺便一提，XML的属性值（定义）是不允许“<”的。另外，在某些系统（如MediaWiki）中，属性值若包含“<”或“>”将导致标签被打破或提前终止。

综上所述，为了兼容性，ACandy在默认情况下应当转义，可能未来提供自定义是否转义的方式。

[gui-ying233]

#9 (comment)

当

const pre = document.createElement("pre");

时，

pre.innerText="\nline"

会生成

<pre><br>line</pre>

而

pre.innerHTML="\nline"

会生成

<pre>
line</pre>

且后者在显示上与前者并无区别（

[AmeroHan]

#9 (comment) @gui-ying233

你弄错了问题的缘由。你的这段代码是在浏览器上通过API操作DOM，在此情况下，元素的子结点值（[Text "\nline"]或[HTMLBRElement <br>, Text "line"]）是具有正确的内部表示的。然而ACandy无法生成DOM，只能序列化为字符串，再供浏览器或其他程序解析（反序列化）为DOM对象，这与通过API设置DOM状态是不一致的。

你的两个例子中的pre都应当呈现为：

+----------------+
|                |
|line            |
+----------------+

但如果DOM是通过解析HTML构建的，拿第二个例子序列化得到的

<pre>
line</pre>

为例，则解析后得到的DOM中的pre的innerHTML及innerText将会是"line"，而非"\nline"。并且，它将呈现为：

+----------------+
|line            |
+----------------+

序列化与反序列化的往返不一致性才是问题所在。事实上，你在浏览器上执行一遍

const container = document.createElement('div')
const pre = document.createElement('pre')
pre.innerHTML = '\nline'
pre.style.border = '1px solid'
container.appendChild(pre)
document.body.appendChild(container)
console.log('before:', container.innerHTML)

container.innerHTML = container.innerHTML
console.log('after:', container.innerHTML)

观察前后渲染的文档以及控制台输出值，你就能发现端倪了。