响应式WEB开发项目教程chapter01.pptxVIP

单元1 响应式和HTML5+CSS3初体验学习目标掌握HTML5的语义化结构标签了解了解掌握掌握31了解HTML5和CSS3的特性、优势和编码过程熟悉熟悉响应式Web设计的概念2响应式Web设计简介[点击播放视频]知识点概述 越来越多的人使用小屏幕设备上网，针对不同屏幕的设备进行网页制作成本非常大，这时，响应式Web设计应运而生。响应式Web设计（Responsive Web Design）是由Ethan Marcotte 在2010年提出的，他将媒体查询、栅格布局和弹性图片合并称为响应式Web设计。响应式Web设计简介响应式Web设计是和HTML5+CSS3互相配合与支持的，技术点包括：34215HTML5中的viewportHTML5+CSS3 HTML5+CSS3基本网页设计。提供可以配置视口的属性。CSS3媒体查询流式布局 识别媒体类型，特征（屏幕宽度，像素比等）。 可以根据浏览器的宽度和屏幕的大小自动调整效果。6响应式栅格系统流式图片 依赖于媒体查询，根据不同的屏幕大小调整布局。随流式布局进行相应缩放。项目1-1-项目描述使用HTML5+CSS3绘制HTML5的logo本项目将使用HTML5+CSS3绘制出HTML5的logo，页面效果如下所示。1页面展示：HTML5新特性HTML5基本语法CSS3新特性在HTML中引入样式2技术要点：前导知识-HTML5新特性[点击播放视频]知识点概述 HTML5不仅仅是HTML规范的必威体育精装版版本，它也代表了一系列Web相关技术的总称，其中最重要的三项技术就是HTML5核心规范、CSS3（Cascading StyleSheet，层叠样式表的必威体育精装版版本）和JavaScript（一种脚本语言，用于增强网页的动态功能），这三项技术在后面的学习中会详细讲解。HTML的历史可以追溯到很久以前，我们这里就不做讨论了。本书的关注点在于HTML5带给我们的全新感受。前导知识-HTML5新特性进化而非颠覆用浏览器打开网址：/html/logo/。在该网站将看到HTML5的八大革新，如图下所示。离线存储（Offline Storage）：HTML5 App Cache，Local Storage，Indexed DB和File API使Web应用程序更加迅速，并提供了离线使用的能力。设备访问（Device Access）：增强了设备感知能力使得Web应用在电脑、pad、手机上均能使用。语义网（Semantics）：提供了一组丰富的语义化标签。通信（Connectivity）：增强了通信能力，意味着增强了聊天程序的实时性和网络游戏的顺畅性。多媒体（Multimedia）：音频视频能力的增强是HTML5的最大突破！呈现（CSS3）：CSS3可以很高效的实现页面特效，并不会影响页面的语义和性能。图形和特效（3D, Graphics Effects）：Canvas、SVG和WebGL等功能使得图形渲染更高效，页面效果更加炫酷。性能和集成（Performance Integration）：Web Worker让浏览器可以多线程处理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能前导知识-HTML5新特性化繁为简HTML5以“简单至上，尽可能简化”为原则做了以下改进：简化DOCTYPE和字符集声明；强化HTML5 API，让页面设计更加简单；以浏览器的原生能力代替复杂的JavaScript代码；精确定义的错误恢复机制，如果页面中有错误，也不会影响整个页面的显示。前导知识-HTML5新特性良好的用户体验HTML5规范以“用户至上”为宗旨。也就是说在遇到冲突时，规范的优先级如下： 用户页面作者实现者（浏览器）规范开发者（W3C/WHATWG） 纯理论。另外，HTML5还引入了一种新的安全模型来保证HTML5足够安全。各大浏览器对 HTML5的支持正在不断完善，目前Chrome对 HTML5的支持最好，Firefox、Opera、Safari、IE10 对HTML5也有很好的支持。前导知识-HTML5基本语法基本语法HTML文档是由多种标签组成，一个HTML5的标准模板如下所示：!DOCTYPE标签位于文档的最前面，用于向浏览器说明当前文档使用的HTML版本，不可省略。!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title/headbody !--这是注释 --/body/htmlhtml标签标志着HTML文档的开始，/html标签标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。lang 属性规定元素内容的语言。head标签用于定义HTML文档的头部信息，主要用来封装其他位于文档头部的标签，例如title