资源简介

(共36张PPT)
第一单元 第1课
探秘网页与代码
（桂科版）七年级
下
1
核心素养目标
3
新知讲解
5
拓展延伸
7
板书设计
2
新知导入
4
课堂练习
6
课堂总结
课后作业
8
01
核心素养目标
。
信息意识
计算思维
数字化学习与创新
信息社会责任
树立正确的网络价值观，认识到个人在网络空间的言行对网络安全和网络生态的重要影响。
极主动地利用数字化工具，如浏览器的开发者工具、网页制作软件等，进行网页的学习与制作。
能使用HTML语言制作简单的网页，能根据实际需求灵活应用HTML语言制作网页，展示文字、图片、音频或视频等。
了解常用HTML标签的作用，在探究网页与代码的过程中，学生能够敏锐察觉网页信息的多样性、真实性及潜在风险。
02
新知导入
活动背景
壮壮上网搜集有关“三月三”的内容，浏览到许多图文并茂、呈现效果生动逼真的网页。壮壮很好奇，网页是通过什么方式实现这些效果的呢？
02
新知导入
活动目标
1、 深入理解 HTML 语言的基本概念。
2、 掌握开发者工具观察网页代码。
3、 掌握基本网页制作。
03
新知讲解
一、探究
1.用浏览器打开一个本地的 HTML 文件，按下“F12”键或在浏览器的工具栏中查找“开发者工具”，选中后打开，如图所示。
03
新知讲解
一、探究
2.用鼠标在“开发者工具”窗口进行任意移动和点击，观察浏览器窗口所显示的内容的变化，如图所示。
03
新知讲解
一、探究
请回答:1.同一个网页文件的内容，显示在浏览器窗口和显示在“开发者工具”窗口有何不同？各有什么特点？
浏览器窗口
显示内容：展示网页的可视化呈现效果，包括文字、图片、布局等内容以正常浏览的形式展现，用户看到的是最终呈现的页面外观。
特点：直观、可视化，方便用户直接浏览网页内容，进行交互操作，如点击链接、填写表单等 。它不涉及网页的代码结构，主要关注页面的展示效果和用户体验。
开发者工具窗口
显示内容：主要显示网页的代码结构，包括 HTML、CSS 和 JavaScript 代码等。可以查看和编辑网页元素的属性、样式，以及调试 JavaScript 代码等。
特点：专业性强，面向网页开发者和技术人员。能够深入到网页的底层代码，便于进行网页的开发、调试、优化工作，比如定位页面布局问题、修改元素样式即时预览效果等 。
03
新知讲解
一、探究
2.仔细对比图中圈出的两处地方，你有何发现？它们之间有什么联系？
发现：图中浏览器窗口圈出的是页面上实际显示的文本内容，开发者工具窗口圈出的是对应的 HTML 代码中的文本内容。二者在文字内容上是一致的。
联系：HTML 代码中的文本内容是网页实际显示文本的源头，浏览器通过解析 HTML 代码，将其中的文本内容渲染展示在页面上。当在开发者工具中修改 HTML 代码中的文本内容并保存（或实时预览 ）时，浏览器窗口中对应的文本内容会随之改变；反之，浏览器窗口中看到的文本内容，都能在 HTML 代码中找到其对应的代码表示 。
03
新知讲解
HTML(hypertext markuplanguage)的中文名全称为“超文本标记语言”,是一种标记语言。HTMIL 标签是 HTML 中最基本的单位，HTMI 就是通过一系列标签对要显示在网页上的超文本内容进行统一的格式定义。部分常用标签见下表。
小贴士
03
新知讲解
小贴士
03
新知讲解
二、讨论
不同的标签有不同的效果，图还涉及了哪些标签？这些标签的作用分别是什么？请你大胆猜想并和小伙伴展开讨论，将你们讨论的结果记录下来。
03
新知讲解
二、讨论
：网页的根标签，整个 HTML 文档都包含在该标签内，标志着网页的开始与结束，声明文档为 HTML 格式 。
：包含网页的元数据，如网页标题、字符编码、引入的样式表和脚本等信息，不会在浏览器窗口中直接显示内容，但对网页的加载和运行起重要作用 。
：用于定义网页的元信息，如设置字符编码 ，向搜索引擎和浏览器传递网页相关信息，如关键词、描述等。