对HTML中P标签的思考
这几天在用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标签的思考的更多相关文章
- 关于禁用html中a标签的思考
事实上这个问题在初次学习html中select标签时就已经冒出来了,时至今日,依旧没有找到使用纯css禁用a标签的办法--同事.同学.老师我都问过了,他们都千篇一律借助了JavaScript,难道真的 ...
- vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...
- Html中<font>标签的使用
Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...
- jsp2.0+中的标签文件,JSP Fragment技术
刚进新公司不久,今天在看到项目中用到了.tag文件.刚开始我还以为这个是第三方类似freemarker的模板技术.问了下项目组的其他人员,原来这是jsp2.0以来就有的JSP Fragment技术.以 ...
- Html中<a>标签的样式的设置
html中<a>标签的样式的设置.. ------------------------ <html> <head> <title>这是网页选项卡的名称& ...
- 禁止手机页面中A标签长按弹出路径框
//禁止手机页面中A标签长按弹出路径框 window.onload=function(){ document.documentElement.style.webkitTouchCa ...
- JSP中<img>标签引用本地图片
问题描述: jsp页面中<img>标签如何读取本地文件夹中的图片. 问题起因: 由于上传图片至本地文件夹中,图片路径为: D:/upload/file/image/img.jpg 所以将这 ...
- HTML中<meta>标签如何正确使用
HTML中<meta>标签如何正确使用 如果我们在浏览器中按下F12或者Ctrl+shift+J,便可以打开开发者工具,在element中即可看到<head>元素中有不少< ...
- Jquery获取iframe子/父窗口中的标签
获取子窗口中的标签: $("#id",document.frames('iframename').document); 获取父窗口中的标签: $('#id', parent.doc ...
随机推荐
- centos 7 Apache-Tomcat-8.5.46 安装 Web 应用服务器
tomcat 官网版本地址:https://tomcat.apache.org/whichversion.html Servlet规格 JSP规范 EL规格 WebSocket规范 JASPIC规格 ...
- 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 ...
- “美登杯”上海市高校大学生程序设计赛B. 小花梨的三角形(模拟,实现)
题目链接:https://acm.ecnu.edu.cn/contest/173/problem/B/#report9 Problem B B . 小 花梨 的 三角形 时间限制:1000ms 空间限 ...
- php正则表达式验证手机/固定电话/邮箱/身份证/银行卡自定义函数
/** * 验证手机号码格式 * @param string $phone 手机号 * @return boolean */ function is_phone($phone) { $chars = ...
- PAT乙级1018
题目链接 https://pintia.cn/problem-sets/994805260223102976/problems/994805304020025344 题解 刚开始做很懵逼,可能并不难吧 ...
- 使用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 ...
- Canvas实用库Fabric.js使用手册
简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工 ...
- 题解 【BZOJ4700】适者
题面 解析 看了好多dalao们的题解,然而还是不明白... 于是在想了半天后,决定自己写一篇题解. step 1 首先,分析题意, 应该还是比较容易想到, 要一直攻击一个兵器, 直到破坏它为止. 因 ...
- call和ret指令
call和ret都是用来修改ip或cs:ip,可以用来实现子程序的设计: 1.ret和retf ret ->修改ip的内容,从而实现近转移: retf ->同时修改cs和i ...
- Image图片自适应 Image resizeMode属性
cover比较安全 cover模式只求在显示比例不失真的情况下填充整个显示区域.可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了.contain模式是要求显示整 ...