第16课《探秘网页与代码》教学课件-2025-2026学年人教版初中信息科技七年级全一册

该初中信息科技课件聚焦网页代码逻辑，通过F12键查看源代码、万维网发展历程等导入，从网页表象到HTML、CSS、JavaScript三剑客协作原理，再到动手修改代码，构建从认知到实践的学习支架。 其亮点在于设计“侦探任务”“代码解密游戏”等互动环节，结合信息意识培养（如F12键感知信息本质）、计算思维训练（如分解网页结构），通过小组竞速修改图片等实践，提升学生数字化学习与创新能力。学生能在实践中体验创造乐趣，教师可借助丰富活动增强教学互动性。

第16课 探秘网页与代码 第四单元 校园活动线上展 1.7.2013 大家好，欢迎来到今天的信息技术课。我们每天都在浏览各种各样精美的网页，它们就像魔术师变出来的一样神奇。但大家有没有想过，这些神奇的网页背后，到底隐藏着什么样的秘密呢？今天，就让我们一起化身“代码侦探”，踏上探秘网页与代码的奇妙旅程！ ‹#› 网页的“魔术”背后是什么？ 神奇的网页表象 我们每天浏览的网页色彩斑斓、动效十足，就像魔术师手中变幻莫测的魔法道具。精美的界面、流畅的交互，总能给我们带来直观而愉悦的视觉享受。但这一切真的是凭空出现的吗？ “看似复杂的动态效果，其实都有迹可循。” 制作很难吗？ 面对如此精美的网页，你是不是下意识地觉得，制作它需要掌握深不可测的技术，是一项遥不可及的任务？其实这是一种“技术滤镜”带来的错觉，网页的核心逻辑远比想象中更贴近我们。 “打破刻板印象，探索背后的简单逻辑。” 代码侦探的发现 按下神奇的 F12 键，网页的“源代码”真身即刻显现！无论界面多么华丽，本质上都是由 HTML、CSS 和 JavaScript 这些基础代码一行行构建而成的，这就是网页魔术的终极谜底。 “F12 是开启魔法世界的金钥匙！” 核心认知：网页的视觉呈现是“表象”，而底层的代码逻辑才是“本质”。接下来，让我们一起走进代码的世界，亲手揭开这个魔术的面纱，看看这些神奇的代码是如何构建出丰富多彩的网络世界的！ 1.7.2013 同学们请看，这就是我们平时看到的网页，是不是非常漂亮？但它的背后到底是什么呢？现在，我要施展一个小小的“魔法”。大家看，我按下F12键，网页的旁边就出现了这些密密麻麻的东西。这就是网页的“源代码”，是它构建了我们看到的一切。今天，我们就来揭开这个魔术的神秘面纱。 ‹#› 网页的“第一声啼哭” 万维网之父 蒂姆·伯纳斯-李（Tim Berners-Lee），一位在欧洲核子研究中心（CERN）工作的英国计算机科学家。他敏锐地发现了科研信息共享的痛点，成为了改变人类信息获取方式的关键人物。 “我只是想让科学家们能更方便地分享数据，没想到它会演变成今天的样子。” 1989：构想萌芽 蒂姆向CERN提交了一份名为《信息管理：一个建议》的文档。这份看似普通的提案，勾勒出了万维网的核心骨架——超文本、URI和HTTP协议，这是互联网诞生的理论基石。 从一份内部技术备忘录，到改变世界的互联网蓝图，这是科技史上最伟大的“灵光一现”之一。 1991：正式降临 8月6日，世界上第一个网站 http://info.cern.ch 正式上线。这个仅包含文字和链接的朴素页面，向公众展示了万维网的工作原理，也标志着互联网从封闭走向开放的第一步。 没有图片，没有视频，只有纯粹的信息。这声微弱的“啼哭”，开启了人类的数字新纪元。 这声稚嫩的“啼哭”，没有华丽的视觉包装，却打破了物理距离造成的信息孤岛。从info.cern.ch这个简单的文本页面开始，万维网如同细胞分裂般在全球迅速生长。它不仅改变了我们获取知识的方式，更重塑了商业、社交与文化，最终演变成了我们今天赖以生存的、丰富多彩的数字世界。 1.7.2013 网页的历史可以追溯到上世纪80年代末。这位就是蒂姆·伯纳斯-李，是他发明了万维网。在1991年，他发布了世界上第一个网站，就是屏幕上这个样子，非常简单，只是一些文字链接。但正是这声“啼哭”，开启了一个全新的数字时代。 ‹#› 从“黑白电视”到“IMAX影院” Web 1.0 · 只读时代 1990s - 2000s | 信息的单向输出 如同早期的黑白电视，网页主要由静态文字和图片构成。用户只能被动接收信息，像阅读报纸一样浏览，没有交互的按钮，也无法参与内容的创造与传播，网络世界安静而单调。 Web 2.0 · 互动浪潮 2000s - 至今 | 全民参与的网络 就像走进了五彩斑斓的彩色世界！社交媒体、视频平台和在线应用集中爆发，用户从旁观者变成了主角。点赞、分享、评论，我们不仅是信息的接收者，更是内容的创作者，让网络充满了鲜活的动态与情感连接。 Web 3.0 · 智能未来 未来已来 | 懂你的个性化体验 进化为身临其境的IMAX影院！AI技术赋予了网络“感知力”，它不再是冰冷的代码，而是能精准理解用户需求的智能伙伴。服务更个性化、数据更自主，让每一次网络连接都像私人定制，科技真正融入生活，带来无缝的智能新体验。 黑白电视：单向“看”世界 信息孤岛的时代，网页如同报纸版面，内容固定不变，用户没有参与感，只有单纯的浏览与接收。 彩色世界：互动“玩”起来 UGC内容爆发，社交网络连接你我。我们在网上分享生活、讨论热点，网络成为了一个充满人情味的、可交互的动态空间。 IMAX影院：智能“懂”心意 AI驱动的主动服务时代，系统能预判需求。去中心化与智能化并行，为用户提供沉浸式、个性化的未来数字生活体验。 1.7.2013 网页的发展就像电视的进化史。最早的Web 1.0时代，网页就像黑白电视，只能看，不能互动。后来进入Web 2.0时代，就像彩色电视，我们可以在上面聊天、分享视频，非常热闹。而未来的Web 3.0，将是更加智能的“IMAX影院”，能更好地理解我们，为我们服务。 ‹#› 我们的探秘之旅 从简单的文字到复杂的交互，网页的世界越来越精彩。而这一切变化的基础，就是我们今天要探秘的“代码”。在接下来的课程中，我们将一起揭开代码的神秘面纱，从理解原理到动手实践，开启一段奇妙的技术探索旅程。 看懂网页骨架 不再只停留在表面浏览，而是要学会透过现象看本质。我们将一起拆解网页的基础结构，看清页面背后的逻辑，明白各种元素是如何像搭积木一样有序排列，最终形成我们所看到的完整界面的。 认识核心成员 网页不是凭空产生的，它是由三位“核心成员”共同协作完成的。这节课我们将正式结识HTML、CSS和JavaScript，了解它们各自的分工与特长，明白它们是如何配合默契，共同构建出丰富多彩的互联网世界的。 亲手创造网页 纸上得来终觉浅，绝知此事要躬行。学习的最终目的是为了实践。在这节课的最后，我们将亲自上手，从修改简单的代码开始，尝试调整文字、样式与交互，亲手完成并运行你的第一个专属网页作品！ 1.7.2013 了解了网页的历史，我们正式开始今天的探秘之旅。这节课，我们有三个小目标：首先，要看懂网页的骨架是怎么搭建的；其次，要认识构建网页的三位核心成员；最后，也是最激动人心的，我们要亲手修改代码，创造出属于自己的第一个网页！大家有信心吗？ ‹#› 浏览器与服务器的“快递”之旅 你（需求发起者） 就像想收包裹的收件人，你的核心目标是获取想要的信息——也就是“看网页”。你是这次网络服务的起点，决定了要取什么“货”。 浏览器（快递员） 你手中的电脑或手机浏览器，是忠实的“快递员”。它接收到你的指令后，立刻出发，负责把你的需求准确无误地传达给存放资源的“仓库”。 服务器（大仓库） 网站真正“居住”的地方。就像装满了包裹的仓库，里面储备着你想看的网页、图片、视频等所有数字资源，时刻准备着响应外部的请求。 互联网（高速公路） 连接你家和仓库的信息大动脉。如同四通八达的高速公路网，让数据能够以极快的速度在你的设备和远程服务器之间来回穿梭，完成运输。 一次请求，一场跨越网络的接力 这趟“快递之旅”本质上是 HTTP 协议的工作缩影：浏览器发出取件请求，互联网作为高速公路负责数据传输，服务器作为仓库核对订单并打包资源，最后再由互联网送回，浏览器将这些代码资源渲染成我们眼中生动的网页。这个过程在毫秒间完成，简单的比喻背后，是一套精密且高效的全球网络通信逻辑。 1.7.2013 那么，当我们在浏览器里输入一个网址，网页是怎么出现在我们眼前的呢？我们可以把这个过程想象成一次“快递之旅”。你就是收件人，你的浏览器就是快递员，而网站所在的电脑，我们称之为“服务器”，就是存放包裹的仓库。互联网就是连接你们的高速公路。 ‹#› 第一步：打电话问地址 (DNS解析) 好记的“别名” 给快递员的“幸福大街100号” 我们日常输入的 www.baidu.com 这类网址，本质上是为了方便人类记忆而创造的字符地址，就像生活中朗朗上口的街道门牌号。 机器的“母语” 快递员只认的“192.168.1.1” 网络世界的设备（服务器、路由器）无法理解文字，它们只识别数字构成的 IP 地址。这才是互联网中唯一有效的“精确坐标”。 关键的“翻译官” 查“电话簿”完成地址翻译 当你输入网址后，DNS 服务器就像一本超级电话簿，将字符网址瞬间翻译成对应的数字 IP 地址。这个查找并转换的过程，就叫做 DNS 解析。 简单来说，DNS 解析就是互联网世界的“地址翻译服务”。它解决了“人类记不住长串数字”和“机器只认数字”之间的矛盾，让我们只需记住简单的网址，就能顺畅访问任何网站。 1.7.2013 快递员出发前，首先要知道仓库的地址。我们输入的网址，比如www.baidu.com，就像一个好记的地址名。但电脑网络只认识数字地址，也就是IP地址。所以，快递员需要先查一个叫做“DNS”的巨大电话簿，把网址翻译成IP地址，这个过程就叫做DNS解析。 ‹#› 第二步：发送请求与接收包裹 发送请求 (HTTP Request) 快递员找到了仓库地址后，就会发送一个“订单”，明确告诉仓库管理员：“我需要 www.baidu.com 这个包裹！”这就像我们在购物平台下单一样，明确告知商家我们的需求，是获取目标内容的第一步动作。 接收响应 (HTTP Response) 仓库管理员收到订单后，核对库存确认有货，就会回复“OK！”（对应状态码200）。随后将网页文件仔细打包，通过互联网高速公路发给快递员。这个过程是服务器对用户请求的正式回应，包含了我们最终需要的信息。 核心规则：HTTP 协议 这一系列“下单-确认-发货”的数字化流程，在互联网世界里遵循的通用标准就是 HTTP 协议。它规定了客户端（浏览器）与服务器之间如何沟通、数据如何传输，确保了信息交换的高效与准确，是现代 Web 技术运转的基石。 1.7.2013 找到地址后，快递员就会向仓库发送一个请求，也就是下订单。仓库收到订单后，会确认货物是否存在，如果没问题，就会回复一个“OK”，然后把我们想要的网页文件打包好，发送给快递员。这个请求和响应的过程，遵循的就是HTTP协议。 ‹#› 第三步：打开包裹并组装 (浏览器渲染) “快递员（浏览器）收到包裹后，并不会直接交给你，而是先打开包裹，把里面的零件拿出来，按照说明书一步步组装好，最后才把完整的网页呈现给你。这个过程就叫渲染。而这些关键的‘零件’，正是构建网页的三大核心技术：HTML、CSS和JavaScript。” 结构零件 · HTML 网页的“钢筋水泥”，定义内容的骨架与层级。它决定了页面上有什么元素，比如标题、图片还是按钮，是一切展示的基础。 样式外衣 · CSS 网页的“时尚穿搭”，控制色彩、字体、间距和布局。它让单调的内容变得美观，决定了网页的颜值和用户第一眼的视觉体验。 灵动灵魂 · JS 网页的“大脑指令”，赋予页面交互与动态能力。让按钮可以点击、数据可以计算、页面内容可以实时更新，带来鲜活的体验。 最终成果：浏览器将这三大“零件”精密组装，执行复杂的绘制逻辑完成【渲染】，一个图文并茂、可交互的生动网页就正式出现在你的屏幕上了！ 1.7.2013 快递员收到包裹后，任务还没完成。它需要打开包裹，把里面的各种零件，也就是我们后面要讲的HTML、CSS和JavaScript文件，按照说明书一步步组装起来，才能变成我们看到的完整网页。这个组装的过程，就叫做“渲染”。 ‹#› 网页是怎样“盖”起来的？ 我们可以把构建网页比作盖房子，它需要三位核心成员的紧密协作：一位负责搭建稳固的结构，一位负责赋予美观的外表，还有一位负责注入灵动的交互，共同构建出我们所见的精彩网络世界。 HTML 超文本标记语言 核心角色：网页的“钢筋骨架” 就像盖房子时搭建的地基与框架，HTML 决定了网页的基础结构。它定义了内容的逻辑层级，比如哪里是标题、哪里是段落、哪里是图片，为整个网页打下坚实的物理基础，是一切内容呈现的载体。 CSS 层叠样式表 核心角色：视觉的“装修大师” 如同为毛坯房进行精致的装修，CSS 负责网页的视觉呈现。从色彩搭配、字体样式到元素的间距与排版，它将单调的 HTML 骨架赋予独特的风格与美感，决定了网页的颜值和用户的第一印象。 JavaScript 脚本语言 核心角色：交互的“智能大脑” 相当于房子的智能中控系统，JS 赋予网页动态的交互能力。它能响应用户的点击、输入等操作，实现数据的实时更新和页面的动态变化，让原本静态的页面“活”起来，提供流畅且富有乐趣的使用体验。 1.7.2013 刚刚提到的包裹里有哪些零件呢？主要有三位核心成员，我们可以把它们比作盖房子的团队。HTML负责搭建骨架，CSS负责装修，而JavaScript则负责安装智能系统，让整个房子变得生动有趣。 ‹#› HTML：网页的“结构工程师” 核心定义 HTML 不是编程语言，而是网页的标记语言。它像建筑施工图一样，通过专属标签告诉浏览器内容的类型——“这是标题”、“这是段落”、“这是图片”，是构建一切网页的基础骨架。 成对标签机制 HTML的核心在于“成双成对”。标签通常以开始和结束的形式配合使用，如 <p> 和 </p>。这种对称结构像括号一样，清晰界定了内容的边界与层级，让浏览器能准确识别和渲染信息。 代码初体验 <h1>这是主标题</h1> <p>这是一个段落，承载着核心信息。</p> <img src="cat.jpg" alt="小猫" /> 寥寥几行简单的标记，就能让浏览器瞬间理解并呈现出有结构、有层次的网页内容。 如果网页是大楼，HTML就是钢筋混凝土结构 它不负责绚丽的装修（那是 CSS 的工作），也不负责复杂的交互功能（那是 JavaScript 的领域），但它决定了网页的基础形态——哪里是“楼层”、哪里是“房间”。没有 HTML，再精美的设计也无法落地，它是所有网络内容呈现的基石与起点。 1.7.2013 首先是HTML，网页的骨架。它不是编程语言，而是一种标记语言。它通过一对对的标签，比如<h1>表示标题，<p>表示段落，来告诉浏览器网页的结构和内容。就像盖房子的图纸，规定了哪里是墙，哪里是门。 ‹#› CSS：网页的“美妆造型师” 网页的“专属造型师” CSS 是网页的表现层，就像化妆师手中的画笔。它不改变网页的骨架（HTML），却能全权负责外观样式——从文字的色彩、字号，到元素的间距、背景和布局，让冰冷的代码拥有独特的视觉个性。 一行代码的魔法改变 h1 { color: rgb(64, 224, 208); font-size: 36px; margin: 20px; } ↑ 瞬间让标题醒目吸睛，排版更有呼吸感 素颜模式 · 纯HTML 只有最基础的文字和结构，没有任何修饰。页面样式单一、排版简陋，就像未装修的毛坯房，虽然功能可用，但缺乏视觉吸引力，难以留住用户的注意力。 一键焕新 注入灵魂 精致美妆 · CSS加持 色彩丰富、布局精美、交互生动。无论是背景的渐变、字体的韵律，还是响应式的灵动布局，CSS 让网页拥有了独特的品牌气质和良好的用户体验，从“能用”变成了“好用又好看”。 1.7.2013 有了骨架，我们还需要装修。CSS就是网页的“美妆造型师”，它负责网页的外观。比如，我们可以用CSS把标题变成蓝色，把字体变大，设置漂亮的背景。没有CSS的网页就像毛坯房，有了CSS，才能变得丰富多彩。 ‹#› JavaScript：网页的“动作导演” 核心定义 它是一门轻量级的编程语言，专注于网页的“行为层”。不同于HTML的结构和CSS的样式，JS赋予了静态页面真正的“生命力”，是实现动态逻辑的核心。 “如果说网页是一部电影，JS就是那个设计角色动作、控制剧情走向的导演。” 交互引擎 作为用户与页面的“沟通桥梁”，它能实时响应点击、滑动、输入等操作。从动态轮播图到复杂的表单校验，都是JS在背后进行即时反馈。 “让用户不再是旁观者，而是可以参与其中，触发事件、改变状态的参与者。” 极简实战 btn.onclick = function() { alert('Hello JS World!'); }; 仅需三行代码，即可实现点击按钮弹出问候。这就是JS的魔力——用简洁的语法创造无限的交互可能。 从“静态展示”到“动态交互”的关键一跃 如果说HTML构建了网页的骨架，CSS赋予了它华丽的外衣，那么JavaScript就是驱动它运转的肌肉与神经。它打破了信息的单向传递，让网页能够感知用户意图、实时处理数据并动态更新内容，是现代互联网产品从“可用”走向“好用”的核心技术基石。 1.7.2013 最后是JavaScript，网页的灵魂。它是一门真正的编程语言，负责让网页“动”起来。比如，你点击一个按钮弹出一个对话框，或者网页上的图片自动轮播，这些都是JavaScript的功劳。它就像一位动作导演，让网页充满了交互性。 ‹#› 缺一不可的团队 HTML · 骨架搭建 浏览器首要解析HTML文档，构建出DOM树结构。这就像建筑的钢筋水泥框架，为后续内容展示奠定了不可替代的物理基础。 核心作用：定义内容结构，承载页面的基础信息。 CSS · 视觉美化 基于DOM树结合CSS规则生成渲染树。它为单调的骨架添砖加瓦，通过定义色彩、布局与排版，将枯燥的结构转化为赏心悦目的视觉呈现。 核心作用：负责表现层，决定页面好不好看。 JS · 动态赋能 最后执行JavaScript脚本代码。它是页面的“发动机”，响应用户交互、实时修改内容与样式，让原本静态的画面拥有了灵动的生命力。 核心作用：实现交互逻辑，让页面“活”起来。 三位一体：从静态结构到动态交互的协作闭环 HTML是承载信息的“肉体骨架”，CSS与JS皆依附于它而存在；CSS作为“华丽外衣”负责视觉呈现；而JavaScript则是网页的“动态灵魂”，不仅能驱动页面响应用户行为，更能灵活地实时改写HTML的内容结构与CSS的样式规则。三者分工明确又紧密耦合，共同构建了我们如今所见即所得、丰富多彩的现代互联网世界。 1.7.2013 这三位成员是一个团队，缺一不可。浏览器会先读取HTML搭建骨架，然后用CSS进行美化，最后才执行JavaScript来添加动态效果。它们之间分工明确，又紧密合作，共同构建了我们看到的精彩网页。 ‹#› 网页的“标准户型图” <html> 根标签 HTML文档的最外层容器，所有的网页内容都包裹在这个标签内部，就像房子的整体地基与外墙。 <head> 头部信息 包含网页的元数据和配置信息，如字符编码、页面描述等，这部分内容通常不会直接显示在页面主体上。 <title> 页面标题 定义浏览器标签页上显示的文字，是用户识别页面的第一印象，也是搜索引擎抓取页面的关键标识。 <body> 主体内容 网页的核心可视区域，包含用户能看到的所有内容，如文字、图片、按钮、视频等元素都在这里呈现。 代码蓝图：最基础的HTML骨架 就像盖房子需要设计图纸，编写网页也需要遵循标准的文档结构。下方是一个极简的“Hello World”级网页代码，清晰展示了HTML各部分的层级关系与作用。 <html> <head> <title>我的第一个网页</title> </head> <body> <h1>欢迎来到我的世界！</h1> </body> </html> 1.7.2013 现在我们来深入了解一下HTML。一个标准的HTML文档有一个固定的结构，就像房子的户型图。<html>是根，<head>里放的是网页的标题等信息，<body>里才是我们能看到的内容。大家看这个例子，<title>里的文字会显示在浏览器的标签上，而<body>里的<h1>标题则会显示在页面上。 ‹#› 侦探任务：寻找关键标签！ 任务一：寻找标题 打开浏览器的开发者工具，化身小小侦探！在复杂的代码森林中，找到网页的大标题，看看它究竟被哪一个神秘的标签“保护”着？这可是理解网页结构的重要线索哦！ 核心揭秘：标题六兄弟 HTML 为我们准备了 6 个“标题特工”：<h1> 到 <h6>。记住一个规律：数字越小，地位越高！<h1> 是页面的“老大”，字号最大、最重要；而 <h6> 则是最“低调”的小弟，用于标注最细枝末节的信息。 案发现场：代码长什么样？ <h1>侦探任务：寻找关键标签！</h1> 这行代码就是我们在浏览器中看到的超大主标题。它不仅决定了文字的大小，更是搜索引擎和无障碍工具理解页面核心内容的“指路明灯”，是每个网页最重要的身份标识！ 1.7.2013 接下来，我们来玩一个侦探游戏。请大家打开开发者工具，找到网页的大标题，看看它在代码里被什么标签包围着？没错，就是<h1>标签。HTML提供了从<h1>到<h6>六个级别的标题，用来表示不同的重要程度。 ‹#› 侦探任务：寻找关键标签！ 任务二：寻找段落 在浏览网页时，我们总能看到一大段一大段的文字说明。请你化身小侦探，思考一下：在HTML代码的世界里，是哪一个标签负责定义这些段落文字的呢？它又有什么特殊的排版效果？ 关键线索提示 这个标签非常常用，是 Paragraph（段落）的缩写。它就像文字的“专属房间”，浏览器看到它就知道：“哦，这里开始是一个新的段落啦！”，并会自动在前后留出空行。 真相揭晓：<p> 标签登场！ 这就是定义段落的核心标签！它是网页排版的基础砖块。使用 <p> 标签不仅能让文本结构更清晰，还能利用浏览器的默认样式自动分隔内容，避免所有文字挤在一起，让读者的阅读体验更轻松。 代码编辑器：基础写法示范 <p>这是一段普通的文本内容，它被包裹在 p 标签中。在浏览器显示时，这段文字会形成一个独立的段落，前后会自动留出合适的间距，让页面排版看起来井井有条。</p> 1.7.2013 很好，我们继续。现在请大家找找看，网页中的大段文字，在代码里是用什么标签表示的？对了，就是<p>标签。<p>是paragraph的缩写，也就是段落的意思。它能让我们的文字排版更清晰，浏览器会自动为段落前后添加空行。 ‹#› 侦探任务：寻找关键标签！ 任务三：寻找图片 “网页里生动的图片是怎么被放进去的？代码世界里，又是哪句指令告诉浏览器：‘嘿，去把这张图片拿过来展示！’？这一次，我们要找到那个能唤醒视觉的关键标签！” 关键线索：<img> 单标签！ 它是HTML中的“图片传送门”，非常特别——不需要像段落标签那样写结束符号。只需要这一个标签，再加上两个关键“密码”，浏览器就能精准定位并展示图片，让网页瞬间生动起来！ src 属性：图片的“精准导航地址” 相当于给浏览器一张“藏宝图”，明确告诉它图片文件保存在服务器的哪个位置（可以是本地路径或网络链接）。没有正确的 src，浏览器就会“迷路”，页面上只会出现一个破碎的图片图标哦。 alt 属性：图片的“备用说明书” 当图片加载失败时，这段文字会代替图片显示；同时它也是视障用户的“眼睛”，屏幕阅读器会朗读这段描述。这不仅是用户体验的保障，更是让互联网内容对所有人都友好的重要设计！ 实战代码：<img src="my-cat.jpg" alt="一只趴在键盘上打盹的可爱橘猫" />—— 一行指令，让你的网页拥有“吸猫”时刻！ 1.7.2013 最后一个任务，我们来寻找图片。图片是怎么放到网页里的呢？答案是<img>标签。注意，它是一个单标签，不需要像<p>那样有结束标签。它最重要的属性是src，用来告诉浏览器图片文件在哪里。alt属性则是图片的文字描述，这对于网页的可访问性非常重要。 ‹#› 写代码的“规矩” 成对出现 大多数标签需要有开始和结束，就像说话要有开头和结尾一样。前后呼应，结构才完整，浏览器才能正确识别内容范围。 正确示范： <p>这是一段普通文本</p> 正确嵌套 标签的包含关系要像剥洋葱一样，从内到外依次闭合。绝对不能交叉嵌套，否则会导致页面结构混乱，样式出错。 避免错误： <p>这是<strong>重点</p></strong> 属性赋值 给标签添加属性时，属性值必须使用引号包裹。这是代码的“语法红线”，缺少引号可能会让浏览器无法正确解析参数。 标准写法： img src="cat.jpg" alt="猫" 1.7.2013 写代码也像我们写作文一样，有自己的规矩。第一，大多数标签要成对出现。第二，标签嵌套要正确，不能交叉。第三，给标签的属性赋值时，一定要用引号把值括起来。遵守这些规矩，才能写出浏览器能正确理解的代码。 ‹#› HTML标签速查卡 <html> 文档根标签 定义了整个HTML文档的根元素，是所有其他元素的容器。 <html>...</html> <head> 页面头部 包含文档的元数据，如字符集、关键词和页面标题等信息。 <head>...</head> <title> 页面标题 定义浏览器标签栏显示的标题，对SEO和用户体验至关重要。 <title>首页</title> <body> 文档主体 包含网页可见的所有内容，如文本、图片、视频和按钮等。 <body>内容</body> <h1> ... <h6> 层级标题标签 定义从最重要(h1)到最不重要(h6)的6个级别的页面标题，用于构建文档结构。 <h1>我的第一个标题</h1> <p> 段落标签 定义文本中的一个段落，是构建网页正文内容最基础的块级元素。 <p>这是一个普通的文本段落...</p> <img> 图像嵌入标签 用于在网页中嵌入图像，是单标签元素，必须包含src和alt属性。 <img src="pic.jpg" alt="风景"> 1.7.2013 好了，我们来总结一下今天学到的几个核心HTML标签。这张速查卡大家可以保存下来，方便以后复习。记住它们的作用和写法，是我们未来制作网页的基础。 ‹#› 动手改造你的第一个网页！ 打开源代码文件 找到准备好的 demo_simple.html 文件，用记事本或任意代码编辑器将其打开。这一步是进入网页“幕后”的关键，让我们能看到网页的本质——纯文本代码。 修改核心内容 在代码中找到 <body> 标签区域，尝试修改里面的文字。比如把默认的“欢迎来到我的网页”替换成经典的“Hello, World!”，感受对网页内容的掌控力。 见证实时变化 保存修改后的文件（快捷键 Ctrl+S），回到浏览器页面按下 F5 刷新。你会惊喜地发现，网页上的文字已经变成了你刚刚输入的内容，修改即刻生效！ 编辑代码 像写作文一样修改文本，或尝试简单的标签替换，这是创造的第一步。 保存修改 一定要记得保存！这是将你的想法从内存写入硬盘的关键动作。 刷新浏览器 让浏览器重新读取文件内容，是检验成果、获得即时反馈的最快方式。 1.7.2013 理论学习结束了，现在到了最激动人心的实践环节！我们要从“侦探”变成“创造者”。大家看我操作，我用记事本打开一个HTML文件，修改里面的文字，然后保存，再刷新浏览器。看，网页内容是不是立刻就变了？就是这么简单！ ‹#› 创造任务清单 (基础任务) 01 打开目标文件 在电脑桌面找到 my_page.html 文件，使用代码编辑器或系统记事本将其打开，准备开始修改。 02 更名网页标题 在代码中找到 <title> 标签，删除原有内容，替换成你自己的真实姓名，这将显示在浏览器标签页上。 03 注入个性名言 定位到页面的 <h1> 主标题区域，输入一句你最喜欢的名言警句，作为你的个人页面核心展示语。 04 书写自我介绍 在 <p> 段落标签内，用简短的文字介绍你的基本情况、兴趣爱好或对未来的小目标，展现独特的你。 STEP 1 · 精准编辑代码 对照任务要求，在编辑器中逐行修改对应的 HTML 标签内容。注意保留标签的尖括号语法，确保代码结构不被破坏。 STEP 2 · 及时保存修改 完成所有内容更新后，按下快捷键 Ctrl+S（Mac系统为 Cmd+S）保存文件。这是让修改生效的关键一步，不要忘记哦。 STEP 3 · 浏览器实时预览 回到浏览器页面，按 F5 键或点击刷新按钮。现在，你就能看到包含你名字、名言和自我介绍的专属网页了！ 1.7.2013 现在轮到大家动手了！请打开桌面上的`my_page.html`文件。这是一个基础任务，每个人都要完成。请按照屏幕上的步骤，把网页的标题改成你的名字，把主标题改成你喜欢的名言，再写上一段自我介绍。记得保存后刷新浏览器查看效果哦！ ‹#› 创造任务清单 (进阶任务) STEP 1 · 定位标签 仔细阅读HTML源代码，像侦探一样寻找关键的 `<img>` 标签。这是网页中负责显示图片的核心指令哦！ STEP 2 · 替换指令 找到 `src` 属性，把里面原来的文件名删掉，输入老师发的新图片名字（如 school.jpg）。这一步是给网页下达新的“取图”命令！ STEP 3 · 见证奇迹 保存修改后的代码文件，然后刷新浏览器页面。如果操作正确，你会发现网页上的图片已经变成新的啦！ 避坑指南：成功的关键细节 新图片文件必须和HTML文件在同一个文件夹里，就像书和书签要放在一起。另外，文件名的拼写和后缀（如 .jpg）要一字不差，大小写也要严格对应，否则网页就会“找不到”图片哦。 小组竞速挑战！ 现在开始！小组成员互相检查代码，比一比哪个小组能以最快速度完成图片的“乾坤大挪移”。第一个成功的小组将获得“金牌工程师”称号，大家加油！ 1.7.2013 完成基础任务的同学，可以挑战一下进阶任务。尝试找到`<img>`标签，把`src`属性里的文件名换成我提供的另一个图片文件名，看看能不能成功更换网页上的图片。大家可以小组讨论，看看谁能最快完成！ ‹#› 我们都是小小创造者！ 学生作品展示 邀请几位同学上台，向大家展示你亲手修改后的专属网页。从最初的基础代码框架，到亲手调整文字、更换色彩、插入图片，每一次小小的修改都是想象力的落地。看着原本平淡的页面变成独一无二的作品，这是属于每一位小小创作者最直观、最有成就感的高光时刻！ 互动分享时刻 谁愿意主动分享一下你的创作故事？告诉大家你重点修改了哪个部分，又加入了什么独特的新想法？当看到自己的名字、专属寄语出现在屏幕上时，是不是感到特别自豪？大胆说出你的设计思路，让我们一起见证你的创意，也为你的每一次进步鼓掌！ 每一个孩子都是天生的创造者！在这个过程中，你们不仅学会了用代码修改网页，更体会到了创造带来的快乐。无论是微小的文字调整，还是大胆的风格创新，这些都是你们探索数字世界、表达自我的宝贵尝试，也是成长路上闪闪发光的足迹。 1.7.2013 非常棒！看到大家都成功地修改了自己的网页，老师为你们感到骄傲。现在，有没有同学愿意来分享一下你的作品？告诉大家你修改了哪里，看到自己的名字和想法出现在网页上，是不是特别有成就感？ ‹#› 游戏时间：代码解密 解密挑战玩法 屏幕上将出现一段“加密”的代码，其中隐藏了关键的HTML标签。大家需要根据最终的显示效果，反向推理出缺失的标签内容。可以和身边的同学热烈讨论，当你有答案时，请立刻举手抢答！这不仅是技术的比拼，更是反应速度的较量哦。 看效果，猜代码 比如，我们想让文字“秘密”两个字在页面上显示为粗体，但原始代码中缺少了关键指令： 这是一个 <???> 秘密 </???> 请问：要实现加粗效果，这里的 <???> 应该填入什么标签呢？ Ready? Go! 小组限时挑战开启 现在，请各小组全员进入状态！接下来我将展示第一个“加密”谜题。你们有1分钟的讨论时间，需要在代码中找到那个“隐身”的标签。最先举手并准确说出答案的小组，将获得本轮的“代码破译先锋”积分奖励！ 1.7.2013 实践结束，我们来玩一个游戏放松一下！游戏叫做“代码解密”。我会给出一段缺少标签的代码和它的显示效果，你们需要猜出缺失的标签是什么。大家可以小组讨论，看哪个小组反应最快！ ‹#› 游戏进行 我的生日派对 _____ 我的生日派对 _____ 请问，要让文字变成像上方这样醒目的大标题，在 HTML 中需要使用什么标签来实现呢？ 答案：<h1> 生日蛋糕图片展示区 _____ src="cake.jpg" alt="生日蛋糕" _____ 网页的魅力离不开图片，请问要将这张美味的蛋糕图片插入到网页中，我们需要用到什么核心标签？ 答案：<img> 1.7.2013 请看第一题！屏幕上显示的是一个大标题，对应的代码里缺少了什么标签呢？请抢答！... 正确答案是<h1>！太棒了！我们来看第二题，要显示一张图片，应该用什么标签呢？... 没错，就是<img>！ ‹#› 游戏进行 题目 3：观察代码与显示效果的对应关系，找出能让文字“分段显示”的关键 HTML 标签。 浏览器显示效果 这是一段关于游戏规则的说明文字，介绍了通关的基本条件。 这是第二段文字，详细描述了完成任务后的奖励机制与积分规则。 对应代码片段 _____游戏规则说明_____ _____奖励与积分机制_____ 💡 核心问题 在 HTML 中，如果我们不使用任何标签，所有文字都会连在一起显示。要实现上述的“分段”效果（中间产生空行），我们需要在每段文字前后加上哪个标签来进行包裹呢？ 答案是... <p> 段落标签 (Paragraph)，网页排版的基础！ 1.7.2013 最后一题！这里有两段文字，它们在网页上是分开显示的，对应的代码里缺少了什么标签呢？... 答案是 <p>！大家都太厉害了！看来今天的知识都掌握得非常牢固。 ‹#› 我们的探秘成果 知识回顾 网页三剑客集结 今天我们一起揭开了网页的神秘面纱，正式认识了构建现代网页的核心“三剑客”——HTML、CSS与JavaScript。我们理解了它们各自在网页架构中的角色，也明白了这三者是如何协同工作，共同呈现出我们日常所见的丰富多彩的互联网世界。 核心发现 代码即网页的灵魂 网页并非一成不变的静态画面，而是由底层代码逻辑编织而成的动态产物。我们发现了一个神奇的真相：只要修改代码指令，就能像魔术师一样，实时改变网页的内容、视觉样式甚至交互行为。这让我们看到了技术的无限可能性。 实战技能 动手改变世界 我们不仅学会了浏览器开发者工具的基础使用方法，更迈出了关键的一步——亲手编写并修改了HTML代码。当看到屏幕上的内容随着我们输入的代码实时发生变化时，我们亲身体验到了技术带来的成就感，也开启了编程实践的探索之旅。 1.7.2013 好了，一节课的时间很快就过去了。让我们来回顾一下今天的探秘成果。我们认识了构建网页的三剑客：HTML、CSS和JavaScript。我们最重要的发现是，网页是由代码构成的，修改代码就能改变网页。并且，我们还亲手实践，学会了修改HTML代码。 ‹#› 做负责任的数字公民 警示 · 恪守边界 我们既然能修改自己电脑上的网页，就要明白，互联网上他人网站的代码，未经允许绝不能随意篡改。这不仅是违背网络道德的行为，更可能触及法律底线，带来不可挽回的后果。 底线思维：技术的使用必须止步于他人的合法权益，不越界是数字世界的基本准则。 思辨 · 保持清醒 网页内容可被修改的特性，也为我们敲响了信息时代的警钟。网络上纷繁复杂的信息并非天然真实，我们要始终保持独立思考的能力，对未知信息不轻信、不盲从，学会透过现象看本质。 媒介素养：让理性成为信息洪流中的定海神针，在海量数据中守护真实与客观。 在数字化浪潮席卷而来的今天，技术是我们探索世界的有力工具，但唯有心怀责任、保持思辨，才能在自由的网络世界中守住本心，成为既懂技术又有温度的负责任数字公民。 1.7.2013 在课程的最后，老师想强调一点。我们今天学会了修改网页，但这仅限于我们自己电脑上的文件。互联网上他人的网站，我们绝对不能未经允许去篡改，这是不道德的，甚至可能触犯法律。同时，这也提醒我们，网络信息是可以被修改的，我们要学会辨别信息的真伪。 ‹#› $