为何初始<p>标签自动闭合？Chrome审查发现p1为空且内容分离

这问题本质是HTML标签的嵌套规则在起作用——<p>标签是不能嵌套其他块级元素的，包括它自己！

你看你写的代码里，<p id=p1>里面直接塞了另一个<p>，浏览器解析到这里的时候，会默认你之前的<p id=p1>没正确闭合，直接给它自动补上闭合标签了，这就导致id为p1的<p>变成了空标签，剩下的内容自然就被分离出来啦。

先看看你原来的代码：

<p id=p1 style="display:none"> 
  <p> 
    <b>You have French (8a) on:</b> 
    <ul> 
      <li> <b>Monday</b> at 09:45:00 for 01:30:00 </li> 
      <li> <b>Thursday</b> at 12:00:00 for 01:30:00 </li> 
    </ul> and have a grade of 8/10. 
  </p> 
</p>

给你两个修正方案，选哪个看你的需求：

1. 把外层的<p>换成<div>（因为你要隐藏整个内容，用div当容器更合适）：

<div id="p1" style="display:none">
  <p> 
    <b>You have French (8a) on:</b> 
    <ul> 
      <li> <b>Monday</b> at 09:45:00 for 01:30:00 </li> 
      <li> <b>Thursday</b> at 12:00:00 for 01:30:00 </li> 
    </ul> and have a grade of 8/10. 
  </p>
</div>

2. 直接去掉内部多余的<p>，让内容直接放在id为p1的<p>里（注意<p>里虽然可以放ul，但从语义化来说，用div当外层容器更规范）：

<p id="p1" style="display:none">
  <b>You have French (8a) on:</b> 
  <ul> 
    <li> <b>Monday</b> at 09:45:00 for 01:30:00 </li> 
    <li> <b>Thursday</b> at 12:00:00 for 01:30:00 </li> 
  </ul> and have a grade of 8/10.
</p>

记住哦，HTML里像<p>、<h1-h6>这类标签都属于“不能嵌套块级元素”的类型，浏览器遇到非法嵌套就会自动修正DOM结构，结果就和你写的代码不一样啦～

内容的提问来源于stack exchange，提问作者trinalbadger587