Question

我正在使用客户端技术（在大多数情况下通过JQuery javascript）开发本机移动应用程序CMS系统，并且已经实现了类似于ASP.NET的模板系统。

假设我有一个导航控件，它有一个starttemplate，endtemplate和itemtemplate，如下所示：

<div data-type="navigation" id="navigationControlDemo">
    <div data-type="starttemplate">
      <ul id="Menu">
    </div>
    <div data-type="itemtemplate">
      <li><a href="[[Link]]">[[Text]]</a></li>
    </div>  
    <div data-type="endtemplate" >
        </ul>
    </div>
 </div>

我的问题是浏览器，因为它似乎决定要修复html，以便标签关闭＆＃34;正确＆＃34;如下：

 <div data-type="navigation" id="navigationControlDemo">
    <div data-type="starttemplate">
      <ul id="Menu">
      </ul>
    </div>
    <div data-type="itemtemplate">
      <li><a href="[[Link]]">[[Text]]</a></li>
    </div>  
    <div data-type="endtemplate" >

    </div>
    </div>

我已经尝试了一些解决方法和快速黑客无济于事.. 我试过更换＆＃34;＆lt;＆＃34; ＆＃34;＆GT;＆＃34;使用某些字符然后在加载后替换它们但问题仍然存在。

Answer 1

您的代码无效HTML。您不能交错标记（在一个地方打开它并在完全不同的地方关闭它）。标签必须正确嵌套。

有效：

<p>
    <ul>
    </ul>
</p>

无效：

<p>
    <ul>
</p>
    </ul>

请注意，如果没有“关闭”，则无法正确缩进第二个。请确保您的html首先正确，然后浏览器才能正常运行。

-update-因为您需要客户端模板，所以不想要的是将（无效）html解析为html。但是，它显然也是无效的xml，这是你可能想要的。

您可以做的是将部分内容包装为CDATA。

<div data-type="navigation" id="navigationControlDemo">
    <div data-type="starttemplate"><![CDATA[
      <ul id="Menu">
    ]]></div>
    <div data-type="itemtemplate"><![CDATA[
      <li><a href="[[Link]]">[[Text]]</a></li>
    ]]></div>  
    <div data-type="endtemplate" ><![CDATA[
        </ul>
    ]]></div>
 </div>

现在，如果您将其解释为xml，模板中的部分将被视为文本而非标记。

Answer 2

您不能将<div>元素作为<ul>元素的子元素 <ul>仅接受<li>个标记为子级。 Specification

此外，您似乎错误地嵌套了标签，此处：

<div data-type="starttemplate">
    <ul id="Menu">
</div>

如果<div>仍处于打开状态，则无法关闭<ul>。这就是<ul>过早关闭的原因。

Answer 3

基本上，您正在寻求一种方法来强制浏览器显示格式错误，凌乱tag-soup。感谢上帝，大多数浏览器并不是盲目地渲染那种代码，因为结果会让人难以忍受，并使你的页面无法理解。也就是说，如果您查看原始页面源，您可能会看到未更正的原始标记。但是因为浏览器无法真正呈现它，引擎会逐步升级并尽力而为。

但是，请不要浪费你的时间找到解决方法，它只是一个功能来帮助你，而不是惹恼你。另外：HTML5有很多关于允许和不允许的内容的规则，以及浏览器如何处理无效标记（例如，在代码中<div><ul></div>被视为无效）。如果您愿意，可以查看the W3C specifications以获取有关该主题的更多信息。

Answer 4

而不是像我使用关键字来代表＆lt;和＆gt;然后使用模板系统渲染所有正确的html并将这些关键字替换回来，并且＆gt;然后将其添加到文档中。我的模板标签中的语法令人讨厌，但它的工作方式与我一样。

Html渲染自动关闭标签

4 个答案: