Angular 6模板使用<p>标签页面空白，是标签不兼容吗？

这跟Angular完全没关系哦，问题出在HTML的语义化规则上！

<p>标签属于「短语内容容器」，根据HTML标准，它内部只能包含行内元素（比如<span>、<a>）或者文本，绝对不能嵌套<ul>这种块级元素。当浏览器遇到你这种不符合规范的嵌套时，会自动尝试修正DOM结构——它会提前闭合<p>标签，把<ul>放到<p>外面，这就导致了Chrome控制台提示的「意外闭合标签」错误，最终让Angular的模板渲染逻辑混乱，页面变成空白。

修正方案 #

把包裹内容的<p>标签换成符合规范的块级容器，比如<div>或者<section>就行。修改后的模板代码如下：

<div id="SideNavMenu" class="sideNav">
  <div>
    <span id="CategoryListCaret">&#9658;</span>
    <a href="#" id="CategoryListHeader" class="sideNav__header sideNav__header--closed">Categories</a>
    <ul>
      <li *ngFor="let itemtype of itemtypes">
        {{ itemtype.name }}
      </li>
    </ul>
  </div>
  <div>
    <span id="TopicListCaret">&#9658;</span>
    <a href="#" id="TopicListHeader" class="sideNav__header sideNav__header--closed">Topics</a>
    <ul>
      <li *ngFor="let keyword of keywords">
        {{ keyword.name }}
      </li>
    </ul>
  </div>
</div>

或者如果不需要额外容器，也可以直接去掉<p>，用CSS来实现原本需要的样式效果。

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