比较这2段HTML代码

第一段：

<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>

第二段：

<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>

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

第一段代码改动为：

<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>

第二段代码改动为：

<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：适当的注释。