比较这2段HTML代码

第一段：

 1<table cellpadding="0" cellspacing="0" border="1" width="100%">
 2            <tr>
 3                <td colspan="3"><b>基本信息</b></td>
 4            </tr>
 5            <tr>
 6                <td width="30%">姓名</td>
 7                <td width="30%">身份证号码</td>
 8                <td width="40%">性别</td>
 9            </tr>
10            <tr>
11                <td>冯超</td>
12                <td>4401021881001341</td>
13                <td>男</td>
14            </tr>
15            <tr>
16                <td>冯超</td>
17                <td>4401021881001341</td>
18                <td>男</td>
19            </tr>
20            <tr>
21                <td colspan="3"><b>联系方式</b></td>
22            </tr>
23            <tr>
24                <td>姓名</td>
25                <td colspan="2">地址</td>
26            </tr>
27            <tr>
28                <td>冯超</td>
29                <td colspan="2">广州市天河XXXXXX路XXX号</td>
30            </tr>
31            <tr>
32                <td>冯超</td>
33                <td colspan="2">广州市天河XXXXXX路XXX号</td>
34            </tr>
35        </table>

第二段：

 1<table cellpadding="0" cellspacing="0" border="1" width="100%">
 2            <tr>
 3                <td>
 4                    <table cellpadding="0" cellspacing="0" width="100%">
 5                        <tr>
 6                            <td colspan="3"><b>基本信息</b></td>
 7                        </tr>
 8                        <tr>
 9                            <td width="30%">姓名</td>
10                            <td width="30%">身份证号码</td>
11                            <td width="40%">性别</td>
12                        </tr>
13                        <tr>
14                            <td>冯超</td>
15                            <td>4401021881001341</td>
16                            <td>男</td>
17                        </tr>
18                        <tr>
19                            <td>冯超</td>
20                            <td>4401021881001341</td>
21                            <td>男</td>
22                        </tr>
23                    </table>
24                </td>
25            </tr>
26            <tr>
27                <td>
28                    <table cellpadding="0" cellspacing="0" width="100%">
29                        <tr>
30                            <td colspan="3"><b>联系方式</b></td>
31                        </tr>
32                        <tr>
33                            <td width="30%">姓名</td>
34                            <td colspan="2" width="70%">地址</td>
35                        </tr>
36                        <tr>
37                            <td>冯超</td>
38                            <td colspan="2">广州市天河XXXXXX路XXX号</td>
39                        </tr>
40                        <tr>
41                            <td>冯超</td>
42                            <td colspan="2">广州市天河XXXXXX路XXX号</td>
43                        </tr>
44                    </table>
45                </td>
46            </tr>
47        </table>

这两段代码实现效果是一样的，可是如果需求改变，比如：给联系方式加多两列，一列为“电话”放在“姓名”后面，一列为“邮编”，放在“地址”后面。那么这两段代码的改动就不一样了。

第一段代码改动为：

 1<table cellpadding="0" cellspacing="0" border="1" width="100%" ID="Table4">
 2            <tr>
 3                <td colspan="4" ><b>基本信息</b></td>
 4            </tr>
 5            <tr>
 6                <td width="30%">姓名</td>
 7                <td width="30%">身份证号码</td>
 8                <td width="40%" colspan="2" >性别</td>
 9            </tr>
10            <tr>
11                <td>冯超</td>
12                <td>4401021881001341</td>
13                <td colspan="2" >男</td>
14            </tr>
15            <tr>
16                <td>冯超</td>
17                <td>4401021881001341</td>
18                <td colspan="2" >男</td>
19            </tr>
20            <tr>
21                <td colspan="4" ><b>联系方式</b></td>
22            </tr>
23            <tr>
24                <td>姓名</td>
25                <td>电话</td>
26                <td>地址</td>
27                <td>邮编</td>
28            </tr>
29            <tr>
30                <td>冯超</td>
31                <td>88888888</td>
32                <td>广州市天河XXXXXX路XXX号</td>
33                <td>510000</td>
34            </tr>
35            <tr>
36                <td>冯超</td>
37                <td>88888888</td>
38                <td>广州市天河XXXXXX路XXX号</td>
39                <td>510000</td>
40            </tr>
41        </table>

第二段代码改动为：

 1<table cellpadding="0" cellspacing="0" border="1" width="100%" ID="Table1">
 2            <tr>
 3                <td>
 4                    <table cellpadding="0" cellspacing="0" width="100%" ID="Table2">
 5                        <tr>
 6                            <td colspan="3"><b>基本信息</b></td>
 7                        </tr>
 8                        <tr>
 9                            <td width="30%">姓名</td>
10                            <td width="30%">身份证号码</td>
11                            <td width="40%">性别</td>
12                        </tr>
13                        <tr>
14                            <td>冯超</td>
15                            <td>4401021881001341</td>
16                            <td>男</td>
17                        </tr>
18                        <tr>
19                            <td>冯超</td>
20                            <td>4401021881001341</td>
21                            <td>男</td>
22                        </tr>
23                    </table>
24                </td>
25            </tr>
26            <tr>
27                <td>
28                    <table cellpadding="0" cellspacing="0" width="100%" ID="Table3">
29                        <tr>
30                            <td colspan="3"><b>联系方式</b></td>
31                        </tr>
32                        <tr>
33                            <td width="20%">姓名</td>
34                            <td width="15%">电话</td>
35                            <td width="50%">地址</td>
36                            <td width="15%">邮编</td>
37                        </tr>
38                        <tr>
39                            <td>冯超</td>
40                            <td>88888888</td>
41                            <td>广州市天河XXXXXX路XXX号</td>
42                            <td>510000</td>
43                        </tr>
44                        <tr>
45                            <td>冯超</td>
46                            <td>88888888</td>
47                            <td>广州市天河XXXXXX路XXX号</td>
48                            <td>510000</td>
49                        </tr>
50                    </table>
51                </td>
52            </tr>
53        </table>

呵呵，第一段代码改动了14处，第二段代码改动了8处。什么？你说这也没什么区别？要是一个内容多一点的页面改动呢？还认为没什么区别？算了，我给你一根绳子吧！

那么如何写好HTML代码呢？
1：尽量不要使用辅助的可见即可得的开发工具，即使用了，也要直接修改原代码进行优化。
2：对页面元素进行意群分割，就是最简单的分解思维，把同类元素放在一起，不同类的元素分开，彼此尽量松耦合，也就是面向对象中的“封装”思想。例如上面的例子就是用表格（table）来“封装”了不同意群的元素（个人信息、联系方式）。
3：少用或不用层、框架等“高级”功能，尽量使用表格（table）来隔离页面元素。
4：适当的注释。