大多数 HTML元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。那什么是块级元素，什么又是内联元素呢？它们分别是用来做什么的呢？

一、HTML 块元素

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

  例子：<h1>, <p>, <ul>, <table>

HTML <div>元素

 HTML <div>元素是块级元素，它是可用于组合其他 HTML 元素的容器,我们把它称为一个层。<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

  如果与 CSS 一同使用，<div>元素可用于对大的内容块设置样式属性。

  <div> 元素的另一个常见的用途是文档布局，它取代了使用表格定义布局的老式方法。但使用 <table>元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

     <div></div>将内容放到层中，div定义一个矩形,可以将这些内容当成一个整体进行处理，比如，整体隐藏，整体移动。div非常强大和常用，类似于winform 中的panel

二、HTML 内联元素

内联元素在显示时通常不会以新行开始。

  例子：<b>, <td>, <a>, <img>

HTML <span> 元素

 HTML <span> 元素是内联元素，可用作文本的容器。<span> 元素也没有特定的含义。

 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

 div是将内容放到一个矩形的区块中，会影响布局，而span知识把一段内容定义成一个整体进行操作，不影响布局显示。可以是任何形状，不改变原始的排版；

三、效果图：

   代码：

四、总结：

  div：定义文章的分区或节

  span：用来组合文档中的行内元素