<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>块元素</title> <meta charset="utf-8" /> <style> p { background-color: aqua; } h1 { background-color:antiquewhite; } ul { background-color:aquamarine; } b { background-color:blue; } a { background-color:chocolate; } img { background-color:fuchsia; } div { background-color:red; } span { background-color:teal; } </style> </head> <body> <!--块元素，块元素在显示时，通常会以新行开始--> 我是来做对比的<p>大家好，我是块P</p> 我是来做对比的<h1>我是块H1</h1> 我是来做对比的<ul>我是块ul</ul> <!--HTML内联元素，内联元素通常不会以新行开始--> 我是来做对比的<b>我是内联元素B</b> 我是来做对比的<a>我是内联元素a</a> 我是来做对比的<img alt="我也是内联元素，奇怪吧。" /> <!--HTML<DIV>元素,元素也被成为块元素，基主要是组合HTML元素的容器--> <div>我是DIV1</div><div>我是DIV2</div> <div><p><span>这是谁</span></p></div> <!--HTML<span>元素，是内联元素，可作为文本的容器--> <span>我是SPAN1</span><span>我是SPAN2</span> </body> </html>
原文：http://www.cnblogs.com/chao2014/p/5074345.html