WEB前端开发经验总结_第1页
WEB前端开发经验总结_第2页
WEB前端开发经验总结_第3页
WEB前端开发经验总结_第4页
WEB前端开发经验总结_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、WEB前端开发阅历总结发布时间：2009-04-20 09:05:33  来源：  作者：shengman  点击：21015这里跟大家谈谈个人对WEB前端开发的一些阅历（当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从WEB标准开头吧。WEB标准是什么？说是WEB标准，不过我这里主要是对XHTML1.1 和 CSS2.1的一些阅历总结。由于WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScrip

2、t1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS精确的说法（个人的理解）应该是：接受W3C推举的WEB标准中的XHTML1.1结合CSS2.0样式表制作页面的方法，DIV应该指的是XHTML标签，而CSS显示是指的CSS样式表了。 接受WEB标准开发的好处那么W3C为什么会推举这样的页面制作方法呢？下面我们就简洁的看看接受WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？1、节省运营成本看看我们的WEB标准制作方法是如何做到的？接受WEB标准制作，我们可

3、以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来掌握（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来掌握。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节省了多少？而且可以更充分的利用带宽。而我们的CSS掌握了，全部的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很

4、多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。2、对用户友好更友好，且有机会获得更多的用户现在来说说用户友好。首先我想把我们的用户来分下类。第一类：一般用户（每个访问我们网站的人）；其次类：搜寻引擎；接受WEB标准开发的页面，结构清晰，页面体积小，扫瞄器兼容性好。一般用户访问的时候，页面打开速度快，而且不管用户使用那种扫瞄器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很便利的扫瞄到。而对搜寻引擎来说，一个好的接受WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1H6标签），

5、哪里是段落（p标签），哪里是段落里要强调的内容（strong标签） 等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜寻引擎收录的机会更多，这个也意味着您的网站会被更多的一般用户访问到，给你的站点带来更多的用户。一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面扫瞄速度，对用户友好，甚至能够不花钱宣扬，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推举使用WEB标准开放网站的缘由啊。而这个技术也得到了我们宽阔用户的认可，所以您现在需要学习WEB标准啊。温习完了基础课程，现在正式开头讲XHTML和CSS的技巧了。合理的布局有伴侣会开头问了，怎么一

6、开头就开头讲合理的布局了呢?前面我们提到了一些知识点“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们接受WEB标准制作的一切都是从这个知识点开头的，所以我这里就先来说这个话题。那么大家又会开头问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开头学用WEB标准的问得最多的问题之一，我也曾常常被这个问题所困扰，这里就说说我对合理布局的一些理解。在开头讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：不错，这个是一个文章简略页，没有左右两栏布局，不过

7、这里我重点要讲的是合理的布局，在稍后的文章中我会简略的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。我这里先把代码写给大家看看（省略了部分代码）：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"

8、 /><title>Ajax标签导航实例详解</title><link href="css/article.css" rel="stylesheet" type="text/css" media="all" /><script language="javascript" type="text/javascript" src="/upload/1/0/8/8/10881/"></script>

9、</head><body><div id="container"><div id="topbar"><h1><a href="" target="_blank" title="海啸的地盘-享受生活，享受每一天！">海啸的地盘-享受生活，享受每一天！</a></h1><div id="search-bar"><form name="frmsearch&qu

10、ot; id="frmsearch"    action="" method="post"><label for="keyword">站内搜寻：</label>    <select id="topics">    <option value="0">全部主题</option>    <

11、option value="1">(X)HTML</option>    <option value="2">CSS</option>    <option value="3">Javascript</option>    <option value="4">XML</option>    <optio

12、n value="5">ASP/ASP.NET</option>    </select><input type="text" name="keyword" id="keyword" value="请输入搜寻关键字" maxlength="60" /><input type="reset" name="btnsearch" id="btnsearch

13、" value="开头搜寻" /></form>        </div>    </div><ul id="nav">    <li><a href="#2">ARTICLES</a></li>    <li><a href="#2&q

14、uot;>TOPICS</a></li>    <li><a href="#2">ABOUT</a></li>    <li><a href="#2">CONTACT</a></li>    <li><a href="#2">GESTBOOK</a></li> &#

15、160;  <li><a href="#2">FEED</a></li>    </ul>    <h2>Ajax标签导航实例详解</h2><div id="article-info">作者/程序设计：<a href="domainmailto:">domain</a>  来源：<a href="" target

