文档介绍：web前端,工作总结之前整理发表了《XMLHTTPRequest的属性和方法简介》,它Ajax要使用的核心的技术之一,现在就来实际运用它。这个Ajax标签导航,是我很久前就写的一个脚本,很实用的,现在拿它来做实例讲解吧!当然个人能力有限,有什么不对的地方还请多包含! 效果大家看到了,核心功能有: 1、将当前选中标签以特殊的样式显示 2、将异步加载的页面信息显示到指定的DOM节点中我们来看看处理脚本的代码吧: 程序代码: id="news"-news就是我们的导航标签的ID; id="t"-t就是我们要写入信息的目标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,: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来控制。这样一来我们的页面的体积就大大减小了,这样你在带宽上的费用就会大家降低了,这个怎么降低的,你可以想象一下,YAHOO的首页小1K,100W个人一起访问,那么带宽节约了多少?而且可以更充分的利用带宽。而我们的CSS控制了,所有的页面元素的样式,现在想改网站的整体风格,你只需要花几分钟修改一下一个CSS文件,就可以轻松搞定了。维护的成本也下来了,省了不少钱了吧?还有,你开这个页面的速度会快很多啊,一个