web开发入门学习.pptVIP

Web开发基础知识 研发一部（周环） 前端开发 什么是前端开发 主要职责是与交互设计师、 视觉设计师协作，根据设计图用HTML和CSS完成页面制作。同时，在此基础之上，对完成的页面进行维护和对网站前端性能做相应的优化。 需要使用JavaScript或者ActionScript来编写和封装具有良好性能的前端交互组件 浏览器介绍：IE、firefox、chrome Html介绍：HTML标签、DOM、BOM Css 介绍:简单样式应用与定义（ID选择器与class选择器） Javascript 介绍：常用DOM 操作 调试工具介绍：firebug IE Developer 浏览器介绍 IE系浏览器：IE6、7、8、360浏览器、国内大部分浏览器 渲染引擎：Trident js 引擎：Chakra(ie 9) Mozilla Firefox:firefox 渲染引擎：Gecko引擎 js 引擎：TraceMonkey引擎 webkit: chrome、safari 渲染引擎：webkit js 引擎：V8 Opera: Opera 未知 html介绍 HTML标签：标签性语言。 DOM：HTML Document Object Model(文档对象模型) BOM：浏览器对象模型（Browser Object Model） HTML标签 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN /TR/html4/strict.dtd html lang=en head meta http-equiv=Content-Type content=text/html;charset=UTF-8 title标题/title link rel=stylesheet href=aui/aui/aui.css/ script src=aui/aui/aui.js type=javascript/text/script /head body p我是段落/p /body /html HTML注意事项 嵌套的 HTML 元素 不要忘记结束标签 div/div 空的 HTML 元素 br / 使用小写标签 始终属性值加引号div id=name/div 块元素与内联元素 块元素：p div h1 form ul ol li table等 内联元素：a span img input select等 DOM文档对象模型 HTML DOM结构图 BOM （浏览器对象模型） 弹出新浏览器窗口的能力； 移动、关闭和更改浏览器窗口大小的能力； 可提供WEB浏览器详细信息的导航对象； 可提供浏览器载入页面详细信息的本地对象； 可提供用户屏幕分辨率详细信息的屏幕对象； 支持Cookies； BOM 操作 window.open； window.screen.width； window.navigator.userAgent window.location.href window.navigator.screen； document.cookie； Css 介绍 CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。 是为了解决内容与表现分离的问题 css使用依赖HTML 或XML style .red{background:#f00} /style div style=background:#f00;/div div class=red/div Css语法 id与class选择器 id 选择器：css 定义以“#”开始，限HTML id 属性使用单一使用。 #dockbar{height:10px;} nav id=dockbar/nav class 选择器：css 定义以“.”开始，限HTML class 属性使用。支持重复使用 .menu{height:10px;} span class=menuItem公开页面/span span class=menuItem私有页面/span Css定义方式 多重声明 p {text-align:center; color:red;} 值的不同写法和单位 p{width:100%;height:100%} p{width:100px;height:100px} 选择器的分组 h1,h2,h3,h4,h5,h6 {color: green;} JavaScript Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 增强人机交互，改善用户体验！ Javascript DOM 操作 获取D