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