第18课美化网页方法多任务单 2026-2027学年人教版初中信息科技七年级全一册
2026-07-06
|
6页
|
124人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第18课 美化网页方法多 |
| 类型 | 学案-学习任务单 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2026-2027 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | DOCX |
| 文件大小 | 156 KB |
| 发布时间 | 2026-07-06 |
| 更新时间 | 2026-07-06 |
| 作者 | 深耕浅出 |
| 品牌系列 | - |
| 审核时间 | 2026-07-06 |
| 下载链接 | https://m.zxxk.com/soft/58667179.html |
| 价格 | 0.50储值（1储值=1元） |
| 来源 | 学科网 |
摘要：
该初中信息科技学习任务单聚焦HTML标签属性与CSS美化网页的核心内容，以HTML基础美化（如背景颜色、字体样式设置）为起点，过渡到CSS样式表应用，构建递进式学习支架，帮助学生掌握两种网页美化方法的操作与特点。
资料突出任务驱动与对比分析，通过实践任务引导学生根据需求选择合适美化方法，培养计算思维，课后习题紧扣基础概念，强化信息意识与数字化学习能力，体现学科实践与问题解决导向。
内容正文：
人教版2024初中信息科技七年级全一册·第四单元校园活动线上展
第18课美化网页方法多任务单
姓名： 班级：
学习目标：
1、 知道用HTML代码简单美化网页的操作方法。
2、 知道串联样式表的作用，初步学会用它美化网页。
3、 根据需求，分析不同方法的特点并合理选择，提高解决问题的效率。
学习活动一：任务要求（用HTML美化网页）
1、实现设置网页背景颜色，设置的颜色为#87CEFA
2、②③实现设置一级标题和二级标题的内容居中显示
3、二级标题字号设置为7号，字体为楷体，颜色为#8A2BE2
4、一级标题字号设置为6号，字体为黑体，颜色为#A52A2A
5、“风力发电……”这段文字需进行首行缩进
标 签
属 性
值
作 用
<font>
color
#RRGGBB
规定文本颜色，采用十六进制表示颜色值，如<font color="#FF0000">
face
字体系列名称
规定文本的字体，如<font face="楷体">
size
字体大小
规定文本的大小，如<font size="6">
<body>
bgcolor
#RRGGBB
规定背景的颜色，采用十六进制表示颜色值，如<body bgcolor="#0000FF">
<p>
align
left
左对齐文本，如<p align="left">
right
右对齐文本，如<p align="right">
center
居中对齐文本，如<p align="center">
<html>
<head>
<title>校园科技节</title>
</head>
<!--①实现设置背景颜色，设置的颜色为#87CEFA-->
<body ①>
<!--②③实现设置一级标题和二级标题的内容居中显示-->
②
<h2>科技节体验项目——</h2>
<!--二级标题字号设置为7号，字体为楷体，颜色为#8A2BE2-->
<!--一级标题字号设置为6号，字体为黑体，颜色为#A52A2A-->
<h1> 风力发电</h1>
③
<p>④风力发电是指把风的动能转为电能。风力发电不需要使用燃料，也不会产生辐射或空气污染，
因而成为发展绿色能源的焦点之一。我国海上风能资源丰富，加快海上风电项目建设，对于促进
沿海地区治理大气雾霾、调整能源结构和转变经济发展方式具有重要意义。</p>
<!--风力发电这段文字需进行首行缩进-->
<p>
<center>
<img src="images/fenglifadian.jpg" width="348" >
</p>
<a href="index.html"><button class="button"> <<< 主页 >>></button> </a>
</center>
</body>
</html>
科技节体验项目——机器狗网页效果
科技节体验项目——机器狗（HTML）美化参考代码
学习活动二：任务要求（用CSS美化网页）
1、实现设置网页背景颜色，设置的颜色为#87CEFA
2、二级标题设置字体为黑体，字号50像素（px），颜色为#8A2BE2
3、一级标题设置字体为黑体，字号40像素（px），颜色为#A52A2A
4、“风力发电……”这段文字字体设置为隶书，字号为24像素（px）。
<html>
<head>
<title>校园科技节</title>
<style>
?
?
?
?
</style>
</head>
<body>
<center>
<h2>科技节体验项目——</h2>
<h1> 机器狗</h1>
<p></p><p></p>
<img src="images/jiqigou.jpg" width="348" >
</center>
<p>机器狗是一种模拟真实犬只形态和部分行为的机器设备，能够实现行走、坐下、翻滚等多种动作。机器狗的出现为人工智能和机器人研究提供了新的想象空间，也让更多人得以近距离接触机器人技术。 </p>
<p></p>
<center>
<a href="index.html"><button class="button" > <<< 主页 >>> </button></a>
</center>
</body>
</html>
答案
<html>
<head>
<title>校园科技节</title>
<style>
body{
background:#87CEFA;
}
h2{
font-family:黑体;
font-size:50px;
color:#8A2BE2;
}
h1{
font-family:黑体;
font-size:40px;
color:#A52A2A;
}
p{
font-family:隶书;
font-size:24px;
}
</style>
</head>
<body>
<center>
<h2>科技节体验项目——</h2>
<h1> 机器狗</h1>
<p></p><p></p>
<img src="images/jiqigou.jpg" width="348" >
</center>
<p>机器狗是一种模拟真实犬只形态和部分行为的机器设备，能够实现行走、坐下、翻滚等多种动作。机器狗的出现为人工智能和机器人研究提供了新的想象空间，也让更多人得以近距离接触机器人技术。 </p>
<p></p>
<center>
<a href="index.html"><button class="button" > <<< 主页 >>> </button></a>
</center>
</body>
</html>
学习活动三：课后习题
1、小丽用HTML代码给自己的科技节网页添加了背景颜色，她使用了<body bgcolor="#99CCFF">。这属于美化网页的哪种方式？（ ）
A. 用CSS美化
B. 用HTML标签及属性美化
C. 用JavaScript美化
D. 用图片美化
2、小华发现自己用HTML代码美化网页时，每改一个段落的颜色都要重新写一遍代码。这种方式的主要问题是（ ）。
A. 美化效果太好，不需要改进
B. 操作烦琐，效率不高
C. 代码无法保存
D. 浏览器不支持
3、CSS的中文全称是（ ）。
A. 计算机样式表
B. 串联样式表（级联样式表/层叠样式表）
C. 网页样式语言
D. 代码美化工具
4、小李想用CSS将网页中所有<p>标签的文字颜色设为蓝色，他需要先确定（ ）。
A. 选择器
B. 网页的标题
C. 网页的背景图片
D. 超链接地址
5、在CSS代码p {color: red;}中，“color”被称为（ ）。
A. 选择器
B. 属性
C. 值
D. 声明
6、下列关于CSS语法结构的说法，正确的是（ ）。
A. 属性和值之间用分号隔开
B. 属性和值之间用冒号隔开
C. 每条声明之间用逗号隔开
D. 所有声明用圆括号括起来
7、在CSS代码h1 {font-size: 24px; color: blue;}中，一个选择器对应了（ ）。
A. 一个声明
B. 一个值
C. 一个属性
D. 两条声明
8、小华想用CSS设置网页中所有<h1>标签的字体为楷体、颜色为红色，正确的写法是（ ）。
A. h1 (font-size: 楷体; color: 红色;)
B. h1 {font-family: 楷体; color: red;}
C. h1 [font-family: 楷体, color: red]
D. h1 <font-family: 楷体; color: red;>
9、小明在<style>标签中写了body {background-color: #FFFFCC;}。浏览网页时，浏览器会（ ）。
A. 忽略这段代码
B. 只显示文字不显示背景
C. 显示错误提示
D. 按照CSS的描述显示网页的背景颜色
10、小强用CSS美化网页后，发现所有<p>标签的文字都变成了蓝色，这是因为他在选择器中写了（ ）。
A. body {color: blue;}
B. p {color: blue;}
C. h1 {color: blue;}
D. a {color: blue;}
答案：
1
2
3
4
5
B
B
B
A
B
6
7
8
9
10
B
D
B
D
B
学科网（北京）股份有限公司
$
资源预览图
1
2
相关资源
示范课
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。