|
上午做了一个HTML5的简单培训，把资料发出来分享一下。 目录 什么是HTML5 HTML5新特性和效果 HTML5目前存在的应用局限 讨论：HTML5适合应用于我们哪些项目？ 什么是HTML5
官方概念：HTML5草案的前身名为Web Applications 1.0，是HTML4的更新加强版本。它增加了新的标签和属性，强化了网页的标准、语义化、图像表达能力和交互效果。 广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，这些技术包括：HTML5，DOM3，CSS3，JS API，SVG，WebGL（3D）等。 浏览器支持 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。 HTML5新特性 媒体支持：Video和Audio Video HTML5 规定了一种通过 video 元素来包含视频的标准方法。 当前，video 元素支持三种视频格式：
<video> 标签的属性：
1: <!DOCTYPE HTML> 2: <html> 3: <body>4: <video width="320" height="240" controls="controls"> 5: <source src="/res/7049.mp4" type="video/mp4"> 6: Your browser does not support the video tag. 7: </video> 8: </body> 9: </html>
Audio HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 当前，audio元素支持三种音频格式：
<audio> 标签的属性：
1: <!DOCTYPE HTML> 2: <html> 3: <body>4: <audio controls="controls"> 5: <source src="/res/song.mp3" type="audio/mpeg"> 6: Your browser does not support the audio element. 7: </audio> 8: </body> 9: </html>
使用场景
Canvas HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
使用场景
Web存储 在客户端存储数据 1: <!DOCTYPE HTML> 2: <html> 3: <body>4: <script type="text/javascript"> 5: localStorage.lastname="Smith"; 6: document.write("Last name: " + localStorage.lastname); 7: </script> 8: </body> 9: </html>
HTML5 表单 Input类型 Input类型 1: <!DOCTYPE HTML> 2: <html> 3: <body>4: <form action="/example/html5/demo_form.asp" method="get"> 5: E-mail: <input type="email" name="user_email" /><br /> 6: <input type="submit" /> 7: </form> 8: </body> 9: </html>
表单元素 1: <!DOCTYPE HTML> 2: <html> 3: <body>4: <form action="/example/html5/demo_form.asp" method="get"> 5: Webpage: <input type="url" list="url_list" name="link" /> 6: <datalist id="url_list"> 7: <option label="W3School" value="http://www.w3school.com.cn" /> 8: <option label="Google" value="http://www.google.com" /> 9: <option label="Microsoft" value="http://www.microsoft.com" /> 10: </datalist>11: <input type="submit" /> 12: </form> 13: </body> 14: </html>
使用场景
丰富的样式支持——CSS3 选择器
SVG矢量图形 SVG（Scalable Vector Graphics）：可缩放矢量图形，使用 XML 来描述二维图形和绘图程序的语言。可以在浏览器中构造 矩形、圆形、椭圆、线条、多边形、折线、路径、滤镜效果、渐变效果，和动画等。
拖拽 Drag&Drop简介
HTML5目前存在的应用局限 各浏览器支持程度不同。如目前支持较好的有 Opera，Chrome，Safari HTML5适合开发的项目 Web应用（网站，网页游戏、b/s系统）
|
|
|
