Web前端基础总结三篇.docx

Web前端基础总结三篇 从事前端开发工作1年多了，从最初的DIV+CSS学起，到现在学到html5、css3、javascript，jquery等等，我觉得前端要学的技术太多了，许多人认为前端开发要把握的技能简洁，就是网页制作，其实不然，前端开发是网站的前台代码实现，包括根本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本是HTML5、CSS3，以及SVG等。JavaScript作为最难的语言之一，很多编程高手也不敢妄自菲薄、自封精通。 关于兼容性的问题我信任对于每个做前端开发的人来讲是一个很头疼的问题，互联网目前主流扫瞄器有IE6789，Firefox，Chrome，Opera，Safari，游览，包括国内主流的搜狗，腾讯 TT，360等等；从内核上讲主要有IE的，游览版IE，safari，firefox以及opera的，这些都是大家常见的。所谓的扫瞄器兼容性问题，是指由于不同的扫瞄器对同一段代码有不同的解析，造成页面显示效果不统一的状况。在大多数状况下，用户用什么扫瞄器来查看同一网站，都应当是统一的显示效果。所以扫瞄器的兼容性问题是前端开发人员常常会遇到和必需要解决的问题。这个时候就需要针对不同的扫瞄器写不同的CSS，这个过程叫CSS hack。虽然我们写代码都要求根据标准，不写hack代码，但实际工作中为了兼容主流扫瞄器，hack代码是免不了的，所以这也应当是每个前端开发人员必备的技能。 前端的开发工具许多，比拟常见的有Dreamweaver，Notepad，webstrom，Sublime Text等等，我现在在使用webstorm，强大的提示功能可以帮忙我们很快的熟识并把握网页布局,检查错误等。调试代码的工具我使用的Firebug。Firebug是网页扫瞄器Mozilla firefox 下的一款开发类插件，它集HTML查看和编辑、Javascript掌握台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug犹如一把精致的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的CSS、HTML、Dom 以及Javascript代码。 以上是自己做前端开发的一点心得，它所涵盖的学问面远远不止这些，我也在不断的学习，不断地丰富自己，盼望自己能在前端这个职位上开阔自己的一片天地！ 前端工作总结篇二：WEB前端开发阅历总结 这里跟大家谈谈个人对WEB前端开发的一些阅历（固然都是个人的一些理解，有什么地方说的欠妥或不对的地方还请包含和指正），这里我就从WEB标准开头吧。 WEB标准是什么？ 说是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标签，而CSS显示是指的CSS样式表了。 采纳WEB标准开发的好处 那么W3C为什么会推举这样的页面制作方法呢？下面我们就简洁的看看采纳WEB标准开发（个人理解的）相对以前TABLE布局的优势有哪些？ 1、节省运营本钱 看看我们的WEB标准制作方法是如何做到的？ 采纳WEB标准制作，我们可以做到表现很形式的分别，我们用XHTML来表现（数据），用CSS来掌握（页面元素呈现的）形式。写的好的页面，XHTML代码中根本上都是用户要看的数据，还其他修饰性的东西，全部由我们的CSS来掌握。这样一来我们的（XHTML）页面的体积就大大减小了，这样你在带宽上的费用就会大家降低了，这个怎么降低的，你可以想象一下，YAHOO的首页小1K，100W个人一起访问，那么带宽节省了多少？而且可以更充分的利用带宽。 而我们的CSS掌握了，全部的页面元素的样式，现在想改网站的整体风格，你只需要花几分钟修改一下一个CSS文件，就可以轻松搞定了。维护的本钱也下来了，省了不少钱了吧？还有，你开这个页面的速度会快许多啊，一个让你等半分钟的页面，除非里面的信息对你很有用，不然我们大家根本都没有太多的时间去用来等待的。 2、对用户友好更友好，且有时机获得更多的用户 现在来说说用户友好。首先我想把我们的用户来分下类。 第一类：一般用户（每个访问我们网站的人）； 其次类：搜寻引擎； 采纳WEB标准开发的页面，构造清楚，页面体积小，扫瞄器兼容性好。一般用户访问的时候，页面翻开速度快，而且不管用户使用那种扫瞄器，都能够正常访问（显示）页面，且页面的构造清楚，要找的数据可以很便利的扫瞄到。 而对搜寻引擎来说，一个好的采纳WEB标准开发的页面，都是做过SEO优化的，它访问起来很友好，很简单理解你的页面中哪里是标题（H1H6标签），哪里是段落（p标签），哪里是段落里要强调的内容（strong标签） 等，它可以很简单的分析出来。而一个SEO好的站点，大家都知道，被搜寻引擎收录的时机更多，这个也意味着您的网站会被更多的一般用户访问到，给你的站点带来更多的用户。 一个能帮我们省下大笔费用，提高工作效率。同时又能够提高页面扫瞄速度，对用户友好，甚至能够不花钱宣传，就能给你带来更多用户的技术。你说你会不会去使用它？这个也正式我们的W3C推举使用WEB标准开放网站的缘由啊。而这个技术也得到了我们广阔用户的认可，所以您现在需要学习WEB标准啊。 温习完了根底课程，现在正式开头讲XHTML和CSS的技巧了。 合理的布局 有朋友会开头问了，怎么一开头就开头讲合理的布局了呢?前面我们提到了一些学问点“构造清楚、SEO优化、页面体积小、XHTML代码中根本上都是用户要看的数据”。这些东西，都是我们做了合理布局的结果。而且我个人觉得，我们采纳WEB标准制作的一切都是从这个学问点开头的，所以我这里就先来说这个话题。 那么大家又会开头问，怎样的一个页面，才算是合理的布局的呢？这个问题问题问得好，也是我们大家刚开头学用WEB标准的问得最多的问题之一，我也曾常常被这个问题所困扰，这里就说说我对合理布局的一些理解。 在开头讲合理布局的页面要到达的要素前，我们还是用个实例来讲解会更直观些。先来看看这个图片： 不错，这个是一个文章具体页，没有左右两栏布局，不过这里我重点要讲的是合理的布局，在稍后的文章中我会具体的介绍浮动元素。好，回到刚刚的话题，大家看到了这个页面了。 我这里先把代码写给大家看看（省略了局部代码）： !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/ENdomain 来源： 公布时间：2023年4月28日 代码篇 之前整理发表了XMLHTTPRequest的属性和方法简介,它Ajax要使用的核心的技术之一，现在就来实际运用它。这个Ajax标签导航，是我很久前就写的一个脚本，很有用的（还被许多网站收录了哦），现在拿它来做实例讲解吧！固然个人力量有限，有什么不对的地方还请多包含! 效果大家看到了，核心功能有： 1、将当前选中标签以特别的样式显示 2、将异步加载的页面信息显示到指定的DOM节点中 我们来看看处理脚本的代码吧： 程序代码：ajaxtab.js id=news- news就是我们的导航标签的ID； id=newsCnt- newsCnt就是我们要写入信息的目标DOM节点； class=first - first当前(第一个)标签的样式； id=news-0 - news-0 通过”-“分开，我们就分别可以得到news(导航标签ID)，0（标签li在导航标签中的索引值） 网站重构 - 超链接 - 标签间的分割线 我排列的这些东西，信任大家开头看出了些头绪了，呵呵，不过别急！在我们看处理的脚本之前，先让我们来看看导航标签的样式，主要是看看我们对分割线的处理(一点CSS处理的技巧)。 原来想偷个懒，让大家看我上边说的那篇文章，想想也就是Ctrl+CCtrl+V,都贴出来吧！呵呵！ 不过还没有完，最终要说的就是innerHTML这个特性，这里我们还要感谢微软啊，innerHTML就是它的专利，我们就是用它来转变指定DOM内的HTML字符串的，而不用刷新页面。具体的信息大家还是google 一下吧，我也要休息下啊！喝口茶先！-！ 以上讲了这么多，我们最终来看看，我们这个ajax标签导航都用到了那些技术吧： XHTML CSS Javascript DOM XMLHttpRequest对象 innerHTML 还有XML，我们这个例子没有涉及到。东西虽小，包含的（web前端开发）学问可是都用到了啊，我把我会的点东西都端出来了（要失业了），呵呵！ 固然我很喜爱跟大家多沟通，以后有时间，我们在来谈谈CSS的HACKS技巧，Javascript DOM编程等等的，今日就收工了，感谢捧场先！ Copyright 2023-2023 a href=, All rights reserved. Powered By: domain 看出来什么没有？（代码是许多）可能大家已经发觉，整个页面里根本上都是用户要看的数据，其中只包含了很少（必要）的布局(XHTML)标签（请允许我这么说）。整个页面根本都是由最根底的h1h6、p、ul、ol、li、form、div标签来实现的。 说到这里就要讲到我在前面提到的“构造清楚、SEO优化、页面体积小、XHTML代码中根本上都是用户要看的数据”，看看我的这个例子做到了没有？ 构造清楚-也就是我们常说的，XHTML标签要构造化（语意化）。 什么叫构造化？ 由于个人认为这个学问点是非常重要的，所以请允许我在这里多罗嗦几句，我们采纳WEB标准的方法制作页面的优势就表达在页面构造清楚。我们以前用table布局的时候，我们的表现（数据）和形式（布局样式）是混在一起的，有许多冗余的数据混杂在一起，而大家再看看我上面给大家展现的代码，很明显，构造非常清楚。 说了半天，还是没有说什么是构造化，什么才是构造清楚啊？不要急。还记得我刚刚提到的那几个标签吗？ 前端工作总结篇三：Web前端根底总结 1.Js的根本类型： Undefined:只有一个值undefined，它是变量未被赋值时的值，在JS中全局对象有一个undefined属性表示undefined，事实上undefined并非JavaScript的关键字，可以给全局的undefined属性赋值来转变它的值。 Null:只有一个值null,但是JavaScript为它供应了一个关键字null来表示这个唯一的值。Null类型的语义是“一个空的对象引用”。 Number:NaN是其一个特别的属性值，typeof NaN / “number”); String:其正式解释是一个16位无符号整数类型的序列，它实际上用来表示以UTF-16编码的文本信息。 Boolean:有两种取值true和false。0、NaN、空字符串、null、undefined转化为false，其余的全部为true。 Object:最为简单的类型就是Object，它是一系列属性的无序集合，Function是实现了私有属性call的Object，JavaScript的宿主也可以供应一些特殊的对象。typeof *3,344+/Object 关于null和undefined：null是关键字；undefined不是关键字，undefined是Global对象的一个属性 。 运算时null与undefined都可以被类型转换为false，但不等值于false： document.writeln(!null, !undefined); / true,true document.writeln(null=false); / false document.writeln(undefined=false); / false document.writeln(undefined=null); / true null instanceof Object /false typeof null/Object 2.JS的类型转换 手动的转换有：Number(x);Boolean(x);String(x);以及parseInt,parseFloat,toString,valueOf等等。 自动的转换：假如“+”操作符的一个操作数是字符串，则会将另一个操作数转换为字符串，一元操作符“*”、“-”将操作数转换为数字，一元操作符“！”将操作数转换为布尔值并取反。 hello+5 / hello5 hello+null / hellonull 5*5/25 hello*5/NaN X+”/等价于String(x) +X 或者 X-0/等价于Number(X) !X/等价于Boolean(X) 3.margin属性 四个参数：上右下左 三个参数：上、左右、下 两个参数：上下、左右 一个参数：四周 4.关于float问题，浮动元素后跟非浮动元素的状况。 后边非浮动元素若为行内元素且由于定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若为块级元素且由于定位产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素“之上”显示。 【有例如】。 Clear属性规定元素的哪一侧不允许其他浮动元素。clear 属性定义了元素的哪边上不允许消失浮动元素。在 CSS1 和 CSS2 中，这是通过自动为去除元素（即设置了 clear 属性的元 素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加去除空间，而外边距本身并不转变。不管哪一种转变，最终结果都一样，假如声明为左边或右边去除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。 5.肯定定位、相对定位与浮动定位 肯定定位：absolute生成肯定定位的元素，相对于 static 定位以外的第一个父元素进展定位。设置为肯定定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就似乎该元素原来不存在一样。元素定位后生成一个块级框，而不管原来它在正常流中生成何种类型的框。 相对定位：relative生成相对定位的元素，相对于其正常位置进展定位。设置为相对定位的元素框会偏移某个距离。元素仍旧保持其未定位前的外形，它原本所占的空间仍保存。 浮动定位：浮动的框可以向左或向右移动，直到它的外边缘遇到包含框或另一个浮动框的边框为止。由于浮动框不在文档的一般流中，所以文档的一般流中的块框表现得就像浮动框不存在一样。 例如代码就是最外层的div是relative，里面的就是absolute。 6.关于DOM元素 利用DOM，JS可以相对简洁地查找、访问和操纵HTML元素，从而动态地转变HTML页面的内容和外观。节点常用的属性有parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling。 7.关于函数 定义挨次：函数的定义与其他的”语句的定义不再同一个时间轴上面，计算机在开头执行语句之前，会先查找全部的function的定义，然后保存。所以在函数后面定义的调用语句可以调用到定义在前面的函数。 局部变量与全局变量：局部变量只适合于函数的参数和函数内部已var关键字定义的变量。假如没有定义同名的局部变量，函数内部则可能访问全局变量。 闭包：首先要知道在js中，函数在一旦定义的时候就会产生自己的一个作用域，而此后这个函数的执行也是要依靠于这个作用域的。闭包的最常用的编程模式就是在一个函数中嵌套另一个函数，然后将这个嵌套的函数作为返回值返回，固然外部函数中的局部变量也就存在于这个返回函数的作用域中的，这样就起到了对局部变量的一个访问掌握。但是缺点在于增大了内存的开支。而且其所派生的子类将不能访问其私有属性，破坏了继承性。因此还是需要三思而行。 闭包可以用在很多地方。它的最大用处有两个，一个是前面提到的爱护函数内部的变量，另一个就是让在内存中维持变量。 我写的闭包主要用于实现一些插件，由于有一些变量需要避开被全局变量污染。 可选参数：Js不会限制传入函数的参数数目。假如传入的参数过多，多余的参数会被忽视掉。假如过少，缺失的参数会默认为undefined。 apply和call的区分：一样点:两个方法产生的作用是完全一样的。 不同点:方法传递的参数不同，apply(obj,arg1,arg2.) call(obj,arg1,arg2) 原型：全部对象都有一个原型，对象可以共享其原型的属性，但是这种共享是单向的，即原型的属性影响对象，转变对象确不会影响到原型。原型污染：使用for/in遍历对象的时候，会同时得到原来的属性和原型的属性，可以使用HasOwnPorperty方法来推断。 匿名函数：一般用来写已加载就需马上执行的函数。同时为了避开受全局变量的影响，在一个不是很熟识的页面增加Javascript时特别有效。 8.Div和Span有何区分？ 答：两者最明显的区分在于DIV是块元素，而SPAN是行内元素(也译作内嵌元素)。所谓块元素，是以另起一行开头渲染的元素，行内元素则不需另起一行， 固然这一点也可以通过设置display（block,inline,inline-block）来转变。 9. CSS+DIV开发Web页面的优势有哪些？ 答： 1） CSS+DIV，这个网页设计模式中，DIV担当了网页的内容，CSS担当了网页的样式。这样就使网页的内容和样式的分别开来。有利于页面的维护升级。 有助于提高搜寻引擎亲和力（快速找到需要的数据，而不是像在TABLE中一层层的查找） 有助于页面的重构(换皮肤如blog，直接套用另外一套样式就可以实现，而不用改动网页脚本。) 10.setInterval与setTimeout的区分？ 答：setTimeout方法是定时程序，也就是在什么时间以后干什么。干完了就拉倒。 setInterval方法则是表示间隔肯定时间反复执行某操作。 11.Ajax及其优缺点： 答：Asynchronous JavaScript and XML”（异步JavaScript和XML)。在扫瞄器中使用js进展效劳器的恳求与响应，使得可以在不更新整个页面的前提下维护数据。其名字中的xml并非指只支持xml这一种文本格式，xml只是一个选择而已，其他还可以是表单与json。这样做只是xml流行时的遗迹。 优点：使用Ajax的最大优点就是可以实现页面的局部刷新，提高用户体验质量。其他优点有使用异步方式与效劳器通信，不需要打断用户的操作，具有更加快速的响应力量。 缺点： 1.干掉了back按钮。由于在未刷新页面的时候是无法使用back按钮的。 2.安全问题，将一些数据、规律暴露在了前台。 3.对搜寻引擎的支持较弱。 4.违反了Url资源定位的初衷。