16、="_blank"></a>  发布时间：2008年4月28日</div><h3>代码篇</h3>     <p>     之前整理发表了<a href="" target="_blank">XMLHTTPRequest的属性和方法简介</a>,它Ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很有用的（还

17、被很多网站收录了哦），现在拿它来做实例讲解吧！当然个人能力有限，有什么不对的地方还请多包含!     </p>     <p>     效果大家看到了，核心功能有：<br />         1、将当前选中标签以特别的样式显示<br />         2、将异步加载

18、的页面信息显示到指定的DOM节点中     </p>     <p>     我们来看看处理脚本的代码吧：     </p><div class="code-title">程序代码：ajaxtab.js</div>     <div class="js code" name="cod

19、e" id="js-code"><!-<br />/ 推断是否支持ActiveX<br />var useActiveX=(typeof ActiveXObject != "undefined"); <br />/ 推断是否支持DOM<br />var useDom=document.implementation && document.implementation.createDocument;<br />/ 推断是否支持XMLHttpRequest对象&

20、lt;br />var useXmlHttp=(typeof XMLHttpRequest != "undefined");<br />/ XMLHttpRequest对象版本<br />var ARR_XMLHTTP_VERS = "MSXML2.XmlHttp.6.0","MSXML2.XmlHttp.3.0"<br />/ DOM对象版本 <br />var ARR_DOM_VERS = "MSXML2.DOMDocument.6.0","MSX

21、ML2.DOMDocument.3.0" <br />/* =<br />* 函数名称：$(i)<br />* 参数说明：i - 目标节点名称<br />* 函数功能：猎取指定的目标DOM节点<br />* 返 回 值：返回要搜寻的目标DOM节点<br />* 使用方法：$("frmSearch")<br />= */<br />function $(i)<br />      if(!document.ge

22、tElementById)return false;<br />      if(typeof i="string")<br />            if(document.getElementById && document.getElementById(i) <br />       &#

23、160;       / W3C DOM<br />              return document.getElementById(i);<br />         <br />         els

24、e if (document.all && document.all(i) <br />              / MSIE 4 DOM<br />               return document.all(i);<br />   &

25、#160;     <br />         else if (document.layers && document.layersi) <br />               / NN 4 DOM. note: this won't find nested layers<br

26、/>               return document.layersi;<br />         <br />         else <br />        

27、;       return false;<br />         <br />      <br />      elsereturn i;<br /><br />/-></div>    <p>id="news"

28、      - news就是我们的导航标签的ID；<br />id="newsCnt"   - newsCnt就是我们要写入信息的目标DOM节点；<br />class="first"  - first当前(第一个)标签的样式；<br />id="news-0"    - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签li在导航标签中的索引值）<br

29、 /><a href="news/news0.htm">网站重构</a> - 超链接<br /><span></span>  - 标签间的分割线<br />    </p>    <p>我排列的这些东西，信任大家开头看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。     &

30、#160; </p>    <p>原来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+C&Ctrl+V,都贴出来吧！呵呵！    </p>    <p>不过还没有完，最后要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来转变指定DOM内的HTML字符串的，而不用刷新页面。简略的信息大家还是google一下吧，我也要休息下啊！喝口茶先！-！    <

31、/p>    <p>以上讲了这么多，我们最后来看看，我们这个ajax标签导航都用到了那些技术吧：    </p>    <ol><li>XHTML</li><li>CSS</li><li>Javascript</li><li>DOM</li><li>XMLHttpRequest对象</li><li>innerHTML</li&g

32、t;    </ol>    <p>还有XML，我们这个例子没有涉及到。东西虽小，包含的（web前端开发）知识可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！    </p>    <p>当然我很喜爱跟大家多沟通，以后有时间，我们在来谈谈CSS的HACKS技巧，Javascript DOM编程等等的，今日就收工了，感谢捧场先！     </p> </div>&l

33、t;p id="copyright">      Copyright &copy; 2007-2008 <strong><a href=""></a></strong>, All rights reserved.    Powered By: <a href="domainmailto:">domain</a></p></body></htm

34、l> 看出来什么没有？（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面基本都是由最基础的h1h6、p、ul、ol、li、form、div标签来实现的。说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？结构清晰-也就是我们常说的，XHTML标签要结构化（语意化）。什么叫结构化？由于个人认为这个知识点是十分重要的，所以请允许我在这里多罗嗦几句，我们接受WEB标准的方法制作页面的优势就体现在页面结构清晰。我们以前用table布局的时候，我们的表现（数据）

人人文库> 全部分类> 应用文书 > 年终总结

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论