HTML5介绍ppt(共20张)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
画布是一个矩形区域，您可以 控制其每一像素(xiànɡ sù)。
通过HTML5的<canvas>元素来
使用JavaScript绘制形状和图
形，并在Web页面上创建动画，
而这些并不需要通过其他语言
（SVG，Flash）来实现。
//消失的正方型
<!DOCTYPE html> <meta charset="UTF-8"> <html>
context.lineTo(600,200);
context.lineTo(600,400);
context.lineTo(400,600); context.lineTo(200,600); context.lineTo(0,400);
第19页，共20页。
THANKS
第20页，共20页。
</video>
</body> </html>
This is a sample text. Insert your desired text here. Again, this is a dummy text, enter your own text here. This is a sample text. Insert your desired text here.
第14页，共20页。
audio音频 标 (yīnpín) <!DOCTYPE html>
签
<html>
<body>
<audio controls="controls">
<source src="example.mp3" type="audio/mp3"/>
<embed height="500" width="500"
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,800,400);
画布是一个矩形( jǔxíng)区域，您可以
控制其每一像素。
通过HTML5的<canvas>元素来
<html> <head>html5 canvas 八角形<br/></head> <body>
<canvas id="myCanvas" width="605" height="605"
使用JavaScript绘制形状和图
src="examlpe.mp3" />
</audio>
</body>
</html>
This is a sample text. Insert your desired text here. Again, this is a dummy text, enter your own text here. This is a sample text. Insert your desired text here.
以后，Web 世界已经经历了巨变。 ◆ HTML5 仍处于完善之中。然而(rán ér)，大部 分现代浏览器已经具备了某些 HTML5 支持
第5页，共20页。
发展趋势
HTML5将成为主流
2013年全球有10亿手机 浏览器支持HTML5。 HTML5将成为未来5-10
年内，移动(yídòng)互联网 领域的主宰者。
实例的演示
第7页，共20页。
简介+趋势
优势 & 略势
实例的演示
第8页，共20页。
多设备跨平台
跨平台性非常强大(iángdà)，可以
轻易的移植，这也是大多数人对HTML5
有兴趣的主要原因。
自适应网页设计
“一次设计，普遍适用”，让同一张网页自动 适应不同大小的屏幕，根据屏幕宽度，自动调
整布局（layout）。.
一个新的网络标准，现在仍处于发展阶段。目标是取
代现有的HTML 4.01和XHTML 1.0 标准。它希望 能够减少互联网应用（RIA)对Flash、Silverlight、 JavaFX等的依赖，并且提供更多能有效增强网络 应用的API。
第4页，共20页。
什么是HTML5？
◆HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 ◆ HTML 的上一个版本诞生于 1999 年。自从那
<head>html5 canvas 渐变色矩形<br/></head>
<body> <canvas id="myCanvas" width="800" height="400"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
style="border:3px solid #c3c3c3;">
形，并在Web页面上创建动画，
Your browser does not support the canvas element.
而这些并不需要通过其他语言
</canvas>
（SVG，Flash）来实现。
<script type="text/javascript"> var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); //1.开始绘制路径，将绘制点移动至200,0.
context.beginPath();
context.moveTo(200,0);
//2.绘制一条400,0的线。 context.lineTo(400,0); //3.绘制7条分别到600,200；600,400；400,600；200,600； 0,400；以及0,200；
01
实例！ Canvas元素绘图 04
02 audio音频标签
03
Video视频标签
第13页，共20页。
新的表单功能 <!DOCTYPE html> <meta charset="UTF-8">
<html>
<Input>标签，包含多种类(zhǒng<lèhie) ad>html5中新的表单</head>
第15页，共20页。
Video视频(shìpín) 标签
<!DOCTYPE html> <html> <body>
<video width="640" height="480" controls="controls" autoplay="autoplay">
<source src="example.mp4" type="video/mp4" />
第16页，共20页。
Canvas元素绘图
画布是一个矩形区域，您可以 控制其每一像素(xiànɡ sù)。
通过HTML5的<canvas>元素来
使用JavaScript绘制形状和图 形，并在Web页面上创建动画，
而这些并不需要通过其他语言
（SVG，Flash）来实现。
<!DOCTYPE html>
<meta charset="UTF-8"> <html>
Welcome to HTML 5
第1页，共20页。
简介+趋势 优势 & 略势
实例的演示
第2页，共20页。
简介+趋势 优势 & 略势
实例的演示
第3页，共20页。
什么是HTML5？
HTML5是Hypertext Markup Language超文 本标记语言(yǔyán)（HTML）第5次重大修改。是
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(13,118,208)"; context.fillRect(30,30,140,140);
}
//在JavaScript中创建一个擦除函数 function eraseSquare(){
var canvas = document.getElementById("myCanvas");
canvas.width = canvas.width;
}
</script>
第18页，共20页。
Canvas元素绘图 <!DOCTYPE html> <meta charset="UTF-8">
移动优先
从如今移动应用层出不穷，在这 个智能手机和将平板电脑大爆炸 的时代，移动优先已成趋势，不
管是开发什么，都以移动为主。.
第6页，共20页。
游戏开发者引领
许多游戏开发商都被
Facebook或者Zynga推动着 发展，而未来的Facebook应用 生态系统是基于HTML5的.
简介+趋势 优势 & 略势
型，用于收集特定数据。 <body>
可用于所有浏览器。
<input type=color> color<br/>
<input type=datetime-local>datetime-local<br/>
<input type=email>email<br/>
<input type=number>numbrt<br/>
即时更新
游戏客户端每次都要更新，很麻烦。可是 更新HTML5游戏就好像更新页面一样，是马上的、
即时的更新。
HTML5的优点？
第9页，共20页。
多媒体
可以给站点带来更多的多媒体 元素(视频和音频).，且非常方便。
并非所有浏览器所支持
新标签的引入，各浏览器之间将缺少一 种统一的数据(shùjù)描述格式，造成用 户体验不佳。
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
//创建一个画布，双击<canvas>元素时调用擦除函数 //加入JavaScript，绘制正方形 function drawSquare(){
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,800,400);
</script> </body> </html>
第17页，共20页。
Canvas元素绘图
<input type=range>range<br/>
<input type=time>time<br/>
<input type=tel>tel<br/>
<input type=url>url<br/>
<input type=week>week</br>
</body>
</html>
This is a sample text. Insert your desired text here. Again, this is a dummy text, enter your own text here. This is a sample text. Insert your desired text here.
第11页，共20页。
简介+趋势 优势 & 略势
实例的演示
第12页，共20页。
HTML5的新特性
新的表单功能
(gōngnéng)
Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry.
<head>html5 canvas 消失的正方形<br/></head> <body onload="drawSquare();">
<canvas id="myCanvas" width="600" height="600" style="border:3px solid #c3c3c3;" onclick=“drawSquare；” ondblclick = "eraseSquare();">
存在争议
HTML5设立了所有技术开放原则， Opera捐献了CSS技术，而在视频格式
方面，世界各大互联网公司正在为具体标
准进行争论，这可能影响HTML5标准的 分流，分两大阵营。Google， Opera，火狐，和苹果公司。
HTML5的缺点？
第10页，共20页。
简介+趋势 优势 & 略势
实例的演示
通过HTML5的<canvas>元素来
使用JavaScript绘制形状和图
形，并在Web页面上创建动画，
而这些并不需要通过其他语言
（SVG，Flash）来实现。
//消失的正方型
<!DOCTYPE html> <meta charset="UTF-8"> <html>
context.lineTo(600,200);
context.lineTo(600,400);
context.lineTo(400,600); context.lineTo(200,600); context.lineTo(0,400);
第19页，共20页。
THANKS
第20页，共20页。
</video>
</body> </html>
This is a sample text. Insert your desired text here. Again, this is a dummy text, enter your own text here. This is a sample text. Insert your desired text here.
第14页，共20页。
audio音频 标 (yīnpín) <!DOCTYPE html>
签
<html>
<body>
<audio controls="controls">
<source src="example.mp3" type="audio/mp3"/>
<embed height="500" width="500"
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,800,400);
画布是一个矩形( jǔxíng)区域，您可以
控制其每一像素。
通过HTML5的<canvas>元素来
<html> <head>html5 canvas 八角形<br/></head> <body>
<canvas id="myCanvas" width="605" height="605"
使用JavaScript绘制形状和图
src="examlpe.mp3" />
</audio>
</body>
</html>
This is a sample text. Insert your desired text here. Again, this is a dummy text, enter your own text here. This is a sample text. Insert your desired text here.
以后，Web 世界已经经历了巨变。 ◆ HTML5 仍处于完善之中。然而(rán ér)，大部 分现代浏览器已经具备了某些 HTML5 支持
第5页，共20页。
发展趋势
HTML5将成为主流
2013年全球有10亿手机 浏览器支持HTML5。 HTML5将成为未来5-10
年内，移动(yídòng)互联网 领域的主宰者。
实例的演示
第7页，共20页。
简介+趋势
优势 & 略势
实例的演示
第8页，共20页。
多设备跨平台
跨平台性非常强大(iángdà)，可以
轻易的移植，这也是大多数人对HTML5
有兴趣的主要原因。
自适应网页设计
“一次设计，普遍适用”，让同一张网页自动 适应不同大小的屏幕，根据屏幕宽度，自动调
整布局（layout）。.
一个新的网络标准，现在仍处于发展阶段。目标是取
代现有的HTML 4.01和XHTML 1.0 标准。它希望 能够减少互联网应用（RIA)对Flash、Silverlight、 JavaFX等的依赖，并且提供更多能有效增强网络 应用的API。
第4页，共20页。
什么是HTML5？
◆HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 ◆ HTML 的上一个版本诞生于 1999 年。自从那
<head>html5 canvas 渐变色矩形<br/></head>
<body> <canvas id="myCanvas" width="800" height="400"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
style="border:3px solid #c3c3c3;">
形，并在Web页面上创建动画，
Your browser does not support the canvas element.
而这些并不需要通过其他语言
</canvas>
（SVG，Flash）来实现。
<script type="text/javascript"> var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d"); //1.开始绘制路径，将绘制点移动至200,0.
context.beginPath();
context.moveTo(200,0);
//2.绘制一条400,0的线。 context.lineTo(400,0); //3.绘制7条分别到600,200；600,400；400,600；200,600； 0,400；以及0,200；
01
实例！ Canvas元素绘图 04
02 audio音频标签
03
Video视频标签
第13页，共20页。
新的表单功能 <!DOCTYPE html> <meta charset="UTF-8">
<html>
<Input>标签，包含多种类(zhǒng<lèhie) ad>html5中新的表单</head>
第15页，共20页。
Video视频(shìpín) 标签
<!DOCTYPE html> <html> <body>
<video width="640" height="480" controls="controls" autoplay="autoplay">
<source src="example.mp4" type="video/mp4" />
第16页，共20页。
Canvas元素绘图
画布是一个矩形区域，您可以 控制其每一像素(xiànɡ sù)。
通过HTML5的<canvas>元素来
使用JavaScript绘制形状和图 形，并在Web页面上创建动画，
而这些并不需要通过其他语言
（SVG，Flash）来实现。
<!DOCTYPE html>
<meta charset="UTF-8"> <html>
Welcome to HTML 5
第1页，共20页。
简介+趋势 优势 & 略势
实例的演示
第2页，共20页。
简介+趋势 优势 & 略势
实例的演示
第3页，共20页。
什么是HTML5？
HTML5是Hypertext Markup Language超文 本标记语言(yǔyán)（HTML）第5次重大修改。是
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(13,118,208)"; context.fillRect(30,30,140,140);
}
//在JavaScript中创建一个擦除函数 function eraseSquare(){
var canvas = document.getElementById("myCanvas");
canvas.width = canvas.width;
}
</script>
第18页，共20页。
Canvas元素绘图 <!DOCTYPE html> <meta charset="UTF-8">
移动优先
从如今移动应用层出不穷，在这 个智能手机和将平板电脑大爆炸 的时代，移动优先已成趋势，不
管是开发什么，都以移动为主。.
第6页，共20页。
游戏开发者引领
许多游戏开发商都被
Facebook或者Zynga推动着 发展，而未来的Facebook应用 生态系统是基于HTML5的.
简介+趋势 优势 & 略势
型，用于收集特定数据。 <body>
可用于所有浏览器。
<input type=color> color<br/>
<input type=datetime-local>datetime-local<br/>
<input type=email>email<br/>
<input type=number>numbrt<br/>
即时更新
游戏客户端每次都要更新，很麻烦。可是 更新HTML5游戏就好像更新页面一样，是马上的、
即时的更新。
HTML5的优点？
第9页，共20页。
多媒体
可以给站点带来更多的多媒体 元素(视频和音频).，且非常方便。
并非所有浏览器所支持
新标签的引入，各浏览器之间将缺少一 种统一的数据(shùjù)描述格式，造成用 户体验不佳。
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
//创建一个画布，双击<canvas>元素时调用擦除函数 //加入JavaScript，绘制正方形 function drawSquare(){
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,800,400);
</script> </body> </html>
第17页，共20页。
Canvas元素绘图
<input type=range>range<br/>
<input type=time>time<br/>
<input type=tel>tel<br/>
<input type=url>url<br/>
<input type=week>week</br>
</body>
</html>
This is a sample text. Insert your desired text here. Again, this is a dummy text, enter your own text here. This is a sample text. Insert your desired text here.
第11页，共20页。
简介+趋势 优势 & 略势
实例的演示
第12页，共20页。
HTML5的新特性
新的表单功能
(gōngnéng)
Most jurisdictions require companies to prepare and disclose annual reports, and many require the annual report to be filed at the company's registry.
<head>html5 canvas 消失的正方形<br/></head> <body onload="drawSquare();">
<canvas id="myCanvas" width="600" height="600" style="border:3px solid #c3c3c3;" onclick=“drawSquare；” ondblclick = "eraseSquare();">
存在争议
HTML5设立了所有技术开放原则， Opera捐献了CSS技术，而在视频格式
方面，世界各大互联网公司正在为具体标
准进行争论，这可能影响HTML5标准的 分流，分两大阵营。Google， Opera，火狐，和苹果公司。
HTML5的缺点？
第10页，共20页。
简介+趋势 优势 & 略势
实例的演示