一、HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
二、HTML 块级元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: <h1>, <p>, <ul>, <table>
三、HTML 内联元素
内联元素在显示时通常不会以新行开始。
实例: <b>, <td>, <a>, <img>
四、HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
Another common use of the <div>元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。
它取代了使用表格定义布局的老式方法。
使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
五、HTML <span> 与元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
六、HTML 分组标签
<div> 定义了文档的区域，块级(block-level)
<span> 用来组合文档中的行内元素，内联元素(inline)
网站布局：
大多数网站会把内容安排到多个列中，就像杂志或报纸那样。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
七、HTML 布局 - 使用<div> 元素
div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：
<!DOCTYPE html>
<html>
<body>
<div id="container" >
<div id="header" >
<h1 >Main Title of Web Page</h1></div>
<div id="menu" >
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" >
Content goes here</div>
<div id="footer" >
Copyright © ZiQiangXueTang.com</div>
</div>
</body>
</html>八、HTML 布局 - 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式。
即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" >
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td >
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td >
Content goes here</td>
</tr>
<tr>
<td colspan="2" >
Copyright © ZiQiangXueTang.com</td>
</tr>
</table>
</body>
</html>
