HTML5+CSS3网页设计实战 教案 4.4 结构类标签-article、section、footer标签

HTML5使用标签创建网页结构，设置CSS属性完成网页布局。120HTML5基础语法与文档结构，语义化标签及多媒体元素的应用，理解盒子模型和常见布局流技术，综合运用CSS知识，提升网页布局能力和动态表现效果。24.4结构类标签该班人数M人，年龄约N岁，中技阶段，学习本课程之前已有一定的计算机基础认知，均具备数年的网龄，对网页相关概念及技术有一些简单的了解。知识目标：（1）掌握article、section、footer标签的写法。（2）理解article、section的使用场景。能力目标：（1）具备合理使用article、section及互相嵌套的设计能力。素养目标：（1）了解本章成语的出处，理解成语含义与知识点理解的结合。article、section、footer标签article、section、footer标签的写法。通过案例讲解，让学生在不同场景中体会选择适合的标签。实际应用article、section标签完成文章详情页。通过具体案例练习，让学生掌握对应的标签用法。运用实例演示法，通过实际案例或操作演示，让学生直观理解抽象概念。实施项目驱动教学，鼓励学生独立或分组完成任务，培养团队协作与问题解决能力。利用在线实训平台，提供个性化学习路径，满足不同水平学生的学习需求。通过提问或讲授的形式回顾之前的知识点，引入本次课的相关知识点的背景知识，然后讲授具体的知识要点及任务实现的注意事项，通过任务实施环节让学生各自或分组进行练习。教师随堂抽查部分作品，根据课堂表现情况予以适当的补充，根据学生接纳情况选择性讲解任务扩展内容，最后以学生自我评价或小组评价完成任务的检测，教师最终进行点评及总结。Windows操作系统、Hbuilder软件、谷歌、火狐浏览器。随堂考查、自我评价或小组评价是否正确、无误达到任务要求复习<nav>标签是否只能够出现在网页的主导航上？在页面中经常出现在什么位置上？回答问题教师提问，演示。思维导图法或问题导向法帮助学生整理知识结构。引入对于文章详情页来说，结构性标签不仅仅体现在header、nav等等，其中大量的版面，大量的文字段落，都需要采用针对图文混排的结构性标签section，当然section标签不仅仅可以定义图文混排的场景，在商业网页中经常拿该标签用于定义大的版面。博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。section元素的作用，是对页面上的内容分块处理，例如对文章分段等，相邻的section元素的内容，应当是相关的，而不是像article那样独立。听讲讲授，演示。任务驱动法，让学生了解任务目标。思考教师引导、提示知识讲授4.4.3article标签<article>标签用于标记独立、完整的内容块，这通常表现为一个文章或者文章的一部分、论坛帖子、杂志或报纸文章、博客条目、用户评论等。该标签的使用在结构化语义上非常有帮助。例如，在博客中，每个帖子可以被标记为一个<article>元素，其中包括标题、作者、发布日期和文章内容。这种做法增强了页面的语义，便于搜索引擎和辅助技术更好地理解内容的结构，并按照其独立性和完整性对其进行索引。用法示例： <article> <header><h1>帖子标题</h1><p>发布于1月1日</p></header><p>这里是文章的第一个段落。</p><footer><p>作者A</p></footer></article>4.4.4section标签section元素是HTML5中用于定义文档结构中独立部分的元素。它表示文档中的一个主题或内容区域，并可以包含标题、段落、图像、列表和其他内容元素。通常<section>标签表示为页面中的版块、文章的章节。可以这么理解，一份报纸多个版面（section），每个版面可以有多篇文章（article），每篇文章里面又包含多个章节（section）。用法示例： <sectionid="main"><sectionid="article"><!--文章内容--></section><sectionid="sidebar"><!--侧边栏内容--></section></section>4.4.5footer标签<footer>标签定义文档或小节的页脚。<footer>元素通常包含有作者信息、版权信息、联系信息、站点地图、返回顶部链接、相关页面。您可以在一个文档中包含多个<footer>元素，但对于本书练习中，通常只需要用一个footer容器即可。 用法示例：<footer> <p>作者：Rose</p> <p><ahref="mailto:rose@">rose@</a></p></footer>听讲演示任务达到的效果，讲解代码演示法让学生明确分阶段或最终的任务效果。讲授法让学生掌握完成本次任务需要了解的核心知识点。实验法可以在讲授过程中对个别难以理解的知识点有直观的剖析。任务实施【练习1】一篇文章的html结构输入以下代码：<article><header><h1>计算机各类语言介绍</h1></header><p>本文列举了部分计算机语言的一些介绍</p><section><h2>JavaScript</h2><p>js是一门……</p></section><section><h2>HTML</h2><p>HTML是一门……</p></section><footer>版权所有</footer></article>【练习2】为以上容器设置对应的样式，要求预览后布局整齐、效果美观。上机操作巡堂指导，提醒易出错的事项实践法旨在培养学生项目开发能力。任务扩展任务检测被考评人（组）：考评人：日期：评分项目过程表现分值得分项目搭建站点结构正确，文件命名合理。10容器结构结构合理，标签正确。30样式属性值正确，选择器命名合理。40整体预览效果布局整齐、效果美观20总分说明：评分项目为任务实施中要求学生掌握的技能点。互相点评作业抽样点评分组讨论法加强团队协作能力。总结通过本课，要求我们掌握：（1）掌握article、section、footer标签的写法。（2）理解article、section的使用场景。（3）具备合理使用article、section及互相嵌套的设计能力