页面布局与编写(续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标签具备下划线和蓝色样式，用户一看就知道这里具备一些互动的操做。