前端开发基础知识培训

前端开发基础知识培训前端开发基础知识培训前端开发基础知识培训前端开发基础知识培训HTML&CSS&JS摩云视讯摩云视讯摩云视讯摩云视讯••••孔纯孔纯孔纯孔纯2012-08-14前端开发你想到了什么？FrontPage与网页三剑客仅仅依赖工具时代已经过去WebPageToWebApp面向云服务的WebApp时代已经到来HTML&CSS&JS仅仅是冰山一角我们从这里开始这里不是速成班Web标准结构Structure表现Presentation行为BehaviorWeb标准不是某一个标准，而是一系列标准的集合XHTML&XMLCSSDOM&ECMAScriptHTMLHTMLHTMLHTMLCSSCSSCSSCSSJavaScriptJavaScriptJavaScriptJavaScript各自职责HTML:结构&内容CSS:样式JS:结构&内容&样式&动画&交互各自职责发展演变HTML:结构&内容&交互CSS:样式&动画JS:结构&内容&样式&动画&交互•HTML•CSS•JavaScript目录HTMLHyperTextMarkupLanguage超文本标记语言Web应用的基石发展简史•1989TimBerners-Lee发明HTML•1993第一款浏览器“Mosaic”发布•1994W3C成立•1997HTML3.2•1999HTML4.01•2000XHTML1.0•2008HTML5divid=i超文本标记语言/divHTML语法起始标记结束标记元素属性内容!DOCTYPEhtmlhtmlheadtitle标题/title/headbody内容....../body/html基本结构HEADBODYhtml与/html之间的文本描述网页head与/head之间定义文档的头部body与/body之间的文本是可见的页面内容Doctype文档类型声明•HTML4.0&XHTML1.1•HTML4.0~HTML5.0!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN!DOCTYPEhtml说明你用的说明你用的说明你用的说明你用的XHTMLXHTMLXHTMLXHTML或者或者或者或者HTMLHTMLHTMLHTML是什么版本是什么版本是什么版本是什么版本向上向下兼容《DOCTYPE的奇怪影响》•title页面标题，而且必须唯一•meta提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词•link定义文档与外部资源的关系•script定义文档内部的JavaScript•style定义文档内部的CSSHead文件常用元素•结构：p,div,span,h1~h6,body…•列表：ul,ol,dl,li,dd,dt•文本：a,em,strong,pre…•表单：form,input,button,label…•媒体：img,object…•表格：table,tr,td,caption,tbody…•…元素分类行内元素块级元素嵌套规则元素分类•块级元素(block)div、p、h1~h6、table、td、tr、ul、li、fieldset、legend...特点：在文档流中默认占据整行位置•行内元素(inline)span、en、strong、label、a、img、input、button、select...特点：在文档流中默认一行可以展示多个行内元素•嵌套规则块级元素可以嵌套行内元素，除a以外的行内元素不能嵌套块级元素语义化元素•header，footer•section，article•nav，aside，figure•h1~h6•ol，ul，dl•table，tr，th，td《HTML5介绍》语义化标签语义化意义•增强页面的可访问性•提高开发效率•搜索引擎优化SEO•id唯一性•class•不再使用的属性algin，bgcolor，background，color...元素通用属性CSS定义-样式与结构分离书籍推荐•HTML•CSS•JavaScript目录CSSCascadingStyleSheets层叠样式表程序员的画笔发展简史•1994HakonWiumLie提出CSS概念•1996CSSLevel1•1997CSSWorkingGroup•1998CSSLevel2•CSSLevel3–进化中…•选择器\属性\值selector{property:value}例如：p{color:#ff0000;}CSS语法多个属性之间采用分号分隔•元素选择器h1•类选择器.classname•id选择器#id•全局选择器*•继承选择器divp•分组选择器h1,h2•伪类选择器:hover•属性选择器input[type=button]CSS选择器层叠样式的优先级�浏览器缺省设置�外部样式表�内部样式表�标签自定义样式CSS优先级CSS优先级清除浏览器缺省样式清除浏览器缺省样式html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,code,em,img,q,small,strong,dd,dl,dt,li,ol,ul,fieldset,form,label,table,tbody,tr,th,td,input....reset.cssreset.cssreset.cssreset.cssClass方式定义样式CSS盒子模型《浏览器的盒模型与兼容性》display:blockdisplay:inlinedisplay:inline-block•盒模型展示方式不同CSS兼容问题源自哪里？IE9+/FF/ChromeIE6-IE8•浏览器引擎本身的差异CSS兼容问题源自哪里？•浏览器本身BUGCSS兼容问题源自哪里？升级浏览器安装补丁文件兼容Hack《浏览器的盒模型与兼容性》#box{color:black;/*firefox*/color:red\9;/*所有IE*/*color:blue;/*IE7*/_color:green;/*IE6*/}CSSHack(样式补丁)《CSS浏览器兼容案例》!--[ifltIE7]htmlclass=no-jsieie6lte9lte8lte7![endif]--!--[ifIE7]htmlclass=no-jsieie7lte9lte8lte7![endif]--!--[ifIE8]htmlclass=no-jsieie8lte9lte8![endif]--!--[ifIE9]htmlclass=no-jsieie9lte9![endif]--!--[ifgtIE9]htmlclass=no-js![endif]--!--[if!IE]!--html!--![endif]--IE条件注解渐进增强的CSS3•圆角border-radius•渐变gradient•过渡动画transition致友、点点、淘宝《视觉设计师需要了解Web知识》《CSS3介绍》CSSSprites•优点1.减少HTTP请求,降低服务器负担2.文件体积更小1+12•缺点1.开发/维护成本高2.扩展性差《图片合并提高Web性能》书籍推荐•HTML•CSS•JavaScript目录JavaScript潜力无限的语言发展简史•1995JavaScript诞生•1996ECMAScript诞生•1999ECMAScript3•2009ECMAScript5•ECMAScriptHarmony正在讨论中…应用-客户端应用-服务端应用-其他JavaScript不是Java语言特性•动态性•弱类型•基于对象•脚本语言动态性在一个Javascript对象中，要为一个属性赋值，我们不必事先创建一个字段，只需要在使用的时候做赋值操作即可//定义一个对象varobj=newObject();//动态创建属性nameobj.name=anobject;//动态创建属性sayHiobj.sayHi=function(){returnHi;}obj.sayHi();弱类型与Java，C/C++不同，Javascript是弱类型的，它的数据类型无需在声明时指定，解释器会根据上下文对变量进行实例化//定义一个变量s字符串vars=text;print(s);//赋值s为整型s=12+5;print(s);//赋值s为浮点型s=6.3;print(s);//赋值s为一个对象s=newObject();s.name=object;《Javascript中诡异的类型转换》基本数据类型•字符串(String)•数值(Number)•布尔值(Boolean)在JavaScript中，所有的数字，不论是整型浮点，都属于“数值”基本类型。varstr=Hello,world;//字符串vari=10;//整型数varf=2.3;//浮点数varb=true;//布尔值对象类型•对象(属性的集合，即键值的散列表)•数组(有序的列表)•函数(包含可执行的代码)varobj=newObject();obj.num=2.3;vararray=newArray(foo,bar,zoo);varfunc=function(){print(Iamafunctionhere);}类型比较•typeof-基本类型返回一个用来表示表达式的数据类型的字符串。number,string,boolean,object,function,undefined•instanceof-对象类型返回一个Boolean值，指出对象是否是特定类的一个实例。objinstanceofArray;//falsearrayinstanceofArray;//true函数•创建函数varfuncName=newFunction([argname1,[...argnameN,]]body);varadd=newFunction(x,y,return(x+y));functionadd(x,y){returnx+y;}varadd=function(x,y){returnx+y;}或语法糖对象•JavaScript是面向对象的编程语言(OOP)。使我们有能力定义自己的对象和变量类型。注意：对象只是一种特殊的数据。对象拥有属性和方法。//调用属性obj.name或obj[name]//调用方法obj.sayHi()//定义一个对象varobj=newObject();//属性obj.name=anobject;//方法obj.sayHi=function(){returnHi;}《容易忽略的JavaScript细节》对象模板•模版定义了对象的结构functionBase(){this.name=anobject;this.sayHi=function(){returnHi;}}varobj=newBase();obj.sayHi()创建新的实例模版仅仅是一个函数。你需要在函数内部向this.propertiName分配内容。高级•原型对象(prototype)•作用域(scope)•面向对象的JavaScript•闭包《深入理解JavaScript的闭包》《JS面向对象(1)—简单JS对象》《JS面向对象(2)—简单JS对象》JSON•JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。varobj={};vararr=[];varobj=newObject();vararr=newArray();varobj={name:anobject}JSON对象属性/值：《JSON入门简介》开源框架/库•Prototype•MooTool