常见的音频格式

上传人：金*** IP属地：浙江上传时间：2024-01-19 格式：PPT 页数：93 大小：3.90MB 积分：30 举报 版权申诉

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

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

文档简介

学习要求1、了解HTML4.01和XHTML相关知识2、具备CSS2使用能力3、能够熟练应用javascript。4、有耐心和毅力，勤于动手。HTML5标准介绍一、HTML5初体验二、Canvas在网站设计中的应用三、增强的表单Form四、媒体支持：Video&Audio五、HTML5丰富的交互功能体验HTML5初体验HTML5在WEB前端设计的发展前景HTML5网页标签的改变HTML5编写规范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初体验HTML的BOSS们W3C：

WorldWideWebConsortium 万维网联盟

从HTML1.0到HTML4.01

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

HTML5HTML5是什么HTML5≈HTML5标签+CSS3+Javascript+HTML5APIHTML5初体验浏览器厂商的支持移动互联网的蓬勃发展GOOGLE、苹果、YOUTUBE、微软、腾讯、新浪、网易、百度、优酷…IE9+Firefox3.5+OpearSafariChrome猎豹UC遨游海豚百度HTML5初体验HTML5初体验Trident：又称为MSHTML，IE其他：Maxthon遨游、世界之窗、腾讯TT、Netcapter、Avant等等，但Trident只能应用于Windows平台，且是不开源的Gecko：MozillaFirefoxNetscape能在MicrosoftWindows、Linux和MacOSX等主要操作系统上运行WebKit：Safari、ChromePresto：OperaHTML5初体验语义化标记FORM增强Video&audiocanvascontenteditableDRAG&DROP数据存储标准的改变--不是SGML和XML1、HTML5并不是定义为SGML或者XML的应用程序。2、在HTML5中并不存在有效性检查，取而代之的是用规范来检测规范的一致性3、HTML5的DTD声明中不需要使用DTD文件4、拥有十分松散的编写手法，但不是没有底线标准的改变—松散的语法不允许写的结束符的标签：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编写都是有效的。

HTML标签的改变——HTML5初体验新的文档类型声明(DTD)新增的HTML5标签删除的HTML标签重新定义的HTML标签崭新新的页面布局新的文档类型声明(DTD)文档类型声明HTML5的DTD声明为:<!doctypehtml>

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

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

<nav> 标记定义导航链接

<section> 标记定义一个区域

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

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

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

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

<video>标记定义一个视频

<audio>标记定义音频内容

<source>标记定义媒体资源

<canvas>标记定义图片 <embed>标记定义外部的可交互的内容或插件比如flashHTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验新增的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标签-其他标签注释标签<ruby>标记定义注释或音标<rp>告诉那些不支持Ruby元素的浏览器如何去显示

<rt>标记定义对ruby的注释内容文本其他标签<keygen>标记定义表单里一个生成的键值(加密信息传送)O、F<mark>标记定义有标记的文本(黄色选中状态)<output>标记定义一些输出类型,计算表单结果配合oninput事件<time>标记定义一个日期/时间目前所有主流浏览器都不支持删除的HTML标签纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；产生混淆的元素：acronym，applet，isindex，dir。重新定义的HTML标签HTML元素HTML5中的意义<b>代表内联文本，通常是粗体，没有传递表示重要的意思<i>代表内联文本，通常是斜体，没有传递表示重要的意思<dd>可以同details与figure一同使用，定义包含文本，dialog也可用<dt>可以同details与figure一同使用，汇总细节，dialog也可用<hr>表示主题结束，而不是水平线，虽然显示相同<menu>重新定义用户界面的菜单，配合commond或者menuitem使用<small>表示小字体，例如打印注释或者法律条款<strong>表示重要性而不是强调符号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<header><nav><section><footer><aside><article><header><p><footer>HTML5布局方式崭新的页面布局HTML5初体验简洁的DOCTYPE简单的编码类型不需要闭合废弃多余的标记<!DOCTYPEhtml><html><head><title>HTML5</title></head><body>********************</body></html>HTML5初体验<!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初体验编写规范符合web标准，

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

保证最快的解析速度。HTML5初体验文件规范html,css,js,images文件归档;html文件命名、

css文件命名、Js文件命名HTML5初体验html书写规范文档类型声明及编码

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

lable使用

图片控制

注释特殊符号使用HTML5初体验

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

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

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

Canvas在网站设计中的应用

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

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

Canvas在网站设计中的应用

Canvas在网站设计中的应用案例演示canvas的常见属性属性值描述heightpixels设置canvas的高度。widthpixels设置canvas的宽度。Canvas的API

canvas主要属性和方法方法描述save()保存当前环境的状态restore()返回之前保存过的路径状态和属性createEvent()getContext()返回一个对象，指出访问绘图功能必要的APItoDataURL()返回canvas图像的URLCanvas的API

颜色、样式和阴影属性和方法属性描述fillStyle设置或返回用于填充绘画的颜色、渐变或模式strokeStyle设置或返回用于笔触的颜色、渐变或模式shadowColor设置或返回用于阴影的颜色shadowBlur设置或返回用于阴影的模糊级别shadowOffsetX设置或返回阴影距形状的水平距离shadowOffsetY设置或返回阴影距形状的垂直距离方法描述createLinearGradient()创建线性渐变（用在画布内容上）createPattern()在指定的方向上重复指定的元素createRadialGradient()创建放射状/环形的渐变（用在画布内容上）addColorStop()规定渐变对象中的颜色和停止位置Canvas的API

