《网页设计与 Web 前端开发》教案 第7周 HTML5+CSS3移动网站布局（5.1-5.2节）

《网页设计与Web前端开发》电子教案（第7周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第5章HTML5+CSS3移动网站布局（5.1-5.2节）二、教学目标（一）知识目标了解HTML5的概念及核心特性（语义化、本地存储、多媒体支持等）。掌握HTML5新增结构性标签（<header>、<nav>、<section>、<article>、<aside>、<footer>）的语义及用法。掌握HTML5语义化标签（<hgroup>、<figure>、<time>、<datalist>、<details>、<meter>、<progress>等）的应用场景及语法。熟悉CSS3新增伪类（以first/last/only为前缀的伪类、以nth为前缀的伪类、empty、not()、enabled/disabled/checked）的语法及使用。掌握CSS3伪元素::selection的用法，实现文本选中效果自定义。（二）思政目标通过语义化标签的使用，培养规范编码意识和对网页结构的逻辑梳理能力，理解“语义化即可读性”的开发原则。结合伪类实现动态样式控制，体会“细节决定用户体验”的前端开发理念，培养严谨细致的工匠精神。在案例实践中，通过协作完成页面布局，培养团队协作意识和问题解决能力。三、教学重难点（一）教学重点HTML5结构性标签（<header>、<nav>、<section>、<article>）的语义区分及嵌套规则。常用语义化标签（<time>、<datalist>、<details>、<progress>）的实际应用。CSS3伪类（:nth-child()、:nth-of-type()、:checked）的用法及场景。（二）教学难点<section>与<article>的语义边界（前者强调“区块划分”，后者强调“独立内容”）。:nth-child()与:nth-of-type()的区别（前者基于父元素所有子元素排序，后者基于同类型子元素排序）。伪类与伪元素的语法差异（单冒号:用于伪类，双冒号::用于伪元素）。四、教学方法讲授法：系统讲解HTML5标签语义、CSS3伪类语法及使用规则。案例演示法：结合“新闻页面”“产品详情页”案例，实时演示标签和伪类的效果。对比分析法：对比传统<div>布局与HTML5语义化布局的代码可读性，对比不同伪类的适用场景。任务驱动法：实践课通过“校园公告页面”制作任务，综合应用所学标签和伪类。五、教学过程（一）第一学时：HTML5新增标签（40分钟）导入（5分钟）展示两段代码：提问：“哪种代码更易理解？为什么？”引出HTML5的核心优势——语义化。HTML5概述与结构性标签（15分钟）HTML5核心特性：简述语义特性、本地存储、设备兼容等8大特性（参考教材5.1.1节）。结构性标签详解：<header>：页面或区块的头部（如网站标题、文章标题），可嵌套使用。<nav>：导航链接区域（主导航、侧边栏导航），仅包含主要链接。<section>：文档中的独立区块（章节、栏目），需包含标题。<article>：独立完整的内容（文章、评论），可嵌套<section>。<aside>：辅助内容（侧边栏、广告），与主内容相关。<footer>：页脚（版权、联系方式），可用于区块级脚注。案例演示：展示教材例5-1的article嵌套section结构，说明标签语义优先级。HTML5语义化标签（15分钟）讲解高频标签及用法：<time>：定义时间/日期，支持datetime属性（机器可读）。<datalist>：与<input>配合提供输入建议。<details>+<summary>：可折叠内容（如产品详情）。<progress>：进度条（如文件下载进度）。<meter>：度量衡（如磁盘使用率）。对比：<mark>（高亮文本）与CSS的background区别（语义化vs纯样式）。小结（5分钟）回顾结构性标签的嵌套原则：header/footer可用于页面或article/section内部。布置思考：“如何用HTML5标签规划一个博客首页的结构？”（二）第二学时：CSS3新增伪类和伪元素（40分钟）复习导入（5分钟）抽查学生对<article>与<section>的理解：“新闻列表中的单条新闻用哪个标签更合适？”引出问题：“如何通过CSS选中列表中的第一个新闻项？”导入伪类。CSS3伪类详解（25分钟）第一类：first/last/only前缀伪类：:first-of-type：选中父元素中同类型的首个子元素。对比first-child（父元素的首个子元素，不限类型）与first-of-type（限类型）。第二类：nth前缀伪类：:nth-child(n)：基于父元素所有子元素的序号（n为数字、odd/even或公式）。:nth-of-type(2n)：选中同类型子元素中的偶数项。第三类：其他伪类：:empty：选中无内容的元素（如空段落）。:not(selector)：排除指定选择器的元素（如p:not(.intro)）。:checked：选中被勾选的单选/复选框，常用于表单交互。伪元素::selection：自定义文本选中样式。案例分析（7分钟）展示教材“Tab选项卡”案例（5.2.4节），说明如何用:checked伪类实现无JS的选项卡切换。小结（3分钟）强调伪类的核心作用：动态选择元素，减少冗余类名。区分伪类（:）与伪元素（::）的语法。（三）实践学时：综合应用（40分钟）任务布置（5分钟）目标：制作“校园公告页面”，要求：用HTML5结构性标签搭建框架（header+nav+section+footer）。使用<time>标注公告发布时间，<details>展示公告详情。用CSS3伪类实现：公告列表中首个项目加粗；偶数行背景色为浅灰；选中的文本背景为浅蓝色。学生实践（30分钟）教师巡回指导，重点解决：标签嵌套错误（如<nav>