为什么P不能包含div会出现什么问题

p中不能包含div

一句话:有些块元素不可以包含另一些块元素 ,DTD中规定了块级元素是不能放在P里;P标签内包含块元素时,它会先结束自己,比如:<*p><*div>测试p包含div<*/div><*/p>那么浏览器会解释成:<*p><*/p><*div>测试p包含div<*/div><*p><*/p> 会多解释出一个p起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误

从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分类 HTML5中,元素主要分为7类: Metadata Flow Sectioning Heading Phrasing Embedded Interactive 这些分类集合互相之间也存在一定的交集(一个元素可以同时属于多个分类),其交集关系呈现为: 需要注意的是,HTML5中的这种元素分类与in

HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢？

先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div>块元素</div>与内联元素的差别</p> 在上面的例子中,<div>会自己产生一个新的行,而<span>并没有换行,这是在没有CSS渲染的情况下才这样,同样,我们也可以通过CSS把div定义成内联元素,把span定义成块元素,但是,我们却不能在HTML里

HTML中为何P标签内不可包含DIV标签？

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种. in-line这个词有很多种解释:内嵌.内联.行内.线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法--内联. 先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联

HTML中为何P标签内不可包含DIV标签？（转）

起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和block-line块元素,因为HTML里几乎所有元素都属于内联元素或者块元素中的一种. in-line这个词有很多种解释:内嵌.内联.行内.线级等,但是,它们都是表示相同的意思,在这里我们选择习惯的叫法--内联. 先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联

li中包含span，在IE6、IE7下会有3pxbug

如果给每个li里面加个span标签的话,在IE6,IE7下看,li与li之间的距离就会多了3px. 解决方法:在li中加vertical-align:middle; <div class="contain"> <div class="main"> <ul> <li><span></span></li> <li><span></span></l

为什么p标签不能嵌套div??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>p标签里面包含div</title> <link rel="stylesheet" href="&qu

(转)盒子概念和DiV布局

CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,table,img,form等,然后使用css相关属性将div容器标记中的元素作为一个独立对象进行修饰,不会影响其他HTML元素. 2.Div和span的区别大部分div层都可以使用span标记代替 Div是一个块级元素,其包含的元素会自动换行:span标记是一个行内标记,其前后不会发生换行. Div标记可以

<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v

CSS2.1SPEC：视觉格式化模型之包含块

原汁原味的才是最有味道的,在阅读CSS标准时对这一点的体会更加深刻了,阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制.本文首先从包含块写起,一方面总结标准中相应的阐述,并且结合具体的实例进行具体分析,特别是对于CSS2.1支持并不完善的IE6/7.由于经验尚浅,文中肯定存在一些问题,希望大家可以多多包涵并且指出问题. 阅读本文前,应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box,也可以成为盒子)以及各种不同的布局方式有比较准确的认识,可以阅读杜瑶大神

【疑点】<p></p>标签为什么不能包含块级标签?还有哪些特殊的HTML标签？

最近,在码代码的时候,就是下面的这段代码,我犯了一个很不起眼,但犯了就致命的BUG. <body> <p> <ol> <li>Hello</li> </ol> </p> <div>How are you?</div> </body> <script src="jquery-3.1.1.js"></script> <script> v

div标签嵌套原则详解（转载）

这个也许平时人们不注意,但是非常有用,尤其是当你实在找不到原因为什么网页显示错误的时候. XHTML 的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套也需要有一定规则,不能任由自己的个人习惯胡乱嵌套——XHTML 必竟不是 XML. 在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分

div 里面内容水平垂直居中

css .main{ background: #999999; width: 600px; height: 400px; /*采用flex方式*/ display: flex; /*div内容垂直居中*/ align-items: center; /*div内容水平居中*/ justify-content: center; text-align: justify; } html <body > <div class="main"> <!-- 居中的内容需要

a标签点击跳转失效--IE6、7的奇葩bug

一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何响应. 出现这个bug的条件是:1.a标签下包含div这样的块元素 2.块元素必须设置width和height属性值 3.该块元素下包含img 解决方法:改结构或者让三个条件的某一个失效就可以了 2015-05-22 补充 1.就算将a标签设置为display:block;也同样失效 2.只要不在i

CSS学习笔记

CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u5B8B%u4F53" 就是\5B8B\4F53 font-family: 中文,英文,最好的是unicode编码 eg. font-family: "SimSun","SimHei",sans-serif; 字体名称英文名称 Unicode 编码宋体 S

css知识点整理

CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 一.css引入的方式 1.行内样式:行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.嵌入式:嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <style type=&qu

前端之jquery

前端之jquery 本节内容 jquery简介选择器和筛选器操作元素示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏

制作宅基腐主页 && 制作个人简历--材料：BootStrap

宅基腐主页主页分为四大板块:导航栏,轮播图,主页内容,相关信息. 导航栏:<nav>标签,class="navbar",navbar-inverse为反色,navbar-fixed-top为始终居顶. 在nav下包含div,并且div的class=container,container下有naver-header与navbar-right. 响应式折叠插件:collapse,主要注意设置如下. <button class="navbar-toggle co

juery学习总结(一)——juery选择器

juery在工作中经常使用,遇到不会的问题往往百度一下,事后就忘.使用到现在也感觉不到有什么提高,为了每天进步一点点,从今天起抽时间记录下对juery的学习. 学习之前,首先要了解什么是网页元素,网页的本质就是HTML.HTML元素是一个统称,可以认为从一个标签开始到这个标签结束的这部分就是一个网页元素. 1 <div id="div"> //开始标签属性 2 <p>hello world</p> //元素内容 3 </div> //结

CSS基础知识汇总

前言原文连接:http://www.cnblogs.com/wanghzh/p/5805678.html 在此基础上又做了大量的扩充 CSS简介 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. CSS的引用方式 1.行内式行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. 2.嵌入式嵌入式是将CSS样式集中写在网页的标签对的标签对中.格式如下: <head>

为什么P不能包含div会出现什么问题

热门专题