HTML5跨平台开发基础与实战全套教学课件.pptx

;;;;; 运气猜拳，是一种简单的游戏，共有剪刀、石头、布三个手势。双方同时做出相应手势，输赢判断规则为：剪刀赢布，布赢石头，石头赢剪刀。本任务来实现电脑版的猜拳游戏首页界面效果，如图所示。;; 前端工程师，也叫Web前端开发工程师。他是随着Web发展，细分出来的行业。尤其是现在互联网时代，Web技术应用更加广泛。网站、移动App等都离不开Web技术。Web前端人才的需求量也是与日俱增。通俗点说Web前端工程师就是用HTML5、CSS3、JavaScript、Ajax等技术做成交互网页 。; HTML（HyperText Markup Language超文本标记语言）定义了网页的内容，即页面结构，HTML 5是最新的HTML版本； CSS（Cascading Style Sheet层叠样式表）描述了网页布局的样式，CSS 3是最新的CSS标准； JavaScript 控制网页的行为。 ; HTML5是万维网发布的最新语言规范，做Web前端，精通HTML5是必须要掌握的一项技能。 目前95%的浏览器都支持HTML 5，其中包含移动端等设备上使用的浏览器。; CSS 3的语言开发是朝着模块化发展的，这些模块包括盒子模型、列表模块、文字特效等，对于Web前端整个页面的设计CSS 3是必备的技能。 不用图片CSS 3就可以创造出各种效果，圆角边框，渐变背景，文字阴影，盒阴影等，还有一些基本的交互效果，如悬停动画等。; JavaScript 是Web的编程语言，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。 jQuery是轻量级的JavaScript库，解决跨浏览器，跨平台问题。jQuery设计的宗旨是write Less，Do More，即倡导写更少的代码，做更多的事情。 Bootstrap是基于HTML、CSS和jQuery的，它简洁灵活，使得Web开发更加快捷。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、灵活、可移植、跨平台的网站。; 掌握了HTML5，CSS3，JavaScript等技术之后，就应该学习一个Web框架加快开发速度。 学习通常的路线是：学习、理解、模仿、创造。;; HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JavaScript、CSS的开发效率。 ; 依??单击HBuilder X菜单：“文件”|“新建”|“项目”，打开了“新建项目”对话框。; 本书案例使用HBuilder X进行开发，并采用Chrome浏览器作为展示和调试工具。;; 新建项目cqgame，在项目中新建文件cq.html，目录结构如图所示，添加代码实现布局效果。并拓展体验动态交互效果。 ;; (1) Web前端简述 前端工程师 页面结构、样式和行为 HTML 5的优势 CSS 3的优势 JavaScript及相关框架 Web前端学习路线 (2) 开发工具 选择开发工具 新建项目和文件 开发工具的调试技巧 (3) 任务实施与拓展 ;谢谢;;;;; 本任务是采用HTML的布局方式，实现问卷调查页面起始页面、问卷调查页面及问卷调查信息统计展示页面的静态布局，如图所示。;; HTML的英文全称是Hyper Text Markup Language，是一种用于创建网页的标准标记语言。HTML运行在浏览器上，由浏览器来解析。HTML文档包含了HTML 标签及文本内容，用来描述文字、图形、动画、声音、表格、链接等。HTML文档也叫做Web页面。 5 版本是HTML目前最新版本，也就是现在常说的HTML5，而且现在学习HTML都是针对5这个版本进行学习的。HTML5 是对以前的HTML发展产生出来的，因此，HTML5 保留了以前 HTML 绝大部分标签。 ;!DOCTYPE html 声明为HTML5文档。 html 元素是HTML页面的根元素。此元素可告知浏览器其自身是一个HTML文档。 head 元素包含了文档的元（meta）数据，如：meta charset=utf-8定义网页编码格式为utf-8。 title 元素描述了文档的标题。 body元素包含了可见的页面内容。;HTML的注释方法 ：包含在“!--”与“--”之间的内容将会被浏览器忽略。 body 文档内容......