6.2.2-超链接的target属性（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 超链接的target属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解超链接的target属性的概念和作用。 · 掌握target属性在超链接中的应用。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. target属性的概念及作用。 2. target属性在超链接中的应用。 教学难点 1. 如何根据实际需求选择合适的target属性值。 2. 如何处理target属性中的特殊字符和编码。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际网页案例，让学生理解target属性的应用。 · 实践操作法：让学生动手实践，通过编写代码来掌握target属性的使用方法。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 回顾上一节课学习的超链接的href属性。 · 展示几个网页实例，引导学生观察其中的超链接。 2分钟 讲授新课 练习指导 ### 超链接的target属性 #### 概念和作用 1. **概念**：`target`属性是HTML中`<a>`标签的一个重要属性，用于指定链接的打开方式。 2. **作用**：`target`属性的主要作用是定义链接在何处打开，使得用户可以在不同的窗口或标签页中浏览链接的目标网页。 #### 应用 `target`属性在超链接中的应用主要体现在以下几个方面： 1. **在新窗口或新标签页中打开链接**：通过设置`target`属性的值为`_blank`，实现在新窗口或新标签页中打开链接的目标网页。 ```html <a href="https://www.example.com" target="_blank">Visit Example.com in a new window or tab</a> ``` 2. **在父框架或顶层窗口中打开链接**：通过设置`target`属性的值为`_parent`或`_top`，实现在父框架或顶层窗口中打开链接的目标网页。 ```html <a href="https://www.example.com" target="_parent">Visit Example.com in the parent frame or top window</a> ``` #### 示例 下面是一个简单的超链接示例，展示了`target`属性在不同场景下的应用： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接的target属性示例</title> </head> <body> <h1>超链接的target属性示例</h1> <!-- 在新窗口或新标签页中打开链接 --> <p><a href="https://www.example.com" target="_blank">Visit Example.com in a new window or tab</a></p> <!-- 在父框架或顶层窗口中打开链接 --> <p><a href="https://www.example.com" target="_parent">Visit Example.com in the parent frame or top window</a></p> </body> </html> ``` 在这个示例中，我们创建了两个超链接，分别展示了`target`属性在不同场景下的应用。通过点击这些超链接，用户可以实现在新窗口或新标签页中打开链接，或者在父框架或顶层窗口中打开链接。 需要注意的是，在实际应用中，要根据需求选择合适的`target`属性值，以实现所需的功能和用户体验。同时，要注意超链接的安全性和隐私问题，避免恶意链接和信息泄露。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 完成课本上的习题，巩固所学知识。 2. 在网上找一些网页实例，分析其中的target属性设置。 12分钟 布置作业 1. 设计一个简单的网页，要求使用target属性创建不同类型的超链接。 2. 编写HTML代码，实现所设计的网页。 1分钟 总结回顾 1. target属性的概念及作用。 2. target属性在超链接中的应用。 通过本节课的学习，希望同学们能够掌握target属性的使用方法，并能在实际网页设计中灵活运用。 第 1 页，共 2 页 学科网（北京）股份有限公司 $$