改进 XML/HTML 语法的提案

JSON

近年来，JSON 在流行度方面已超越 XML。

为了理解原因（在“语法”的上下文中），让我们看看 JSON 中一个简单的数据结构：

{
    "person": {
        "name": "Albert",
        "married": true,
        "address": {
            "street": "Kramgasse",
            "city": "Bern"
        },
        "phones": [ "123", "456"]
    }
}    

在 XML 中，代码可能看起来像这样：

<?xml version="1.0" encoding="UTF-8"?>
<person>
    <name>Albert</name>
    <married>true</married>
    <address>
        <street>Kramgasse</street>
        <city>Bern</city>
    </address>
    <phones>
        <phone>123</phone>
        <phone>456</phone>
    </phones>
</person>

许多人更喜欢 JSON 语法。它比 XML 版本更容易阅读且不那么冗长。不计算缩进空格，上述 JSON 代码需要 144 个字符来输入。XML 代码有 276 个字符。这增加了 92%！

上述例子引出了一个有趣的问题：

• “我们不能干脆停止使用 XML，而是用 JSON 来处理所有事情吗？”

例如，我们能否使用 JSON 语法来编写 HTML 文档？

让我们试试。

这是一个简单的 HTML 片段：

<p>foo bar</p>

在 JSON 中，我们可以这样表达：

{ "p": "foo bar" }

让我们把 foo 写成斜体，把 bar 写成粗体。

HTML

<p><i>foo</i> <b>bar</b></p>

JSON

{ "p": [ { "i":"foo" }, " ", { "b": "bar" } ] }

现在我们想把所有东西都显示为红色：

HTML

<p style="color:red;"><i>foo</i> <b>bar</b></p>

JSON

{ "p": { "style": "color:red;", "content": [ { "i": "foo" }, " ", { "b": "bar" } ] } }

我们可以美化代码，使其更易于阅读：

{
    "p":{
        "style":"color:red;",
        "content":[
            {
                "i":"foo"
            },
            " ",
            {
                "b":"bar"
            }
        ]
    }
}    

但现在，这行 HTML 代码已经变成了“一个包含大量水平和垂直空白的 14 行怪物”。

这并不是我们想要的。

除了 JSON 代码的复杂性迅速增加这一显而易见的事实外，还有另一个令人担忧的观察：

• 在第一个例子中，p 元素的值是一个字符串："p": "..."。
• 在第二个例子中，值变成了一个 JSON 数组："p": [...]。
• 在最后一个例子中，它变异成了一个 JSON 对象："p": {...}。

这种变化很容易导致维护噩梦。检查数据结构的代码每次更改时都必须更新。例如，如果我们想提取元素 p 的文本，我们需要为这三种情况编写不同的代码。

XML 没有这个问题。p 的内容始终是子元素列表。

至此，您希望同意我们可以停止进一步的调查并继续前进。JSON 语法不适合以人类友好的方式描述像 HTML 文档这样的标记代码。这当然不意味着“JSON 不好”。在许多情况下，JSON 是一个不错的选择。它是 JavaScript 的原生部分，在大多数编程语言中都得到了很好的支持，并且有大量的 JSON 库和工具可用。然而，在我们寻找更好的标记语法的背景下，JSON（以及它的所有变体）不是一个选择。稍后，我们将看一个更完整的 HTML 示例，它证实了我们的结论。

YAML

减少冗长的一种方法是使用缩进来定义结构。YAML 可能是使用这种技术的最流行的语言。

这是我们之前看到的 JSON 示例的重印：

{
    "person": {
        "name": "Albert",
        "married": true,
        "address": {
            "street": "Kramgasse",
            "city": "Bern"
        },
        "phones": [ "123", "456"]
    }
}    

在 YAML 中，它变成了：

person:
    name: Albert
    married: true
    address:
        street: Kramgasse
        city: Bern
    phones:
        - 123
        - 456

好!

易于阅读和编写。

乍一看，我们似乎可以对所有类型的数据结构（包括标记代码）使用这种无噪音的语法。

