所有的html元素，都要么是block(块元素)、要么是inline(内联元素)。
block元素可以包含inline元素，但inline元素不能包含block元素,否则会出错,举个例子:

dt里面放个h3，代码如下：
<dl><dt><h3>asdf</h3></dt></dl>
但是在Firefox用Firebug查看



由上图可以看出儿子级的<h3>居然跳出来跟<dt>称兄道弟。

说说block跟inline的各自的特点：

block元素的特点：

　　总是在新行上开始，即自动换行;

　　高度，行高以及顶和底边距都可控制;

　　宽度默认是它的容器的100%，除非设定一个宽度。

inline元素的特点：

　　和其他元素都在一行上，不会自动换行;

　　高，行高及顶和底边距不可改变，比如你设置<a>的margin-top:5px；它不会鸟你的;

　　宽度就是它的文字或图片的宽度，不可改变。

块元素（block element）

    假如没有css的作用，块元素会顺序以每次另起一行的方式一直往下排，就像玩扑克牌“过五关”一样，由上而下的顺序排列。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。最常见的像<p>

内联元素（inline element）
    一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 <a>。

　　需要说明的是：inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫。

两者之间转换

    最经常的方法是display:block;与display:inline;

    偶尔我也会用display:inline-block；让内联元素保持行内，但是又能设置它的边距。

    提到display:inline;它能够修复闻名的IE6双倍浮动边界问题。所以用得也勤些。

可变元素

    可变元素是基于以上两者随环境而变化的，它的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。这个不确定性就像中性人一样，还是加条display语句确定化比较妥当。

内联元素（inline element）
    ◎ 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 - 下标(原来还有这东西，上次我做下标的时候还用span缩小字体来做，我傻我弱我学习)
　　◎ sup - 上标
　　◎ textarea - 多行文本输入框
　　◎ tt - 电传文本
　　◎ u - 下划线
　　◎ var - 定义变量

块元素（block element）

    ◎ 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 - 非排序列表

可变元素

    ◎ applet - java applet
　　◎ button - 按钮
　　◎ del - 删除文本
　　◎ iframe - inline frame
　　◎ ins - 插入的文本
　　◎ map - 图片区块(map)
　　◎ object - object对象
　　◎ script - 客户端脚本

    但HTML5里面又可以给整块内容（含多个块级元素）加链接

正常情况是应该这样的：<p><a href="/path/to/resource">Paragraph text.</a></p>

HTML5可以这样：<a href="/path/to/resource"><h2>Headline text</h2><p>Paragraph text.</p></a>



    以前这样写是不合乎规范的，现在标准改了，允许咱这样写了。 



   那在内联元素里面加内联元素可以不？

   <span><span></span></span>

   这样当然可以，但是这样呢<a><a></a></a>,出事了.....

file:///C:/DOCUME~1/SUNNYC~1/LOCALS~1/Temp/moz-screenshot-26.png