p中div -- a中a

今天查看W3CSCHOOL官网,在测试一些属性的时候把div放到了p元素中。然后出现了一个奇怪的现象。

HTML:

<p>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
</p>

浏览器解释HTML:

<p></p>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<p></p>

 摘要段落p标签的用法   

         可以只在块(block)内指定段落,也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总          的来讲,这意味着段落可以在任何有合适的文本流的地方出现,例如文档的主体中、列表的元素里,等等。

         从技术角度将,段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上,多数浏            览器都忽略了这个限制,它们会把段落作为所含元素的内容一起格式化。

我们知道span中可以包含span

<span>
    123
    <span>456</span>
</span>

然而对于a元素来说,也会出现怪异现象

我们知道a元素可以包含块级元素

<a href=“#”>
  <div>这是一个DIV </div>   
</a>

然而a不可以包含a 

HTML:

<a>123<a>456</a></a>

浏览器解释HTML:

<a>123</a>
<a>456</a>

对于p中包含div和a中包含a出现截断问题,我们平时在编写代码是应该注意下,避免出现这类问题。

原文地址:https://www.cnblogs.com/zmr2520/p/5301885.html