《HTML5简介与应用.ppt》由会员分享，可在线阅读，更多相关《HTML5简介与应用.ppt（16页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Network Optimization Expert Team内容摘要HTML的的发展展历史和史和HTML5的的诞生生选择HTML5的理由和新特性的理由和新特性学学习HTML5还需要掌握哪些知需要掌握哪些知识HTML5历史与开发介绍（1）新标签的使用，智能表单设计，引入多媒体对象，新标签的使用，智能表单设计，引入多媒体对象，Canvas对象你的画布，扩展图形标记，对象你的画布，扩展图形标记，HTML5中的地中的地理应用，独立数据存储，新的网络连接理应用，独立数据存储，新的网络连接Network Optimization Expert TeamHTML5历史与开发介绍（1）HTML的发展历史和
2、的发展历史和HTML5的诞生的诞生混乱的混乱的HTML年代年代 兼容的兼容的HTML年代年代 二十世纪二十世纪70年代年代-80年代之间年代之间HTML正式诞生正式诞生但没有一个统一的标准，显示内容也比较简单但没有一个统一的标准，显示内容也比较简单1998年，年，HTML4.0诞生，才是真正意义上的诞生，才是真正意义上的HTML发展，发展，W3C也随之诞生也随之诞生2000年，年，XHTML的标准出现，的标准出现，CSS的诞生、的诞生、DIV 取代取代 TABLEJavascriptFlashNetwork Optimization Expert TeamHTML5历史与开发介绍（1）HTML
3、5的诞生的诞生HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。（HTML5也有了自己的logo）Chrome，IE9，Firefox8，Opera11，SafariNetwork Optimization Expert TeamHTML5历史与开发介绍（1）选择选择HTML5的理由和新特性的理由和新特性理由：理由：1、兼容性，老版本的浏览器上也可以运行（不是很靠谱）、兼容性，老版本的浏览器上也可以运行（不是很靠谱）2、
4、实用性，简化了标签，细分了功能，增加了移动互联网元素、实用性，简化了标签，细分了功能，增加了移动互联网元素 3、革命性，、革命性，HTML不再是简单的标签语言，增加了不再是简单的标签语言，增加了API、渲染等、渲染等1.微数据与微格式等方面的支持微数据与微格式等方面的支持，2.本地存储，离线应用本地存储，离线应用3.API调用，地图，位置，调用，地图，位置，LBS等等4.连接通讯，后台线程，连接通讯，后台线程，5.多媒体多媒体，6.三维、图形及特效，三维、图形及特效，7.CSS3 特点：特点：演示一个演示一个Network Optimization Expert TeamHTML5历史与开发介
5、绍（1）学习学习HTML5还需要掌握哪些知识还需要掌握哪些知识HTML基础知识，CSS样式知识、javascript知识（会JQ更好）关于开发工具：关于开发工具：DW5、editplus、记事本都可以、记事本都可以新标签的使用，智能表单设计，引入多媒体对象，新标签的使用，智能表单设计，引入多媒体对象，Canvas对象你的画布，扩展图形标记，对象你的画布，扩展图形标记，HTML5中的地理应用，独立数据存储，新的网络连接中的地理应用，独立数据存储，新的网络连接所设计的知识点：所设计的知识点：Network Optimization Expert TeamHTML5标签语法变化和使用概念（2）HTM
6、L5标签与HTML4标签区别（1）概念的变化：HTML5专注内容与结构，而不专注的表现Network Optimization Expert TeamHTML5标签语法变化和使用概念（2）HTML5标签与HTML4标签区别（2）声明与标签：HTML5在更多的声明和标签上面做了简化，也对兼容做了详细的规定，废除了部分元素，增加了部分元素HTML4HTML5Network Optimization Expert TeamHTML5标签语法变化和使用概念（2）（1）不允许写的结束符的标签：不允许写的结束符的标签：area、basebr、col、commandEmbed、hr、img、input、ke
7、ygen、link、meta、param、source、Track、wbr（2）可以省略结束符的标签：）可以省略结束符的标签：li、dt、dd、p、rt、optgroup、optionColgroup、thread、tbody、tr、td、th（3）可以完全省略的标签：）可以完全省略的标签：html、head、body、colgroup、tbodyHTML5标签语法介绍及新增标记1、语法标签：Network Optimization Expert TeamHTML5标签语法变化和使用概念（2）2、新增标签：、新增标签：标记定义一篇文章标记定义页面内容部分的侧边栏 标记定义音频内容标记定义图片标
8、记定义一个命令按钮标记定义一个下拉列表标记定义一个元素的详细内容标记定义一个对话框(会话框)标记定义外部的可交互的内容或插件 标记定义一组媒体内容以及它们的标题标记定义一个页面或一个区域的底部标记定义一个页面或一个区域的头部标记定义文件中一个区块的相关信息标记定义表单里一个生成的键值 标记定义有标记的文本 标记定义measurementwithinapredefinedrange标记定义导航链接标记定义一些输出类型标记定义任务的过程标记是用在Rubyannotations告诉那些不支持Ruby元素的浏览器如何去显示标记定义对rubyannotations的解释标记定义rubyannotatio
9、ns.标记定义一个区域标记定义媒体资源标记定义一个日期/时间 标记定义一个视频Network Optimization Expert TeamHTML5视频播放事件属性与API控件（3）内容摘要视频格式的简单介绍HTML5视频标签属性HTML5视频API控件制作一个HTML5视频播放器Network Optimization Expert TeamHTML5视频播放事件属性与API控件（3）1、视频格式的简单介绍、视频格式的简单介绍视频格式：视频格式：avi、rmb、wmv、mpeg4、ogg、webm视频主要有三部分组成：视频、音频、编码格式视频主要有三部分组成：视频、音频、编码格式在过去，
10、我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了HTML5支持的格式：支持的格式：Ogg=带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4=带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM=带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件Network Optimization Expert TeamHTML5视频播放事件属性与API控件（3）2、HTML5视频标签视频标签属性属性
11、浏览器不支持HTML5的视频播放功能 123Network Optimization Expert TeamHTML5视频播放事件属性与API控件（3）2、HTML5视频标签视频标签属性属性属性属性值描述描述autoplayautoplay如果出如果出现该属性，属性，则视频在就在就绪后后马上播放。上播放。controlscontrols如果出如果出现该属性，属性，则向用向用户显示控件，比如播放按示控件，比如播放按钮。heightpixels设置置视频播放器的高度。播放器的高度。looploop如果出如果出现该属性，属性，则当媒介文件完成播放后再次开始播放。当媒介文件完成播放后再次开始播放。pr
12、eloadpreload如果出如果出现该属性，属性，则视频在在页面加面加载时进行加行加载，并，并预备播放。播放。如果使用如果使用 autoplay，则忽略忽略该属性。属性。srcurl要播放的要播放的视频的的 URL。widthpixels设置置视频播放器的播放器的宽度。度。Network Optimization Expert TeamHTML5视频播放事件属性与API控件（3）3、HTML5视频视频API控件控件Network Optimization Expert TeamHTML5视频播放事件属性与API控件（3）3、HTML5视频视频API控件控件获得video标签，这里是DOM对象var video=document.getElementById(videoID);也可以通过jQuery的方法，如下：var video=$(#videoID).get(0);载入视频：load()，播放视频：play()，暂停：pause()，快进10秒：currentTime+=10 播放速度增加：playbackRate+播放速度增加0.1：playbackRate+=0.1 音量增加：volume+=0.1 静音：muted=true Network Optimization Expert TeamHTML5实例演示与制作谢谢观看