HTML5跨平台开发基础与实战PPT完整全套教学课件

上传人：b*** IP属地：浙江上传时间：2023-06-13 格式：PPTX 页数：323 大小：4.45MB 积分：35 举报 版权申诉

已阅读5页，还剩318页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5跨平台开发基础与实战任务1实现猜拳游戏首页界面任务2实现问卷调查页面静态布局任务3实现简洁立体菜单效果任务4实现猜拳游戏功能任务5实现注册登录验证效果任务6实现响应式详情页面任务7实现响应式商品优惠列表任务8响应式购物列表展示和管理任务9实现商品优惠列表评价信息滑入效果任务1实现猜拳游戏首页界面HTML5跨平台开发基础与实战学习目标了解前端工程师工作内容。理解页面结构、样式和行为。了解HTML5、CSS3的优势。了解JavaScript的作用及常用框架。掌握开发工具的使用,能够新建项目和文件。目录一、任务描述二、Web前端简述三、开发工具四、任务实施五、小结任务描述01实现猜拳游戏首页界面运气猜拳，是一种简单的游戏，共有剪刀、石头、布三个手势。双方同时做出相应手势，输赢判断规则为：剪刀赢布，布赢石头，石头赢剪刀。本任务来实现电脑版的猜拳游戏首页界面效果，如图所示。任务描述：实现猜拳游戏首页界面Web前端简述02前端工程师页面结构、样式和行为HTML5的优势CSS3的优势JavaScript及相关框架Web前端学习路线前端工程师，也叫Web前端开发工程师。他是随着Web发展，细分出来的行业。尤其是现在互联网时代，Web技术应用更加广泛。网站、移动App等都离不开Web技术。Web前端人才的需求量也是与日俱增。通俗点说Web前端工程师就是用HTML5、CSS3、JavaScript、Ajax等技术做成交互网页。前端工程师

HTML（HyperTextMarkupLanguage超文本标记语言）定义了网页的内容，即页面结构，HTML5是最新的HTML版本；CSS（CascadingStyleSheet层叠样式表）描述了网页布局的样式，CSS3是最新的CSS标准；

JavaScript控制网页的行为。页面结构、样式和行为

HTML5是万维网发布的最新语言规范，做Web前端，精通HTML5是必须要掌握的一项技能。

目前95%的浏览器都支持HTML5，其中包含移动端等设备上使用的浏览器。HTML5的优势

CSS3的语言开发是朝着模块化发展的，这些模块包括盒子模型、列表模块、文字特效等，对于Web前端整个页面的设计CSS3是必备的技能。

不用图片CSS3就可以创造出各种效果，圆角边框，渐变背景，文字阴影，盒阴影等，还有一些基本的交互效果，如悬停动画等。CSS3的优势

JavaScript是Web的编程语言，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。jQuery是轻量级的JavaScript库，解决跨浏览器，跨平台问题。jQuery设计的宗旨是"writeLess，DoMore"，即倡导写更少的代码，做更多的事情。

Bootstrap是基于HTML、CSS和jQuery的，它简洁灵活，使得Web开发更加快捷。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、灵活、可移植、跨平台的网站。JavaScript及相关框架掌握了HTML5，CSS3，JavaScript等技术之后，就应该学习一个Web框架加快开发速度。学习通常的路线是：学习、理解、模仿、创造。Web前端学习路线开发工具03选择开发工具新建项目和文件开发工具的调试技巧

HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JavaScript、CSS的开发效率。

选择开发工具依次单击HBuilderX菜单：“文件”|“新建”|“项目”，打开了“新建项目”对话框。新建项目和文件本书案例使用HBuilderX进行开发，并采用Chrome浏览器作为展示和调试工具。开发工具的调试技巧任务实施04实现猜拳游戏首页界面

新建项目cqgame，在项目中新建文件cq.html，目录结构如图所示，添加代码实现布局效果。并拓展体验动态交互效果。

任务实施：实现猜拳游戏首页界面

小结05实现猜拳游戏首页界面

(1)

Web前端简述前端工程师页面结构、样式和行为HTML5的优势CSS3的优势JavaScript及相关框架Web前端学习路线

(2)开发工具选择开发工具新建项目和文件开发工具的调试技巧

(3)任务实施与拓展小结总结谢谢任务2实现问卷调查页面静态布局HTML5跨平台开发基础与实战学习目标掌握HTML的基本语法。能使用HTML基本标签。掌握文字与段落标签。掌握图像、超级链接和列表标签。能使用HTML列表、超级链接标签等布局标签。掌握表格标签，能使用表格相关标签实现信息展示。掌握表单元素标签的应用。能使用HTML5表单常用新属性。能使用表单标签实现注册等页面的布局。能使用综合使用常用标签实现页面的整体布局。目录一、任务描述二、HTML的基本概念三、HTML5常用标签五、任务实施六、小结四、表单相关元素和属性任务描述01实现问卷调查页面静态布局本任务是采用HTML的布局方式，实现问卷调查页面起始页面、问卷调查页面及问卷调查信息统计展示页面的静态布局，如图所示。任务描述：实现问卷调查页面静态布局HTML的基本概念02HTML简介HTML基本格式

HTML注释语句

