《Web前端基础总结三篇》由会员分享，可在线阅读，更多相关《Web前端基础总结三篇（5页珍藏版）》请在金锄头文库上搜索。
1、Web前端基础总结三篇前端工作总结篇一：前端开发心得从事前端开发工作1 年多了，从最初的DIV+CSS学起，到现在学到 html5 、css3、javascript，jquery等等，我觉得前端要学的技术太多了，很多人认为前端开发要掌握的技能简单，就是网页制作，其实不然，前端开发是网站的前台代码实现， 包括基本的 HTML和 CSS以及 JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。JavaScript作为最难的语言之一， 许多编程高手也不敢妄自菲薄、自封精通。关于兼容性的问题我相信对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流浏览器有
2、IE6789，Firefox ，Chrome，Opera，Safari ，遨游，包括国内主流的搜狗，腾讯 TT，360 等等；从内核上讲主要有 IE 的，遨游版 IE ， safari ，firefox 以及 opera 的，这些都是大家常见的。 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析， 造成页面显示效果不统一的情况。在大多数情况下，用户用什么浏览器来查看同一网站，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 这个时候就需要针对不同的浏览器写不同的CSS，这个过程叫 CSShack。虽然我们写代码都要求按照标准，不写
3、hack 代码，但实际工作中为了兼容主流浏览器， hack 代码是免不了的，所以这也应该是每个前端开发人员必备的技能。前端的开发工具很多，比较常见的有Dreamweaver，Notepad ，webstrom，SublimeText 等等，我现在在使用webstorm，强大的提示功能可以帮助我们很快的熟悉并掌握网页布局, 检查错误等。调试代码的工具我使用的Firebug 。Firebug 是网页浏览器Mozillafirefox下的一款开发类插件，它集HTML查看和、 Javascript控制台、网络状况监视器于一体，是开发 JavaScript 、CSS、HTML和 Ajax 的得力助手。F
4、irebug 如同一把精巧的瑞士军刀， 从各个不同的角度剖析 Web 页面内部的细节层面，给 Web开发者带来很大的便利。 Firebug 也是一个除错工具。用户可以利用它除错、甚至删改任何网站的CSS、HTML、Dom以及 Javascript代码。以上是自己做前端开发的一点心得，它所涵盖的知识面远远不止这些，我也在不断的学习，不断地丰富自己，希望自己能在前端这个职位上开阔自己的一片天地！前端工作总结篇二： WEB前端开发经验总结这里跟大家谈谈个人对WEB前端开发的一些经验（当然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从 WEB标准开始吧。WEB标准是什么
5、？说是 WEB标准，不过我这里主要是对 XHTML1.1和 CSS2.1的一些经验总结。因为 WEB含盖的内容实在是太多了，“ WEB标准”是一系列标准的总称，包括 HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1 、DOM1.0等等。所以这里要跟大家指出来一下，WEB标准不是我们所说的DIV+CSS。刚刚上面提到了 DIV+CSS，这里要说明下，这样说其实是不正确的。DIV+CSS准确的说法（个人的理解）应该是：采用 W3C推荐的 WEB标准中的 XHTML1.1结合 CSS2.0样式表制作页面的方法， DIV 应该指的是 XHTML标签
6、，而 CSS显示是指的 CSS样式表了。采用 WEB标准开发的好处那么 W3C为什么会推荐这样的页面制作方法呢？下面我们就简单的看看采用 WEB标准开发（个人理解的） 相对以前 TABLE布局的优势有哪些？1 、节约运营成本看看我们的 WEB标准制作方法是如何做到的？采用 WEB标准制作，我们可以做到表现很形式的分离，我们用XHTML来表现（数据），用CSS来控制（页面元素呈现的）形式。写的好的页面， XHTML代码中基本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来控制。这样一来我们的（XHTML）页面的体积就大大减小了， 这样你在带宽上的费用就会大家降低了，这个怎么降低的，
7、你可以想象一下，YAHOO的首页小 1K，100W个人一起访问，那么带宽节约了多少？而且可以更充分的利用带宽。而我们的 CSS控制了，所有的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的成本也下来了，省了不少钱了吧？还有，你开这个页面的速度会快很多啊， 一个让你等半分钟的页面， 除非里面的信息对你很有用，不然我们大家基本都没有太多的时间去用来等待的。2 、对用户友好更友好，且有机会获得更多的用户现在来说说用户友好。首先我想把我们的用户来分下类。第一类：普通用户（每个访问的人）；第二类：搜索引擎；采用 WEB标准开发的页面，结构清晰，页面
8、体积小，浏览器兼容性好。普通用户访问的时候，页面打开速度快，而且不管用户使用那种浏览器，都能够正常访问（显示）页面，且页面的结构清晰，要找的数据可以很方便的浏览到。而对搜索引擎来说，一个好的采用 WEB标准开发的页面，都是做过 SEO优化的，它访问起来很友好， 很容易理解你的页面中哪里是标题（ H1H6标签），哪里是段落（ p 标签），哪里是段落里要强调的内容（ strong 标签）等，它可以很容易的分析出来。而一个 SEO好的站点，大家都知道，被搜索引擎收录的机会更多，这个也意味着您的网站会被更多的普通用户访问到，给你的站点带来更多的用户。一个能帮我们省下大笔费用，提高工作效率。同时又能够提
9、高页面浏览速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推荐使用 WEB标准开放网站的原因啊。 而这个技术也得到了我们广大用户的认可，所以您现在需要学习WEB标准啊。温习完了基础课程，现在正式开始讲 XHTML和 CSS的技巧了。合理的布局有朋友会开始问了， 怎么一开始就开始讲合理的布局了呢 ?前面我们提到了一些知识点 “结构清晰、SEO优化、页面体积小、XHTML代码中基本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得， 我们采用 WEB标准制作的一切都是从这个知识点开始的，所以我这里就先来说这个话题。那么大家又会开始问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好， 也是我们大家刚开始学用WEB标准的问得最多的问题之一， 我也曾经常被这个问题所困扰，这里就说说我对合理布局的一些理解。在开始讲合理布局的页面要达到的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片：不错，这个是一个文章详细页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会详细的介绍浮动元素。好，回到刚才的话题，大家看到了这个页面了。我这里先把代码写给大家看看（省略了部分代码）：
