html5工作心得体会,web前端开发工作总结(共5篇).docx

web前端开发工作总结(共5篇)

之前整理发表了《XMLHTTPRequest的属性和方法简介》,它Ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很实用的，现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!　　　　　　效果大家看到了，核心功能有：　　1、将当前选中标签以特殊的样式显示　　2、将异步加载的页面信息显示到指定的DOM节点中　　　　　　我们来看看处理脚本的代码吧：　　　　程序代码：　　　　　　　　id="news"-news就是我们的导航标签的ID；　　id="newsCnt"-newsCnt就是我们要写入信息的目标DOM节点；　　class="first"-first当前(第一个)标签的样式；　　id="news-0"-news-0通过”-“分开，我们就分别可以得到news(导航标签ID)，0　　网站重构-超链接　　-标签间的分割线　　　　　　我罗列的这些东西，相信大家开始看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。　　　　　　本来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V,都贴出来吧！呵呵！！！　　　　不过还没有完，最后要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来改变指定DOM内的HTML字符串的，而不用刷新页面。详细的信息大家还是google　　一下吧，我也要休息下啊！！喝口茶先！！^-^！　　　　　　以上讲了这么多，我们最后来看看，我们这个ajax标签导航都用到了那些技术吧：　　　　　　XHTML　　CSS　　Javascript　　DOM　　XMLHttpRequest对象　　innerHTML　　　　　　还有XML，我们这个例子没有涉及到。东西虽小，包含的知识可是都用到了啊，我把我会的点东西都端出来了，呵呵！　　　　　　当然我很喜欢跟大家多交流，以后有时间，我们在来谈谈CSS的HACKS技巧，JavascriptDOM编程等等的，今天就收工了，谢谢捧场先！！！　　　　　　　　Copyright?XX-XX,Allrightsreserved.PoweredBy:domain　　　　　　　　看出来什么没有？可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少的布局(XHTML)标签。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。　　说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？　　结构清晰--也就是我们常说的，XHTML标签要结构化。　　什么叫结构化？　　由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现和形式是混在一起的，有很多冗余的数据混杂在一起，而大家再看看我上面给大家展示的代码，很明显，结构十分清晰。　　说了半天，还是没有说什么是结构化，什么才是结构清晰啊？不要急。还记得我刚才提到的那几个标签吗？　　web前端核心技术　　从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html5、css3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。JavaScript作为最难的语言之一，许多编程高手也不敢妄自菲薄、自封精通。　　关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有IE6\7\8\9，Firefox，Chrome，Opera，Safari，遨游，包括国内主流的搜狗，腾讯TT，360等等；从内核上讲主要有IE的，遨游版IE，safari，firefox以及opera的，这些都是大家常见的。所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。这个时候就需要针对不同