在网页的划分中元素可以分为块元素和内联元素或者也叫行内元素都可以，那块元素主要用来给我们的网页进行布局，而内联元素主要用来对文字进行样式的设置，那就需要我们来了解什么是块元素和什么是内联元素了，这样我们才可以使用好各个元素，做出给力的网页。
工具/原料
1
windows记事本（任意一个版本即可）
2
Sublime(也是一种记事本)
3
任意一个浏览器即可（这里使用Google Chrome浏览器）
方法/步骤
1
1.如图所示，我们新建一个记事本，并将记事本的名字改为“块元素和内联元素区分.html”，并回车键确定，以使文件转化为浏览器可以打开的html网页文件。
2
2.如图所示，我们用标签来声明这是一个html5的文档，并且写一个标签来包含网页的主体。
3标签来写入网页的标题，并且用<meta>标签设置文档的编码方式为UTF-8,以使浏览器正确解码我们的网页。</p></div><div class="listcon"><span>4</span><p>4.如图所示，我们写<body>标签用来包含html5的主体部分，并且再写几个块元素为大家做演示哦！</p></div><div class="listcon"><span>5</span><p>5.如图所示，我们写了一个<p>标签并且写入“我是一个块元素”这一句话，并且设置其background-color为green（background-color就是英文背景颜色的意思，而green是英文绿色的意思。），并且再写一个背景色为绿色，但宽度为120px的块元素做对比（px为像素的意思）。</p></div><div class="listcon"><span>6</span><p>6.如图所示，我们鼠标右击将其打开在谷歌浏览器中查看，我们看到p元素独占一行，下面的块元素也独占一行，别的元素不会排上去的。</p></div><div class="listcon"><span>7</span><p>7.如图所示，我们我们再写一个div元素，并且设置其背景色为黄色，文字为红色，我们看看它是否也独占一行，另为我们再写一个div元素，设置其样式为蓝色还有宽度为200px，来看看其会不会排上去（温馨提示：元素就是标签，标签就是元素哦！）。</p></div><div class="listcon"><span>8</span><p>8.如图所示，我们鼠标右击，在弹出的下拉菜单那中，我们选择在“在浏览器中打开”这一项，来查看我们的html文档。</p></div><div class="listcon"><span>9</span><p>9.如图所示，我们看到div独占一行，下面的div也独占一行没有排上去，至此我们总结下块元素包括p元素、div元素、h1-h7这些元素都是块元素，而且块元素会独占一行。</p></div><div class="listcon"><span>10</span><p>10.如图所示，我们来写几个内联元素，展示下内联元素的特点，内联元素主要有img元素、span元素、a元素、iframe元素等，特点就是只占其自身的大小。一般用块元素包含内联元素，不能用内联元素去包含块元素，其中a元素可以包含任何元素除过它本身，而p元素不能包含任何块元素。</p></div><div class="listcon"><span>11</span><p>11.如图所示，我们写一个图片标签，并且给个alt的描述为“我是一个图片”。</p></div><div class="listcon"><span>12</span><p>12.如图所示，我们在谷歌浏览器中看到了，我们插入的图片（因为是演示没有添加图片，只是个图片图标而已，能代表就可以了哈！具体可以看其他经验。）。</p></div><div class="listcon"><span>14</span><p>14.如图所示，我们看到我们写的span和a元素紧紧的排在img元素之后，这就说明这些内联元素，只占其本身的大小，不会独占一行的。</p></div><div class="listcon"><span>15</span><p>15.如图所示，我们在写一个iframe内联框架的元素，设置其高度为20px，为大家演示iframe也是一个内联元素哦！</p></div><div class="listcon"><span>16</span><p>16.如图所示，我们看到iframe也是紧紧排在了a元素之后，不会独占一行的。</p></div><div class="listcon"><span>17</span><p>17.如图所示，所以内联元素也叫行内元素，不会独占一行，只会占据其本身的大小而已。</p></div><div class="listcon"><span>18</span><p>18.如图所示，这是网页dome的源码，以供大家参考哦！<!--对文档进行声明为html5文档--><!DOCTYPE html><!--编写文档的整体--><html><!--网页的头部--><head><!--网页的标题--><title>块元素和内联元素区分 
我是一个span我是一个链接
3.如图所示，我们写入
标签用来包含html5文档的头部，用我是一个块元素
我是一个块元素
我是一个div，我会独占一行
我是一个宽度为60px的div
注意事项
1
1.欢迎大家有问题时，向本大神进行提问哦！
2
2.没有软件的也可以找本大神。
下一篇：平面设计中的元素有哪些