2.6.1-HTML基础（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 HTML基础 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握HTML的基本结构和语法。 · 学会使用HTML标签创建网页元素。 · 了解HTML文档的基本组成部分。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. HTML的基本结构和语法。 2. 使用HTML标签创建网页元素。 3. HTML文档的基本组成部分。 教学难点 1. 如何正确使用HTML标签。 2. HTML文档结构的理解。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 讲授法：讲解HTML的基本概念、结构和语法。 2. 实例演示法：通过实例操作，展示HTML标签的使用方法。 3. 任务驱动法：布置具体任务，引导学生自主完成。 4. 小组合作法：鼓励学生相互合作，共同解决问题。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 介绍HTML的重要性和应用场景。 2. 引入本节课的主题：HTML基础。 2分钟 讲授新课 练习指导 在HTML中，掌握基本结构和语法、使用HTML标签创建网页元素以及了解HTML文档的基本组成部分是学习HTML基础的关键 1. HTML的基本结构和语法： HTML文档由`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`标签组成。`<!DOCTYPE html>`声明文档类型为HTML5；`<html>`标签包含整个HTML文档；`<head>`标签包含文档的元信息，如标题、字符编码等；`<body>`标签包含网页的可见内容，如文本、图片、表格等。 示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <!-- 网页内容 --> </body> </html> ``` 2. 使用HTML标签创建网页元素： HTML提供了丰富的标签，用于创建网页元素。以下是一些常用的HTML标签： - 标题标签：`<h1>`至`<h6>`，用于创建标题。 - 段落标签：`<p>`，用于创建段落。 - 列表标签：`<ul>`（无序列表）和`<li>`（列表项），用于创建列表。 - 链接标签：`<a>`，用于创建链接。 - 图片标签：`<img>`，用于插入图片。 - 表格标签：`<table>`、`<tr>`、`<td>`等，用于创建表格。 示例： ```html <h1>一级标题</h1> <p>这是一个段落。</p> <ul> <li>列表项1</li> <li>列表项2</li> </ul> <a href="https://www.example.com">这是一个链接</a> <img src="image.jpg" alt="图片描述" /> <table> <tr> <td>单元格1</td> <td>单元格2</td> </tr> </table> ``` 3. HTML文档的基本组成部分： HTML文档由头部（`<head>`）和主体（`<body>`）两部分组成。头部包含文档的元信息，如标题、字符编码等；主体包含网页的可见内容，如文本、图片、表格等。 通过掌握HTML的基本结构和语法、使用HTML标签创建网页元素以及了解HTML文档的基本组成部分，你可以在网页设计中创建基本的网页结构和元素。这将为你在后续学习中掌握更高级的HTML和CSS技能打下基础。 在HTML中，正确使用HTML标签和理解HTML文档结构是创建高质量网页的关键 1. 正确使用HTML标签： 当使用HTML标签时，请确保正确地使用开始标签和结束标签。例如，`<p>`标签用于创建段落，正确的使用方法是： ```html <p>这是一个段落。</p> ``` 对于自闭合标签（如`<img>`、`<br>`等），请确保