对HTML中P标签的思考

这几天在用VUE-CLI做一个demo,然后在渲染一个列表的时候遇到了一个挺不可思议的事情:

<!--这只是一小部分,v-for的内容在上方-->
<div class="detail-evaluate">
    <p>
      <h3>用户评价({{value.evaluatenumber}})</h3>
      <i>{{value.percent}}好评</i>
    </p>
</div>

渲染后我在浏览器里面得到的结果是
clipboard.png

然后我把p标签换成aside之后,得到的结果是这样的:
clipboard.png

这让我很懵逼。。。。
之后我去MDN去查P标签相关的资料(https://developer.mozilla.org...
终于知道为什么渲染总是出问题了,官方解释是这样的

P的起始标签是必需的,结束标签在以下情形中可以省略。 <p>元素后紧跟 <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul>或另一个 <p>元素;或者父元素中没有其他内容了,而且父元素不是 <a>元素

我的P标签后面的元素是h3,这会被填充内容后解析为我省略了P标签的闭合标签,所以就渲染出了一个空的P标签,后面的闭合标签同理,刚开始我还考虑过是不是VUE的模板是不是有什么问题,但是我很快否定了这个想法,毕竟VUE出现了这么久,也迭代了很多个版本,这种问题不可能会出现。
总结一下就是HTML5的标准还是需要再去多了解多总结~

猜你喜欢

转载自www.cnblogs.com/homehtml/p/12053113.html
今日推荐