一体化课教案
课  程 HTML5+CSS3网页设计与制作 授课教师
课  题 第一阶段 制作网页内容 分课题 任务3 添加段落和文字 授课对象 ××专业××班授课时间 ×年×月×日 课时    4
教学目标
1、能够表述常见HTML格式化文本标签的含义。
2、能够在网页中按内容语义正确应用HTML文本标签。
3、能够在分析D清单网页效果图基础上，使用HTML添加网页中的段落和文字内容。
教学重点1、应用HTML文本标签
2、使用HTML添加网页中的段落和文字内容
教学难点 规范化书写HTML代码
任务描述
本次任务要求根据D清单网页内容，使用HTML格式化标签，在任务2基础上添加文字和段落内容。
任务分析
要完成D清单网页文本和段落内容的编写，需要：
1、学习标题、段落和其它常见文本标签的使用；
2、分析D清单页面中的文本和段落内容，正确使用格式化标签完成D 清单网页内容制作。
教学场地
与教具
教学场地：机房    教具：计算机
安全注意事项及相关备注 1、提醒学生注意用电安全。
2、提醒学生不要将食品饮料带入机房。
审阅签名：                                              年    月    日
环节 学生活动 教师活动
分配
备注说明
组织教学 一、提前5分钟按照固定座位就坐。
二、不带食品饮料进入教室（机房）。
三、开机，配置好IP地址，确保红蜘蛛软件运行并链接教师机，同时能
够访问英特网。
四、注意电脑接电用电安全。
一、严格遵守上下课时
间，上课铃响前5分钟
进入教室。
二、检查学生的仪容仪
表，严禁带食品和饮料
进入教室。tcpip的工作原理
三、检查教室线路布
置，提醒学生检查是否
将电脑接入英特网。
四、提醒学生注意用电
安全，清点人数。
课前js广告代码被屏蔽
5分
钟
营造上课环
境，保证用
电安全
任务引入 一、了解任务情境
本次任务要求根据D清单网页内容，使用HTML格式化标签，在任务2基
础上添加文字和段落内容。
完成后的效果图如图所示。
一、引入任务情境 10分
钟
1、明确本
次课程要完
成的任务在
项目中的位
置
2、明确本
次课程任务
要求
‐ 1 ‐
环节 学生活动 教师活动
element ui tree源码分配
备注说明
预备知识 一、学习知识点
1、标题标签<h1>~<h6>
HTML文档中包含有各种级别的标题，各种级别的标题由<h1>到<h6>标签来
定义，<h1>到<h6>标题标签中的字母h是英文headline（标题行）的简称。
其中<h1>代表1级标题，级别最高，文字也最大，其他标题标签依次递减，
<h6>级别最低。
其语法形式如下：
1级标题：<h1></h1>
2级标题：<h2></h2>
……xpath选择器
6级标题：<h6></h6>
2、段落标签<p>
段落标签为<p></p>，在<p>开始标签和</p>结束标签之间的内容形成一个
段落。段落标签中的p是英文单词paragraph（段落）的首字母，用来定义
网页中的一段文本，文本在一个段落中会自动换行。其语法形式如下：
<p>段落文字</p>
3、换行标签<br/>
从课堂练习1-3-2中可以看出，浏览器在显示网页时，完全按照HTML标签
来解释HTML代码，换行（按Enter键）是无效的。在HTML中，换行需要使
用<br/>标签来完成。
换行标签<br/>是一个单标签，它没有结束标答，是英文单词break的缩写，
作用是将文字在一个段内强制换行。使用换行标签时，在需要换行的位置添
加<br/>标签即可。其语法形式如下：
换行标签<br/>
4、通用div块元素<div>
div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工
具，并且不使用任何格式与其关联。
一、讲授知识点
105
分钟
边讲边练，
完成理论知
识的学习
‐ 2 ‐
环节
学生活动 教师活动
学生个人网页制作html代码css分配
备注说明
div元素是通用的，内部可以包含其他各种元素包括其他div元素；并且可
以通过CSS设置样式来完成复杂的页面布局。关于CSS设置将在第二阶段
中学习。
其语法形式如下：
<div>…任何网页元素（标签）</div>
注释：HTML中的元素可分为两种类型：块级元素和行级元素。块级元素：
显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如前
面所讲过的p，h1，div等标签元素。行内元素：元素在一行内水平排列，
高度由元素的内容决定，height（高度）属性不起作用，如后面要讲的span，
a等元素。
5、通用内联元素<span>
span标签是被用来组合文档中的行内元素。span没有固定的格式表现。当
对它应用样式（在后面的章节中会进行详细讲解）时，它才会产生视觉上的
变化。span标签在行内定义一个区域，也就是一行内可以被span划分成好
电脑制表格怎么制作几个区域，从而实现某种特定效果。span标签本身没有任何属性。
其语法形式如下：<span>要修改样式的文字</span>
6、常见的短语元素
‐ 3 ‐
‐ 4 ‐
环节
学生活动
教师活动
分配
备注说明
提示：HTML 中的加粗文本和倾斜文本标签已经过时，是不需要读者记住的标签，这些标签都应该使用CSS 样式来实现。随着后面学习的深入，读者会逐渐发现，即使HTML 和CSS 实现相同的效果，但是CSS 所能实现的控制远远比HTML 更细致、精确得多。 二、根据教师的课堂任务操作步骤和讲解，独立完成课堂练习，并测试代码。
打开Visual Studio Code ，输入如下标签： 【课堂练习1‐3‐1显示6级标题的效果】
打开Visual Studio Code 软件，在<body>标签中输入如下代码：
1 2 3 4 5 6
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6>
显示效果如下：
【课堂练习1‐3‐2使用标题和段落的网页】
二、演示任务关键操作步骤，引导学生完成课堂练习

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。