web开发入门学习.ppt

Web开发基础知识,研发一部（周环）,前端开发,什么是前端开发主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件,浏览器介绍：IE、firefox、chromeHtml介绍：HTML标签、DOM、BOMCss介绍:简单样式应用与定义（ID选择器与class选择器）Javascript介绍：常用DOM操作调试工具介绍：firebugIEDeveloper,浏览器介绍,IE系浏览器：IE6、7、8、360浏览器、国内大部分浏览器渲染引擎：Tridentjs引擎：Chakra(ie9)MozillaFirefox:firefox渲染引擎：Gecko引擎js引擎：TraceMonkey引擎webkit:chrome、safari渲染引擎：webkitjs引擎：V8Opera:Opera未知,html介绍,HTML标签：标签性语言。DOM：HTMLDocumentObjectModel(文档对象模型)BOM：浏览器对象模型（BrowserObjectModel）,HTML标签,标题我是段落,HTML注意事项,嵌套的HTML元素不要忘记结束标签空的HTML元素使用小写标签始终属性值加引号块元素与内联元素块元素：pdivh1formulollitable等内联元素：aspanimginputselect等,DOM文档对象模型,DOM是这样规定的：整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点,HTMLDOM结构图,BOM（浏览器对象模型）,弹出新浏览器窗口的能力；移动、关闭和更改浏览器窗口大小的能力；可提供WEB浏览器详细信息的导航对象；可提供浏览器载入页面详细信息的本地对象；可提供用户屏幕分辨率详细信息的屏幕对象；支持Cookies；,BOM操作,window.open；window.screen.width；window.navigator.userAgentwindow.location.hrefwindow.navigator.screen；document.cookie；,Css介绍,CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。是为了解决内容与表现分离的问题css使用依赖HTML或XML.redbackground:#f00,Css语法,selectorproperty:value;,id与class选择器,id选择器：css定义以“#”开始，限HTMLid属性使用单一使用。#dockbarheight:10px;class选择器：css定义以“.”开始，限HTMLclass属性使用。支持重复使用.menuheight:10px;公开页面私有页面,Css定义方式,多重声明ptext-align:center;color:red;值的不同写法和单位pwidth:100%;height:100%pwidth:100px;height:100px选择器的分组h1,h2,h3,h4,h5,h6color:green;,JavaScript,Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。增强人机交互，改善用户体验！,JavascriptDOM操作,获取DOM：getElementById、getElementsByTagNamedocument.getElementById(username);document.getElementsByTagName(input);创建DOM：createElement、createTextNodevarinput=document.createElement(input);input.id==user插入DOM：appendChild、insertBeforedocument.body.appendChild(input);删除DOM:removeChilddocument.body.removeChild(input);层级DOM：parentNode、childNodes、firstChild,Javascript注意事项,window.myValue=aa;age=0;job=developer;document.all.dockbar.value;window.open(),Javascript技巧与优化,局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的varage=0,job=developer;预设默认值：varage=this.get(age)|0;减少DOM操作新增与删除，隐藏与显示（延时删除）代替。判断对象是否存在：vardock=A.one(#dock);dock,Ajax技术,对于InternetExplorer浏览器：xmlhttp_request=newActiveXObject(Msxml2.XMLHTTP.3.0);/3.0或4.0,5.0对于MozillaNetscapeSafari等浏览器:创建XMLHttpRequest方法如下：xmlhttp_request=newXMLHttpRequest();需要发送Http请求，web服务支持。常用的AJAX数据格式json:名称/值对first:Brettxml:标签形式Bretttxt:字符串“first=Brett”,浏览器调试工具介绍,IE调试工具：IeDeveloperInner:htmljscsshttptimelineIEhttpWacth:httprequestFF调试工具：Firebug:htmljscsshttptimelinechrome调试工具：webkitInner：htmljscs