web前端,工作总结.docxVIP

web前端,工作总结 　　　　之前整理发表了《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+CCtrl+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前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验。WEB标准是什么？　　说是WEB标准，不过我这里主要是对HTML5和的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括、、、、、、、、等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。　　刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法应该是：采用W3C推荐的WEB标准中的HTML5结合样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。　　采用WEB标准开发的好处　　那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发相对以前TABLE布局的优势有哪些？　　1、节约运营成本　　看看我们的WEB标准制作方法是如何做到的？　　采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现，用CSS来控制形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的页