PyCharm 警告：结束标记与 <p> 标记不匹配答案

【问题标题】：PyCharm warn: Closing tag matches nothing for <p> tagPyCharm 警告：结束标记与 <p> 标记不匹配
【发布时间】：2019-02-28 13:08:27
【问题描述】：

在我的 PyCharm 中检查代码之后。它警告我 结束标签不匹配最后</p>标签

但我没有发现我的代码有任何错误。 p 标签已正确关闭。

  <p v-if="files.length">
      <ul>
        <li v-for="file in files">
            {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
            <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
        </li>
      </ul>
  </p>

如何正确解决此警告？

【问题讨论】：

你有没有发现这个问题的原因？我正在遭受完全相同的事情。我还在我的 p 中使用了一个 Vue v-for 列表
很遗憾，尚未解决。我只是设置忽略这个警告。很抱歉没有帮助。
Urgghh... 没关系 - 我也会这样做。感谢您的回复。

标签： vue.js pycharm code-inspection

【解决方案1】：

此警告是由无效的 HTML 引起的。 ul 元素不允许在 p 元素中。可以通过重构源代码以遵循 HTML specification 来解决警告。

移除p元素：

<ul>
  <li v-for="file in files">
      {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
      <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
  </li>
</ul>

将p 元素转换为div 元素：

<div v-if="files.length">
  <ul>
    <li v-for="file in files">
        {{file.name}} <span v-if="file.success"> - success. </span><span v-if="file.error"> - fail. </span>
        <span v-if="file.success || file.error">{{file.xhr.responseText}}</span>
    </li>
  </ul>
</div>

答案https://stackoverflow.com/a/5681796 中对规范的相关部分进行了很好的总结。请注意，答案专门针对ol 而不是ul，但仍然适用，因为它们的类别和内容模型相同。

如果 PyCharm 警告消息更具体一些会更好。这可以通过自定义检查在 PyCharm 的付费版本中完成，但在社区版中是不可能的。 https://www.jetbrains.com/help/pycharm/creating-custom-inspections.html

【讨论】：

【解决方案2】：

我的项目中也遇到过这个问题。

我的 DOM 结构是这样的：

&lt;p&gt;test&lt;div&gt;test2&lt;/div&gt;&lt;/p&gt;

而且，如果我像上面那样编写 DOM 结构，WebStorm 会提示“结束标记不匹配”

虽然，当我改变这个结构时，例如：将 div 块元素更改为内联元素跨度，那么它就可以正常工作了。

所以，我的建议是改变你的 DOM 结构。例如使用 div 替换 p 或在 p 标签中使用一些内联元素。

还有一件事，正如我在此文档中查看的 https://www.w3.org/TR/html4/sgml/dtd.html

文档说标签 p 通常包含内联元素。所以，我认为这是上述你和我的问题的根本原因。所以，在标签 p 中使用内联元素或使用 like div 或其他元素来替换标签 p。

【讨论】：