事实证明，那将是一个非常糟糕的主意。YAML 和所有其他使用缩进来定义结构的语言的问题在于：它适用于小型、简单的结构（例如配置文件）。但是，如果我们需要管理具有深度嵌套结构的大型文档，那么它很快就会变得容易出错且难以维护。

此外，虽然使用缩进来定义结构有效地减少了冗长，但对于某些类型的文档，它也会导致更多的代码行。原因是每个子元素“必须”写在新行上。

为了说明这一点，让我们看看前一章中使用的简单 HTML 一行代码在 YAML 中将如何编写。这是 HTML 的重印：

<p style="color:red;"><i>foo</i> <b>bar</b></p>

在 YAML 中，代码将如下所示：

p:
    style: 'color:red;'
    content:
        - i: foo
        - ' '
        - b: bar

还有其他反对对空白敏感的文档的论据，例如混合空格和制表符的问题，以及无法在具有不同缩进级别的不同文档之间共享的代码片段。这些不便众所周知——这里无需重复。

最后，对空白敏感的方法迫使我们根据规则使用空白（规则可能变得非常复杂）。它剥夺了我们使用空白使文档更具吸引力和可理解性的自由。

至于 JSON，这并不意味着“YAML 不好”。YAML 在某些情况下非常适用。我想说的是，在 HTML 这样的标记语言中使用空白敏感性的想法注定要失败。根据 维基百科，YAML 首字母缩略词的含义从“Yet Another Markup Language”（另一种标记语言）改为“YAML Ain't Markup Language”（YAML 不是标记语言），这是可以理解的。

XML/HTML 忽略空白，这是一个正确的选择。

其他

存在大量其他标记语言，但我不知道有任何语法能够很好地替代 XML 语法。如果您知道一个好的替代方案，请留言。

还有许多工具和编辑器插件旨在减轻手动编写 XML 代码的痛苦。然而，本文的要旨不是“减轻”痛苦。我们想“消除”它。

元素

<i>foo</i>

<i>foo>

<i foo>

[i foo]

<i>foo</i>

<br />  <!--     XML-compliant -->
<br>    <!-- not XML-compliant -->

[br]

<table>
    <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
    <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</table>

[table
    [tr [td Cell 1.1][td Cell 1.2]]
    [tr [td Cell 2.1][td Cell 2.2]]
]

</img></div></section>

        </img>
    </div>
</section>

]]]

        ]
    ]
]

][/tag]

][/img] ][/div] ][/section]

        ][/img]
    ][/div]
][/section]

XML:  <note>Watch out for &lt;, &gt;, &quot;, &apos;, &, [, ], and \ characters</note>

pXML: [note Watch out for <, >, ", ', &, \[, \], and \\ characters]

Hell\u006f

Hello

\[ <

[ <

<div id="unplug_warning" class="warning big-text">Unplug power cord before opening!</div>

[div ( id=unplug_warning class="warning big-text" ) Unplug power cord before opening!]

name = Bob
port = 8080
path = C:\Users\Alice

food = "healthy orange"                 // contains space
expression = "array[17]"                // contains square brackets
conclusion = "It's ok."                 // contains '
statement = 'He said: "All is well".'   // contains "

[image (
    source = images/kid.png
    title  = "Kid is flabbergasted"
    width  = 800px
    height = 600px
)]

statement = 'He said:       // He said:
"All is well!"'             // "All is well!" 

statement = 'He said:\r\n"All is well!"'    // Windows new line forced
statement = 'He said:\n"All is well!"'      // Unix new line forced

[e (a1=v1 a2=v2)]

[e [a1 v1][a2 v2]]

[image [source ball.png][width 300px][height 200px]]

[image (source=ball.png width=300px height=200px)]

<!-- text of comment -->

[- text of comment -]

[- text of outer comment
    [- text of inner comment -]
-]

<!-- text of outer comment
    <!-- text of inner comment -->
-->

<!-- text of outer comment
    [- text of inner comment -]
-->

其他

本入门文章不涵盖以下 XML 语法构造：XML 实体、命名空间、CDATA 节和处理指令。它们可能是后续文章的主题。

pXML 的前身

当我开始思考新语法时，我根本没有考虑创建更好的 XML/HTML 语法。我“想要”的是一种编写文章（发布在博客上）和书籍的新语法。最初我使用 Docbook，然后使用 Asciidoctor 编写文章。我还尝试了 Markdown，并研究了其他语法，如 RestructedText。长话短说：我对现有解决方案的一些不切实际之处感到沮丧，最终决定设计一种名为“实用标记语言 (PML)”的新语法。如果您想了解我创建 PML 的更多动机，您可以阅读我们需要一种新的文档标记语言——原因在此（2019 年 3 月发布）。(注意：对于仍在使用文字处理器的读者，我还写了文档标记语言与所见即所得编辑器的优势)

现在，我用 PML 编写所有文章（包括这篇）。为了发布它们，我创建了一个“PML 到 HTML 转换器”，它读取 PML 文件并创建 HTML 文件。您可以在这里查看本文的 PML 源代码，并在这里查看其原始版本（即“PML 到 HTML 转换器”生成的结果）。如果您想查看“PML 到 HTML 转换器”生成的 HTML 代码，请右键单击原始文章，然后点击“查看页面源代码”。该转换器生成缩进、干净、简单的 HTML 代码，就像手写的一样。“PML 到 HTML 转换器”根据 GPL2 开放源代码，并用 PPL（“实用编程语言”）编写。源代码在 Github 上。

创建 PML 后，我突然意识到它的语法也可以用于编写 XML/HTML 文档——一个不错的副作用。本文是我公开我的想法的第一步。

可以说，PML 之于 pXML 就像 HTML 之于 XML。PML 使用 pXML 语法，但只允许使用预定义的语义 PML 标签。

PML 中的宽松语法

PML 的一个重要方面是解析器在“宽松模式”下工作的能力。这种模式支持非常有针对性的语法简化，旨在消除尽可能多的“噪音”。使用 PML 编写文章和书籍应该“很容易”。以下是一个例子，说明“宽松语法”的优势：

这是一个用严格 pXML 编写的简单 PML 文档的代码：

[doc (title=Test)
    [ch (title="An Unusual Surprise")
        [p Look at the following picture:]
        [image (source=images/strawberries.jpg)]
        [p Text of paragraph 2]
        [p Text of paragraph 3]
    ]
]

在宽松 PML 模式下（始终激活），文本可以缩短为：

[doc Test
    [ch An Unusual Surprise
        Look at the following picture:
        [image images/strawberries.jpg]
        
        Text of paragraph 2

        Text of paragraph 3
    ]
]

让我们简单看看它是如何工作的：

• doc (title=Test) 变为 doc Test

  某些元素（例如 doc）具有“默认属性”。对于该属性，只需指定值即可——无需编写 (name=value)，我们只需编写 value。

• [p Text of paragraph 2] 变为 Text of paragraph 2

  不包含在元素中的自由文本会自动嵌入到 p（段落）元素中。

  由两个换行符分隔的文本会自动创建段落分隔符。

如果你想尝试上面的代码，可以这样操作：

• 下载“PML 到 HTML 转换器”

• 在任何目录中创建文件 example.pml，其中包含上面显示的 PML 代码（严格 pXML 版本将不起作用）。

• 将图片复制到 resources/images/strawberries.jpg

• 在文件 example.pml 所在目录中打开一个终端并输入：

  pmlc example.pml

• 在浏览器中打开文件 output/example.html。

  结果如下：

  

• 右键单击文本，然后选择“查看页面源代码”，如果你想查看“PML 到 HTML 转换器”生成的 HTML 代码。

简单配置文件

{
    "size":"XL",
    "colors":{
        "background":"black",
        "foreground":"light green"
    },
    "transparent":true
}

<config>
    <size>XL</size>
    <colors>
        <background>black</background>
        <foreground>light green</foreground>
    </colors>
    <transparent>true</transparent>
</config>

<config>
    <size>XL</size>
    <colors background="black" foreground="light green" />
    <transparent>true</transparent>
</config>

[config
    [size XL]
    [colors
        [background black]
        [foreground light green]
    ]
    [transparent true]
]

[config
    [size XL]
    [colors (background=black foreground="light green")]
    [transparent true]
]

HTML 代码

现在我们来看看一些 HTML 代码——XML 最常见的用途。为了保持示例简短，我们只看一个 HTML 片段，省略 HTML 头部和底部。

HTML

以下代码代表一个包含三段和一个图片的章节：

<section>
    <h2>Harmonic States</h2>

    <p>The <i>initial</i> state looks like this:</p>
    <img src="images/state_1.png" />

    <p>After just a few <i><b>micro</b>seconds</i> the state changes.</p>
    
    <p>More text ...</p>
</section>

JSON

在前一章我们已经看到 JSON 不适合编写类似 HTML 的代码。尽管如此，我们还是来看看我们的 HTML 片段的 JSON 版本——只是为了证实我们之前的结论：

{ "section": [
    { "h2": "Harmonic States" },

    { "p": [ "The ", { "i": "initial" }, " state looks like this:" ] },
    { "img": { "src": "images/state_1.png" } },

    { "p": [ "After just a few ", { "i": [ { "b": "micro" }, "seconds" ] }, 
      " the state changes." ] },
    { "p": "More text ..." }
] }

如果我们将代码美化，7 行代码将变成 38 (!) 行，其中空白比文本还多：

{
    "section":[
        {
            "h2":"Harmonic States"
        },
        {
            "p":[
                "The ",
                {
                    "i":"initial"
                },
                " state looks like this:"
            ]
        },
        {
            "img":{
                "src":"images/state_1.png"
            }
        },
        {
            "p":[
                "After just a few ",
                {
                    "i":[
                        {
                            "b":"micro"
                        },
                        "seconds"
                    ]
                },
                " the state changes."
            ]
        },
        {
            "p":"More text ..."
        }
    ]
}

谁会喜欢编写和维护这样的代码呢？然而这只是一个简单的玩具示例。想象一下一个包含真实世界、庞大而复杂的 HTML 代码的代码库！

pXML

这是 pXML 版本：

[section
    [h2 Harmonic States]

    [p The [i initial] state looks like this:]
    [img (src=images/state_1.png)]

    [p After just a few [i [b micro]seconds] the state changes.]
    
    [p More text ...]
]

PML

如前所述，PML 具有宽松语法模式，允许非常简洁的标记代码：

[ch Harmonic States

    The [i initial] state looks like this:
    [image images/state_1.png]

    After just a few [i [b micro]seconds] the state changes.
    
    More text ...
]

<section id="ch__1">
    <h2>Harmonic States</h2>
    <p>The <i>initial</i> state looks like this:</p>
    <figure>
        <img src="images/state_1.png" />
    </figure>
    <p>After just a few <i><b>micro</b>seconds</i> the state changes.</p>
    <p>More text ...</p>
</section>

冗长

让我们看看数字。用这四种语言编写代码需要付出多少努力？如果我们提取标记代码（即，删除空白和浏览器中显示的文本），我们得到以下结果，从最差到最好：

JSON: {"section":[{"h2":""},{"p":["",{"i":""},""]},
      {"img":{"src":""}},{"p":["",{"i":[{"b":""},""]},""]},{"p":""}]}

HTML: <section><h2></h2><p><i></i></p><imgsrc=""/><p><i><b></b></i></p><p></p></section>

pXML: [section[h2][p[i]][img(src=)][p[i[b]]][p]]

PML:  [ch[i][image][i[b]]]

计算字符数，我们得到下表：

这些数字的图表如下所示：

当然，这并不是一个具有代表性的结果。其他 HTML 示例会导致或多或少不同的数字。然而，它清楚地显示了语法的影响。语法影响复杂性、空间和时间以及可用性。简洁的语法使代码更易于阅读和编写，也更令人愉悦。

文章历史

• 2021年3月10日
  • 第一版
• 2021年4月20日
  • 添加了属性语法
  • 删除了可选的名称前缀 #（用于区分数据和元数据）