HTML的英文全称是HyperTextMarkupLanguage，是一种用于创建网页的标准标记语言。HTML运行在浏览器上，由浏览器来解析。HTML文档包含了HTML标签及文本内容，用来描述文字、图形、动画、声音、表格、链接等。HTML文档也叫做Web页面。5版本是HTML目前最新版本，也就是现在常说的HTML5，而且现在学习HTML都是针对5这个版本进行学习的。HTML5是对以前的HTML发展产生出来的，因此，HTML5保留了以前HTML绝大部分标签。HTML简介<!DOCTYPEhtml>声明为HTML5文档。<html>元素是HTML页面的根元素。此元素可告知浏览器其自身是一个HTML文档。<head>元素包含了文档的元（meta）数据，如：<metacharset="utf-8">定义网页编码格式为utf-8。<title>元素描述了文档的标题。<body>元素包含了可见的页面内容。HTML基本格式举例HTML的注释方法：包含在“”之间的内容将会被浏览器忽略。<body>

文档内容......

</body>HTML注释语句举例HTML5文档常用标签03文字段落相关标签HTML图像<img>元素列表、表格、超链接、DIV标签多媒体元素语义化标签HBuilder编辑器常用的快捷方式

常用的文字与段落标签有以下几种：

1.标题标签<hn>2.换行标签<br>

3.段落标签<p>4.水平分隔线标签<hr>5.特殊字符，如版权标志“©”。

文字段落相关标签举例网页中插入图片用单标签<img>，当浏览器读取到<img>标签时，就会显示此标签的src属性所设定的图像。<imgsrc="img/hd.jpg"alt="蝴蝶"width="260"height="180">

若路径有误或者网速过低时，图片加载不到，会在图片的位置显示alt属性的值。HTML图像<img>元素举例

1．无序列表<ul><ultype="square"><li>西瓜</li><li>桃子</li><li>荔枝</li></ul>

2．有序列表<ol><oltype="A"><li>可乐</li><li>雪碧</li><li>柠檬茶</li></ol>3．嵌套列表

将一个列表嵌入到另一个列表中，作为另一个列表的一部分，称为嵌套列表。无论是有序列表的嵌套还是无序列表的嵌套，浏览器都可以自动分层排列。

列表举例<table>…</table>//定义表格<caption>…</caption> //定义标题<tr>…</tr> //定义表行<th>…</th> //定义表头<td>…</td> //定义单元格（存放表格的具体数据）表格举例

超链接是网页互相联系的桥梁，页面间的跳转功能就是通过超链接<a>元素来实现的。（1）链接到同一目录中的网页文件

<ahref="目标文件名.html">访问文档</a>（2）链接到下一级目录中的网页文件

<aherf="子目录名/目标文件名.html">访问文档</a>（3）链接到上一级目录中的网页文件

<aherf="../目标文件名.html">访问文档

</a>（4）链接到同级目录中的网页文件

<ahref="../子目录名/目标文件名.html">热点对象</a>

超链接举例

<div>（division）简单而言就是一个区块标签，即在<div></div>之间相当于一个容器，可以容纳段落、标题、图片、表格，乃至章节、摘要、标注等各类HTML标签。

DIV标签介绍举例1．audio标签介绍audio元素用于播放音频，controls属性设置是否使用播放控制，示例如下：<audiosrc="music.mp3"controls="controls"></audio>2．video标签介绍视频标签<video></video>，其中的controls属性设置是否使用播放控制，示例如下：<videosrc="mov.mp4"controls="controls"></video>

多媒体元素举例

html5比以前的版本增加了许多语义化的标签，比如header、footer、nav、main、article、aside等，这些标签和div的作用类似，且更加语义化。

语义化标签举例1．生成标签直接输入标签名，按tab键既可，比如：在页面中输入div然后tab键，就可以生成<div></div>。2．生成多个相同标签如果想要生成多个相同标签加上*就可以了，比如在页面中输入div*3然后tab键，就可以快速生成3个div3．生成带有属性的标签如果想要生成带有指定样式类属性或者id属性的div标签，如直接写.demo然后tab键就可以生成代码“<divclass="demo"></div>4．生成层级标签如果想要生成父子级关系的标签，可以用“>”，比如在页面中输入ul>li*6，然后tab键

HBuilder编辑器常用的快捷方式举例HTML5表单相关元素和属性04表单的定义表单控件HTML5表单常用新属性

表单是页面上的一块特定区域，这块区域有一对<form>标签定义。

<formaction="url"method="ge|post"name="value">…</form>1.formaction属性action属性规定当提交表单时，向何处发送表单数据。2.formmethod属性method属性，表示了发送表单信息的方式。

表单的定义举例表单常用控件举例控件元素对象名称type属性值单行文本框text多行文本框textarea按钮button单选钮radio复选框checkbox列表框

密码框password重置按钮reset提交按钮submit表单及控件常用属性属性描述name控件名称type控件的类型，如radio、text等align指定对齐方式，可取top、bottom、middlevalue用于设定输入默认值maxlength在单行文本的时候允许输入的最大字符数readonly用于文本框中表示只能显示，不能添加修改checked设置单选框、复选框，初始状态为选中，属性值仅有checked，表示初始就被选中。举例1．placeholder

是指文本框或处于未输入状态并且未获得光标焦点时，降低显示输入提示文字不透明度。2．typeHTML5加入了新的input类型，type字段为输入提供选择格式。如：type=“color”3．pattern

该属性规定用于验证输入字段的模式,当触发表单提交的时候，浏览器会将输入与pattern属性做匹配来最终判断是否有效输入。4．autofocus

规定在页面加载时，域自动地获得焦点。5．required

