HTML5教案第4讲认识HTML5

web前端开发认识HTML5（教案）教学内容及教学过程说明步骤一问题引入如图3-1（a）所示，为网易网的主页，在IE浏览器中，选择【查看源】菜单命令，即可打开网页源代码，如图3-1（b）所示，不难发现网页源代码是用HTML语言编写的。步骤二讲授3.1认识HTML5HTML使用一套标记（标签）来描述网页中的文字、图片、声音、动画、视频、表格、链接等，是制作网页的基础语言。广义而论，HTML5实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它引进新的语法特征以支持这一点，如video、audio和canvas标记。3.1.1HTML5新增功能3.1.2HTML5的语法特点（1）HTML5编写简单。（2）HTML5标记数目有限。（3）HTML5语法较弱。3.2HTML5与HTML4的区别1.HTML5语法的简化2.HTML5新增了<canvas>标签，可以绘制图形3.HTML5统一网页内嵌多媒体语法4.HTML5新增了语义标签5.HTML5废除了一些旧标签6.HTML5的全新的表单设计3.3认识HTML5新增的元素3.3.1文档结构元素1. 页眉元素<header>任务实例3-3-1：页眉元素<header>案例2. 导航元素<nav>导航元素<nav>的代码结构如下。<nav><ahref="……">Home</a><ahref="……">Previous</a><ahref="……">Next</a></nav>3.节元素<section>节元素<section>用于定义文档或应用程序中的一个区段，如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，显示文档结构。<section>元素的代码结构如下。<section><h1>……</h1><p>……</p></section>4.文章元素<article>文章元素<article>用于定义独立的文章区域，根据文章内容的长短可以包含一个或多个段落元素<p>。任务实例3-3-4：文章元素<article>案例5.侧栏元素<aside><aside>元素用来表示当前页面或文章的附属信息部分。任务实例3-3-5：侧栏元素<aside>案例6.页脚元素<footer>页脚元素<footer>用来定义整个网页文档或节的页脚，通常包含文档的作者、版权、联系方式等信息。使用footer元素设置文档页脚的代码如下。<footer>……</footer>3.3.2文本格式化元素1.记号元素<mark>记号元素<mark>用于突出显示指定区域的文本内容，通常在指定的文本前后分别加上<mark>和</mark>标签标记，可以为文字添加黄色底纹。记号元素mark的代码结构如下。<p>……<mark>……</mark>……</p>任务实例3-3-7：记号元素<mark>案例2.进度元素<progress>进度元素<progress>用于显示任务的进度状态，可配合JavaScript使用以显示任务进度的动态效果。例如，表示任务进度已经进行了50%的代码如下。<progressvalue="50"max="100"></progress>任务实例3-3-8：进度元素<progress>案例3.度量元素<meter>度量元素<meter>用于显示标量测量结果，通常用于显示磁盘使用量、投票数据统计等。任务实例3-3-9：度量元素<meter>案例步骤三课堂小结1．认识HTML52．HTML5与HTML4的区别3．认识HTML5新增的元素文档结构元素文本格式化元素步骤四作业1.HTML5新增的文档结构元素有哪些？通过平时上网的案例引入网页的源代码HTML5HTML5的设计目的是在移动设备上支持多媒体。<canvas>标签来代替flash，使用<canvas>标签就可以产生交互页眉元素<header>用于定义网页文档或节的页眉举例讲解重点导航元素<nav>用于定义网页文档的导航菜单，可通过超级链接跳转到其他页面举例、对比、启发教授它可以是一篇博客或者报纸中的文章、一篇论坛帖子、一段用户评论举例包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条举例m