【html基础】p标签里面不能嵌套块级元素

今天再复习Dom的childNodes和NoeList时写了一个dome。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style>
    body p{
        background-color: blue;
    }
style>    
head>
<body>  
    <p>
        <h3>Html5h3>
        <h3>Css3h3>
        <h3>javascripth3>
    p>
body>
<script>
   var node=document.getElementsByTagName("p")[0];
   console.log(node.childNodes.length);//1
   // console.log(node.nodeType);
   // console.log(node.nodeName);
   // console.log(node.nodeValue);
script>
html>

结果让我怀疑人生………
说好的NodeList对象是有生命的,有呼吸的对象呢?结果是什么鬼?
而且p的背景色怎么没有变blue。
吓得我赶紧打开chrome浏览器的调试窗,一看代码:
【html基础】p标签里面不能嵌套块级元素_第1张图片
第一反应,就是我代码写错了,跑到submite里一看,没毛病。
怎么会这样?然后我把p改成div试了一下,完全符合预期。
然后又把p里面的h3标签全部换成div,还是不行,然后换成span,这次就行了。打开调试器,浏览器正确的渲染。
然后我有一个大胆的想法,对span加了一个css效果。display:block.


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style>
    body p{
        background-color: blue;
    }
    span{
        display: block;
    }
style>    
head>
<body>  
    <p>
        <span>Html5span>
        <span>Css3span>
        <span>javascriptspan>
    p>
body>
<script>
   var node=document.getElementsByTagName("p")[0];
   console.log(node.childNodes.length);
script>
html>

what the fuck?
这样居然也行。
我的猜想是 浏览器执行时,先渲染html,然后执行css,css是在已经渲染好的html中加样式。所以这样可以。
所以这样也是不行的哦:div{display:inline;}


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
<style>
    body p{
        background-color: blue;
    }
    div{
        display: inline;
    }
style>    
head>
<body>  
    <p>
        <div>学习div>
        <div>Html5div>
        <div>Css3div>
        <div>javascriptdiv>
    p>
body>
<script>
   var node=document.getElementsByTagName("p")[0];
   console.log(node.childNodes.length);
script>
html>

总之:p标签里面不能直接嵌套本身是块级元素的标签。
至于为什么不能嵌套,我在网上也没找到合理的说法。。
一想到以前,我看到一篇文章,里面有个大标题,下面是正文,分几段?
这样

<p>
    <h3>标题h3>
    <P>段落一P>
    <P>段落二P>
    <P>段落三P>
p>

的代码信手拈来。其实错的不着边。难怪以前处理这一块的css异常难办。
以后嵌套标签还是要小心点。。。。

随便查了一下一般的嵌套规则:
图片来源于:
http://www.cnblogs.com/Iona/p/4732452.html
【html基础】p标签里面不能嵌套块级元素_第2张图片

你可能感兴趣的:(【html基础】p标签里面不能嵌套块级元素)