HTML高级应用.ppt

5.1 使用结构元素构建网页布局 5.2 音频和视频 5.3 表单 5.4 canvas绘图 5.5 HTML5的发展前景 第5章 HTML高级应用 HTML5中的主要文档结构元素包括： section标签：代表文档中的一段或者一节。 nav标签：用于构建导航。 header标签：页面的页眉。 footer标签：页面的页脚。 article标签：表示文档、页面、应用程序或网站中一体化的内容。 aside标签：代表与页面内容相关、有别于主要内容的部分。 hgroup标签：代表段或者节的标题。 time标签：表示日期和时间。 mark标签：文档中需要突出的文字。 使用结构元素构建网页布局的典型布局如图3-1所示。 5.1 使用结构元素构建网页布局 【案例5-1】使用article标签定义博客文章 ，本例文件5-1.html在浏览器中的显示效果如图5-2所示。 【案例5-2】使用嵌套的article标签定义义博客文章及评论，本例文件5-2.html在浏览器中的显示效果如图5-3所示。 5.1 使用结构元素构建网页布局 【案例5-3】使用aside标签定义了网页的侧边栏信息 ，本例文件5-3.html在浏览器中的显示效果如图5-4所示。 【案例5-4】使用mark标签高亮显示文本中的字符，本例文件5-4.html在浏览器中的显示效果如图5-5所示。 5.1 使用结构元素构建网页布局 5.2.1 音频和视频格式 1．音频格式 （1）Ogg Vorbis （2）MP3 （3）WAV 2．视频格式 （1）Ogg （2）H.264（MP4） （3）WebM 5.2 音频和视频 5.2.2 音频标签audio 目前，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过音频标签audio来包含音频的标准方法，audio标签能够播放声音文件或者音频流。 audio src=song.ogg controls=controls autoplay=autoplay 【案例5-5】使用audio标签播放音频。 5.2 音频和视频 5.2.3 视频标签video 对于视频来说，大多数视频也是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过视频标签video来包含视频的标准方法。video标签能够播放视频文件或者视频流。 video src=movie.ogg width=320 height=240 controls=controls autoplay=autoplay 【案例5-6】使用video标签播放视频 5.2 音频和视频 表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作，表单的工作原理如图2-1所示。 5.3 表单 5.3.1 表单标签 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。form标签用于创建供用户输入的HTML表单。表单的基本语法及格式为： form name=表单名 action=URL method=get|post … /form 5.3 表单 5.3.2 input元素 input元素用来定义用户输入数据的输入字段，根据不同的type属性，输入字段可以是文本字段、密码字段、复选框、单选按钮、按钮、隐藏域、电子邮件、日期时间、数值、范围、图像、文件等。input元素的基本语法及格式为： input type=表项类型 name=表项名 value=默认值 size=x maxlength=y / 5.3 表单 5.3.3 选择栏select 选择栏可分为两种：弹出式和字段式。 select标签的格式为： select size=x name=控制操作名 multiple option … … /option option … … /option … /select option标签的格式为： option selected value=可选择的内容 … /option 5.3 表单 5.3.4 多行文本域textarea…/textarea 在意见反馈栏中往往需要浏览者发表意见和建议，且提供的输入区域一般较大，可以输入较多的文字。使用textarea标签可以设置允许成段文字的输入，格式为： textarea name=文本域名 rows=行