线条样式属性和方法属性描述lineCap设置或返回线条的结束端点样式lineJoin设置或返回两条线相交时，所创建的拐角类型lineWidth设置或返回当前的线条宽度miterLimit设置或返回最大斜接长度Canvas的API

矩形方法方法描述rect()创建矩形fillRect()绘制"被填充"的矩形strokeRect()绘制矩形（无填充）clearRect()在给定的矩形内清除指定的像素Canvas的API-

路径方法方法描述fill()填充当前绘图（路径）stroke()绘制已定义的路径beginPath()起始一条路径，或重置当前路径moveTo()把路径移动到画布中的指定点，不创建线条closePath()创建从当前点回到起始点的路径lineTo()添加一个新点，创建从该点到最后指定点的线条clip()从原始画布剪切任意形状和尺寸的区域quadraticCurveTo()创建二次贝塞尔曲线bezierCurveTo()创建三次方贝塞尔曲线arc()创建弧/曲线（用于创建圆形或部分圆）arcTo()创建两切线之间的弧/曲线isPointInPath()如果指定的点位于当前路径中，返回布尔值Canvas的API-

转换方法方法描述scale()缩放当前绘图至更大或更小rotate()旋转当前绘图translate()重新映射画布上的(0,0)位置transform()替换绘图的当前转换矩阵setTransform()将当前转换重置为单位矩阵。然后运行transform()Canvas的API-

文本属性和方法属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对齐方式textBaseline设置或返回在绘制文本时使用的当前文本基线方法描述fillText()在画布上绘制"被填充的"文本strokeText()在画布上绘制文本（无填充）measureText()返回包含指定文本宽度的对象Canvas的API-

图像绘制方法方法描述drawImage()向画布上绘制图像、画布或视频chrome不支持Canvas的API-

像素操作方法和属性属性描述width返回ImageData

对象的宽度height返回ImageData对象的高度data返回一个对象，其包含指定的ImageData

对象的图像数据方法描述createImageData()创建新的、空白的ImageData对象getImageData()返回ImageData对象，该对象为画布上指定的矩形复制像素数据putImageData()把图像数据（从指定的ImageData

对象）放回画布上Canvas的API

图像合成属性属性描述globalAlpha设置或返回绘图的当前alpha或透明值globalCompositeOperation设置或返回新图像如何绘制到已有的图像上

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

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

BOMJavaScript应用思想

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

Canvas在网站设计中的应用

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

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

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

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

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

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

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

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

<INPUT>

...

</FORM>

<INPUTvalue=“2012”form=“myform">增强的表单Form自动获取焦点

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

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

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

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

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

常见的音频格式

视频编码：ACC、MP3、Vorbis

HTML5支持的格式HTML5能在完全脱离插件的情况下播放音视频但是不是所有格式都支持。

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

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

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

支持的浏览器:I、F、C、O<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的常见属性属性值描述AutoplayAutoplay视频就绪自动播放controlscontrols向用户显示播放控件WidthPixels(像素)设置播放器宽度HeightPixels(像素)设置播放器高度LoopLoop播放完是否继续播放该视频，循环播放PreloadProload是否等加载完再播放Srcurl视频url地址PosterImgurl加载等待的画面图片AutobufferAutobuffer设置为浏览器缓冲方式，不设置autoply才有效Video的API方法方法属性事件play()currentSrcplaypause()currentTimepauseload()videoWidthprogresscanPlayTypevideoHeighterror全屏退出全屏Webkit(Safari5.1/Chrome15)element.webkitRequestFullScreen();document.webkitCancelFullScreen();Firefox(worksinnightly)element.mozRequestFullScreen();document.mozCancelFullScreen();W3C提议element.requestFullscreen();document.exitFullscreen();Video的API属性属性说明audioTracks返回可用的音轨列表（MultipleTrackList对象）autoplay媒体加载后自动播放buffered返回缓冲部件的时间范围(TimeRanges对象)controller返回当前的媒体控制器（MediaController对象）controls显示播控控件crossOriginCORS设置currentSrc返回当前媒体的URLcurrentTime当前播放的时间，单位秒(快进快退10秒)defaultMuted缺省是否静音defaultPlaybackRate播控的缺省倍速属性说明duration返回媒体的播放总时长，单位秒ended返回当前播放是否结束标志error返回当前播放的错误状态initialTime返回初始播放的位置loop是否循环播放mediaGroup当前音视频所属媒体组

(用来链接多个音视频标签)muted是否静音networkState返回当前网络状态paused是否暂停playbackRate播放的倍速(加速、减速播放)played当前播放部件已经播放的时间范围(TimeRanges对象)preload页面加载时是否同时加载音视频readyState返回当前的准备状态seekable返回当前可跳转部件的时间范围(TimeRanges对象)属性说明seeking返回用户是否做了跳转操作src当前音视频源的URLstartOffsetTime返回当前的时间偏移(Date对象)textTracks返回可用的文本轨迹(TextTrackList对象)videoTracks返回可用的视频轨迹(VideoTrackList对象)volume音量值Video的常用事件事件描述abort当音视频加载被异常终止时产生该事件canplay当浏览器可以开始播放该音视频时产生该事件canplaythrough当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件durationchange当媒体的总时长改变时产生该事件emptied当前播放列表为空时产生该事件ended当前播放列表结束时产生该事件error当加载媒体发生错误时产生该事件loadeddata当加载媒体数据时产生该事件loadedmetadata当收到总时长，分辨率和字轨等metadata时产生该事件loadstart当开始查找媒体数据时产生该事件事件描述pause当媒体暂

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

温馨提示

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

常见的音频格式

文档简介

温馨提示

最新文档

评论

常见的音频格式

文档简介

温馨提示

最新文档

评论

相关文档