【笔记】编写高质量代码之Web(二)——高质量的HTML

高质量的HTML

从开始会写页面开始使用div布局时，div无时无刻不出现在我的页面中。殊不知这种对于div的滥用直接破坏了网页的结构。HTML除了div和span其他的标签都是有语义的，而这两个无语义标签也是大家经常用于布局的，它们可以让你的页面表现的很漂亮，但其实整个网页结构是不清晰的，甚至是混乱的。首先使用语义化标签，当语义化标签无法完成页面要表现的样式时，才使用div和span这两个无语义标签帮助布局。

为什么要使用语义化标签呢？

首先，它可以减少代码量，用了正确的语义标签在一定程度上就减少了使用div+css布局的代码，同时使HTML的结构更加清晰；

其次，搜索引擎只能看到页面代码而看不到视觉效果，语义标签良好能帮助搜索引擎更好的解析；

最后，语义标签良好能更好的实现特殊终端的兼容。

但就算你用再良好的语义标签也无法完成整个页面的美化布局，下面就用到了CSS布局，其核心思想就是用CSS来控制网页中的样式，而使得HTML专注于结构。CSS弱化了标签的布局能力，减少了代码量，但在页面设计中HTML的结构设计才是核心，而CSS仅仅是用来修饰结构的。写页面，首先确定HTML，确定语义的标签，再选择合适的CSS。

如何判断标签语义是否良好呢？

曾经在页面开发工具中见到过一个功能——去掉CSS样式，这是神马用处？我设计页面就是要看它要实现的效果啊？去掉了样式我还看页面干嘛？其实这个功能的其中一个用处就是看你的页面语义是否良好，去掉样式以后页面是否仍然组织有序，仍然具有很好的可读性。也许很多人没有听说过“CSS裸体日”，它就是用来提醒网页设计师们要注重选择良好的HTML语义标签。

需要注意的几点：

1. 页面文本有上下级组织关系时，使用h1、h2、h3……进行标识。注意要有序使用标签，即用了h1才用h2,没用h2忌用h3。这样可以提高搜索引擎检索的效率；
2. table布局少用，但不是用了就不好。用table布局时要注意使用caption、thead、tbody、th等标签；
3. 表单域建议用filedset括起来，并用legend标签说明表单用途；
4. 每个input标签对应的说明文本都要用label标签；
5. 尽可能的少用无语义标签div和span；
6. 在可以用p和div的地方，建议用p，因为p在去样式后可读性更好；
7. 不使用纯样式标签，即b、font、u等,这些都可以通过CSS设置.

                                                                                                                                                            摘录于《编写高质量代码之web前端开发修炼之道》