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

任务2.5、2.6：使用超链接完成页面跳转和使用语义化标签搭建课程页面框架 网页设计与制作 电子工业出版社 ①理解超链接<a>的作用与默认状态 ②掌握href、target属性及四个取值 ③掌握锚点链接的写法 ④理解<div>与<span>的区别 ⑤说出7个HTML5语义化标签的功能分区 ①能用<ul>+<a>制作横向导航栏并正确书写相对路径 ②能根据场景选用_self或_blank ③能在长页面中使用锚点链接 ④能用语义化标签搭建课程页面框架 ①信息意识：按查找需要选择恰当的跳转方式 ②计算思维：抽象“链接—目标”“容器—内容”模型 ③数字化学习：自主调试路径错误 ④信息社会责任：规范标注来源、关怀无障碍访问 知识目标 能力目标 素养目标 01 01 01 学习目标 目录 Part 01 教学导入 Part 02 知识讲授 Part 03 师生互动 Part 04 课堂练习 Part 05 课堂小结 教学导入 对比一下：两种页面，查找信息有什么不同？ 没有超链接的页面 只能一屏到底往下翻，想回看前面的内容要反复滚动，操作麻烦，体验不佳。 带导航超链接的页面 顶部设置导航栏，单击栏目即可直接跳转到对应页面；目标页还能“返回首页”，像地图一样方便。 教学导入 💡 导航栏的智慧 把“课程首页、课程概况、入门攻略、课程学习、教学资源、综合测试”做成导航项；访问者想跳到哪一页，就点哪一项。 🚀 核心思想：超链接让页面连起来 这种“把孤立页面连成可跳转网站”的思想，就是本节课任务2.5的核心。 教学导入 💡 网页的世界 在网页的浩瀚世界里，一个个HTML页面就像一张张独立的城市地图。而超链接，就是地图上的路线与路标，把不同页面连成一个可自由穿梭的网站。 我们将这些神奇的“路标”正式命名为： 超链接 编写网站的过程，就像规划交通：用<a>标签把页面与页面连接起来，让访问者自由跳转，最终搭建出结构清晰的课程网站。 🚀 本课目标：掌握超链接与语义化标签，搭建可跳转的课程页面框架。 第一部分 使用超链接完成页面跳转 知识讲授 知识讲授：什么是超链接 什么是超链接？ 💡 核心定义 超链接标签<a>用于在网页中标记文本或图像，形成可单击的链接。访问者单击后，会跳转到另一个指定页面，实现浏览空间的跨越。 跳转跨越 “把彼此孤立的页面连成可互相到达的网站” a标签 知识讲授：超链接的形态与路径 超链接的三种路径 ①内部链接：跳转到同一网站内的其他页面 ②锚点链接：跳转到当前页面的指定位置 ③外部链接：跳转到其他网站的URL 💡 生活类比：网站地图 导航栏就像网站地图：访问者单击栏目，即可沿着“路线”到达目标页面，快速找到所需信息。 示例演示 知识讲授：target属性 target="_self"：原窗口打开 单击后在当前窗口中打开目标页面，覆盖当前页。适合站内页面跳转。 target="_blank"：新窗口打开 单击后在新的浏览器窗口中打开目标页面，保留当前页。适合外部链接。 知识讲授：锚点链接 锚点链接：长页面的直达电梯 当页面内容较多时，使用锚点链接可直接跳转到指定位置。先在目标位置用id属性做“楼层标记”，再用<a href="#标记名">设置“楼层按钮”。 💡 形象类比：电梯楼层按钮 单击“3楼”按钮，电梯直接停靠3楼；单击“常见问题”按钮，页面直接滚动到该标题。 知识讲授：锚点链接 锚点链接：长页面的直达电梯 知识讲授：超链接的默认状态 未被访问：蓝色 + 下划线 浏览器默认将未访问过的链接显示为蓝色并带下划线，提示“这里可以点”。 鼠标悬停：手形指针 鼠标指针移到链接上时会变成小手形状，直观反馈“这是可点击的跳转入口”。 已访问：紫色 + 下划线 被单击访问过的链接会显示为紫色并带下划线，帮助用户识别“已经看过”的内容。 知识讲授：导航栏结构 <ul>：无序列表容器 把多个导航项装在一个“列表”里，浏览器默认会去掉项目符号，配合CSS可横向排列。 <li>：列表项 每个<li>对应一个导航项，<a>标签必须完整嵌套在<li>内部。 <a>：超链接 用href指定目标页面路径，用target指定打开方式；标签中间包裹访问者可见的文字或图像。 标签闭合检查 导航项必须放在<li>内，<a>成对闭合，href路径与文件名一致。 💡 核心法则：相对路径中的文件名要与实际文件完全一致！ 例题分析 📝 场景设定 制作“网页设计与制作课程导航”：顶部有6个导航项:课程首页、课程概况、入门攻略、课程学习、教学资源、综合测试，单击后在新窗口打开对应的目标页面，每个目标页底部可“返回首页”。 💡 探索思路 用<ul>承载导航项，每个<li>里放一个<a>；5个目标页面文件必须与导航页放在同一文件夹，文件名要与href中写的一字不差。 例题演示与分析 路径错误排查示范 文件名写错 href中的文件名大小写、后缀与实际文件不一致，单击即提示找不到页面。 文件漏建 5个目标页面没有逐一新建，导致部分导航项单击后无法打开。 标签嵌套错误 <a>写在<li>外面或忘记闭合</a>，页面结构混乱，链接失效。 例题分析 ✨ 导航栏核心优势 结构清晰 <ul>+<li>+<a>层级分明，便于后续用CSS统一美化。 跳转灵活 通过href与target组合，轻松控制打开方式。 维护高效 新增栏目只需复制一个<li>，修改文字与路径即可。 师生互动 概念题 什么是超链接？它的核心作用是什么？ 超链接是网页中可单击的跳转入口，由<a>标签定义；核心作用是把孤立的页面连成可互相访问的网站。 理解题 “课程概况”希望访问者看完后还能回到首页，应选_self还是_blank？链接到外部文档呢？ “课程概况”用_self，在当前页打开方便返回；“MDN文档”用_blank，在新窗口打开不离开本站。 辨析题 辨析题：锚点链接中，id的值能不能重复？ 答案：不能。同一页面中id必须唯一，否则浏览器无法确定跳转目标。 练习题1：要使单击链接后在新窗口中打开目标页面，target属性应取下列哪一个值？（ ） A. _self B. _blank C. _top D. _parent 答案：B 解析：_blank表示在新窗口中打开目标页面；_self为默认值，在当前窗口打开。 课堂练习 练习题2：在同一页面内实现“课程大纲”“学习重点”“常见问题”的快速跳转，应使用下列哪种链接？（ ） A. 外部链接 B. 锚点链接 C. 空链接 D. 图像链接 答案：B 解析：锚点链接使用<a href="#区域名">配合目标位置的id属性，实现同一页面内的快速定位。 课堂练习 第二部分 知识讲授 使用语义化标签搭建课程页面框架 知识讲授：容器标签与语义化 📚 什么是语义化标签？ 语义化标签是指标签名本身就能表达内容含义的HTML标签。它让浏览器、搜索引擎和屏幕阅读器都能“读懂”页面结构。 🧱 两个容器标签 <div>：块级容器 块级 内联 容器 在标记区域前后自动换行，常用于划分页面大模块。 <span>：内联容器 不自动换行，常用于包裹一段文字以便局部设置样式。 div1 div2 span span 知识讲授：容器标签与语义化 <div>:块级元素，独占一行 <span>：内联容器不自动换行 知识讲授：HTML5新增结构标签 HTML5新增7个专用文档结构标签，用它们代替“<div>+id”的做法，让页面分区含义更清晰。 <header> 页头 定义网页或节的页头，常放网站名称与标语。 <nav> 导航栏 定义导航链接区域，通常包含<ul><li><a>组成的菜单。 <main> 主题内容 包裹页面核心主题内容，与导航、页脚等辅助内容区分。 图示：HTML5语义化标签功能分区示意 知识讲授：语义化标签速查 <article> 文章 功能：文章标签 <article> 用于定义独立的文章区域，里面根据文章内容的长短也可以包含一个或多个段落标签 <p> 。 <section> 节 功能：节标签 <section> 用于定义独立的专题区域，里面包含一篇或多篇文章。 <aside> 侧边栏 <footer> 页脚 功能：侧边栏标签 <aside> 用于定义正文两侧的相关内容，常用于文章侧边栏。页脚标签 <footer> 用于定义整个网页文档或节的页脚，包含文档作者、版权、联系方式等信息。 七大标签口诀 头用header，脚footer，核心是main，辅助aside。想写文章article，一般放在section中。 背诵记忆 语义化标签基础 📖 核心定义 按内容含义选择标签，使HTML结构本身就具有“自解释”能力。 ⚙️ 使用流程 1. 按区域功能确定应使用的语义化标签 2. 外层容器→内部内容→补全闭合标签 常用语义化标签速查 <header> 页头 <nav> 导航栏 <main> 主题内容 <article> 文章 <section> 节 <aside> 侧边栏 <footer> 页脚 <div> 通用块级容器 <span> 通用内联容器 避坑关键细节 标签必须成对闭合、嵌套层级正确，避免用<div>“一把梭”。 同一页面中id属性值不能重复，否则锚点链接会失效。 师生互动 概念题 语义化标签相比“<div>+id”有什么优势？ ①代码可读性强；②有利于搜索引擎优化；③提升无障碍访问能力。 辨析题 “相关课程推荐”应该放在<aside>还是<footer>里？ 应放在<aside>里，因为它是正文两侧的辅助内容；<footer>只放版权、联系方式等页脚信息。 思考题 两个<section>能不能直接放在<main>里而不放进<article>？ 可以，但若<section>属于同一篇文章，应嵌套在<article>内，层级更清晰。 课堂练习 【任务】搭建课程页面框架 1. 用<header>写网站名称与标语 2. 用<nav>包裹导航栏 3. 用<main>包含<section><article>和<aside> 4. 用<footer>写版权信息 语义化分区参考图 图示：<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>的功能分区关系 课堂小结 超链接 核心作用：用<a href="目标" target="方式">文本或图像</a>把页面连起来。 选用口诀：跨页面用href="文件名.html"；同一页内用href="#区域名"。 target取值：_self原窗口、_blank新窗口、_top顶层框架、_parent父框架。 HTML5语义化标签 页头<header>、导航<nav>、正文<main>、文章<article>、小节<section>、侧栏<aside>、页脚<footer>。 优势：代码可读性强、有利于SEO、提升无障碍访问能力。 口诀：按区域功能选标签，不用<div>一把梭。 💡 核心总结：超链接让页面连起来，语义化标签让页面结构更清晰。 作业布置： 1. 预习模块3任务3.1“建立网站样式基础”，思考CSS选择器如何选中<header>、<nav>等区域。 2. 完善导航页：补齐5个目标页正文，为“课程学习”页添加“课程大纲”“学习重点”“常见问题”三处锚点，并加入外部链接。 3. 新建“试一试2-6.html”：用<div>+id实现与任务2-6相同布局，并写3~5句话比较两种写法的可读性。 课后任务 谢谢观看 THANKS 单击此处编辑母版标题样式 单击此处编辑母版副标题样式 EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn EV录屏5.5.7软件录制 Lavf58.33.100 本视频由湖南一唯信息科技开发的EV录屏软件录制, www.ieway.cn $