规定必须在表单提交之前填写输入域（不能为空）。6.autocomplete属性

为了完成表单的快速输入，浏览器一般提供了自动补全的功能选择。HTML5表单常用新属性

举例任务实施04实现猜拳游戏首页界面本任务是采用HTML的布局方式，实现问卷调查页面起始页面、问卷调查页面及问卷调查信息统计展示页面的静态布局。单击图片跳转到调查页面，填写表单，点击提交按钮，提交表单。

任务实施：实现问卷调查页面静态布局

小结05实现问卷调查页面静态布局

(1)

HTML的基本概念HTML简介HTML基本格式、注释语句

(2)HTML5文档常用标签文字段落相关标签HTML图像<img>元素列表、表格、超链接、DIV标签多媒体元素语义化标签HBuilder编辑器常用的快捷方式

(3)HTML5表单相关元素和属性表单的定义、表单控件HTML5表单常用新属性

(4)任务实施与拓展小结总结谢谢任务3实现简洁立体菜单效果HTML5跨平台开发基础与实战学习目标掌握CSS的引用、分类方式。能够使用字体、颜色、背景与文字属性能够使用边距、填充与边框属性能够使用列表属性。掌握各类元素CSS设置与盒模型的应用。掌握页面布局的方法。掌握常用的CSS3文字阴影，盒阴影，渐变背景等效果的实现。能够使用弹性布局实现简洁立体菜单效果。目录一、任务描述二、CSS3介绍三、样式表的使用五、边距、填充与边框四、字体、颜色、背景

与文字属性六、列表属性目录七、列表属性八、CSS布局基础九、常用布局结构十一、弹性布局十二、兼容性处理十、CSS3常用特效十三、任务实施十四、小结任务描述01实现简洁立体菜单效果本任务实现在线学习系统主页面菜单的布局和美化，如图所示。任务描述：实现简洁立体菜单效果CSS3介绍02样式表简介样式表的规则样式表注释方法

CSS是CascadingStyleSheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即样式表。它可以定义在HTML文档的标签里，也可以在外部附加文档中作为附加文件。此时，一个样式表可以作用多个页面，乃至整个站点，因此具有更好的易用性和拓展性。。CSS的发展是向模块发展的，模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影、渐变等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。样式表简介语法：选择器{属性1:属性值1;属性2:属性值2}在下面的示例中，p为选择器，介于“{}”中的所有内容为声明块。表示了<p></p>标签内的所有文本的字体为宋体，字体大小为18px。代码如下：p{font-family:"宋体";font-size:18px;}。样式表的规则举例

以“/*”开始一直到“*/”结束/*创建人：韩梅梅*创建时间：2021.5.8*作用：设置文字样式*//*----------文字样式开始----------*/.white12px{color:white;/*白色12象素文字*/font-size:12px;}/*----------文字样式结束----------*/样式表注释方法举例样式表的使用03常用添加CSS的方法选择器的分类选择器的优先级1.行内样式表如：<divstyle="width:200px;height:200px;background:#FF0000;color:#FFFFFF;"></div>2.内联样式表在HTML页面的<head>元素中嵌入style元素，将CSS样式都写在style标签中3.外联样式表

