常见的音频格式课件

上传人：c*** IP属地：贵州上传时间：2022-10-25 格式：PPT 页数：93 大小：2.73MB 积分：25 举报 版权申诉

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

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

文档简介

学习要求1、了解HTML4.01和XHTML相关知识2、具备CSS2使用能力3、能够熟练应用javascript。4、有耐心和毅力，勤于动手。学习要求1、了解HTML4.01和XHTML相关知识HTML5标准介绍一、HTML5初体验二、Canvas在网站设计中的应用三、增强的表单Form四、媒体支持：Video&Audio五、HTML5丰富的交互功能体验HTML5标准介绍一、HTML5初体验HTML5初体验HTML5在WEB前端设计的发展前景HTML5网页标签的改变HTML5编写规范HTML5初体验HTML5在WEB前端设计的发展前景HTML1.0–在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准)

HTML2.0–1995年11月作为RFC1866发布,在RFC2854于2000年6月发布之后被宣布已经过时HTML3.2–(复杂网景和微软)1996年1月14日,W3C推荐标准HTML4.0–（精简统一）1997年12月18日,W3C推荐标准HTML4.01(微小改进)–1999年12月24日,W3C推荐标准ISO/IEC15445:2000("ISOHTML")—2000年5月15日发布,基于严格的HTML4.01语法,是国际标准化组织和国际电工委员会的标准XHTML1.0–发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布XHTML1.1–于2001年5月31日发布XHTML2.0（没发布网景与微软竞争）HTML5初体验HTML1.0–HTML5初体验HTML的BOSS们W3C：

WorldWideWebConsortium 万维网联盟

从HTML1.0到HTML4.01

从XHTML1.0-XHTML2.1WHATWG:WebHypertextApplicationTechnologyWorkingGroup （Web超文本应用技术工作组-WHATWG）

HTML5HTML的BOSS们W3C：WorldWideWebHTML5是什么HTML5≈HTML5标签+CSS3+Javascript+HTML5APIHTML5是什么HTML5初体验浏览器厂商的支持移动互联网的蓬勃发展GOOGLE、苹果、YOUTUBE、微软、腾讯、新浪、网易、百度、优酷…IE9+Firefox3.5+OpearSafariChrome猎豹UC遨游海豚百度HTML5初体验浏览器厂商的支持IE9+Firefox3.5HTML5初体验HTML5初体验HTML5初体验Trident：又称为MSHTML，IE其他：Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能应用于Windows平台，且是不开源的Gecko：MozillaFirefoxNetscape能在MicrosoftWindows、Linux和MacOSX等主要操作系统上运行WebKit：Safari、ChromePresto：OperaHTML5初体验Trident：又称为MSHTML，IEHTML5初体验语义化标记FORM增强Video&audiocanvascontenteditableDRAG&DROP数据存储HTML5初体验语义化标记FORM增强Video&audio标准的改变--不是SGML和XML1、HTML5并不是定义为SGML或者XML的应用程序。2、在HTML5中并不存在有效性检查，取而代之的是用规范来检测规范的一致性3、HTML5的DTD声明中不需要使用DTD文件4、拥有十分松散的编写手法，但不是没有底线标准的改变--不是SGML和XML1、HTML5并不是定义标准的改变—松散的语法不允许写的结束符的标签：area、base、br、col、command、Embed、hr、img、input、keygen、link、meta、param、source、Track、wbr可以Q省略结束符的标签：li、dt、dd、p、rt、optgroup、option、Colgroup、thread、tbody、tr、td、th可以完全省略的标签：html、head、body、colgroup、tbody标准的改变—松散的语法不允许写的结束符的标签：标准的改变—HTML5的未来对于HTML5来说，既是一种进步，也是一种妥协。HTML5诞生之初的目的就是为了向下兼容。所以我们大可不必为了HTML5来临而恐慌，因为：HTML5支持松散的语法。

这种语法极大地兼容了编程人员的不规范代码，同时保证渲染的效果不会改变。

HTML4.01版本及语法依然有效。HTML5也没有认为XHTML是错误的。(XHTML5)

这种语法既支持XML的简洁标记，也认为XML的编写方式是正确的

XHTML版本及严格的XML编写都是有效的。

