WEB前端开发经验总结

ASP.NET前端开发经验总结通过此次大作业的设计到完成，我负责的是web前端的开发，经过此次作业和结合W3C上的自学，我渐渐有了一些对前端开发的小小经验（仅为个人意见）。WEB标准是什么？说是WEB标准，不过我这里主要是对HTML5和CSS3.0的一些经验总结。因为WEB含盖的内容实在是太多了，“WEB标准”是一系列标准的总称，包括HTML5.0、HTML4.0、XHTML1.1、CSS3.0、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了――DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用W3C推荐的WEB标准中的HTML5结合CSS3.0样式表制作页面的方法，DIV应该指的是HTML标签，而CSS显示是指的CSS样式表了。采用WEB标准开发的好处那么W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？1、节约运营成本看看我们的WEB标准制作方法是如何做到的？采用WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面，XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。而我们的CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。2、对用户友好更友好，且有机会获得更多的用户现在来说说用户友好。首先我想把我们的用户来分下类。第一类：普通用户（每个访问我们网站的人）；第二类：搜索引擎；采用WEB标准开发的页面，结构清晰，页面体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。而对搜索引擎来说，一个好的采用WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很容易理解你的页面中哪里是标题（H1~H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签）等，它可以很容易的分析出来。而一个SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用WEB标准开放网站的原因啊。而这个技术也得到了我们广大用户的认可，所以现在需要学习WEB标准啊。合理的布局前面我提到了一些知识点――“结构清晰、SEO优化、页面体积小、HTML代码中基本上都是用户要看的数据”。这些东西，都是我做了合理布局的结果。而且我个人觉得，我们采用WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。也许有人会问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开始学用WEB标准的问得最多的问题之一，我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局。这是此次实验中customer（前端的一项）部分的完整代码：%@PageLanguage=C#AutoEventWireup=trueCodeFile=Customer.aspx.csInherits=Customer%%@RegisterSrc=Controllers/Bottom.ascxTagName=BottomTagPrefix=uc4%%@RegisterSrc=Controllers/Top.ascxTagName=TopTagPrefix=uc1%%@RegisterSrc=Controllers/Left.ascxTagName=LeftTagPrefix=uc2%htmlheadtitle%=Titlep%/titlemetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/metacontent=%=Descriptionp%name=description/metacontent=%=Keywordsp%name=keywords/linkhref=Images/css.cssrel=stylesheettype=text/css//headbodystyle=text-align:centerformid=form1runat=servertableborder=0align=centercellpadding=0cellspacing=0style=width:778pxtrtdstyle=width:100pxuc1:TopID=Top1runat=server//td/tr/tabletableborder=0align=centercellpadding=0cellspacing=0style=width:778px;background-color:#ffffff;trtdstyle=height:395pxtableborder=0cellpadding=0cellspacing=0style=width:778pxtrtdwidth=183align=leftvalign=toptablewidth=183border=0cellspacing=0cellpadding=0trtddivalign=leftuc2:LeftID=Left1runat=server//div/td/tr/table/tdtdwidth=595valign=topdivalign=centertablewidth=100%border=0cellspacing=0cellpadding=0trtd /td/tr/tabletablewidth=100%border=0cellspacing=0cellpadding=0trtdimgsrc=Images/a4.jpgheight=37/td/tr/tabletablewidth=100%border=0cellspacing=0cellpadding=0trtdstyle=height:12px asp:DataGridID=NewGridrunat=serverAllowPaging=TrueAutoGenerateColumns=FalseBorderWidth=0pxCellPadding=0GridLines=NoneHeight=1pxOnPageIndexChanged=DataGrid1_PagePagerStyle-HorizontalAlign=RightPageSize=4ShowHeader=FalseWidth=237pxColumnsasp:TemplateColumnItemTemplatetableborder=0cellpadding=0cellspacing=10width=560trtdstyle=height:24pxwidth=20divalign=centerimgheight=13src=Images/35.jpgwidth=11/div/tdtdclass=text03style=height:24pxwidth=403ahref='Customer_More.aspx?ID=%#DataBinder.Eval(Container.DataItem,id)%'%#DataBinder.Eval(Container.DataItem,title)%/a/tdtdclass=text03style=height:24pxwidth=77[%#DataBinder.Eval(Container.DataItem,pub_date,{0:d})%]/td/tr/table/ItemTemplateHeaderStyleWidth=12px//asp:TemplateColumn/ColumnsPagerStyleHorizontalAlign=RightNextPageText=下一页PrevPageText=上一页//asp:DataGrid/td/tr/table/div/td/tr/table/td/trtrtdstyle=width:100pxuc4:BottomID=Bottom1runat=server//td/tr/table/form/body/html看出来什么没有？（代码是很多）可能大家已经发现，整个页面里基本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面基本都是由最基础的h1~h6、p、ul、ol、li、form、div标签来实现的。说到这里就要讲到我在前面提到的“结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”，看看我的这个例子做到了没有？结构清晰--也就是我们常说的，HTML标签要结构化。什么叫结构化？由于个人认为这个知识点是十分重要的，我采用WEB标准的方法制作页面的优势就体现在页面结构清晰。我以前用table布局的时候，我的表现（数据）和形式（布局样式）是混在一起的，有很多冗余的数据混杂在一起，而我上面给大家展示的代码，很明显，结构十分清晰。h1~h6--如果你要显示的数据是作为标题显示的时候，就用这些标签，因为这个标签的意思就是说，这个是一个标题，不仅我们的用户很容易理解h-head的英文字母缩写，我们的另外一个用户搜索引擎也可以很容易理解它。呵呵，看到了吧，一个充分结构化的页面，对用户是十分友好的。p--Paragraph（段落）ul--unorglizedlist(无序的列表)ol--orglizedlist(有序的列表)li--listitem(列表项)form--表单div--division(区域)我写成这样就便于理解了，原来HTML标签是有着自己的意义的（至于其他的标签的语意义，大家可以自己到W3C看看它的解释，也可以查看语义化你的HTML标签和属性），所以我们讲要语意化的意思，就是用合理的标签来显示数据，比如前面提到的，是标题，就应该用h1~h6标签，如果是一个段落的介绍文字，那么就应该使用p标签，如果是显示的一个没有顺序的列表，就应该用ul标签，如此...所以看这个例子里h2标签导航实例详解/h2这么写就是很合理的，h2标签就说明这里是个标题。而这么写：复制内容到剪贴板代码:.title{font-size:18px;...}divclass=titlestrong标签导航实