外联样式表又称外部样式表或链接样式表，当样式需要应用于很多页面时，外联样式表将是理想的选择。这里的外联样式表指的是CSS文件，CSS文件的后缀名为“.css”，HTML文件通过<link>标签链接到样式表。基本语法：<linkrel="stylesheet"href="*.css"type="text/css">常用添加CSS的方法举例1.标签选择器HTML中的所有标签都可以作为标签选择器。如：body{font-size:12px;line-height:18px;}2.类选择器常用于为多个元素设置同一样式，如：.right{color:#FF0000;text-align:right;}调用的方法是<pclass="right">危楼高百尺手可摘星辰</p><pclass="right">欲穷千里目更上一层楼</p>3.id选择器在HTML页面中id属性标识了某个单一元素，id选择器是用来对某个单一元素定义单独的样式。如：#title1{color:#FF0000;text-align:center}选择器的分类举例4.伪类选择器指定的是元素的某种状态。如：a:link{color:#000000;text-decoration:none;}a:visited{color:#333333;text-decoration:none;}:nth-child(n) 5.后代选择器后代选择器是选择父元素的所有子孙元素，选择div元素下面所有的p元素的示例如：divp{background-color:red}6.一级子元素选则器选择某个元素的直接子元素。如：div>p{background-color:red;}选择器的分类举例7.属性选择器指定的是元素的某种状态。以特定前缀开头element[attribute^="value"]用于选取属性值以指定值开头的元素。该选择器的关键字符是^符号，它的意思是“以此开头”。示例如下：img[alt^="film"]{border:3pxdashed#e15f5f;}包含特定字符串element[attribute$="value"] 用于选取属性值以指定值结尾的元素。该选择器的关键字符是$，它的意思是“以此结尾”。示例如下：img[alt$="film"]{border:3pxdashed#e15f5f;}以特定后缀结尾element[attribute*="value"] 用于选取属性值中包含指定值的元素，位置不限，也不限制整个单词。该选择器的关键字符是*符号，它的意思是“包含”。示例如下：img[alt*="film"]{border:3pxdashed#e15f5f;}选择器的分类举例8.分组选择器给多个选择器添加同样的CSS样式效果，选择器之间要用逗号隔开，目的是优化代码，减少重复。例如：h1,h2,h3,h4,h5,h6,td{color:#666666;}这里的样式表示h1,h2,h3,h4,h5,h6,td中的文本颜色都为灰色（#666666）。选择器的分类举例样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。如果在同一个选择器上使用了多个不同的样式表时,这些样式相互冲突,产生不可预料的效果。浏览器根据以下规则显示样式属性。样式作用在同一元素上的优先级顺序为:内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器选择器的优先级举例字体、颜色、背景与文字属性04设置样式表的字体属性颜色及背景属性文本属性

CSS的字体属性主要包括字体族科、字体大小、加粗字体以及英文字体的大小转换等。1.字体设置—font-family语法：font-family:"字体1","字体2","字体3";2.设置字号—font-size语法：font-size:大小取值3.字体风格—font-style字体风格就是字体样式，主要是设置字体是否为斜体。语法：font-style:样式的取值4.设置加粗字体—font-weightfont-weight属性用于设置字体的粗细，实现对一些字体的加粗显示。语法：font-weight:字体粗度值设置样式表的字体属性举例

CSS的字体属性主要包括字体族科、字体大小、加粗字体以及英文字体的大小转换等。5.小型的大写字母—font-variantfont-variant属性用来设置英文字体是否显示为小型的大写字母。语法：font-variant：取值6.复合属性：字体—fontfont属性是复合属性，用作对不同字体属性的略写，特别是行高。语法：font:字体取值

设置样式表的字体属性举例3.背景颜色background-color

语法：background-color:颜色取值4.背景图像background-image语法：background-image:url(图像地址）说明：图像地址可以设置成绝对地址，也可以设置成相对地址。5.背景重复background-repeat语法：background-repeat：取值取值范围：repeat|no-repeat|repeat-x|repeat-y说明：repeat背景图片横向和竖向都重复；no-repeat背景图片横向和竖向都不重复；repeat-x背景图片横向重复；repeat-y背景图片竖向重复。6.背景附件background-attachment背景附件属性用来设置背景图像是随对象内容滚动还是固定的。语法：background-attachment：取值说明：scroll表示背景图像是随对象内容滚动，是默认选项；fixed表示背景图像固定在页面上静止不动，只有其他的内容随滚动条滚动。颜色及背景属性举例3.背景颜色background-color

语法：background-color:颜色取值4.背景图像background-image语法：background-image:url(图像地址）说明：图像地址可以设置成绝对地址，也可以设置成相对地址。5.背景重复background-repeat语法：background-repeat：取值

说明：repeat背景图片横向和竖向都重复；no-repeat背景图片横向和竖向都不重复；repeat-x背景图片横向重复；repeat-y背景图片竖向重复。6.背景附件background-attachment语法：background-attachment：取值说明：scroll表示背景图像是随对象内容滚动，是默认选项；fixed表示背景图像固定在页面上静止不动，只有其他的内容随滚动条滚动。颜色及背景属性举例3.背景颜色background-color

8.背景大小background-sizebackground-size指定背景图像的大小。可以指定像素或百分比大小。9.复合属性：背景background语法：background：取值

背景相关属性的简写10.CSS3多重背景排在最前面的图片在浏览器中显示时会覆盖在最上面。还可以在声明中追加背景颜色，像下面这样：background:url('img/1.png'),url('img/2.png'),url('img/3.png')leftbottom,black;颜色及背景属性举例1.单词间隔word-spacing语法：word-spacing:取值

2.字符间隔letter-spacing语法：letter-spacing:取值

3.文字修饰text-decoration设置下划线、删除线等。4.纵向排列vertical-align垂直对齐方式

5.文本转换text-transform文本转换属性仅被用于用来转换英文文字的大小写的。6.文本的水平对齐text-align

文本属性举例7.文本缩进text-indent常用于设置段落的首行缩进。8.文本行高line-height行高属性用于控制文本基线之间的间隔值。9.文本行高line-height行高属性用于控制文本基线之间的间隔值。说明：normal是默认属性，即将连续的多个空格合并；pre作用类似HTML中的<pre>标签；nowrap则表示强制在同一行内显示所有文本，直到文本结束或者遇到<br>对象。

文本属性举例边距、填充与边框属性05边距与填充属性边框属性

1.边距―margin

margin的值可以取1到4个，如果只设置了1个值，则应用于4个边距；如果设置了两个或3个值，则省略的值与对边相等；如果设置了4个值，则按照上、右、下、左的顺序分别对应其边距。2.填充―padding

间隔值可以设置为长度值或百分比。其中，百分比不能使用负值。示例如下：img{margin:10px20px;padding:5px6px7px8px;}

边距与填充属性举例边框属性-边框样式border-style举例border-style属性值含义none不显示边框，为默认属性值dotted点线dashed虚线solid实线double双实线groove边框带有立体感的沟槽ridge边框成脊形inset使整个方框凹陷，即在外框内嵌入一个立体边框outset使整个方框凸起，即在外框外嵌入一个立体边框边框属性

举例

边框属性border边框属性用来设置一个元素的边框宽度、样式和颜色。它所包含的5种属性（即上、右、下、左4个边框属性和一个总的边框属性）都是复合属性。CSS3圆角边框border-radius属性为元素添加圆角边框！

列表属性06列表符号的取值举例符号的取值含义none不显示任何项目符号或编码disc以实心圆形●作为项目符号circle以实心圆形○作为项目符号square以实心方块■作为项目符号decimal以普通阿拉伯数字1、2、3……作为项目编号lower-roman以小写罗马数字ⅰ、ⅱ、ⅲ……作为项目编号upper-roman以大写罗马数字Ⅰ、Ⅱ、Ⅲ……作为项目编号lower-alpha以小写英文字母a、b、c……作为项目编号upper-alpha以大写英文字母A、B、C……作为项目编号列表属性举例列表属性拓展举例CSS布局基础07CSS布局元素类型盒模型定位及尺寸属性CSS布局元素类型举例1.块级元素每个块级元素都从新的一行开始，块级元素一般是其它元素的容器元素，它可以容纳内联元素和其它元素。例如：段落、标题、列表、表格、div等元素都是块级元素。2.行内元素行内元素也成为内联元素。和其他元素都在一行上；给内联元素设置宽度和高度是没有效果的。

3.行内块元素行内块元素和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。inline-block。4.display实现元素类型的转换“display:block”将元素转换为块级元素。“display:inline”将元素装换为行级元素

盒模型举例定位及尺寸属性举例1.定位方式position定位方式属性用于设定浏览器应如何来定位HTML元素。2.元素位置top、right、bottom、left元素位置属性与定位方式共同设置元素的具体位置。

3.层叠顺序z-index

层叠顺序属性用于设定层的先后顺序和覆盖关系。4.浮动属性float

浮动属性也称漂浮属性，浮动使元素脱离文档普通流，漂浮在普通流之上的。5.清除属性clear清除属性指定一个元素是否允许有其他元素漂浮在它的周围。6.可见属性visibility可见属性用于设定嵌套层的显示属性。

常用布局结构08单行单列结构二列布局结构单行单列结构举例二列布局结构举例CSS3常用特效09CSS3盒阴影CSS3文字阴影

CSS3渐变背景CSS3盒阴影举例box-shadow属性值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。阴影模糊值。不允许负值spread可选。阴影外延值。可以为负值color可选。阴影的颜色。inset可选。设置对象的阴影类型为内阴影。该值为空时，则对象的阴影类型为外阴影CSS3盒阴影举例CSS3文字阴影举例text-shadow属性值说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。阴影模糊值。不允许负值color可选。阴影的颜色。CSS3渐变背景举例弹性布局10弹性布局举例兼容性处理11CSS3兼容性处理举例/*加上私有前缀*/-webkit-border-radius:50px;/*-webkit-Safari、Chrome*/-moz-border-radius:50px;/*-moz-Firefox*/-ms-border-radius:50px;/*-ms-IE*/-o-border-radius:50px;/*-o-Opera*/border-radius:50px;/*标准*/任务实施12实现猜拳游戏首页界面本任务是采用弹性布局，并添加阴影，圆角边框等美化效果如图所示。

任务实施：实现简洁立体菜单效果

小结13实现简洁立体菜单效果CSS3介绍样式表的使用字体、颜色、背景与文字属性边距、填充与边框属性列表属性CSS布局基础常用布局结构CSS3常用特效弹性布局兼容性处理小结总结谢谢任务4实现猜拳游戏功能HTML5跨平台开发基础与实战学习目标能够运用JavaScript输出语句实现信息的展示。能够给程序添加注释。掌握JavaScript的数据类型。能使用typeof来判断数据类型。理解JavaScript的数据类型的自动转换。能使用parseInt()、parseFloat()实现JavaScript的数据类型的强制转换。掌握JavaScript运算符与表达式。掌握变量的声明和赋值。能够定义和调用函数，能够实现函数的参数传送，能够使用函数的返回值。理解变量的作用域。能够运用流程控制语句。了解处理日期和时间的存储、转化和表达的Date对象。学习目标掌握Date对象常用方法和属性的访问。能够使用Date对象实现日期的各种形式展示。了解处理数学运算的Math对象。掌握Math对象常用方法和属性的访问。能够使用Math对象实现数学运算。掌握DOM元素的常用属性和方法。能够实现元素的获取。掌握DOM事件的处理。能够实现元素事件的绑定。掌握DOM元素的样式动态设置。能够动态改变元素的样式。目录一、任务描述二、JavaScript简述三、数据类型和运算符五、常用的内置函数六、基本语句四、变量和函数目录七、日期(Date)对象和数学(Math)对象八、DOM基础九、动态改变元素样式十、任务实施十一、小结任务描述01实现猜拳游戏功能本任务本任务是编写JavaScript程序，实现猜拳游戏功能，如图所示。任务描述：实现猜拳游戏功能

JavaScript简述02JavaScript概要、主要特点、相关应用常用的引入JavaScript的方式JavaScript输出语句调试JavaScript程序页面结构、样式和行为JavaScript概要

ECMAScript是实现JavaScript所依据的标准。也用来描述语言版本(比如ECMAScript5)，是一种由欧洲计算机制造商协会（ECMA）通过的脚本程序设计标准。1997年，为了解决JavaScript几个版本语法、特性等方面的混乱，推出了ECMA-262规范版本，ECMA-262标准Edition3是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了JavaScript语言的基本语法，以后的版本完全继承。直到今天，初学者一开始学习JavaScript，其实就是在学3.0版的语法。2009年12月，ECMAScript5版正式发布。ECMAScript5与ECMAScript3基本保持兼容，ECMAScript5浏览器支持情况：Opera11.60、InternetExplorer9*、Firefox4、Safari5.1*、Chrome13，因此在PC端开发的时候，要注意IE9以下的兼容，移动端开发时，可以比较放心了。JavaScript的组成

JavaScript由三部分组成：核心（ECMAScript）描述了该语言的语法和基本对象浏览器对象模型(BOM，是BrowserObjectModel的首字母缩写)描述了与浏览器进行交互的方法和接口文档对象模型(DOM，是DocumentObjectModel的首字母缩写)描述了处理网页内容的方法和接口JavaScript引擎的工作原理

JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。

JavaScript代码执行顺序为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。如果在一个页面中存在多个window.onload事件处理函数，则只有最后一个才是有效的，为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，例如：window.onload=function(){f1();f2();f3();}而且通过这种方式可以改变函数的执行顺序，方法是：简单地调整onload事件处理函数中调用函数的排列顺序。

JavaScript的主要特点JavaScript是一种Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入到HTML页面中，把静态页面转变成支持用户交互并响应事件的动态页面。JavaScript主要用于读写HTML元素、在网页中嵌入动态文本、动态修改CSS样式表；对浏览器事件做出响应、表单数据验证、检测访客的浏览器信息等等。用途

JavaScript相关应用1.验证数据2.页面特效3.数值计算4.动态页面效果JavaScript主要用于读写HTML元素、在网页中嵌入动态文本、动态修改CSS样式表；对浏览器事件做出响应、表单数据验证、检测访客的浏览器信息等等。1．

通过<script>标签嵌入到HTML页面来引入JavaScriptJavaScript代码写在<script></script>标签对之间。<scripttype="text/JavaScript">//JavaScript语句；</script>type属性用于指定HTML文档引用脚本的语言类型，“type=’text/JavaScript’”表示<script></script>元素中包含的是JavaScript脚本。“//”表示单行注释标记，使用“/**/”定义多行注释。同时需要注意，JavaScript语句必须以分号“；”结束；

JavaScript区分大小写。

常用的引入JavaScript的方式举例2．通过<script>标签的src属性链接外部的JavaScript文件单独创建一个JavaScript文件（简称js文件）其文件后缀通常为.js，然后将JavaScript代码直接写在JavaScript文件中。链接JavaScript文件名称为“xxx.js”的示例如下：<scriptsrc="xxx.js"></script>

常用的引入JavaScript的方式举例JavaScript输出语句举例1．使用window.alert()弹出警告框，向用户发出警告或提醒alert()方法会创建一个警告框，用于将浏览器或文档的警告信息传递给客户。参数可以是变量、字符串或表达式，警告框无返回值。window可以省略。2．document.write()

document.write()方法可以向文档写文本、HTML表达式或JavaScript代码。该方法需要个字符串参数，它是写到文档HTML内容，这些字符串参数可以是变量或值为字符串的表达式，写入的内容常常包括HTML标记语言。

window.alert(5+6);

document.write("<h1>个人信息</h1>");JavaScript输出语句举例3．使用console.log()JavaScript显示数据使用console.log()写入到浏览器的控制台。

语法：window.confirm(“str”)等效于confirm(“str”)；【例】确认消息对话框。if(confirm("确定开始么?")){alert("您单击了确认");}else{alert("您单击了取消");}JavaScript输出语句举例5．prompt()方法

语法：prompt(msg,defaultText)；提示用户进行输入的对话框。该方法可返回用户输入的字符串。【例】提示用户进行输入的对话框。varans=prompt("请输入您的账号?","666");if(ans){alert("您的账号是："+ans);}else{alert("您拒绝了回答！");}JavaScript输出语句举例6.使用innerHTML

语法：object.innerHTML="输出内容"；JavaScript显示数据使用innerHTML写入到HTML元素。【例】输出数据。<pid="demo">我的第一个段落</p><script>document.getElementById("demo").innerHTML="段落已修改。";</script>1．语法错误

调试JavaScript程序举例2．逻辑错误

调试JavaScript程序举例页面结构、表现和行为HTML：（HyperTextMarkupLanguage）超文本标记语言，用来编写网页的内容，形成页面的结构。CSS：（CascadingStyleSheet）层叠样式表，它出现的目的是为了让网页的表现更丰富。JavaScript：控制页面的行为。JavaScript通过事件动态修改HTML和CSS。数据类型和运算符03JavaScript数据类型-数值型字符串型、布尔型

、特殊数据类型

数据类型的隐式和显式转换JavaScript常用运算符数据类型的分类举例

数值型：数字可以带小数点，也可以不带如：120，35.23;也可以用科学或标准方法表示，如：5E7表示50000000、4e-5表示0.00004等。undefined类型：专门用来确定一个已经创建但是没有初值的变量。JavaScript中基本的数据类型有以下几种。字符串型：用引号包围的文本，如："我是字符串1",'我是字符串2'等。布尔型：只有两个取值，如：true、false。判断时非0或非空可作为true对待。null类型：表示从未赋值的值，只有一种取值null。如果引用一个没有定义的变量，则返回一个null值。数值型number

JavaScript脚本语言中采用弱类型的方式，拥有动态类型，这意味着相同的变量可用作不同的类型数值型：数字可以带小数点，也可以不带如：120，35.23;也可以用科学或标准方法表示，如：5E7表示50000000、4e-5表示0.00004等。toFixed()方法可把number四舍五入为指定小数位数的数字，返回值为string类型。varnum=3.456789;varn=num.toFixed();//将一个数字，不留任何小数：n的值为3varnum=3.456789;varn=num.toFixed(2);//将一个数字，留2位小数：n的值为3.46alert(typeofn);//string举例字符串型String

举例字符串（string）是有Unicode字符、数字、标点符号等组成的序列，它是JavaScript用来表示文本的数据类型。程序中的字符串型数据包含在单引号和双引号中，由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号。例如：单引号括起来的一个或多个字符，代码如:'HelloJavaScript！'例如：双引号括起来的一个或多个字符，代码如：

"HelloJavaScript！"例如：单引号定界的字符串中可以包含双引号，代码如：'pass="mypass"'例如：双引号定界的字符串中可以包含单引号，代码如："Youcancallher'Rose'"假设字串

varmyString=“thissampletooeasy！”其中字串对象的“位置”是从0开始，字串“thissampletooeasy！”中第0位置的字符是“t”，第1的位置是“h”，……依次类推。布尔型

举例布尔数据类型只有两个值，这两个合法的值分别由直接量“true”和“false”表示。它说明某个事物是真还是假。在JavaScript程序中，布尔值通常用来比较所得的结果，例如：m==1这行代码测试了变量m的值是否和数值1相等。如果相等，比较的结果就是布尔值true，否则结果就是false。布尔值通常用于JavaScript的控制结构。例如，JavaScript的if/else语句就是在布尔值true时执行一个动作，而在布尔值为false时执行另一个操作。JavaScript在必要的时候将true转化为1，将false转化为0。特殊数据类型

举例未定义值undefined类型只有一个值，即特殊的undefined。在使用var声明变量，但没有对其初始化时，这个变量的值就是undefined。例如：varm;alert(m);JavaScript中还有一种特殊类型的数字常量NaN，即“非数字”。当程序由于某种原因计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数值就是NaN。JavaSript中的关键字null是一个特殊的值，它表示值为空，用于定义空的或者不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值。这里必须注意的是，null不等同与空字符串（""）和0。null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值。特殊数据类型

举例转义字符在document.write()语句中使用时，只有将其放在格式化文本标签<pre></pre>中才会起作用。如：document.write(“<pre>努力学习\nJavaScript语言！</pre>”);

复合数据类型:Object类型值为基本数据类型的组合如：数组，json等，如下：varperson={//json'name':'Bob','age':20,'tags':['js','web','mobile'],'city':'Beijing','hasCar':true,'zipcode':null};数据类型的隐式转换

举例当JavaScript尝试操作一个"错误"的数据类型时，会自动转换为"正确"的数据类型。以下输出结果不是你所期望的：5+null//返回5null转换为0"5"+null//返回"5null"null转换为"null""5"+1//返回"51"1转换为"1""5"-1//返回4"5"转换为5"5"*2//返回10"5"转换为5"6"/2//返回3"6"转换为6JavaScript常用运算符

用于操作数据特定符号的集合叫运算符，运算符操作的数据叫操作数，运算符与操作数连接后的式子叫表达式，运算符也可以连接表达式构成更长的表达式。算术运算符可以进行加、减、乘、除和其他数学运算，给定

y=7，下表解释了这些算术运算符。算术运算符描述例子结果+加x=y+2x=9-减x=y-2x=5*乘x=y*2x=14/除x=y/2x=3.5%取模x=y%2x=1++递加1x=++yx=8--递减1x=--yx=6

比较运算符可以比较表达式的值，并返回一个布尔值，给定x=7，如表所示。比较运算符描述例子<

小于x<8为true>

大于x>8为false<=小于等于x<=8为true===全等于x===7为true；x==="7"为false>=大于等于x>=8为false==等于x==8为false!=不等于x!=8为true!==不全等于x!=="7"为true全等于运算符“===”与不全等于“！==”对数据类型的一致性要求严格。

逻辑运算符比较两个值，然后返回一个布尔值（true或false），JavaScript中常用的逻辑运算符，如表所示。逻辑运算符描述&&逻辑与，在形式A&&B中，只有当两个条件A和B都为true时，整个表达式才为true||逻辑或，在形式A||B中，只要两个条件A和B有一个为true，整个表达式就为true!逻辑非，在!A中，当A为true时，表达式的值为false；当A为false时，表达式的值为true三个逻辑运算符优先级有细微差别，从高到低次序为!、&&、||。赋值运算符不仅实现了赋值功能，由它构成的表达式也有一个值，值就是赋值运算符右边的表达式的值，赋值运算符的优先级很低，仅次于逗号运算符。复合赋值运算符是运算与赋值两种运算的复合，先运算、后赋值，以简化程序的书写，提高运算效率。给定

x=20

和

y=5，如表10-7所示认识常用组合赋值运算符。赋值运算符描述例子=将右边表达式的值赋给左边的变量。x=y，结果x=5+=将运算符左侧的变量加上右侧表达式的值赋给左侧的变量。x+=y等同于x=x+y，结果x=25-=将运算符左侧的变量减去右侧表达式的值赋给左侧的变量。x-=y等同于x=x-y，结果x=15*=将运算符左侧的变量乘以右侧表达式的值赋给左侧的变量。x*=y等同于x=x*y，结果x=100/=将运算符左侧的变量初一右侧表达式的值赋给左侧的变量。x/=y等同于x=x/y，结果x=4%=将运算符左侧的变量用右侧表达式的值求模。x%=y等同于x=x%y，结果x=0条件运算符是三元运算符，使用该运算符可以方便地由条件逻辑表达式的真假值得到各自对应的取值。或由一个值转换成另外两个值，使用条件运算符嵌套多个值。语法：操作数？结果1:结果2如果操作数的值为true时，表达式的值为“结果1”，否则为“结果2”。例如：

varm=5;(m==10)?a="Yes":a="No";document.write("m==10的结果为"+a);则最终的输出结果为“m==10的结果为No”。【例

】三元运算符实现图片切换。举例运算符具有明确的优先级与结合性。优先级较高的运算符将先于优先级较低的运算符进行运算。结合性则是指具有同等优先级的运算符将按照怎样的顺序进行运算。结合性有向左结合和向右结合两种。例如,表达式x+y+z，向左结合就是先运算x+y，即(x+y)+z；向右结合则表示先运算y+z，即x+(y+z)。优先级结合性运算符最高向左[]、()优先级由高到低依次排列向右++、--、-、!、delete、new、typeof、void向左*、/、%向左+、-向左<<、>>、>>>向左<、<=、>、>=、in、instanceof向左==、!=、===、!===向左&向左^向左|向左&&向左||向右?:向右=向右*=、/=、%=、+=、-=、<<=、>>=、.>>>=、&=、^=、|=最低向左，typeof运算符返回其操作数当前的数据类型。这对于判断一个变量是否已被定义特别有用。例如，下面应用typeof运算符返回当前操作数的数据类型，如：typeoffalsetypeof运算符把类型信息用字符串返回。typeof运算符的返回值有6种：“number”、“string”、“boolean”、“object”、“function”和“undefined”。typeof"John"//返回stringtypeof3.14//返回numbertypeoffalse//返回booleantypeof[1,2,3,4]//返回objecttypeof{name:'John',age:34}//返回objecttypeofundefined//undefinedtypeofnull//object变量和函数04JavaScript变量的命名与声明

函数的定义与调用变量的作用域关键字举例JavaScript关键字（ReservedWords）是指在JavaScript语言中有特殊含义，成为JavaScript语法中一部分的那些字。在JavaScript中标识符用来命名变量和函数，或者用作JavaScript代码中某些循环的标签。JavaScript关键字不能作为变量名或者函数名使用。使用JavaScript关键字作为变量名或函数名，会使JavaScript在载入的过程中出现编译的错误。变量的定义与命名变量是指程序中一个已经命名的存储单元，它的主要作用就是为数据操作提供存放信息的容器。在使用变量前，首先必须了解变量的命名规则，规则同样适用于函数的命名。必须是一个有效的变量，即变量以字母开头，中间可以出现数字或下划线如test1、btn_Start等。变量名称不能有空格、加号(+)、减号(-)、逗号(,)或其他符号。其他（如函数、属性等）需要命名的也与此相似。变量也能以$和下划线符号开头(不推荐这么做，通常用在特定领域)。在对变量命名时，最好注意名字能代表其存储数据的意义，增强可读性，以免出现错误。JavaScript中数据是弱类型的，以节省程序调试与开发的时间。JavaScript中的变量命名同其计算机语言非常相似，这里要注意以下三点。不能使用JavaScript中的关键字作为变量。在JavaScript中定义了40多个关键字，这些关键是在其内部使用的，不能作为变量的名称。如var、int、double、true不能作为变量的名称。例如：varx，y=“125”，xy=true，cost=19.5。变量的声明与赋值举例Javascript是一种弱检测的语言。它对变量的定义并不需要声明变量类型，通过赋值的形式，可以将各种类型的数据赋值给同一个变量。在JavaScript中，变量可以用关键字var作声明，例如：varage;JavaScript中变量申明分显式申明和隐式申明。

vari=56;//显式申明，并赋予了它的值，它的类型目前是数值型，值为56。

i=56;//隐式申明，

JavaScript会自动用该变量名创建一个全局变量。JavaScript可以使用var同时声明多个变量，也可以同时赋值。只声明未对其赋值的变量，则其默认值为undefined。其中x为数值型，y为字符串，xy为布尔型，cost为数值型。函数的定义与调用举例函数就是包裹在花括号中的代码块，前面使用了关键词functionfunctionfunctionname([参数表]){执行代码

}在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号(,)分隔：myFunction(argument1,argument2)函数的返回值举例通过使用return语句可以实现函数将值返回调用它的地方。在使用return语句时，函数会停止执行，并返回指定的值。functionmyFunction(x){if(x>=0)returnx;elsereturn-x;}varmyVar=myFunction(5);myVar变量的值是5，也就是函数"myFunction()"所返回的值。即使不把它保存为变量，也可以使用返回值，如：document.getElementById(“demo”).innerHTML=myFunction();“demo”元素的innerHTML将成为5，也就是函数"myFunction()"所返回的值。如果没有return语句，函数执行完毕后也会返回结果，只是结果为undefined。函数的作用域举例

在JavaScript中同样有全局变量和局部变量之分。全局变量是定义在所有函数体之外，其作用范围是所有的函数；而局部变量是定义在函数体之内，只在该函数内可见，其他函数则不能访问它。如果全局变量与局部变量有相同的名字，则同名局部变量所在函数内会屏蔽全局变量，从而优先使用局部变

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML5跨平台开发基础与实战PPT完整全套教学课件

文档简介

温馨提示

最新文档

评论

HTML5跨平台开发基础与实战PPT完整全套教学课件

文档简介

温馨提示

最新文档

评论

相关文档