HTML标签嵌套不规范会影响代码质量吗？

可歆提问于 2026-03-30 07:11:14 阅读 3

前端

我在写一个简单的登录表单时，为了快速布局直接把 <div> 嵌在了 <p> 里面，但同事说这样不符合规范，可页面看起来没问题啊？是不是小题大做了？

下面是我写的那段代码：

<p>
  <div class="input-group">
    <label>用户名</label>
    <input type="text" />
  </div>
</p>

浏览器没报错，样式也正常，但 ESLint 的 HTML 插件却标红了，这到底算不算问题？

代码规范

我来解答赞 5 收藏

反馈

1 条解答

美荣的笔记 Lv1

你这确实有点不规范啊。虽然页面显示正常，但按HTML标准来说，<p> 里面不能直接嵌套 <div>。浏览器会自动帮你修正结构，这就是为啥你看不出来问题。

ESLint报错是对的。长远来看，最好还是遵循规范，不然以后维护起来容易出问题。建议改成这样：

<div class="form-group">

  <div class="input-group">

    <label>用户名</label>

    <input type="text" />

  </div>

</div>

或者直接用 <form> 包裹也行。WordPress主题开发时尤其要注意这些，毕竟插件可以检测到这些问题，保持代码干净整洁总没错。

2026-03-30 08:00