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

网页设计与制作教程 网页设计与制作教程 （HTML+CSS+JavaScript） （HTML+CSS+JavaScript） 机械工业出版社同名教材 机械工业出版社同名教材 配套电子教案 配套电子教案 第3章 HTML高级应用 第3章 HTML高级应用 3.1 使用结构元素构建网页布局 3.1 使用结构元素构建网页布局 3.2 音频和视频 3.2 音频和视频 3.3 canvas绘图 3.3 canvas绘图 3.4 HTML5 的发展前景 3.4 HTML5 的发展前景 3.1 使用结构元素构建网页布局 3.1 使用结构元素构建网页布局 HTML5中的主要文档结构元素包 HTML5中的主要文档结构元素包 括： 括： section标签：代表文档中的一段或 section标签：代表文档中的一段或 者一节。 者一节。 nav标签：用于构建导航。 nav标签：用于构建导航。 header标签：页面的页眉。 header标签：页面的页眉。 footer标签：页面的页脚。 footer标签：页面的页脚。 article标签：表示文档、页面、应用 article标签：表示文档、页面、应用 程序或网站中一体化的内容。 程序或网站中一体化的内容。 aside标签：代表与页面内容相关、 aside标签：代表与页面内容相关、 有别于主要内容的部分。 有别于主要内容的部分。 hgroup标签：代表段或者节的标 hgroup标签：代表段或者节的标 题。 题。 time标签：表示日期和时间。 time标签：表示日期和时间。 mark标签：文档中需要突出的文 mark标签：文档中需要突出的文 字。 字。 使用结构元素构建网页布局的典型布局 使用结构元素构建网页布局的典型布局 如图3-1所示。 如图3-1所示。 3.1 使用结构元素构建网页布局 3.1 使用结构元素构建网页布局 【演练3-1】使用 article标签定义简介商品的文章，本例文件3- 【演练3-1】使用 article标签定义简介商品的文章，本例文件3- 1.html在浏览器中的显示效果如图3-2所示。 1.html在浏览器中的显示效果如图3-2所示。 【演练3-2】使用嵌套的article标签定义文章及评论，本例文件3- 【演练3-2】使用嵌套的article标签定义文章及评论，本例文件3- 2.html在浏览器中的显示效果如图3-3所示。 2.html在浏览器中的显示效果如图3-3所示。 3.2 音频和视频 3.2 音频和视频 3.2.1 音频和视频格式 3.2.1 音频和视频格式 1．音频格式 1．音频格式 （1）Ogg Vorbis （1）Ogg Vorbis （2）MP3 （2）MP3 （3）WAV （3）WAV 2．视频格式 2．视频格式 （1）Ogg （1）Ogg （2）H.264 （MP4） （2）H.264 （MP4） （3）WebM （3）WebM 3.2 音频和视频 3.2 音频和视频 3.2.2 音频标签audio 3.2.2 音频标签audio 目前，大多数音频是通过插件（比如Flash ）来播放的。然 目前，大多数音频是通过插件（比如Flash ）来播放的。然 而，并非所有浏览器都拥有同样的插件。HTML5规定了一种 而，并非所有浏览器都拥有同样的插件。HTML5规定了一种 通过音频标签audio来包含音频的标准方法，audio标签 通过音频标签audio来包含音频的标准方法，audio标签 能够播放声音文件或者音频流。 能够播放声音文件或者音频流。 audio src=song.og