标签语义化之常用HTML标签
一、布局的理解误区
网络上流行管新型的布局方式叫“DIV+CSS”，其实是一个错误的理解，导致了很多人过度依赖与滥用DIV标签， HTML提供了我们一共七八十个标签，其中常用的有三十个左右，DIV不过是一个相对的空标签而已，在很多情况下，我们可以使用其他更合适且更简洁的标签可以替代它。
二、标签的差异
共性：都是一个容器，可以在其中放置内容
差异：分为行内和块级两个大类，且不同便签有相应含义上的预设，如：h-标题，p-段落，a-链接，等等
三、标签语义化的好处
a、让结构更简洁，让搜索引擎更友好
b、通过多重组合，减少不必要的CSS命名
四、语义化标签的使用
a、列表：ul、ol、li、dl、dt、dd
b、标题：h1~h6
c、段落：p
d、强调：strong
e、表格：table、tr、td，以及表格的其他成员th、thead、tbody、tfood
附录：常用HTML标签表
红色：结构标签 黑色：行内元素 蓝色：块级元素 绿色：表格元素 灰色：其他标签
<!--...--> | 定义注释。 |
|---|---|
<body> | 定义文档的主体，默认有外边距，注意清除。 |
<head> | 定义页面的信息。 |
<html> | 定义 HTML 文档。 |
<meta> | 定义页面的描述信息，便于搜索优化。 |
<title> | 定义文档的标题。 |
<link /> | 定义引用外部文件，如联入CSS样式表。 |
<style> | 定义内联的CSS样式信息。 |
<script> | 定义内联或外联的客户端脚本，如JS。 |
<a> | 定义锚链接或其他链接，行内元素。 |
<img /> | 定义引入一张图片，行内元素。 |
<strong> | 定义强调文本，样式为加粗，行内元素。 |
<span> | 定义一个行内元素的空盒子。 |
<div> | 定义一个块级元素的空盒子。 |
<h1> to <h6> | 定义标题部分，默认有外边距，块级元素。 |
<ul> | 定义无序列表，默认有外边距和内边距，块级元素。 |
<ol> | 定义有序列表，即数字列表，默认有内外边距，块级元素。 |
<li> | 定义列表的项目，一般被嵌套在<ul>和<ol>内，块级元素。 |
<dl> | 自定义列表的项目，默认有外边距和内边距，块级元素。 |
<dt> | 自定义列表的标题，嵌套在<dl>内，与<dd>区别，块级元素。 |
<dd> | 自定义列表的内容，嵌套在<dl>内，与<dt>区别，块级元素。 |
<p> | 定义段落，默认有一个行高的外边距。 |
<table> | 定义表格。 |
<tr> | 定义表格中的行。 |
<td> | 定义表格中的单元。 |
<th> | 定义表格中的表头单元格。 |
<thead> | 定义表格中的表头内容。 |
<tbody> | 定义表格中的主体内容。 |
<tfoot> | 定义表格中的表注内容（脚注）。 |
<br /> | 定义一个回车换行。 |
<map> | 定义图像映射，即鼠标热区。 |
<area> | 定义图像映射内部的区域。 |
<form> | 定义输入提交的表单。 |
<button> | 定义表单中的按钮 (push button)。 |
<input> | 定义表单中的输入控件。 |
<select> | 定义表单中的选择列表（下拉列表）。 |
<frame> | 定义框架集的窗口或框架。 |