标准的改变—HTML5的未来对于HTML5来说，既是一种进步HTML标签的改变——HTML5初体验新的文档类型声明(DTD)新增的HTML5标签删除的HTML标签重新定义的HTML标签崭新新的页面布局HTML标签的改变——HTML5初体验新的文档类型声明(DT新的文档类型声明(DTD)文档类型声明HTML5的DTD声明为:<!doctypehtml>

<!DOCTYPEhtml>等也是正确的，因为HTML语法是不区分大小写的。在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。新的文档类型声明(DTD)文档类型声明新增的HTML5标签-结构标签结构标签：(块状元素)有意义的div <article> 标记定义一篇文章

<header> 标记定义一个页面或一个区域的头部

<nav> 标记定义导航链接

<section> 标记定义一个区域

<aside> 标记定义页面内容部分的侧边栏

<hgroup> 标记定义文件中一个区块的相关信息

<figure> 标记定义一组媒体内容以及它们的标题

<figcaption> 标签定义figure元素的标题。 <footer> 标记定义一个页面或一个区域的底部 <dialog> 标记定义一个对话框(会话框)类似微信新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好新增的HTML5标签-结构标签新增的HTML5标签-多媒体标签多媒体交互标签

<video>标记定义一个视频

<audio>标记定义音频内容

<source>标记定义媒体资源

<canvas>标记定义图片 <embed>标记定义外部的可交互的内容或插件比如flashHTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验新增的HTML5标签-多媒体标签多媒体交互标签新增的HTML5标签-Web应用标签Web应用标签<menu>命令列表<menuitem>menu命令列表标签FF（嵌入系统）<command>menu标记定义一个命令按钮<meter>状态标签(实时状态显示:气压、气温)C、O<progress>状态标签(任务过程:安装、加载)C、F、O<datalist>为input标记定义一个下拉列表,配合option

F、O<details>标记定义一个元素的详细内容，配合dt、ddC新增的HTML5标签-Web应用标签Web应用标签新增的HTML5标签-其他标签注释标签<ruby>标记定义注释或音标<rp>告诉那些不支持Ruby元素的浏览器如何去显示

<rt>标记定义对ruby的注释内容文本其他标签<keygen>标记定义表单里一个生成的键值(加密信息传送)O、F<mark>标记定义有标记的文本(黄色选中状态)<output>标记定义一些输出类型,计算表单结果配合oninput事件<time>标记定义一个日期/时间目前所有主流浏览器都不支持新增的HTML5标签-其他标签注释标签删除的HTML标签纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；产生混淆的元素：acronym，applet，isindex，dir。删除的HTML标签纯表现的元素：重新定义的HTML标签重新定义的HTML标签Body<divid="header"></div><divid="nav"></div><divid="section"></div><divid="footer"></div><divid="aside"></div><divid="article"></div><divclass="header"></div><p><divclass="footer"></div>传统div+CSS页面布局方式崭新的页面布局Body<divid="header"></div><diBody<header><nav><section><footer><aside><article><header><p><footer>HTML5布局方式崭新的页面布局Body<header><nav><section><fooHTML5初体验简洁的DOCTYPE简单的编码类型不需要闭合废弃多余的标记<!DOCTYPEhtml><html><head><title>HTML5</title></head><body>********************</body></html>HTML5初体验简洁的DOCTYPE<!DOCTYPEhtHTML5初体验<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>HTML5Demo</title><body><header><h1></h1><h2></h2></header><nav><ul><li></li><li></li></ul></nav><section><article></article><article></article></section><aside></aside><footer></footer></body></html>HTML4HTML5HTML5初体验<!DOCTYPEhtml>HTML4HTHTML5初体验编写规范符合web标准，

语义化，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，

保证最快的解析速度。HTML5初体验编写规范HTML5初体验文件规范html,css,js,images文件归档;html文件命名、css文件命名、Js文件命名HTML5初体验文件规范HTML5初体验html书写规范文档类型声明及编码

样式文件及JS文件的引入无兼容性问题的html自身标签语义化html布局嵌套重定向问题，style使用

lable使用

图片控制

注释特殊符号使用HTML5初体验html书写规范文档类型声明及编码HTML5初体验

css书写规范编码统一为utf-8;协作开发及分工class与id的使用css属性书写顺序样式重复使用率;html自身属性及继承原理中文字体名转码;背景图片使用sprite技术table标签使用兼容ie8;用png图片避免兼容性属性的使用减少使用影响性能的属性注释代码缩进与格式HTML5初体验css书写规范编码统一为utf-8HTML5初体验JavaScript书写规范文件编码统一为utf-8库引入变量命名类命名函数命名命名语义化避免用存在兼容性及消耗资源的方法或属性转换成unicode编码注释.提高函数重用率注重与html分离,减小reflowHTML5初体验JavaScript书写规范文件编码统一为uHTML5初体验

归档;图片格式仅限于gif||png||jpg;命名减少加载时间;运用csssprite技术图片规范HTML5初体验归档;图片规范HTML5初体验注释规范html注释css注释JavaScript注释HTML5初体验注释规范HTML5初体验测试工具前期开发仅测试FF&IE6&IE7&IE8,后期优化时加入Opera&Chrome&Safari;建议测试顺序:FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari,建议安装firebug及IETabPlus插件.HTML5初体验测试工具准备学习——HTML5的推广网站///准备学习——HTML5的推广网站Canvas在网站设计中的应用用canvas元素实报表图表使用CANVAS的基本步骤CANVAS的属性、API及相关函数CANVAS图形图片处理机制及应用CANVAS动画设计原理Canvas在网站设计中的应用用canvas元素实报表图表<canvasid="canvas"height="300"width="300">

您的浏览器不支持canvas标签</canvas>Canvas标记由Apple在Safari1.3Web浏览器中引入，CanvasAPI（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。canvas标签在页面中只显示一个设定背景色的画布，如果要产生新内容或者进行画图操作，需要借助canvasAPI(HTML5的内置对context对象)和javascript操作实现画图或者其他图像操作。

Canvas在网站设计中的应用<canvasid="canvas"height="3

Canvas在网站设计中的应用使用CANVAS的基本步骤

A.建立CANVAS对象B.通过JAVASCRIPT绘制

Canvas在网站设计中的应用使用CANVAS的基本步骤

Canvas在网站设计中的应用

Canvas在网站设计中的应用案例演示

Canvas在网站设计中的应用案例演示canvas的常见属性canvas的常见属性Canvas的API

canvas主要属性和方法Canvas的API

颜色、样式和阴影属性和方法Canvas的API

线条样式属性和方法Canvas的API

矩形方法Canvas的API

矩形方法Canvas的API-

路径方法Canvas的API-

转换方法Canvas的API-

文本属性和方法Canvas的API-

图像绘制方法Canvas的API-

像素操作方法和属性Canvas的API-

像素操作方法和属性Canvas的API

图像合成属性Canvas的API

图像合成属性

Canvas在网站设计中的应用JavaScript?

Canvas在网站设计中的应用JavaScript在设计中的应用JavaScript与HTML5

BOMJavaScript应用思想

Canvas在网站设计中的应用JavaScript在设计中

Canvas在网站设计中的应用JavaScript应用方法使用频繁的方法常规交互操作

Canvas在网站设计中的应用JavaScript应用方法

Canvas在网站设计中的应用

Canvas在网站设计中的应用Canvas在网站设计中的应用Canvas在网站设计中的应用

Canvas在网站设计中的应用CANVAS图形图片处理机制了解坐标：

Canvas在网站设计中的应用CANVAS图形图片处理机制

Canvas在网站设计中的应用CANVAS图形图片处理机制基础CANVASAPI：属性与方法

Canvas在网站设计中的应用CANVAS图形图片处理机制

Canvas在网站设计中的应用CANVAS动画设计原理清空CANVAS存储CANVAS状态重绘FRAME恢复CANVAS状态

Canvas在网站设计中的应用CANVAS动画设计原理

Canvas在网站设计中的应用动画测试1

Canvas在网站设计中的应用动画测试1Canvas在网站设计中的应用动画测试1Canvas在网站设计中的应用动画测试1Canvas在网站设计中的应用动画测试2Canvas在网站设计中的应用动画测试2Canvas在网站设计中的应用动画测试2Canvas在网站设计中的应用动画测试2Canvas在网站设计中的应用Canvas在网站设计中的应用

Canvas在网站设计中的应用

Canvas在网站设计中的应用Canvas在网站设计中的应用操作思路1.准备工作？2.画表盘？3.画12个时间刻度？4.画60个分钟刻度？5.取当前系统时间？

6.画时针—画分针—画秒针—画中心点？7.触发？Canvas在网站设计中的应用操作思路Canvas在网站设计中的应用准备工作？Canvas在网站设计中的应用准备工作？Canvas在网站设计中的应用2.画表盘？Canvas在网站设计中的应用2.画表盘？Canvas在网站设计中的应用3.画12个时间刻度？Canvas在网站设计中的应用3.画12个时间刻度？Canvas在网站设计中的应用4.画60个分钟刻度?5.取当前系统时间？Canvas在网站设计中的应用4.画60个分钟刻度?5.取Canvas在网站设计中的应用6.画时针Canvas在网站设计中的应用6.画时针Canvas在网站设计中的应用6.画分针？

画秒针Canvas在网站设计中的应用6.画分针？画秒针Canvas在网站设计中的应用7.触发？Canvas在网站设计中的应用7.触发？增强的表单Formwebform2.0改进功能改进语义化增强用户体验提高工作效率增强的表单Formwebform2.0改进功能增强的表单Form(所有HTML4的标签在HTML5还是100％支持)表单结构松散丰富的INPUT增强表单属性增强的表单Form(所有HTML4的标签在HTML5还是1增强的表单FormHTML4一个大容器增强的表单FormHTML4一个大容器增强的表单Form放在页面任何位置，通过新增的form属性指向ID<FORMid=myform>

<INPUT>

...

</FORM>

<INPUTvalue=“2012”form=“myform">增强的表单Form放在页面任何位置，通过新增的form属性指增强的表单Form自动获取焦点

autofocus属性<inputtype="text"id=“a"name=“a"autofocus/>新版Chrome或Safari(FF也可)增强的表单Form自动获取焦点autofocus属性增强的表单Form文本框的输入提示（输入框占位符

）：placeholder属性Opera或Chrome或Safari增强的表单Form文本框的输入提示（输入框占位符

）：pla增强的表单Form表单验证功能判断必填项<inputtype="text"id="username"name="username"requiredautofocus/>判断数据格式email输入类型：<inputtype="email“id="uemail“name="uemail" placeholder="example@"required/>

url输入类型：<inputtype=url>增强的表单Form表单验证功能增强的表单Form滑动块输入<inputtype="range"min="1"max="100"step="10"name="s"/>Opera或Chrome或Safari增强的表单Form滑动块输入Opera或Chrome或Saf增强的表单Form案例增强的表单Form案例增强的表单Form数字输入框（Opera或Chrome）<inputtype=”number”/><inputtype="number"id="count"name="count"min="0"max="100"step="10"/>增强的表单Form数字输入框（Opera或Chrome）增强的表单Form输入框下拉提示增强的表单Form输入框下拉提示增强的表单Form日期选择框<inputtype="date"name="birthday"/>增强的表单Form日期选择框增强的表单Form增强的表单Form媒体支持：Video&Audio早期：<embed>+<object>+文件问题：不是所有浏览器都支持，而且embed不是标准。现状：Realplay、windowmedia、QuickTime、Flash问题：每个厂商每个标准，网站编码和格式也都不相同，flash的出现解决了面的问题，但是apple在07年决定任何设备将不再支持flash。HTML5认为浏览器应该原生支持音视频，因为他们现在也是web中的一等公民了！媒体支持：Video&Audio早期：<embed>+<音视频格式的简单介绍1、常见的视频格式

视频的组成部分：画面、音频、编码格式

视频编码：H.264、Theora、VP8(google开源)

常见的音频格式

视频编码：ACC、MP3、Vorbis

音视频格式的简单介绍1、常见的视频格式HTML5支持的格式HTML5能在完全脱离插件的情况下播放音视频但是不是所有格式都支持。

HTML5支持的视频格式：Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件

支持的浏览器:F、C、OMEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件

支持的浏览器:S、CWebM=带有VP8视频编码+Vorbis音频编码的WebM格式

支持的浏览器:I、F、C、OHTML5支持的格式HTML5能在完全脱离插件的情况下播放音<Video>的使用

<videosrc="文件地址"controls="controls"></video><videosrc="文件地址"controls="controls">

您的浏览器暂不支持video标签。播放视频</video><videocontrols="controls"width="300"> <sourcesrc="move.ogg"

type="video/ogg"> <sourcesrc="move.mp4"

type="video/mp4">

您的浏览器暂不支持video标签。播放视频</video><Video>的使用<videosrc="文件地址"coVideo的常见属性Video的常见属性Video的API方法Video的API方法Video的API属性Video的API属性常见的音频格式课件常见的音频格式课件Video的常用事件Video

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

温馨提示

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

常见的音频格式课件

文档简介

温馨提示

最新文档

评论

常见的音频格式课件

文档简介

温馨提示

最新文档

评论

相关文档