网页设计与制作教程HTML+CSS+JavaScript）教学课件ppt作者刘瑞新第3章HTML高级应用课件.pptVIP

网页设计与制作教程（HTML+CSS+JavaScript） 机械工业出版社同名教材 配套电子教案 * * 3.1 使用结构元素构建网页布局 3.2 音频和视频 3.3 canvas绘图 3.4 HTML5的发展前景 第3章 HTML高级应用 HTML5中的主要文档结构元素包括： section标签：代表文档中的一段或者一节。 nav标签：用于构建导航。 header标签：页面的页眉。 footer标签：页面的页脚。 article标签：表示文档、页面、应用程序或网站中一体化的内容。 aside标签：代表与页面内容相关、有别于主要内容的部分。 hgroup标签：代表段或者节的标题。 time标签：表示日期和时间。 mark标签：文档中需要突出的文字。 使用结构元素构建网页布局的典型布局如图3-1所示。 3.1 使用结构元素构建网页布局 【演练3-1】使用article标签定义简介商品的文章，本例文件3-1.html在浏览器中的显示效果如图3-2所示。 【演练3-2】使用嵌套的article标签定义文章及评论，本例文件3-2.html在浏览器中的显示效果如图3-3所示。 3.1 使用结构元素构建网页布局 3.2.1 音频和视频格式 1．音频格式 （1）Ogg Vorbis （2）MP3 （3）WAV 2．视频格式 （1）Ogg （2）H.264（MP4） （3）WebM 3.2 音频和视频 3.2.2 音频标签audio 目前，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过音频标签audio来包含音频的标准方法，audio标签能够播放声音文件或者音频流。 audio src=song.ogg controls=controls autoplay=autoplay 【演练3-5】使用audio标签播放音频。 3.2 音频和视频 3.2.3 视频标签video 对于视频来说，大多数视频也是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过视频标签video来包含视频的标准方法。video标签能够播放视频文件或者视频流。 video src=movie.ogg width=320 height=240 controls=controls autoplay=autoplay 【演练3-6】使用video标签播放视频 3.2 音频和视频 3.3.1 创建canvas元素 canvas元素的主要属性是画布宽度属性width和高度属性height，单位是像素。向页面中添加canvas元素的语法格式为： canvas id=画布标识 width=画布宽度 height=画布高度 … /canvas canvas看起来很像img，唯一不同就是它不含src和alt属性。如果不指定width和height属性值，默认的画布大小是宽300像素，高150像素。 3.3 canvas绘图 3.3.2 构建绘图环境 大多数canvas绘图API都没有定义在canvas元素本身上，而是定义在通过画布的getContext()方法获得的一个“绘图环境”对象上。 getContext()方法返回一个用于在画布上绘图的环境，其语法如下： canvas.getContext(contextID) 参数contextID指定了用户想要在画布上绘制的类型。“2d”，即二维绘图，这个方法返回一个上下文对象CanvasRenderingContext2D，该对象导出一个二维绘图API。 3.3 canvas绘图 3.3.3 通过JavaScript绘制图形 canvas元素只是图形容器，其本身是没有绘图能力的，所有的绘制工作必须在JavaScript内部完成。 在画布上绘图的核心是上下文对象CanvasRenderingContext2D，用户可以在JavaScript代码中使用getContext（）方法渲染上下文进而在画布上显示形状和文本。 JavaScript使用getElementById方法通过canvas的id定位canvas元素，例如以下代码： var myCanvas = document.getElementById(myCanvas); 3.3 canvas绘图 1．绘制矩形 （1）绘制填充的矩形 fillRect()方法用来绘制填充的矩形，语法格式为： fillRect(x, y, weight, height) 其中的参数含义如下： x, y：矩形左上角的坐标。 weight, height：矩形的宽度和高度。 说