先申明本人代码水平为零起点,刚开始学习前端,所以就是小白。不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~

今天练习了段代码,发现效果和自己想象的不一样:

想了一下估计是<p>和<div>嵌套的问题,但是两个不都是块级元素,难道不能嵌套么,而且最后的结果居然是多出来一段<p>的效果,感觉HTML包容心好强,代码码错了也能显示出来。所以就在网上找了点资料,涉及到块级元素和内联元素的嵌套问题。

1.块级元素(block)与内联元素(inline)的区别:

简单地说,块级元素用来搭建网站架构、布局、承载内容,负责整体的大的方面。块级元素总是会另起一行开始,其高度、行高和边距都是可控的。内联元素负责局部和细节,在同一行显示,其高度、行高和边距不可控。

通过display:block;或者display:inline两者可以相互转化。

至于可变元素是可以根据上下文语境决定是块级元素还是内联元素,好吧,它最灵活了=。=

2.分类明细:(照搬来的)

块元素(block element) HTML标签分类明细
    * address - 地址
    * blockquote - 块引用
    * center - 举中对齐块
    * dir - 目录列表
    * div - 常用块级容易,也是css layout的主要标签
    * dl - 定义列表
    * fieldset - form控制组
    * form - 交互表单 (只能用来容纳其它块元素)
    * h1 - 大标题
    * h2 - 副标题
    * h3 - 3级标题
    * h4 - 4级标题
    * h5 - 5级标题
    * h6 - 6级标题
    * hr - 水平分隔线
    * isindex - input prompt
    * menu - 菜单列表
    * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
    * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
    * ol - 排序表单
    * p - 段落
    * pre - 格式化文本
    * table - 表格
    * ul - 非排序列表

内联元素(inline element) 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。
   * a - 锚点
    * abbr - 缩写
    * acronym - 首字
    * b - 粗体(不推荐)
    * bdo - bidi override
    * big - 大字体
    * br - 换行
    * cite - 引用
    * code - 计算机代码(在引用源码的时候需要)
    * dfn - 定义字段
    * em - 强调
    * font - 字体设定(不推荐)
    * i - 斜体
    * img - 图片
    * input - 输入框
    * kbd - 定义键盘文本
    * label - 表格标签
    * q - 短引用
    * s - 中划线(不推荐)
    * samp - 定义范例计算机代码
    * select - 项目选择
    * small - 小字体文本
    * span - 常用内联容器,定义文本内区块
    * strike - 中划线
    * strong - 粗体强调
    * sub - 下标
    * sup - 上标
    * textarea - 多行文本输入框
    * tt - 电传文本
    * u - 下划线
    * var - 定义变量

可变元素是基于以上两者随环境而变化的,它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别,它就遵循块元素或者内联元素的规则限制。
    * applet - java applet  
    * button - 按钮  
    * del - 删除文本  
    * iframe - inline frame  
    * ins - 插入的文本  
    * map - 图片区块(map)  
    * object - object对象  
    * script - 客户端脚本

3.块级元素和内联元素的嵌套规则:

  • 最基本:内联不能嵌套块级,块级可以嵌套内联元素

<div><h1></h1><p></p></div>     正确(块级并列)

    <a href="#"><span></span></a>    正确(内联嵌套内联)

    <span><div></div></span>     错误(内联嵌套块级)

  • 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div,就是我犯的错误。

    <p><ol><li></li></ol></p> —— 错

    <p><div></div></p> —— 错

  • 特殊的<li>里面可以嵌套div(<li>可以但<p>不行)
  • 块级元素与块级元素并列、内联元素与内联元素并列

    <div><h2></h2><p></p></div>  正确

    <div><a href="#"></a><span></span></div>  正确

    <div><h2></h2><span></span></div>  错误(块级和内联并列了) 

再跳出来看,p标签内嵌div的结果是p标签被div切成两个标签了~估计脑补的过程是这样的:

