页面布局与编写(续3)

概述

心塞，每天写一篇博文断了，昨天没挖坑。。。所以这篇是补写昨天的。

废话少说，最近写了一些页面，也看了一些别人写的页面，深有体会，记录下来供以后开发时参考，相信对其他人也有用。

阶段

我觉得页面布局与编写的学习有下面三个阶段：

1. 能用基本的html,css和js实现效果了。
2. 发现用html,css和js实现效果的多种方法，并且能够比较不同方法的优劣。
3. 能够选用最优的方法编写html,css和js，做到代码健壮(bug兼容性好)、代码清晰(后期容易维护)。

这篇博文并不讨论怎么用html,css和js实现效果，而是主要记录了我在代码健壮和清晰方面的一些心得。

背景

如果背景是一个背景图片的话，那么一定要设置背景颜色，而这个颜色和你的背景图片的底色是一样的。

应对这种情况：由于这样或那样的原因，导致页面的2个部分出现了空隙，没有被背景图片覆盖到，如果不设置背景颜色的话，这个空隙就成了一条白边很难看，设置了背景颜色的话，空隙的颜色就是背景颜色，完美融入背景图片里面。

class

div是一个包裹标签，本身并没有任何含义。所以所有的div都必须加一个class，用来描述它的用途。

应对这种情况：如果不看css，直接看html的话，html必须是清晰易读的，ul、img、li、a等标签具有很好的语义，但是看div却是一脸懵逼，因为它没有任何语义，所以加上class之后，能够清晰的看出这个div是干什么的。

图片型标签

有一些标签是利用background来存放图片的，本身并没有任何文字。对于这种标签，必须加上图片上面的文字(除非文字太多否则不用加)，并且用下面的代码保证文字不会显现出来：

text-indent: -9999;
font-size: 0;

应对这种情况：如果样式表加载不出来的话，那么这个标签等于消失了，但是如果有文字的话，就会给用户看到你写的文字。当然，更重要的作用是为了方便SEO。

a还是div

提供给js操作的标签，本身并不需要url跳转，这个时候用a标签或者div标签都可以，但是，如果这个js涉及到用户操作的话，就必须使用类似下面的a标签而不是div标签：

<a href="javascript:void(0);"></a>

应对这种情况：如果样式表加载不出来的话，div标签没有任何样式，用户根本不知道这里能够进行一些用户操作；但是a标签具有下划线和蓝色样式，用户一看就知道这里具有一些互动的操作。