Vue模板中的地址标签断线

Question

我有一个Vue JS组件，像这样

<template>
    <footer class="main-footer">
        <p> <address>Some address</address> </p>
    </footer>
</template>

当我运行 vue-cli-service lint它改变了开幕式 <p> 到 <p /> 并发出以下错误信息

error: Parsing error: x-invalid-end-tag (vue/no-parsing-error) at src/components/Footer.vue:3:46:
  1 | <template>
  2 |     <footer class="main-footer">
> 3 |         <p /><address>Some address</address> </p>
    |                                              ^

事实上，在我的网络风暴中，结尾处的 </p> 以红色标示 Closing tag matches nothing.

我拿了 address 标记出来，它的工作完美。有什么原因我不能使用地址标签吗？

以下是我的 .eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/recommended',
        '@vue/standard'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        indent: ['error', 4],
        'space-before-function-paren': ['warn', 'never'],
        'vue/require-default-prop': 'off',
        'vue/no-v-html': 'off',
        'vue/html-indent': ['error', 4]
    },
    parserOptions: {
        parser: 'babel-eslint'
    },
    overrides: [
        {
            files: [
                '**/__tests__/*.{j,t}s?(x)',
                '**/tests/unit/**/*.spec.{j,t}s?(x)'
            ],
            env: {
                jest: true
            }
        }
    ]
}

Answer 1

tl;dr。

错误在于你把一个 </p> 无始无终 <p> 标签。这是因为您认为是起始标签的内容会被解析器自动关闭，根据 官方HTML规范因为 <address> 标签后的 <p> 标签。

---

较长的（初始）答案。

这是预期的行为，正如官方规范(HTML标准). 尊敬的。

A p 元素的结束标签可以省略，前提是 p 元素后面紧跟着一个 address, article, aside, blockquote, details, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, menu, nav, ol, p, pre, section, table或 ul 元素，或者如果父元素中没有更多的内容，而父元素又是一个不属于 a, audio, del, ins, map, noscript或 video 元素，或一个自主的自定义元素。

哪种原因导致你的 <p> 元素时自动关闭。<address> 元素被解析器满足。

由于你显然不希望出现这种行为，你应该使用一个叫做 <div> 而非 <p> 元素，不过考虑到你的问题中的标记，也许你应该完全放弃包装器（即）。footer > address).

Answer 2

来自MDN："段落是块级元素，值得注意的是，如果在关闭之前有另一个块级元素被解析，那么段落将自动关闭。</p> 标签"。

https:/developer.mozilla.orgen-USdocsWebHTMLElementp。