模块2任务2.5和2.6：使用超链接完成页面跳转和使用语义化标签搭建课程页面框架（教案）-《网页设计与制作》（电子工业出版社）上好课

《任务2.5、任务2.6：使用超链接完成页面跳转和使用语义化标签搭建课程页面框架》教案 课 题 使用超链接完成页面跳转、使用语义化标签搭建课程页面框架 课 型 新授课 课 时 2课时 授课班级 授课时间 授课教师 教材分析 本节课选自《网页设计与制作》模块2“HTML网页元素”任务2.5与任务2.6，是模块2的收口内容。教材在任务2.1搭建HTML文档基本结构、任务2.2运用页面格式化标签组织课程概况、任务2.3使用图像展示课程特色、任务2.4使用三类列表组织课程大纲的基础上，先讲解超链接标签<a>的用法——通过href属性指定目标页面路径、通过target属性控制页面打开方式，并介绍锚点链接解决长页面定位问题，以“制作导航栏页面跳转”为任务载体；接着从<div>块级容器与<span>内联容器讲起，说明HTML5为何要新增<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>七个专用文档结构标签取代“<div>+id”的做法，并给出语义化标签的三条优势——代码可读性强、有利于搜索引擎优化、提升无障碍访问能力，以“搭建课程页面框架”为任务载体。 两个任务在模块中承上启下：任务2.5让原本彼此孤立、只能一屏到底往下翻的静态页面“连起来”，实现页面间自由跳转；任务2.6让连起来的多个页面“站得整齐”，拥有页头、导航、正文、侧栏、页脚的清晰骨架。二者共同为模块3“CSS3基础知识”提供结构载体——任务3.1建立网站样式基础时，CSS选择器正是依靠这些语义化标签与id、class属性值才能准确定位到要美化的区域，因此本节课所学标签是后续样式设计的操作对象。 教材内容按“语法格式—属性含义—案例演示—任务实施”层层递进，核心矛盾有两点：一是href属性中相对路径的书写，目标页面必须与导航页位于同一文件夹、文件名要与href一字不差，否则单击即提示找不到页面；二是语义化标签的选用与嵌套关系，尤其是<section>与<article>的上下级、<main>只包裹核心主题内容的约定。其独特的教育价值在于：把“按区域功能选择标签”的Web标准思想，与代码可读性、搜索引擎优化、无障碍访问等真实职业场景联系起来，是培养学生规范编码习惯与工匠精神的关键一环。 学情分析 授课对象为中职计算机应用专业学生。学生已掌握HTML文档基本结构，能使用标题标签<h1>~<h6>、段落标签<p>、水平线标签<hr/>、图像标签<img/>及<font>、<strong>等标签制作简单页面，并在上一课时刚学会用<ol>、<ul>、<dl>三类列表组织“课程大纲”，会在VS Code中新建文件并在Edge浏览器中查看效果，具备继续学习的基础。 但学生普遍存在四方面问题：一是对“相对路径”没有概念，写href时常写成绝对路径，或文件名大小写、后缀与实际文件不一致，导致单击后报“找不到页面”，且教材要求新建的5个目标页面文件容易漏建；二是<a>标签嵌套在<li>内部时闭合顺序易错，常出现“<a>写在<li>外面”“忘记写</a>”的情况；三是习惯用<div>一把梭完成所有分块，对7个语义化标签记忆负担大，容易混淆<section>与<article>、<aside>与<footer>的边界；四是学生喜欢“点了就能跳”这类立竿见影的效果，对“语义化有什么用”这类收益不可见的内容容易走神。 针对以上学情，本节课采取两条对策：一是把最常见的href路径错误由教师当堂“故意制造一次”并现场排查，把调试过程变成可观察的示范；二是用教材图2-19的效果图做“标签—区域”一一对应，并用<div>+id与语义化标签两份代码并排对比，让学生自己说出哪一种更好读，从而把语义化的价值从教师讲授转化为学生体验。 学习目标 【知识目标】 ①理解超链接标签<a>的作用，能说明元素名a是英文单词anchor的首字母简写、超链接又称锚链接，并能说出未访问、鼠标指针悬停、已访问三种默认状态。 ②掌握<a href=" " target="目标页面打开方式">文本或图像</a >的语法格式，能说明href用于指定链接目标的URL地址、target用于指定页面打开方式，并复述教材表2-8中_self、_blank、_top、_parent四个取值的含义。 ③掌握锚点链接<a href="#指定区域名" name="区域名">文本或图像</a >的写法，能说明先在目标位置用id属性做标记、再用href="#标记名"设置跳转按钮的两步做法。 ④理解<div>块级元素与<span>内联元素的区别，能说出HTML5新增的<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>七个标签各自对应的功能分区。 ⑤能复述语义化标签的三条优势：代码可读性强、有利于搜索引擎优化、提升无障碍访问能力。 【能力目标】 ①能使用无序列表<ul>配合超链接<a>制作横向排列的导航栏，并正确书写5个目标页面的相对路径。 ②能根据跳转场景正确选用target="_self"或target="_blank"，能在长页面中使用锚点链接实现指定位置的快速跳转。 ③能使用<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>搭建课程页面整体框架，做到标签成对闭合、嵌套层级正确。 ④能独立完成教材“试一试2-5.html”与“试一试2-6.html”的制作，并在浏览器中验证跳转效果与布局效果。 【素养目标】 ①信息意识：能从“网站导航就是一张地图”的角度判断信息组织的合理性，根据访问者的查找需要选择恰当的跳转方式。 ②计算思维：能把“页面跳转”“页面分区”抽象为“链接—目标”“容器—内容”的结构模型，按规范组织标签层级。 ③数字化学习与创新：能使用VS Code与Edge浏览器自主调试代码，遇到链接失效时能自主定位路径错误并修正。 ④信息社会责任：在引用外部链接与他人图像素材时规范标注来源，树立知识产权保护意识；体会语义化标签对无障碍访问的价值，养成关怀残障用户的技术伦理意识。 学习重难点 【学习重点】 <a>标签的语法格式与href、target两个属性的用法，target四个取值：教材表2-8的区分； 无序列表<ul>与超链接<a>配合制作横向导航栏的写法； <header>、<nav>、<main>、<article>、<section>、<aside>、<footer>七个语义化标签的功能分区与嵌套关系。 【学习难点】 href属性中相对路径的书写——目标页面必须与导航页位于同一文件夹，文件名要与href中写的完全一致，否则单击后提示找不到页面；学生缺乏文件路径的概念，且5个目标页面需逐一新建，容易漏建或写错。 <section>与<article>的上下级关系判断<section>定义独立专题区域、里面包含一篇或多篇文章；<article>定义独立文章区域、里面包含一个或多个<p>，以及<main>只包裹核心主题内容、不含导航栏与页脚的约定。 从“用<div>也能做出来”到“为什么要用语义化标签”的认识转变——语义化的收益在页面上肉眼不可见，学生难以体会其价值。 教学方法 讲授法、示范操作演示法、任务驱动法、小组合作探究法、对比分析法 课前准备 阅读教材模块2任务2.5、任务2.6的内容，复习任务2.4中<ul>与<li>的用法；启动VS Code与Edge浏览器，准备好“website”项目文件夹，并确认“素材任务2-5.html”“素材任务2-6.html”已复制到该文件夹。 教学媒体 多媒体教学设备、极域电子教室、VS Code、Edge浏览器 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1. 展示对比：用极域电子教室把两个页面发到学生机——A页面是上一课时任务2.4完成的“课程大纲”页面，内容完整但只能一屏到底往下翻；B页面是教材图2-15的效果，顶部有一条导航栏，单击“课程概况”“入门攻略”能跳到对应页面，每个目标页面底部还有“返回首页”。引导学生观察并比较两页的差别。 2. 提出任务：请学生先在A页面中“从课程大纲直接跳到课程概况的介绍”，体验做不到的窘境；再在B页面中单击导航项完成同样的操作，感受跳转带来的便利。 3. 归纳提炼：根据学生的回答，点明超链接的作用——把一个个孤立的页面连成一张可以互相到达的网，就像旅客出门旅行时手里的一张地图；同时追问“如果一个页面里还有课程大纲、学习重点、常见问题三段内容，怎样在同一页里快速到达”，引出锚点链接。 4. 出示课题与目标：板书课题“任务2.5 使用超链接完成页面跳转、任务2.6 使用语义化标签搭建课程页面框架”，展示本节课的学习目标，要求学生带着“页面靠什么连起来、页面又该分成哪几块”这两个问题进入新知学习。 1. 打开教师下发的两个页面，分别在A、B两页中尝试跳转操作，说出两页在操作体验上的差异。 2. 完成两次查找任务，用自己的话描述“超链接像生活中的什么”。 3. 倾听教师归纳，初步建立“页面跳转”与“锚点定位”两个概念的印象。 4. 明确本节课的学习任务与目标，带着两个问题进入新知学习。 1. 用学生上一课时自己做出来的页面作对比素材，把抽象的“页面跳转”变成“能不能跳过去”的真实体验，唤起已有经验，降低理解门槛。 2. 让学生在“跳不过去—一下就到”的对比中自己发现超链接的价值，自然生成学习需求，为<a>标签的学习做好铺垫。 活动二： 超链接——给网页装上“跳转按钮” 1.新知讲授 （1）讲解超链接标签<a>的作用：用于在网页中标记文本或图像从而形成超链接，访问者单击后跳转到另一个指定的页面，实现浏览空间的跨越；说明元素名a是英文单词anchor的首字母简写，因此超链接又称锚链接。 （2）讲解超链接的两种形态与三种路径分类：按形态分为文本超链接与图像超链接；按路径分为内部链接、锚点链接、外部链接。 （3）讲解默认显示状态：未被访问的链接文本显示为带下画线的蓝色字体，鼠标指针悬停在其上面时变成手形，被单击访问后的链接文本变成带下画线的紫色字体。 （4）讲解基本语法格式：<a href=" " target="目标页面打开方式">文本或图像</a >，强调<a>必须成对书写、正确闭合，标签中间包裹的是访问者“看得见、点得着”的文字或图片。 （5）讲解href属性：用于指定链接目标的URL地址。 （6）讲解target属性：用于指定链接目标的页面打开方式，并用表格罗列教材表2-8中4个取值的含义——_self自身、_blank新窗口、_top顶层框架、_parent父框架，说明本节课重点掌握_self与_blank两个取值。 2.例题分析 题目：教材example10.html。 带领学生逐行读代码，对比<a href="https://www.***.com/" target="_self">淘宝</a >与target="_blank"的“百度”在浏览器中的打开差异：教材图2-16，强调单击_self的链接会在原窗口覆盖当前页，单击_blank的链接会新开一个标签页。 3.课堂问答 提问：“导航项‘课程概况’希望访问者看完后还能回到首页，该用_self还是_blank？如果链接到校外的MDN文档呢？”要求学生自主思考并回答，给予肯定评价并鼓励更多同学参与课堂互动。 4.背诵记忆 罗列<a>的语法格式与target的4个取值含义，要求学生在规定时间内完成识记，并通过抽查问答检验效果，要求识记不牢固的学生利用课后时间继续巩固。 5.课堂练习 教师展示单项选择题：要使单击链接后在新窗口中打开目标页面，target属性应取下列哪一个值，要求学生思考并回答，针对典型错误当堂讲评。 1. 跟随教师讲授，在教材上标记<a>的语法格式，记录target的4个取值含义与超链接的三种默认显示状态。 2. 逐行分析example10.html，说出“淘宝”与“百度”两个链接在打开方式上的不同，比较_self与_blank的区别。 3. 参与课堂问答，为“课程概况”“MDN文档”两个链接分别选择合适的target取值并说明理由。 4. 在规定时间内完成知识点识记，接受教师抽查，认真作答课堂练习题。 1. 按“名称由来—显示状态—语法格式—属性含义”逐层展开，让学生先建立完整印象再动手写代码，避免只会照抄写法而不知含义。 2. 用“站内用_self、站外用_blank”的选择任务，把target从“背4个值”变成“按场景选值”，突破机械记忆的难点，落实信息意识素养。 3. 通过背诵与练习当堂检测学习效果，为活动四的导航栏制作扫清语法障碍。 活动三： 锚点链接——长页面的“直达电梯” 1.新知讲授 （1）提出问题：网页内容较多时，浏览需要不断拖动滚动条，不但效率较低而且操作不方便，引出HTML提供的一种特殊链接——锚点链接，它能让用户直接跳转到指定的位置。 （2）讲解语法格式：<a href="#指定区域名" name="区域名">文本或图像</a >，说明href值最前面的“#”表示“当前页面内的某个位置”。 （3）用“电梯楼层按钮”类比讲解锚点的工作过程：先在目标位置用id属性做一个“楼层标记”，再在导航处用href="#标记名"设置一个“楼层按钮”，单击按钮即可直达对应楼层。 2.例题分析 题目：教材example11.html。 逐行分析<ul>中5个<li>内的<a href="#one">李四光</a >至<a href="#five">屠呦呦</a >，与下方<h3 id="one">李四光</h3>等标记的对应关系，运行展示教材图2-17的跳转效果，引导学生观察单击“袁隆平”后页面直接定位到对应标题。 3.对比归纳 用表格对比普通超链接与锚点链接，师生共同总结选用口诀：“跨页面用href='文件名.html'，同一页内用href='#区域名'”。 4.背诵记忆 罗列锚点链接的语法格式与“先做标记、再设按钮”的两步写法，要求学生在规定时间内完成识记，并开展抽查问答检验效果。 5.课堂问答 提问：“要在课程学习页里实现‘课程大纲’‘学习重点’‘常见问题’三段内容之间的快速跳转，需要写几个id标记？id的值能不能重复？”要求学生作答并互相补充。 1. 跟随教师讲授，理解锚点链接解决的是“同一页面内快速定位”的问题，并在教材上标记其语法格式。 2. 逐行分析example11.html，说出5组href="#one"~"#five"与5个id标记的一一对应关系。 3. 与教师共同完成两种超链接的对比表格，熟记选用口诀。 4. 完成知识点识记，参与课堂问答，尝试说出三段内容的id该如何命名。 1. 用“电梯楼层按钮”的生活类比，把“#标记名”与“id标记”这一对容易混淆的概念讲清楚，突破锚点链接的理解难点。 2. 通过两种超链接的横向对比与口诀提炼，帮助学生形成可迁移的选用依据，避免后续写href时张冠李戴。 活动四： 任务实施——制作导航栏页面跳转 1.任务布置 出示任务：对照教材图2-15，用无序列表<ul>与超链接<a>制作课程网站导航栏，使单击“课程概况”“入门攻略”“课程学习”“教学资源”“综合测试”能跳转到对应页面，并在每个目标页面底部设置“返回首页”。 2.示范演示 步骤1 准备工作：打开VS Code，从相应素材文件夹中打开“素材任务2-5.html”，并在同一文件夹下依次创建kecheng_gaikuang.html、rumen_gonglue.html、kecheng_xuexi.html、jiaoxue_ziyuan.html、zonghe_ceshi.html 5个目标页面。特别强调：5个文件必须与导航页放在同一个文件夹里，文件名要与href中写的一字不差，否则单击会提示找不到页面。 步骤2 编写代码：先在<head>中用<style>让导航项横向排列并优化外观（ul { list-style: none; padding: 0; }、li { display: inline-block; margin: 0 15px; }、a { text-decoration: none; color: #3366CC; font-size: 18px; }、a:hover { color: #FF0000; }）；再写<h1 align="center">网页设计与制作课程导航</h1>与<hr width="90%" color="#3366CC" size="2"/>分隔线；最后在<ul align="center">中依次添加6个导航项。演示“先写<li>、再写<a>、最后填href与target”的书写顺序，强调<a>必须完整嵌套在<li>内部。 步骤3 编写目标页面：以kecheng_gaikuang.html为例：教材图2-18，在<h1 align="center">课程概况</h1>、<hr width="80%" color="#FF0000" size="1"/>之后添加正文段落，并在页尾添加<p align="center"><a href="index.html" target="_self">返回首页</a></p>，说明index.html是导航首页的文件名，其余4个目标页面照此修改标题与正文即可。 步骤4 查看效果：保存所有文件后，在Edge浏览器中打开导航页，逐个单击导航项验证是否在新窗口打开对应页面，再单击“返回首页”验证是否回到导航页；随后教师故意把其中一个href的文件名改错一位，让学生观察“找不到页面”的报错，示范“先在文件夹里核对文件名、再检查href”的排查方法。 3.学生实操 题目要求：完成教材“试一试2-5.html”。 1. 在kecheng_xuexi.html目标页面中添加锚点，实现“课程大纲”“学习重点”“常见问题”之间的快速跳转。 2. 添加外部链接：在导航栏中增加“MDN文档”选项，链接到https://developer.mozilla.org。 3. 为超链接添加图像：将某个导航项修改为图像超链接。 4. 设置空链接：添加“更多功能”选项，使用href="#"作为占位链接。 5. 修改target属性，测试_self和_blank在打开方式上的差异。 教师巡视指导，针对“href路径写错导致找不到页面”“<a>写在<li>外面”“忘记写</a>闭合标签”等共性问题集中讲评。 4.展示评价 投屏展示2~3份学生作品，从“导航项是否横向排列整齐”“5个链接是否全部跳转成功”“target取值是否符合使用场景”三个方面组织师生共同点评，肯定优点并指出改进方向。 1. 明确任务要求，跟随教师示范在VS Code中打开素材并新建5个目标页面，逐个核对文件名与href是否一致。 2. 观察教师的书写顺序，重点记录<li>与<a>的嵌套关系、相对路径的写法，以及目标页面“返回首页”的写法。 3. 独立或以小组合作的形式完成导航页与5个目标页面的编写，保存后在Edge中逐个单击验证跳转效果；遇到“找不到页面”时，按教师示范的方法自主排查路径错误。 4. 完成“试一试2-5.html”的5项练习，参与作品展示与互评，记录同学提出的改进意见。 1. 任务载体直接取自教材【任务实施】的四个步骤，保证教学内容与教材完全一致，学生可以边看教材边跟做，降低操作难度。 2. 教师故意“制造一次路径错误”并现场排查，把最常见的href相对路径问题变成一次可观察的调试示范，直接突破本课难点，培养数字化学习与创新能力。 3. 用<ul>承载导航项，既巩固了任务2.4的列表知识，又让学生体会“列表+超链接”组合的真实用途，实现前后知识的衔接。 活动五： 容器标签与HTML5语义化标签 1.新知讲授 （1）展示问题：投屏一个只用<h1>、<p>、<hr/>从上往下默认排版的页面，提问“内容一多，怎样让版面变得丰富、美观？”，引出对网页进行布局、将模块有序排列的必要性。 （2）讲解<div>标签：可以将页面分隔成不同的独立部分，通常用于定义文档中的区域或节，是一个块级元素，浏览器会在<div>和</div>所标记的区域前后自动放置一个换行符，每个标签都可以有独立的id属性值。 （3）讲解<span>标签：通常作为文本的容器，没有特定的含义和样式，只有与CSS同时使用时才可以为指定文本设置样式；它是一个内联元素，浏览器不会在其前后自动换行，因此默认在同一行中显示。 （4）讲解HTML5为什么要新增结构标签：此前通常直接用<div>进行整体布局，再配上id="header"、id="nav"等自定义属性值来区分，但id是自定义的，常常导致含义不明确、降低可读性；为此HTML5新增了一系列专用的文档结构标签。 （5）逐一讲解7个新增标签的功能分区，并结合教材图2-19的效果图定位到页面上的对应位置：页头标签<header>、导航栏标签<nav>、主题标签<main>、节标签<section>、文章标签<article>、侧边栏标签<aside>、页脚标签<footer>。 （6）讲解语义化标签的三条优势：①代码可读性强——开发者可以通过标签名直接理解区域功能；②有利于搜索引擎优化——搜索引擎能更准确地识别网页核心内容；③提升无障碍访问能力——屏幕阅读器可以更好地解析网页结构，辅助残障用户浏览。 2.例题分析 题目：教材任务2-6【任务实施】中的页面代码。 带领学生对照教材图2-19逐段读代码，重点读三处：①<nav>中的<ul><li><a>正是活动四刚完成的导航栏，说明<nav>的作用就是“把导航栏包起来”；②<main>内部<article>与<aside>并列，两个<section>嵌套在<article>里面；③<footer>放在最后且只包含版权信息，不包含正文内容。 3.对比归纳 用表格对比“<div>+id”与语义化标签两种写法，师生共同总结选用口诀：“页头用<header>，导航用<nav>，正文用<main>，文章用<article>，小节用<section>，侧栏用<aside>，页脚用<footer>”。 4.背诵记忆 罗列7个语义化标签的功能分区与三条优势，要求学生在规定时间内完成识记，并通过抽查问答检验效果，要求识记不牢固的学生利用课后时间继续巩固。 5.课堂问答 提问：“页面中的‘相关课程推荐’应该放在<aside>还是<footer>里？两个<section>能不能直接放在<main>里而不放进<article>？”要求学生作答并互相补充。 1. 跟随教师讲授，在教材上标记<div>与<span>的区别，记录7个语义化标签的功能分区，并在教材图2-19上逐一指出它们的对应位置。 2. 逐段分析任务2-6的页面代码，说出<nav>、<main>、<article>、<section>、<aside>、<footer>之间的嵌套层级关系。 3. 与教师共同完成两种写法的对比表格，熟记“按区域功能选标签”的选用口诀。 4. 完成知识点识记，参与课堂问答，尝试判断“相关课程推荐”该用哪一个标签。 1. 先讲<div>、<span>再讲HTML5新增标签，让学生理解“新标签是为了解决老办法的什么问题”，避免把语义化标签讲成又一组要死记硬背的新名词。 2. 用教材图2-19的效果图做“标签—区域”的一一对应，把7个抽象标签落到看得见的页面位置上，降低记忆负担，突破<section>与<article>易混淆的难点。 3. 三条优势的讲授把“代码规范”与搜索引擎优化、无障碍访问等真实职业场景联系起来，让学生理解规范编码的实际价值，落实模块2的素养目标。 活动六： 任务实施——搭建课程页面框架 1.任务布置 出示任务：对照教材图2-19，使用语义化标签搭建课程页面的整体框架，做到顶部为页头与导航栏，中间左侧为核心文章内容、右侧为侧边栏，底部为版权页脚。 2.示范演示 步骤1 准备工作：打开VS Code，从相应素材文件夹中打开“素材任务2-6.html”文件。 步骤2 编写代码：先写出<!DOCTYPE html>、<html lang="zh-CN">、<head>与<body>的文档骨架；再按“从上到下、由外到内”的顺序依次添加：①<header>中写<h1>网页设计与制作课程</h1>与标语<p>学习HTML5和CSS3，掌握网页开发技能</p>；②<nav>中放入<ul><li><a href="#home">首页</a></li>等导航项，复用活动四的写法；③<main>中先写<article>，再写<aside>；④最后写<footer>放版权信息<p>&copy; 2023 网页设计与制作课程 版权所有</p>。演示“先写外层容器、再写内部内容、最后补闭合标签”的书写顺序，提醒学生<section>必须写在<article>内部，<aside>与<article>并列放在<main>里面。 步骤3 查看效果：保存文件后在Edge浏览器中打开，对照页头、导航、正文、侧边栏、页脚五个区域逐一验证是否达到预期；再按F12打开开发者工具，或在页面上右键选择“查看页面源代码”，让学生看到由语义化标签构成的清晰骨架。 3.学生实操 题目要求：完成教材“试一试2-6.html”。 1. 使用<div>标签替代语义化标签，通过id属性实现相同的页面布局，对比两种方式的代码可读性。 2. 在<article>标签中添加更多<section>标签，丰富文章内容。 3. 在<aside>标签中添加图像超链接，优化侧边栏展示效果。 4. 在<footer>标签中添加联系方式、备案号等信息。 5. 尝试在<main>标签中嵌套<article>标签和<section>标签，进一步熟悉语义化标签的嵌套规则。 教师巡视指导，针对“标签未闭合”“<section>与<article>层级颠倒”“<aside>写到了<main>外面”等共性问题集中讲评。 4.展示评价 投屏展示2~3份学生作品，从“七个功能区域是否齐全”“语义化标签选用是否正确”“嵌套层级与闭合是否规范”三个方面组织师生共同点评；并把其中一份用<div>+id实现的作品与一份用语义化标签实现的作品并排投屏，让学生现场比较两种代码的可读性。 1. 明确任务要求，跟随教师示范在VS Code中打开素材，按“从上到下、由外到内”的顺序写出文档骨架与七个功能区域。 2. 观察教师的书写顺序，重点记录<section>与<article>、<aside>与<main>的嵌套位置与闭合顺序。 3. 独立或以小组合作的形式完成“任务2-6.html”与“试一试2-6.html”的编写，保存后在Edge中检查五个区域是否齐全，并用开发者工具查看代码骨架。 4. 参与作品展示与两种写法的对比点评，说出自己更愿意阅读哪一份代码并说明理由。 1. 把活动四做好的导航栏直接填入<nav>，让学生亲身体会“超链接是导航的内容、<nav>是导航的容器”这一层关系，把两个任务自然串成一条线。 2. “先写外层容器、再写内部内容、最后补闭合标签”的书写顺序，是针对学生标签错位问题给出的可操作方法，直接服务于难点的突破。 3. 用<div>+id与语义化标签并排对比收尾，让学生自己说出“哪一种更好读”，把语义化的价值从教师讲授转化为学生体验，同时为模块3用CSS选择器按标签定位元素做好铺垫。 课堂小结 作业布置 【课堂小结】 本节课我们先用超链接把一个个孤立的页面连成了网站：用<a href="目标页面" target="打开方式">文本或图像</a>实现页面跳转，target取_self在原窗口打开、取_blank在新窗口打开、取_top与_parent分别用于顶层框架与父框架；用<a href="#区域名">配合目标位置的id属性做锚点链接，实现同一页面内的快速定位；并完成了教材任务2.5，用<ul>承载导航项做出了能真正跳转的课程导航栏。接着我们给页面搭起了骨架：先认识<div>块级容器与<span>内联容器，再学习HTML5新增的7个语义化标签——页头用<header>、导航用<nav>、正文用<main>、文章用<article>、小节用<section>、侧栏用<aside>、页脚用<footer>，它们让代码可读性更强、更有利于搜索引擎优化、也能提升无障碍访问能力；并完成了教材任务2.6，搭建出课程页面的整体框架。请同学们记住两句话：“跨页面用href='文件名.html'，同一页内用href='#区域名'”；“按区域功能选标签，不用<div>一把梭”。 【作业布置】 1. 预习教材模块3任务3.1“建立网站样式基础”，思考CSS选择器要怎样选中<header>、<nav>、<article>这些区域并为其设置样式。 2. 完善课堂完成的导航页：补齐5个目标页面的正文内容，为“课程学习”页面添加“课程大纲”“学习重点”“常见问题”三处锚点，并把外部链接“MDN文档”加入导航栏，将最终效果截图提交。 3. 新建“试一试2-6.html”：用<div>配合id属性实现与“任务2-6.html”相同的页面布局，并写3~5句话比较两种写法在代码可读性上的差别，下次课上交流。 板书设计 任务2.5 使用超链接完成页面跳转　　　任务2.6 使用语义化标签搭建课程页面框架 一、超链接　<a href="目标" target="方式">文本或图像</a > 　　href：指定链接目标的URL地址 　　target：_self 自身　_blank 新窗口　_top 顶层框架　_parent 父框架 　　默认状态：未访问→蓝色带下画线；悬停→手形；已访问→紫色带下画线 二、锚点链接　<a href="#区域名">…</a >　＋　目标位置 id="区域名" 　　跨页面用 href="文件名.html"；同一页内用 href="#区域名" 三、容器标签　<div> 块级　　<span> 内联 四、HTML5语义化标签 　　页头<header>　导航<nav>　正文<main>　文章<article>　小节<section>　侧栏<aside>　页脚<footer> 　　优势：①代码可读性强　②有利于SEO　③提升无障碍访问能力 教学反思 本节课以“上节课自己做的页面跳不过去”这一真实窘境导入，学生的代入感预计较强，导入环节的参与度较高。任务2.5与任务2.6两个任务的内容合计偏多，活动四与活动六两个实操环节的时间需要严格控制，必要时可将“试一试2-5”的第3、4项和“试一试2-6”的第2、5项调整为课后完成。 实操环节中，学生最容易出错的仍是href的相对路径——5个目标页面文件漏建、文件名与href不一致，导致单击后提示找不到页面。后续需在巡视时把“先在文件夹里核对文件名、再写href”作为固定检查步骤要求学生执行，并把典型的错误代码投屏讲评。 语义化标签部分，学生对<section>与<article>的层级、<aside>与<footer>的边界仍容易混淆，仅靠讲授效果有限。后续可增加一次“看页面猜标签”的小练习，或让学生交换阅读同伴的源代码，用“读不读得懂”来体会语义化的价值。 此外，个别学生对target四个取值的记忆仍有困难，可在模块3讲解CSS时结合a:hover等选择器反复复现，巩固记忆；板书中的两句话口诀应在每次实操前带领学生齐读一遍，强化选用依据。 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $