2.6.2-﹤ nav ﹥ … ﹤ nav ﹥ 标签（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 ﹤ nav ﹥ … ﹤ /nav ﹥ 标签 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解HTML5中<nav>标签的作用和语义。 · 掌握<nav>标签的基本用法和相关属性。 · 学会在<nav>标签中嵌套链接和其他导航元素。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. <nav>标签的作用和语义。 2. <nav>标签的基本用法和相关属性。 3. 在<nav>标签中嵌套链接和其他导航元素的方法。 教学难点 1. <nav>标签与其他HTML5语义化标签的区别。 2. 如何在<nav>标签中合理地组织导航内容。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过实际案例，让学生更好地理解和掌握<nav>标签的应用。 · 任务驱动法：布置具体任务，引导学生动手实践，提高解决问题的能力。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 案例分析法：通过实际案例，让学生更好地理解和掌握<nav>标签的应用。 · 任务驱动法：布置具体任务，引导学生动手实践，提高解决问题的能力。 2分钟 讲授新课 练习指导 要了解HTML5中`<nav>`标签的作用和语义，首先需要了解HTML5中的语义化标签。 1. `<nav>`标签的作用和语义： HTML5中的语义化标签是为了更好地描述网页内容的结构和意义。`<nav>`标签用于表示页面内的导航菜单，包含一组链接到其他页面或网页区域。它可以帮助搜索引擎和辅助设备更好地理解页面内容。 2. `<nav>`标签的基本用法和相关属性： `<nav>`标签的基本用法很简单，只需将其包裹在需要设置导航菜单的区域内即可。例如： ```html <!DOCTYPE html> <html> <head><title>Nav标签示例</title></head> <body> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> <main> <!-- 页面主要内容 --> </main> </body> </html> ``` `<nav>`标签没有特定的属性，但可以使用全局属性（如`class`、`id`等）来设置样式或进行其他操作。 3. 在`<nav>`标签中嵌套链接和其他导航元素： 在`<nav>`标签中，可以嵌套各种链接元素，如`<a>`标签，以满足实际的导航需求。例如： ```html <nav> <a href="#">首页</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> ``` 此外，还可以根据需要嵌套其他`<nav>`标签以创建多级菜单。例如： ```html <nav> <a href="#">首页</a> <nav> <a href="#">关于我们</a> <a href="#">联系我们</a> </nav> </nav> ``` 在这个示例中，我们在`<nav>`标签中嵌套了一个子`<nav>`标签，以创建多级菜单。这样的组合可以帮助用户更好地了解网页的结构和内容。 总结： - `<nav>`标签用于表示页面内的导航菜单，包含一组链接到其他页面或网页区域。 - `<nav>`标签的基本用法很简单，只需将其包裹在需要设置导航菜单的区域内即可。 - 在`<nav>`标签中，可以嵌套各种链接元素，如`<a>`标签，以满足实际的导航需求。此外，还可以根据需要嵌套其他`<nav>`标签以创建多级菜单。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 创建一个简单的网页，使用<nav>标签设置导航栏。 2. 在<nav>标签中嵌套多个链接，实现不同的导航功能。 3. 分析一个实际网页中的<nav>标签应用案例。 12分钟 布置作业 1. 完成课后习题。 2. 在个人网站或博客中添加一个使用<nav>标签的导航栏。 1分钟 总结回顾 1. <nav>标签用于表示页面内导行菜单，包含一组链接到其他页面或网页区域。 2. <nav>标签的基本用法很简单，只需将其包裹在需要设置导行菜单的区域内即可。 3. 在<nav>标签中，可以嵌套各种链接元素，如<a>标签，以满足实际的导行需求。此外，还可以根据需要嵌套其他<nav>标签以创建多级菜单。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$