p标签内不能嵌套div(注解)
相关知识:
内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素。块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“block”的特性称为replace元素。
<p>
<div>编码美学</div>
<div>编码美学</div>
</p>
在上面的代码中,p标签在遇到下一个块级元素的时候就闭合了,它会被浏览器解析为页面中p元素的两倍数量,也就是开始标签被解析为一个p元素,结束标签被解析为一个p元素。
<p></p>
<div>编码美学</div>
<div>编码美学</div>
</p></p>
1级元素:<body>
2级元素:其他。。(可以互相嵌套,如li和div)
3级元素:
指哪些不可以自由嵌套的元素,如<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>;段落标记的<p>;分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。
特别1:
<ul>、<ol>、<dl>、<table>,它们的子一层必须是指定元素,<ul>、<ol>的子一级必须是<li>;<dl>的子一级必须是<dt>或者<dd>;<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一层必须是<tr> (<tr>只存在于<thead>、<tfoot>、<tbody>中),之后才是可放内容的<td>或者<th>。
特别2:
<img>和<input>有着其它内联元素没有的宽和高。它们在"inline"的情况下又有"black"的特性,W3C称之为replace元素。
最后总结汇总:
1、块元素可以包含内联元素或某些块元素(p元素中嵌套Div元素是错误的做法) ,但内联元素却不能包含块元素,它只能包含其他的内联元素
2、p元素中是不能嵌套块级元素的。
3、重点:块状元素的三个级别
4、内联元素的img 与 input比较特殊,他们有内联元素没有的宽高,w3c定义为replace元素,将元素设置为display:inline-block,模拟的就是replace元素。
(资料引自网络,加以修改而成)
p标签内不能嵌套div(注解)的更多相关文章
- p标签内不能嵌套块级标签
今天突然发现一个问题,那就是p标签内不能嵌套块级标签 例如: <p><p></p></p> 会被浏览器解析成 我又把 div 嵌套在里面,发现还是这样 ...
- HTML中为何P标签内不可包含DIV标签?
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- p标签里面不能嵌套div
先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p&g ...
- HTML中为何P标签内不可包含DIV标签? (转)
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢?
先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...
- <c:choose>标签内出错。不能写注解,否则就会报错
org.apache.jasper.JasperException: Validation error messages from TagLibraryValidator for c in /WEB- ...
- 为什么p标签不能嵌套div??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- HTML里为什么不能在<p>标签中嵌套<div>标签
学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...
- 关于p标签不能嵌套div标签引发的标签嵌套问题总结
问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...
随机推荐
- [React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...
- FullPage.js全屏滚动插件解说
1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...
- 【hdu 3863】No Gambling
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65568/32768 K (Java/Others) Total Submission(s) ...
- 【hdu 3389】Game
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...
- scala读写文件 comparing values of types Unit and Int using `!=' will always yield true
由于scala没有对写入文件的支持,所以写文件时通常借助java进行IO操作 //方式一(小文件) /* val s1 = Source.fromFile("D:\\inputword\\h ...
- 【Dijkstra+邻接表求次短路】POJ Sightseeing 3463
Language: Default Sightseeing Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7766 Ac ...
- Xcode崩溃定位:异常位置Exception的断点
1.全局Exception断点 在XCode界面中按cmd + 6跳到Breakpoint的tab(或者点击下图左上第7个图标),然后点击左下角的+号,增加一个Exception的断点,如下图所示.这 ...
- tombstone问题分析
tombstone文件包含了发生问题的进程ID信息 I/DEBUG ( 241): pid: 244, tid: 244, name: mediaserver >>> /system ...
- padding百分百值是相对谁的百分比
先看代码 <head> <meta charset="UTF-8"> <title>Document</title> <sty ...
- 利用伪元素before实现自定义checkbox样式
原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...