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

Question

从我的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>

如何正确解决此警告？

Answer 1

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

删除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

Answer 2

我在项目中也遇到了这个问题。

我的 DOM 结构是这样的：

<p>test<div>test2</div></p>

而且，如果我像上面一样编写 DOM 结构，WebStorm 会提醒"关闭标记不匹配">

同时，当我更改此结构时，例如：将div 块元素更改为内联元素跨度，那么它工作正常。

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

还有一件事，当我检查此文档时 https://www.w3.org/TR/html4/sgml/dtd.html

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