<p>sample</p><div>inline</div><p></P>

p标签里面不能嵌套div的更多相关文章

  1. p标签内不能嵌套div(注解)

    相关知识: 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“b ...

  2. HTML里为什么不能在<p>标签中嵌套<div>标签

    学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等 ...

  3. 关于p标签不能嵌套div标签引发的标签嵌套问题总结

    问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料 ...

  4. 正则匹配闭合HTML标签(支持嵌套)

    任何复杂的正则表达式都是由简单的子表达式组成的,要想写出复杂的正则来,一方面需要有化繁为简的功底,另外一方面,我们需要从正则引擎的角度去思考问题.关于正则引擎的原理,推荐<Mastering R ...

  5. HTML中为何P标签内不可包含DIV标签?

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  6. HTML中为何P标签内不可包含DIV标签? (转)

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  7. ul里不能直接嵌套div(在ie7以前版本)

    平时为了写某个js效果,从而忽略了标签的嵌套 从而导致了IE6-7混乱,在ul下,直接嵌套div,在ie7以前版本,会出现的状况是:div会被离它最近的li包裹住. 请看dome <ul cla ...

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

    我们知道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css盒子模型的方式将div元素包含. 元素分 ...

  9. p标签内不能嵌套块级标签

    今天突然发现一个问题,那就是p标签内不能嵌套块级标签 例如: <p><p></p></p> 会被浏览器解析成 我又把 div 嵌套在里面,发现还是这样 ...

随机推荐

  1. PHP与MYSQL配合完成IP的存取

    如何存储IP 程序设计要在功能实现的基础上最大限度的优化性能.而数据库设计是程序设计中不可忽略的重要部分,巧存IP地址可以一定程度提升性能. 利用函数算法处理 MySQL没有直接提供IP类型字段,但有 ...

  2. MATLAB中多行注释的三种方法

    MATLAB中多行注释的三种方法 A. %{ 若干语句 %} B. 多行注释: 选中要注释的若干语句, 编辑器菜单Text->Comment, 或者快捷键Ctrl+R 取消注释: 选中要取消注释 ...

  3. 协程coroutine

    协程(coroutine)顾名思义就是“协作的例程”(co-operative routines).跟具有操作系统概念的线程不一样,协程是在用户空间利用程序语言的语法语义就能实现逻辑上类似多任务的编程 ...

  4. centos6.5安装gcc6.1等c++环境

    centos6.5安装gcc6.1等c++环境 1.获取gcc安装包并解压wget http://ftp.gnu.org/gnu/gcc/gcc-6.1.0/gcc-6.1.0.tar.bz2tar ...

  5. Git skills in reseting files

    How to uncommit files that were committed long time a ago?Note: Since all changes in the current wor ...

  6. 【转】Java集合框架List,Map,Set等全面介绍

    原文网址:http://android.blog.51cto.com/268543/400557 Java Collections Framework是Java提供的对集合进行定义,操作,和管理的包含 ...

  7. HDOJ(HDU) 2201 熊猫阿波的故事(概率问题)

    Problem Description 凡看过功夫熊猫这部电影的人都会对影片中那只憨憨的熊猫阿波留下相当深的印象,胖胖的熊猫阿波自从打败了凶狠强悍的雪豹泰龙以后,在和平谷的地位是越来越高,成为谷中第一 ...

  8. HDU1510 White rectangles

    White Rectangles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. F - Wormholes

    题目大意: 农民约翰在农场散步的时候发现农场有大量的虫洞,这些虫洞是非常特别的因为它们都是单向通道,为了方便现在把约翰的农田划分成N快区域,M条道路,W的虫洞. 约翰是时空旅行的粉丝,他希望这样做,在 ...

  10. grep 查找当前文件夹下所有文件内内容 并显示文件名

    grep -H comm * 显示结果 rclog:recommend/ysclick,1,2 rclog:recommend/utagclick,1,8 .................... t ...