出处

1. HTML 块级元素（block element）

块级元素总是在新的行上开始，并尽可能地占据本行全部可用的宽度。
以下为常见的块级元素：

<address> <article> <aside> <blockquote>
 <canvas> <dd> <div> <dl> <dt> <fieldset>
 <figcaption> <figure> <footer> <form> <h1>~<h6> 
<header><hr><li> <main> <nav> <noscript> <ol> <output>
 <p> <pre> <section> <table> <tfoot> <ul> <video>

2. HTML 行内元素（inline element）

相反，行内元素不会另起一行，它也只占用必要的宽度。
一言以蔽之：块级元素讲究排场，行内元素勤俭节约！（当然，也不是说谁好谁坏，元素无贵贱，存在即合理）
以下为常见的行级元素：

<a> <abbr> <acronym> <b> <bdo> <big> <br> 
<button> <cite> <code> <dfn> <em> <i> <img> 
<input> <kbd> <label> <map> <object> <q> 
<samp> <script> <select> <small> <span> <strong>
 <sub> <sup> <textarea> <time> <tt> <var>

3. 行内元素与块级元素对比

一般情况下，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。
这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

4. 为什么要将内容分为块级和行内？

……
    <p>黑夜给了我黑色的          

        <span>眼睛</span>，</p>
    <p>我却用它寻找     <span>光明</span>。</p>
……

效果

这是因为 HTML 要求浏览器将连续的空白字符合并为一个空格，这种做法其实很有道理，因为这样可以把 HTML 文档的布局和文档内容自身的布局给区别开来。
相当于你文档中使用空格换行来达到所谓的美观需求的布局，HTML 是不予理会的，如果你想要内容在网页上以美美哒的形式展现出来，那好，请使用 HTML 的语法来实现。

5.思维导图（by 不二如是）

思维导图