web开发入门学习.ppt

《web开发入门学习.ppt》由会员分享，可在线阅读，更多相关《web开发入门学习.ppt（25页珍藏版）》请在三一办公上搜索。

1、Web开发基础知识,研发一部（周环）,前端开发,什么是前端开发主要职责是与交互设计师、视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件,浏览器介绍：IE、firefox、chromeHtml介绍：HTML标签、DOM、BOMCss 介绍:简单样式应用与定义（ID选择器与class选择器）Javascript 介绍：常用DOM 操作调试工具介绍：firebug IE Developer,浏览器介绍,IE系浏览器：IE6、7、

2、8、360浏览器、国内大部分浏览器渲染引擎：Tridentjs 引擎：Chakra(ie 9)Mozilla Firefox:firefox渲染引擎：Gecko引擎js 引擎：TraceMonkey引擎webkit:chrome、safari渲染引擎：webkitjs 引擎：V8Opera:Opera 未知,html介绍,HTML标签：标签性语言。DOM：HTML Document Object Model(文档对象模型)BOM：浏览器对象模型（Browser Object Model）,HTML标签,标题我是段落,HTML注意事项,嵌套的 HTML 元素不要忘记结束标签 空的 HTML 元素

3、 使用小写标签始终属性值加引号块元素与内联元素块元素：p div h1 form ul ol li table等内联元素：a span img input select等,DOM文档对象模型,DOM 是这样规定的：整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTML 属性是一个属性节点注释属于注释节点,HTML DOM结构图,BOM（浏览器对象模型）,弹出新浏览器窗口的能力；移动、关闭和更改浏览器窗口大小的能力；可提供WEB浏览器详细信息的导航对象；可提供浏览器载入页面详细信息的本地对象；可提供用户屏幕分辨率详细信息的屏幕对象；支持C

4、ookies；,BOM 操作,window.open；window.screen.width；window.navigator.userAgentwindow.location.hrefwindow.navigator.screen；document.cookie；,Css 介绍,CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。是为了解决内容与表现分离的问题css使用依赖HTML 或XML.redbackground:#f00,Css语法,selector property:value;,id与clas

5、s选择器,id 选择器：css 定义以“#”开始，限HTML id 属性使用单一使用。#dockbarheight:10px;class 选择器：css 定义以“.”开始，限HTML class 属性使用。支持重复使用.menuheight:10px;公开页面私有页面,Css定义方式,多重声明 p text-align:center;color:red;值的不同写法和单位pwidth:100%;height:100%pwidth:100px;height:100px选择器的分组 h1,h2,h3,h4,h5,h6 color:green;,JavaScript,Javascript的出现使得网

6、页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。增强人机交互，改善用户体验！,Javascript DOM 操作,获取DOM：getElementById、getElementsByTagNamedocument.getElementById(username);document.getElementsByTagName(input);创建 DOM：createElement、createTextNodevar input=document.createElement(input);input.id=usernameinput.name=user

7、插入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 技巧与优化,局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是wind

8、ow对象的成员，而局部变量是放在函数的栈里的var age=0,job=developer;预设默认值：var age=this.get(age)|0;减少DOM 操作新增与删除，隐藏与显示（延时删除）代替。判断对象是否存在：var dock=A.one(#dock);dock,Ajax技术,对于Internet Explorer浏览器：xmlhttp_request=new ActiveXObject(Msxml2.XMLHTTP.3.0);/3.0或4.0,5.0 对于MozillaNetscapeSafari等浏览器:创建XMLHttpRequest 方法如下：xmlhttp_reque

9、st=new XMLHttpRequest();需要发送Http请求，web服务支持。常用的AJAX 数据格式json:名称/值对 first:Brett xml:标签形式Bretttxt:字符串“first=Brett”,浏览器调试工具介绍,IE 调试工具：Ie Developer Inner:html js css http timelineIE httpWacth:http requestFF调试工具：Firebug:html js css http timelinechrome调试工具：webkitInner：html js css http timelineopera 调试工具：没使用过：略,浏览器调试工具介绍,资源分享,web开发基础知识http:/http:/www.w3.org/浏览器案例分析http:/www.w3help.org/zh-cn/home/glossary.htmlyahoo UI http:/,谢谢！,