Html 在其他元素周围包装是否有问题？

我希望在一个表中有三个单元格，单击它们时选中相应的复选框，因此我用标签标记将它们包装起来

<table>
  <tr>
    <td>
      <input id="input_id" type="checkbox">
    </td>
    <label for='input_id'>
      <td>stuff</td>
      <td>stuff</td>
      <td>stuff</td>
    </label>
  </tr>
</table>

不幸的是，这破坏了点击功能。通常，当您单击标签中的文本时，它会切换检查，但这不适用于已包装的元素。你知道为什么吗？是应该，还是有什么原因这是个坏主意

---

有趣的是，如果我在单元格内容周围使用三个单独的标签，并且具有相同的“for”属性，那么它确实会起作用。…

按照您的示例编写无效标记是个坏主意。应该包装td的唯一元素是tr

目前，您的示例不会破坏click功能，因为解析器将丢弃td标记

---

但是，如果示例位于表和tr元素中，那么输入和标签元素将移动到表的前面，因此不会包装留在表中的tds或填充文本，因此单击该文本将没有效果。

我刚刚运行了一个测试，它可以在Chrome上工作。您使用的是哪种浏览器？从技术上讲，这不是有效的HTML。您需要在标签中包含和标记才能有效，这可能会有所帮助。对不起，我不是想让我的html有效性成为问题的重点。我已经更新了结构以减少混乱。我使用的是chrome，只有将每个单元格内容包装在一个标签中，它才能正常工作。例如：即使在“取消省略”表元素的其余部分之后，也会发生这种情况，但这种行为背后的原因是什么？难道你不能在标签中使用任意数量的元素，只要它们实际上是输入的标签吗？真的，原因是它必须以这种方式工作，使浏览器能够处理旧的HTML。一些旧的浏览器可能是Netscape 2或3，在这种情况下，曾经主宰市场的浏览器就是这样做的，网页开始依赖它，所以所有现代浏览器也必须这样做。因此，一些解析规则非常奇怪，您只需接受它必须是这样的。