Web页面入门

开发页面在很多人眼里很简单，大部分的人都会说不就是把效果图变成网页嘛，哪里需要那么多的时间，一点技术含量都没有。确实html页面没有js那么多复杂的交互，也不需要和后台数据打交道，但并不能代表就没有技术含量，也不是人人都能做好的。页面结构好坏直接会影响到css代码的质量，也会影响js和后台的开发，还会影响到以后功能的扩展和代码的优化。

前端页面的工作很琐碎，需要的不仅是基础知识的扎实，知识面的广泛，很重要的一点还要细心。下面我们就讲讲页面开发，开发中需要事项和常遇到的问题吧。

首先分析效果图，细节上是否和站内风格统一；设计的元素是否便于实现；元素是否能复用。有问题及时和产品人员进行沟通，避免开发过程中的频繁修改，影响工期和代码的质量。这些都是为更好的布局和精简css代码做的必要工作。

合理布局很重要，如同大厦的地基，大厦的高度再于地基是否牢固，合理的布局能有更好的扩展性。结构要尽量简洁，尽量减少结构中的嵌套，不要为了实现某种样式添加多余的空标签。

标签尽量语义化，能够让代码更加清晰。现在html5添加了更多的语义化标签，像header，section等，大胆的使用吧。虽然html5对于标签的相互嵌套体现了很好的包容性，即使标签没有闭合，或是inline元素中包含一堆block元素也不会有问题，但是为了养成良好的习惯还是尽量做到严格遵循xhtml的规范。

尽量少在页面写inline css,会使页面代码臃肿，不便于维护，有悖于样式和结构相分离的初衷。

页面中推荐的两种注释：

<%!–jsp注释,不会输出,推荐使用–%>

另一个总和前端页面开发打交道的就是图片。图片分为两种，一种是cssimage引用，另一种纯Image的页面引用。

背景图是通过样式在页面上输出，会在页面中产生请求，延长页面的渲染时间，为了解决这个问题，可以把类似的图片进行合并，减少请求数。在进行合图的时候，尽量把颜色相近的图标放到一起，可以减少图片的大小。

页面中直接引用的图片尽可能少的缩放，非常影响页面的渲染速度；尽可能少的使用前端技术控制图像显示大小，对用户不可见的部分就是浪费带宽，浪费钱，页面的渲染速度也肯定会受到影响，影响用户体验；在知道图片宽高的情况下尽量在img中加上宽高，减少页面reflow造成的速度损耗。

静态图片一定要小，建议存成png8格式，在不影响图片的显示质量下，可以选择128色或是更低的颜色输出图片。当然有的色彩比较丰富的图片，存成jpg格式的更小，难道你会非选png的吗？存储完后图片还能用一些压缩工具进行无损压缩（如：PNGGauntlet）。

对于图片来说小就是原则，为什么呢，给你算个帐，节约10K看不出什么，100个用户是1000K，10000个是100000K,那一亿个用户呢？全是白花花的银子啊！

图片有几点需要注意：

1、我们在使用背景图做图标的时候通常会在页面加一个钩子——img标签，img标签中的src中一定要写上存在的图片链接，人人网通常使用的是一像素的图片代替（http://a.xnimg.cn/a.gif）。如果你忽略了这个地址，页面上会有一个404的请求，在ie6下直接显示一个叉。
2、如果你的工程已经上线，我们站内对静态文件会有一个缓存机制。在开发过程中，经常会遇到修改图片的情况，如果你修改后的图片不更改文件名或是在样式中更改引用该图片的版本号，对于用户而言，他们仍然看不到修改后的图片。所以，一定要记得修改文件名。
3、避免过小的背景图平铺。
4、尽量将图片上的文字提取出来用代码实现，便于图片的复用和日后文案的修改；

css主要说一下注意事项。
1、class命名建议以功能而不是外观命名，不建议使用大小，避免起容易冲突的名字，防止样式被覆盖。
2、CSS后代选择器性能：.a{} > .b .a{}，查找匹配耗费cpu,代码复杂，优先级高，修改不方便；
3、编码时尽可能使用缩写，如padding：top right bottom left;border-width:1px 0;border-color:#CEE1EE;color:#F05;

4、使用CSS display:none隐藏的元素不会被搜索网站检索，会影响到网站的SEO，可以使用text-indent:-9999em;来达到同样效果。
5、减少overflow清除浮动的使用，避免使用无意义的空标签清除浮动，通常站内使用clearfix来清除浮动。
6、border:none;替换border:0;的写法；
7、使用css3的属性来代替阴影或是圆角的图片；

浏览器的兼容问题是页面开发的永衡话题。结构的合理和简洁在很大程度上可以减少兼容性的bug,但是ie的特立独行又不可避免有一些兼容性问题。
IE6、IE7、Firefox之间的兼容写法：
写法一：
IE都能识别*;标准浏览器(如FF)不能识别*；
同一类class下的CSS hack可写为：

.classname{
background-color:#333;/*三者皆可*/
*background-color:#666; /*IE*/
_background-color:#999; /*仅IE6及IE6以下*/
}
一般三者的书写顺序为：FF、IE7、IE6.
写法二：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。
.classname{background-color:#333;}

*html .classname{background-color:#666;}/*仅IE6*/
*+html .classname{background-color:#555;}/*仅IE7*/
常见的css bug这里就不说了，稍后会在wiki里总结一个列表供大家查阅和参考。

对于样式和图片的引用a.xnimg.cn,s.xnimg.cn,xnimg.cn。这三种的区别是a.是在其他地方的域，s.是在北京本地的域，xnimg.cn是曾经的域，通常现在使用a.xnimg.cn,除非非常重要的静态文件才使用s.xnimg.cn。

在开发过程中，我们应该对bug出现有预见性，特别是常见的bug（QA经常提的bug比如连续字符串没有换行，鼠标在没有变成手型…）要提前做出处理。要考虑各种极端数据和不同大小图片在页面中的显示情况。对于代码进行合理的规划，减少冗余，可以简单写下注释，便于以后修改。

再来说一下快速查bug和解决bug的一些个人见解吧。
首先要分辨bug的类型，有的bug不一定是页面的问题。是否是页面套错了某个标签没有闭合，是否需要js修改或是后台技术处理。
查bug，工具是必不可少的，firebug,ie的IEDevToolBar,chrome自带调试工具都能进行调试和修改；使用工具能很快定位bug的位置和类型，作出修改。
经验的积累也是很重要的。有时候你使用了所有的方法解决但问题仍然存在，需要看看DOCTYPE是否在HTML顶部，是否完整，推荐；是否有多余的空格或是编码格式是否正确，

比如ie解析的空格间距不太一样，有时候会导致意想不到的bug。
还有一种方式是逐步删代码方式，看究竟是那个部分是有问题的。

解决bug常用的几个方法：
有人说zoom:1;是解决ie6的兼容问题的万精油。可以用，但是不易多用，这个属性可能会存在一些潜在的问题，至于是什么问题，大家可以google一下。
position:relative;往往和overflow:hidden;搭配使用能解决ie下滚动图片侧漏问题哦。

最后要说的是优化，一定要时时刻刻想着优化自己的代码，给用户带来最好的体验。永远记住这句话【HTML结构的简化>css代码结构的简化】

您可能也喜欢：
打造高排名WordPress博客站点SEO优化技巧 | 织梦(Dedecms)管理员之家 (@dedeadmin)	Free Icons Web (@mydesy)	web页面入门	Web前端优化最佳实践之 内容篇	Web 前端优化最佳实践之 Server 篇
无觅