2.2.8-HTML文本格式化标签（教案）-《网页设计与制作(html5+css3+javascript)》同步教学（清华大学出版社）

教案 编号：PT-323 流水号：116 （首页）共 4页 课程 《网页设计与制作(html5+css3+javascript)》 一体化 理论 章节（课题）及内容 HTML文本格式化标签 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握HTML中常见的文本格式化标签（如<p>, <h1>至<h6>, ,<strong>, <em>, <u>, <strike>`等）。 · 了解文本格式化标签的用途和属性。 · 学会使用文本编辑器（如Notepad++、Sublime Text等）编写HTML代码。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · 文本格式化标签的名称和用法。 · 文本格式化标签的属性设置。 · 文本格式化标签在实际网页中的应用 教学难点 1. 文本格式化标签的属性设置和应用场景。 2. 如何根据网页设计需求选择合适的文本格式化标签。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 · 案例分析法：通过分析实际网页中的文本格式化标签应用，加深学生对知识点的理解。 · 小组合作法：分组讨论文本格式化标签的应用场景，培养学生的团队协作能力。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 · 案例分析法：通过分析实际网页中的文本格式化标签应用，加深学生对知识点的理解。 · 小组合作法：分组讨论文本格式化标签的应用场景，培养学生的团队协作能力。 2分钟 讲授新课 练习指导 要掌握HTML中常见的文本格式化标签，首先需要了解它们的用途和属性，然后使用文本编辑器编写HTML代码。以下是一些常见的文本格式化标签及其用途和属性： 1. `<p>`：表示段落。用于创建一个新的段落，通常用于包含一段文本。 ```html <p>这是一个段落。</p> ``` 2. `<h1>` 至 `<h6>`：表示标题。`<h1>` 是最大的标题，`<h6>` 是最小的标题。它们用于创建不同级别的标题。 ```html <h1>这是一个一级标题</h1> <h2>这是一个二级标题</h2> <h3>这是一个三级标题</h3> <h4>这是一个四级标题</h4> <h5>这是一个五级标题</h5> <h6>这是一个六级标题</h6> ``` 3.<strong>`：表示强调文本。用于强调文本的重要性，通常显示为粗体文本。 ```html <p>这是一个<strong>强调</strong>的文本。</p> ``` 4. `<em>`：表示斜体文本。用于表示文本的强调，通常显示为斜体文本。 ```html <p>这是一个<em>斜体</em>文本。</p> ``` 5. `<u>`：表示下划线文本。用于给文本添加下划线。 ```html <p>这是一个<u>下划线</u>文本。</p> ``` 6. `<strike>`：表示删除线文本。用于给文本添加删除线。 ```html <p>这是一个<strike>删除线</strike>文本。</p> ``` 要使用文本编辑器编写HTML代码，可以使用如Notepad++、Sublime Text等文本编辑器。以下是使用这些编辑器的简要步骤： 1. 打开文本编辑器（如Notepad++或Sublime Text）。 2. 创建一个新文件，或者打开一个已有的文件。 3. 在文件中输入HTML代码，如上述示例所示。 4. 保存文件，将文件扩展名设置为`.html`，例如`example.html`。 5. 双击保存的文件，或者在浏览器中打开该文件，查看HTML代码的效果。 通过熟练掌握这些文本格式化标签及其用途和属性，并使用文本编辑器编写HTML代码，你将能够创建出格式丰富、具有层次感的文本内容。 10分钟 7分钟 自主学习 8分钟 练习训练 1. 编写一个简单的HTML文档，使用文本格式化标签设置标题、段落、粗体、斜体等文本效果。 2. 为网页添加一条带有自定义样式的水平线。 12分钟 布置作业 1. 完善课堂上的习题练习，提交HTML源代码文件。 2. 在课外时间，尝试为自己的个人博客或网站设计一个页面，使用文本格式化标签进行文本布局和样式设置。 1分钟 总结回顾 第 1 页，共 2 页 学科网（北京）股份有限公司 $$