1.块元素
（1）大多数 HTML 元素被定义为块级元素或内联元素。
（2）块级元素在浏览器显示时，通常会以新行来开始（和结束），比如：<h1>, <p>, <ul>, <table>
2.内联元素
（1）在显示时通常不会以新行开始，例如：<b>, <td>, <a>, <img>
3.<div>元素
（1）HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
（2）<div> 元素没有特定的含义，除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
（3）如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
（4）<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
（5）设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类。
示例代码：
<html> <head> </head> <meta charset="utf-8"> <body style="background-color:green;color:white"> <!--块-div--> <style type="text/css"> .cities{ background-color: black; color: white; margin: 20px; padding: 20px; } </style> <style type="text/css"> span.red{color: red;} </style> <h3>这是一个header</h3> <p>This is a paragraph.</p> <div style="color:red"> <h3>这是一个header</h3> <p>This is a paragraph.</p> </div> <h1>NEWS WEBSITE</h1> <p>some text. some text...</p> <div class="news" id="news1"> <h2>News headline 1</h2> <p>some text1. some text1...</p> </div> <div class="news" id="news2"> <h2>News headline 2</h2> <p>some text3. some text3...</p> </div> </body> </html>展示效果：
4.<span>元素
（1）HTML <span> 元素是内联元素，可用作文本的容器。
（2）<span> 元素也没有特定的含义，当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
示例代码1：
<html> <head> </head> <meta charset="utf-8"> <body style="background-color:green;color:white"> <!--块-span--> <h1> My <span class="red">Important</span> Heading is very <span class="red">very very</span> interesting. </h1> </body> </html>展示效果：
示例代码2：
<html> <head> </head> <meta charset="utf-8"> <body style="background-color:green;color:white"> <!--块-span--> <p> <span>some text.</span> some other text. </p> <div class="cities"> <h2>London</h2> <p> London is the capital city of England. </p> </div> <div class="cities"> <h2>Paris</h2> <p> Paris is the capital city of France. </p> </div> <div class="cities"> <h2>Beijing</h2> <p> Beijing is the capital city of China. </p> </div> </body> </html> 展示效果：
5.对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式
