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

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

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

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

这让我很懵逼。。。。
之后我去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的标准还是需要再去多了解多总结~

对HTML中P标签的思考的更多相关文章

  1. 关于禁用html中a标签的思考

    事实上这个问题在初次学习html中select标签时就已经冒出来了,时至今日,依旧没有找到使用纯css禁用a标签的办法--同事.同学.老师我都问过了,他们都千篇一律借助了JavaScript,难道真的 ...

  2. vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...

  3. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  4. jsp2.0+中的标签文件,JSP Fragment技术

    刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...

  5. Html中<a>标签的样式的设置

    html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...

  6. 禁止手机页面中A标签长按弹出路径框

    //禁止手机页面中A标签长按弹出路径框    window.onload=function(){        document.documentElement.style.webkitTouchCa ...

  7. JSP中<img>标签引用本地图片

    问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...

  8. HTML中<meta>标签如何正确使用

    HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...

  9. Jquery获取iframe子/父窗口中的标签

    获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...

随机推荐

  1. centos 7 Apache-Tomcat-8.5.46 安装 Web 应用服务器

    tomcat 官网版本地址:https://tomcat.apache.org/whichversion.html Servlet规格 JSP规范 EL规格 WebSocket规范 JASPIC规格 ...

  2. centos7 搭建pxe 安装centos windows(非全自动)(这个教程测试centos6和7.2可以用,Windows各版本也可以)

    yum install dhcp xinetd syslinux tftp-server httpd 编辑dhcpdb配置(192.168.0.1为本机IP) ; max-lease-time ; l ...

  3. “美登杯”上海市高校大学生程序设计赛B. 小花梨的三角形(模拟,实现)

    题目链接:https://acm.ecnu.edu.cn/contest/173/problem/B/#report9 Problem B B . 小 花梨 的 三角形 时间限制:1000ms 空间限 ...

  4. php正则表达式验证手机/固定电话/邮箱/身份证/银行卡自定义函数

    /** * 验证手机号码格式 * @param string $phone 手机号 * @return boolean */ function is_phone($phone) { $chars = ...

  5. PAT乙级1018

    题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805304020025344 题解 刚开始做很懵逼,可能并不难吧 ...

  6. 使用curl出现,curl: /usr/local/lib/libssl.so.1.1: version `OPENSSL_1_1_1' not found (required by /usr/lib/x86_64-linux-gnu/libcurl.so.4)

    主要原因是curl找不到openssl的路径,所以只要将openssl的路径添加到相应的变量中就可以了. 参考连接https://blog.csdn.net/RookieWutongshu/artic ...

  7. Canvas实用库Fabric.js使用手册

    简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工 ...

  8. 题解 【BZOJ4700】适者

    题面 解析 看了好多dalao们的题解,然而还是不明白... 于是在想了半天后,决定自己写一篇题解. step 1 首先,分析题意, 应该还是比较容易想到, 要一直攻击一个兵器, 直到破坏它为止. 因 ...

  9. call和ret指令

    call和ret都是用来修改ip或cs:ip,可以用来实现子程序的设计:   1.ret和retf ret    ->修改ip的内容,从而实现近转移: retf    ->同时修改cs和i ...

  10. Image图片自适应 Image resizeMode属性

    cover比较安全 cover模式只求在显示比例不失真的情况下填充整个显示区域.可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了.contain模式是要求显示整 ...