资源简介

(共34张PPT)
第四单元 第2课
揭秘神奇标记语言
（教科版）七年级
上
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
。
信息意识
计算思维
数字化学习与创新
信息社会责任
经历分析讨论、编程实现等过程，能够使用HTML语言有目的地呈现数据，为网页图片添加alt描述文本。
通过科技节网页制作实践媒体素材添加与CSS美化，完成数字化作品创作流程。
探秘网页标记语言HTML，能够读懂网页背后的代码，通过CSS优先级规则解决样式冲突问题。
知道HTML语言的主要构成，识别网页中文本直接存储与图片路径引用的差异，通过查看源代码理解信息组织逻辑。
02
新知导入
在互联网的世界里，信息通过网页形式进行表达，每个网页都有其独特的内容和呈现效果。正如同学们绘制的板报，有文字、图表等内容信息，也有标题、正文、字体等排版信息，网页也有着独特的构成要素和呈现规范。HTML是定义这些内容的网页语言之一。
本节课，我们聚焦网页制作语言HTML和CSS，为前面创建的简单网页设计网页整体骨架结构，给网页中的文本设置字号和字体，为网页添加图片和音视频，增加网页的可读性和美观性。
本课要点
02
新知导入
电脑怎么知道哪里是标题？
我们用一种叫HTML的“符号密码”，像用荧光笔划重点一样，用

标记就是大标题。
02
新知导入
图片塞进网页里了吗？
没有哦。HTML像地图，相当于告诉浏览器：“去这里找图片贴过来！”文件是分开的。
02
新知导入
大家喜欢玩乐高积木吗？用不同形状的积木块，可以拼出房子、汽车、城堡。制作网页也有类似的“积木块”，它们就是 HTML 标签。用

可以搭出大大的标题，用

可以放上一段文字，用 就能贴上精美的图片。这些被尖括号 < > 包裹的“积木块”，按照一定规则组合起来，就构成了我们看到的丰富多彩的网页。今天，我们就来认识这些神奇的网页“积木块”！
网页积木师：用标签搭建数字世界
02
新知导入
03
新知讲解
其实，HTML不是编程语言，而是一种标记语言。
在
人类之所以能够通过特定的语言进行交流，是因为人类的语言中包括了明确的语法规则，相互间明白每句话、每段话的含义。HTML作为制作网页的一种语言，它又是如何进行表达的呢？
探索
03
新知讲解
探索
就像同学们用荧光笔给课本重点内容涂上高亮颜色，当人们将标记的规律整理成统一规则时，标记就发展成为一种语言。这种技术最早应用于出版行业，是作者、编辑和出版商用来描述书籍、报刊等印刷品排版格式的专业术语。
03
新知讲解
探索
在信息科技领域，标记语言指的是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。标记语言常用于标识文本的格式、描述链接的地址等，不用于向计算机发出指令。
你知道计算机领域有哪些标记语言吗？标记语言是如何实现标记的呢？
03
新知讲解
写一写
标记语言：用特殊符号给电脑下指令
RTF：用 { } 和 \ 定义文档格式（如字体/颜色），如带格式的包装盒。
JSON：用 { } [ ] 存储交换数据（如游戏存档），像结构化收纳箱。
Markdown：用 # * - 快速排版文本（如笔记标题），是高效写作小助手。
HTML：用 < > 标签搭建网页（文字/图片/链接），如网页的乐高积木。
掌握符号密码，轻松操作数字世界！
03
新知讲解
探索
超文本标记语言——HTML
超文本（Hyper Text，简称HT）是通过超链接将文字、图片等信息相互连接，形成网状信息体系的技术。
而超文本标记语言（Hyper Text Markup Language，缩写为HTML）正是基于此设计的通用标准标记语言，专门用于创建能在浏览器中显示的网页。HTML使用标记标签（由尖括号包围的关键词，通常成对出现）来描述网页内容：控制文本格式（如加粗/标题）、定义页面布局、管理图片显示等元素。
03
新知讲解
探索
超文本标记语言——HTML
HTML标签一般分为两大类，分别是单标签、双标签。
概念 单标签 双标签
语法格式 <标签名 **/**> 或 <标签名> <标签名>内容
举例说明
（换行）
（图片）

段落文字

内容块

核心特点 独立存在
无需包裹内容，直接生效 包裹内容
需起始+结束标签，形成容器
03
新知讲解
探索
超文本标记语言——HTML
每个HTML文档都像一本电子书：它以标签开头，以标签结束（像书的封面和封底）。文档内部包含两大核心部分：
文档头：存放网页的"隐藏设置"（标题、字符编码等），如同书的版权页，不显示内容但必不可少；
文档体：包裹所有可见内容（文字/图片/按钮等），就像书的内页承载具体故事。
包裹全局，是幕后管家，是展示橱窗。
03
新知讲解
探索
超文本标记语言——HTML
网页如果只有文字而没有图片，呈现效果会大打折扣，即图片是网页中非常重要的组成内容。HTML语言如何描述图片等多媒体数据呢？填写表格思考网页是否真的将多媒体数据加入HTML文档中。
03
新知讲解
议一议
据类型 标签 代码实例
添加图片
添加音频