第16课 探秘网页与代码 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-05-21
|
37页
|
165人阅读
|
1人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第16课 探秘网页与代码 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 4.67 MB |
| 发布时间 | 2026-05-21 |
| 更新时间 | 2026-05-21 |
| 作者 | xkw_087412037 |
| 品牌系列 | - |
| 审核时间 | 2026-05-21 |
| 下载链接 | https://m.zxxk.com/soft/57974625.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
摘要：
该初中信息科技课件围绕网页开发基础，系统讲解HTML结构搭建、CSS样式美化及综合实践应用，从引导学生访问网站观察分析入手，逐步深入网页三大组成部分，通过标签语法、代码案例到个人主页制作，构建从生活实例到技术实践的学习支架。
其亮点在于以生活化类比（如HTML元素比作快递单）和互动挑战（代码找茬、设计标题结构）激发兴趣，融入计算思维（抽象网页结构）和数字化学习与创新（动手编写调试代码），帮助学生从信息使用者进阶为创造者，教师可借助清晰案例与实践任务提升教学效率。
内容正文：
第 16 课
探秘网页与代码
人教版初中信息科技 · 七年级全一册（2025-2026学年）
👩🏫 教师：[李老师] | 📅 日期：2026年5月
1.7.2013
‹#›
课程引入 - 我们每天都在“读”什么？
网页的本质
📖 定义：构成网站的基本单元，是一个存储在服务器上的纯文本文件，用来描述文字、图片和视频等信息。
✨ 为什么重要：理解这一点，是从互联网的“使用者”进阶为“创造者”的第一步。
📚 生活化类比：网页就像一本电子书。精美排版是“阅读界面”，而代码，就是它的“原始手稿”。
浏览器是“翻译官”
我们看到的图文，其实是浏览器将<html>、<img>等代码“翻译”渲染后的结果。
💡 小技巧：在任意网页空白处点击右键，选择“查看网页源代码”，就能看到它的“手稿”。
一起来试一试！
请打开浏览器，访问一个你最爱的网站（学习站、游戏站都可以）。思考两个问题：
1. 这个网站最吸引你的视觉或功能是什么？
2. 你觉得它背后的代码可能包含了哪些内容？
1.7.2013
‹#›
网页的三大组成部分
结构 · HTML
网页的“钢筋水泥”，负责搭建骨架，决定内容的层次和布局。
<h1>我的日记</h1> <p>今天天气好</p>
表现 · CSS
网页的“装修风格”，负责美化外观，决定文字颜色、大小、布局样式。
h1 { color: blue; font-size: 30px; }
行为 · JavaScript
网页的“智能家居”，负责实现动态效果、交互逻辑与功能响应。
alert("欢迎来到我的网站！");
🤔 课堂互动：观察教室布置，哪些是“结构”？哪些是“表现”？自动擦黑板的机器人属于哪一部分？
1.7.2013
‹#›
认识HTML - 网页的“骨架”
基础认知
📌 定义：HTML不是编程语言，而是标记语言。通过 `<>` 包裹的“标签”来定义网页的标题、段落、图片等结构。
🌟 为什么重要？它是所有网页的基石，是开启Web开发大门的第一步。
💡 生活化类比：就像写作文的标点符号和段落格式。没有它们，文字就是乱麻；有了它们，文章的骨架和逻辑就清晰了。
核心与案例
📝 标签用法：通常“成双成对”出现。一个开始标签，一个结束标签（带斜杠），中间包裹内容。
<p>这是一个段落。</p>
⚠️ 易错点：忘记写结束标签会导致页面布局混乱，浏览器无法正确解析。
课堂小思考
请回想一下：
写语文作文时，我们是如何区分标题、正文和引用的？
💡 提示：这和HTML用标签区分网页内容，是不是有异曲同工之妙？
1.7.2013
‹#›
HTML 标签的语法规则
定义与生活化类比
🔍 什么是HTML元素？
一个完整的元素就像：
<标签名 属性="值">内容</标签名>
属性是给标签补充信息的“说明书”。
📦 就像填写“快递单”
“收件人/地址/电话” =属性名
你填的信息 =属性值
填对了，浏览器才能“准确送达”页面内容。
规则与实战案例
💡 核心规则：
• 标签名不区分大小写，但推荐小写。
• 属性值通常需要用双引号 ""括起来。
📝 代码举例：
<a href="https://example.com">示例网站</a>
标签名：a (超链接) | 属性：href
属性值：链接网址 | 内容：示例网站
⚠️ 易错点：属性值漏写引号；开始/结束标签名不匹配。
课堂互动挑战
大家一起来找茬！
观察中间的代码案例：
1. 哪里是“标签名”？
2. 哪个部分是“属性”？
3. 它的“属性值”是什么？
快举手回答吧！
1.7.2013
‹#›
构建第一个 HTML 页面
基础结构解析
▍核心定义
•!DOCTYPE html: 告诉浏览器这是 HTML5 文档。
•<html>: 页面内容的“根”容器。
•<head>: 存放页面元信息（如标题）。
•<body>: 包含所有用户可见的内容。
▍生活化类比：写一封信
• 格式声明 = 信纸的标准格式要求。
• <head> = 信封上的邮编地址 (不可见但重要)。
• <body> = 信纸上的正文内容 (阅读重点)。
💻 核心代码案例
<!DOCTYPE html>
<html>
<head><title>我的第一个网页</title> </head>
<body><h1>欢迎来到我的网页！</h1> </body>
</html>
易错点提示：
千万不要遗漏成对的标签，顺序错了页面会“乱码”哦！
动手试一试
现在就行动起来：
1. 打开记事本，输入上方代码。
2. 保存文件名为：index.html。
3. 双击打开它，看看效果吧！
1.7.2013
‹#›
页面的“大脑” - <head> 部分
什么是元数据？
💡 核心定义：
描述数据的数据。它描述了网页本身的属性（如标题、作者、编码），不直接显示在页面正文上。
📌 为什么重要？
决定了网页在搜索引擎的“排名”和浏览器的正确解析。
📚 生活化类比：
就像一本书的扉页和版权页。不影响故事阅读，但提供了书籍的关键信息。
核心标签与案例
•<title>: 定义浏览器标签页上的文字。
•<meta charset="UTF-8">: 声明字符编码，保障中文正常显示。
<head>
<meta charset="UTF-8">
<title>我的个人简介</title>
</head>
⚠️ 易错点：忘记设置UTF-8会导致页面出现乱码！
一起来观察！
现在请打开浏览器
访问几个你喜欢的网站，看看浏览器顶部的标签栏。
✏️ 思考：
那些网站的 <title> 都写了什么？
1.7.2013
‹#›
网页的「身体」：<body> 标签
核心定义与类比
📌 是什么？
HTML文档的“主体”部分。我们在网页上能看到的所有内容，比如文字、图片、按钮、视频，全都被包裹在这个标签里面。
🎭 生活中的类比
如果说整个网页是一台舞台剧，那 <body> 就是那个大大的舞台。演员、道具、布景和灯光效果，都必须在这个舞台上呈现，才能被观众看到。
1.7.2013
‹#›
HTML 标题标签：构建内容的骨架 (<h1> - <h6>)
什么是标题标签？
📌 定义：共6级标签 (<h1>至<h6>)，数字越小，级别越高，字号越大，加粗显示。
🌟 核心价值：清晰划分页面内容层级，既方便用户阅读，也能帮助搜索引擎抓取重点。
📖 生活化类比：像书籍的目录结构：<h1>是书名，<h2>是章节，<h3>是小节名。
核心要点与代码示例
<h1>我的暑假计划</h1>
<h2>学习篇</h2>
<h3>完成暑假作业 | 阅读课外书</h3>
<h2>娱乐篇</h2>
💡 注意：标题标签自带换行效果，且一个页面通常只使用一次 <h1> 作为主标题。
❌ 不要这样做：不要为了单纯放大文字而滥用 <h1>，应依据内容逻辑选择。
互动小挑战
请为一篇关于
“我的周末”
的短文设计标题结构
要求：至少使用三种不同的
标题标签 (<h1> - <h6>)
1.7.2013
‹#›
HTML 段落标签：<p>
什么是 <p> 标签？
📝 定义：是 paragraph 的缩写。浏览器会自动在标签前后添加“外边距”，把不同段落清晰地分开。
💡 重要性：段落是文本组织的基本单位，它能让大段文字不再拥挤，结构更清晰，阅读体验更好。
🍎 生活类比：就像我们写作文，每段开头空两格，段与段之间会换行。
核心特性 & 案例
🔍 关键属性：它是“块级元素”，这意味着它在页面上会独占一行。
代码示例：
<p>清晨，阳光透过窗户洒在书桌上，新的一天开始了。</p>
<p>我伸了个懒腰，决定今天要完成一项重要的任务。</p>
⚠️ 易错点：禁止嵌套！一个 <p> 标签里不能再放另一个 <p>，浏览器无法正确解析。
课堂小挑战
请用两个 <p> 标签，分别描述一下你最喜欢的两种水果。
快动手试一试吧！
1.7.2013
‹#›
创建超链接 - <a> 标签
什么是 <a> 标签？
定义：它是 Anchor 的缩写，用于在网页上创建可点击的超链接。其核心属性是href，它决定了链接要跳转到哪里。
价值：没有超链接，网页就无法互联，也就没有今天的“万维网” (World Wide Web)。
类比：就像地图上的指示箭头，标签是箭头本身，href 就是箭头指向的目的地。
怎么写代码？
<a href="https://baidu.com">去百度</a>
<a href="#contact">联系我们</a>
💡 href 可以是外部网站 URL，也可以是页面内元素的 ID（需加 # 号）。
⚠️ 易错点：忘记给链接地址加引号，或拼写错了网址，都会导致链接失效。
小试牛刀
1. 分享时刻
写一个链接，指向你最喜欢的学习网站，让同桌也去看看。
2. 思考挑战
如果想让用户点击链接后，直接跳到页面最底部的“联系方式”区域，应该怎么实现？
1.7.2013
‹#›
<img> 标签：在网页中插入图片
示例：一只可爱的猫咪
这就是使用 <img> 标签
插入的效果
💡 核心知识点
定义：一个自闭合标签，通过src属性指定图片路径，alt属性提供图片说明文字。
类比：像在作文本上贴照片。<img> 是“贴”这个动作，src 是照片来源，alt 是照片旁的说明文字。
📝 代码示例
<imgsrc="cat.jpg"alt="一只可爱的猫咪"width="200"
1.7.2013
‹#›
创建无序列表：<ul> 与 <li> 的协作
📝 核心概念
定义：由 <ul> 标签包裹的列表，每个项目使用 <li> 标签，通常以圆点开头，无顺序要求。
生活类比：就像一份购物清单，“苹果”和“牛奶”没有先后顺序，只需要并列列出。
💻 怎么写？看这里！
HTML 代码演示：
<p>周末计划：</p>
<ul>
<li>完成作业</li>
<li>看一场电影</li>
</ul>
⚠️ 易错点：不要忘记把 <li> 放进 <ul> 里面，也不要直接在 <ul> 里写文字哦！
🤔 课堂小挑战
请试着用 <ul> 和 <li> 标签，列出你最喜欢的三项课外活动吧！
1.7.2013
‹#›
创建有序列表 - <ol> 和 <li>
🍳 生活化类比：菜谱步骤
“第一步：放油”、“第二步：放菜”...
顺序决定成败，就像有序列表一样！
核心定义
📌 标签 <ol>
用于定义有序列表，英文全称 Ordered List。
📌 自动编号
列表项 <li> 会自动生成数字或字母序号，非常适合展示操作指南、排行榜等有先后顺序的内容。
代码演示
<p>制作三明治：</p>
<ol>
<li>准备面包</li>
<li>涂沙拉酱</li>
<li>加生菜火腿</li>
</ol>
⚠️ 易错点：
在需要强调顺序的场景下，切勿错误使用无序的 <ul> 标签。
课堂挑战
请同学们快速构思：
如果用有序列表来描述你每天“从起床到出门上学”的过程，你会写几个 <li> 标签？分别是什么内容？
1.7.2013
‹#›
初识CSS - 为网页“化妆”
CSS 是什么？
定义：层叠样式表 (Cascading Style Sheets)，通过“选择器”精准选中HTML元素，赋予它们颜色、字体、大小等视觉属性。
核心价值：实现内容(HTML)与表现(CSS)的分离。一改全改，让网页设计更灵活，后期维护更轻松。
💡 生活类比：如果HTML是一本黑白线稿书，那么CSS就是你的全套画笔和颜料，负责给画面上色、填色。
核心规则与示例
CSS规则由两部分组成：选择器（找谁） +声明块（做什么）。声明块包含“属性: 值;”对。
/* 选中所有段落标签 */
p {
color: red; /* 红色文字 */
font-size: 18px;/* 18px大小 */
}
⚠️ 易错点：不要忘记属性值后的分号“;”；属性名要使用英文拼写（如 color）。
小试牛刀
如果想让页面上所有的<h1>标题，都显示为蓝色，字体大小为36px，应该怎么编写 CSS 规则？
1.7.2013
‹#›
如何将CSS应用到HTML？
01. 行内样式 (Inline)
直接在HTML标签的 style 属性里写CSS。
💡 类比：给每个人单独定制衣服，只对这一个标签生效。
<p style="color: blue;">...</p>
02. 内部样式表 (Internal)
写在HTML文件 <head> 中的 <style> 标签内。
💡 类比：在一个房间里发衣服，只对当前页面生效。
<style> p { color: blue; } </style>
03. 外部样式表 (External) 🎉
单独写在 .css 文件中，通过 <link> 标签引入。
💡 类比：建立统一的更衣室，全站页面都能复用。
<link rel="stylesheet" href="style.css" />
⚠️ 易错点：优先级
当多种方式同时使用时，样式会“打架”。记住优先级：
行内样式 > 内部样式表 > 外部样式表
🤔 互动思考
假设你要为一个有10个页面的网站，设置统一的背景颜色，你会选择哪种方式？为什么？
👉 答案：外部样式表 (最高效、易维护)
1.7.2013
‹#›
CSS基础选择器 - 元素选择器
核心概念解析
📝 定义：直接使用HTML标签名作为选择器（如 p, h1, a），会匹配页面上所有该类型的元素。
🌟 为什么重要：能高效地为页面上所有同类元素“批量”应用样式。
💡 生活化类比：“请所有同学到操场集合”。这里的“同学”就是元素选择器，选中了符合条件的所有人。
代码示例 & 避坑
/* 选中页面上所有 h1 标签 */
h1 { text-align: center; }
/* 选中页面上所有 p 标签 */
p { line-height: 1.5; }
⚠️ 易错点：元素选择器是“全局生效”的。如果你只想修改页面中某一个特定元素的样式，使用它就不合适了。
互动小挑战
请思考：
如何使用“元素选择器”，快速将页面上所有的超链接（也就是 <a> 标签）的文字颜色统一设置为绿色？
提示：color: green;
1.7.2013
‹#›
CSS基础选择器 - ID选择器
什么是 ID 选择器？
🔑 核心定义：
以#符号开头，后面紧跟元素的 ID 值。
🌟 唯一标识：
一个页面中，同一个 ID 只能出现一次，不可重复。
🗣️ 生活化类比：
就像“学号”，每个学生都有唯一的学号，点名时能精准找到那一个人。
代码示例与避坑
<div id="main-title">
这是我的主页</div>
#main-title { color: purple; }
⚠️ 常见错误：
给页面中多个不同的元素设置了同一个ID。这不仅违反HTML规范，还可能导致JavaScript无法正确获取元素，引发功能故障。
💡 课堂挑战
场景假设：
页面上有一个特殊的“公告栏”，需要让它一眼就能被注意到。
任务：
请写出一段HTML和CSS代码，实现：将这个公告栏的背景色设为醒目的黄色(#FFD100)。
1.7.2013
‹#›
CSS基础选择器 · 类选择器 (Class Selector)
什么是类选择器？
📌 核心定义：
通过元素的class属性来选中一组元素。定义时以.类名开头。
✨ 为什么重要？
实现样式的“复用”。一个类名可以同时赋予给多个不同的元素，统一设置样式。
🏃 生活化类比：
运动会上的“红队”。所有穿红色运动服的同学（元素），都属于“红队”（类）。
语法与案例演示
💡 核心点：一个元素可以拥有多个类，类名用空格分隔。
<p class="highlight">高亮文字</p>
<div class="highlight">高亮区域</div>
.highlight {
background: yellow;
font-weight: bold;
}
挑战与避坑
⚠️ 易错点：
千万不要忘记写.号！也不要把类选择器和ID选择器(#)混淆了。
✍️ 课堂小挑战：
请写出 CSS 代码，创建一个名为.warning的类，实现文字红色并加粗。
再在 HTML 中，让一个 <p> 和一个 <span> 都使用这个类。
1.7.2013
‹#›
CSS文本样式 - 颜色与字体
基础定义
color (颜色):控制文字色彩。支持颜色名(如red)、十六进制(如#FF0000)或RGB值。
font-family (字体):设置文字字体。例如“思源黑体”、Arial等。
💡 重要性：合适的色彩和字体是提升网页可读性和美观度的基石。
🖍️ 类比：就像出黑板报，选好粉笔颜色与字体模板，效果才出众。
代码实战 & 避坑
💡 技巧：指定多个字体作为“备选方案”，防止用户电脑未安装首选字体。
p {
color: #333333;/* 深灰 */
font-family:"Microsoft YaHei", Arial, sans-serif;
}
⚠️ 易错点：仅使用小众字体，导致页面在不同设备上显示不一致。
小试牛刀
请快速查阅资料：
1. 找到代表“天蓝色”和“草绿色”的十六进制颜色值？
💡 提示：颜色值通常以 # 开头，后面跟 6 个字母或数字。
1.7.2013
‹#›
CSS文本样式 - 字号与粗细
核心概念
📏 font-size (字号)
定义文本大小，常用单位为像素(px)或百分比(%)。网页默认大小通常为 16px。
💪 font-weight (粗细)
控制字重。最常用值为 normal(正常) 与 bold(加粗)。
✨ 作用：如同写作文时，把重点关键词“写大加粗”，能快速引导读者视线。
代码与避坑
h1 {
font-size: 36px;
font-weight: bold;
}
.important {
font-size: 20px; bold;
}
⚠️ 易错点：
不要把页面上所有文字都设置为 bold。如果全是重点，就等于没有重点，页面也会变得压抑。
课堂小挑战
请动手尝试：
创建一个 CSS 类`.note`，让使用该类的文本满足：
✅ 字号为 14px
✅ 不加粗 (normal)
1.7.2013
‹#›
CSS背景样式 - 背景颜色
核心知识点
background-color 属性
用于为HTML元素设置背景颜色，其取值方式与文字颜色 color 类似。
✅ 常用取值：颜色名称(red)、十六进制(#ff0000)、RGB/RGBA。
🎨 作用：区分不同内容区域，增加页面层次感与视觉吸引力。
🏠 生活化类比：给不同房间的墙壁刷上不同颜色。如：客厅刷米色，卧室刷淡蓝。
代码示例 & 避坑
body {
background-color: #f0f0f0; /* 浅灰 */
}
.header {
background-color: navy; /* 深蓝 */
color: white; /* 字体白色 */
}
⚠️ 易错点：
设置深色背景后，忘记将文字颜色调整为浅色（如白色），导致文本对比度不足，阅读困难。
💡 补充：background-color: transparent; 可将背景设为透明。
思考与挑战
如何将一个 <div> 元素的背景色设置为半透明的黑色？
半透明效果在网页遮罩层中非常常用。
💡 提示：
尝试使用 RGBA 颜色值设置透明度通道。
1.7.2013
‹#›
CSS背景样式 - 背景图片
核心概念 & 定义
📝 属性定义：
使用background-image: url("路径")为元素添加背景图。
💡 为什么重要？
突破单调的色彩限制，让网页更具设计感与个性化，增强视觉冲击力。
🏠 生活化类比：
给房间贴墙纸。网页是“房间”，背景图就是“墙纸”。
代码实践 & 易错
body {
background-image:url("bg.jpg");
background-repeat:no-repeat;
background-size:cover;
}
⚠️ 常见易错点：
误用尺寸过小的图片做背景，导致被拉伸后变得模糊不清，影响美观。
🤔 互动思考
如果希望背景图片只在水平方向上重复，应该如何设置background-repeat属性？
提示：想一想“水平”对应的英文单词。
答案: repeat-x
1.7.2013
‹#›
CSS盒模型：内容 · 内边距 · 边框 · 外边距
📦 盒模型四要素定义
内容(content)：盒子核心，存放文本、图片等
内边距(padding)：内容与边框间的“缓冲带”
边框(border)：包裹内容的“硬壳”
外边距(margin)：盒子与其他盒子的“空隙”
💡 核心计算逻辑
总宽度 = 内容宽 + 2×(内边距+边框+外边距)
.box{
width:200px;/* 内容宽 */
padding:20px;/* 四周留白 */
}
⚠️ 易错点提示：
设置 width 时，容易忽略内边距和边框，导致元素实际占据空间比预期大！
🧠 课堂挑战
算一算实际占据宽度
一个元素的样式如下：
• width: 100px
• padding: 10px
• border: 5px
它实际占多宽？
你的答案是？
1.7.2013
‹#›
CSS布局 - 浮动 (float)
浮动是实现图文混排的经典方法，
让文字自然地环绕在图片周围。
💡 核心概念与类比
元素脱离正常文档流向左/右浮动，让其他内容环绕。常用值：left、right、none。
🏊 生活类比：泳池中一人游到左边，其他人自然靠向右边，中间互不重叠。
📝 代码与注意事项
img { float: left; margin-right: 10px; }
⚠️注意：浮动元素可能导致父元素“高度塌陷”，需用 clearfix 清除浮动。
🚫避坑：不要滥用浮动做复杂页面布局，现代布局更推荐Flexbox / Grid。
❓ 课堂小挑战
如果想让图片靠右显示，文字出现在图片的左侧，代码该如何写？
1.7.2013
‹#›
CSS布局 - Flexbox 简介
📚 核心概念
🔑 定义：通过将父元素的display: flex;即可开启 Flex 布局，直接子元素自动成为 Flex 项目。
🌟 为什么重要：彻底解决“垂直居中”难题，轻松实现空间均分、自适应排列。比浮动更强大、更易用。
🧩 生活化类比：像一个可以自由伸缩的收纳盒，无论里面放什么物品，都能灵活调整位置和间距，填满空间。
⚠️ 避坑指南
Flex 属性仅对直接子元素生效。最常见的错误是：忘记给父元素设置display: flex;，导致子元素无任何Flex布局效果。
.container {
display: flex;/* 开启Flex布局 */
justify-content: space-around;
align-items: center;
}
🤔 课堂挑战
如何使用 Flexbox 让三个 <div> 元素在页面上水平并排，且两两之间的间距完全相等？
1.7.2013
‹#›
HTML表单 - 与用户交互
表单核心概念
● 定义：表单是网站收集用户信息的容器，核心标签是<form>。包含文本框、密码框、单选框、复选框等多种控件。
● 作用：是实现登录、注册、搜索、留言等交互功能的基础。
● 类比：就像一份纸质调查问卷，表单是问卷的“模板”，输入框是“问题”。
💡 核心语法：
<input type="text"> 文本输入
<input type="password"> 密码输入
<input type="submit"> 提交按钮
⚠️ 易错点
千万不要忘记设置name属性！否则提交时该字段数据将丢失。
课堂小挑战
请尝试写出HTML代码，设计一个表单，用于收集用户的：
1. 姓名（文本框） 2. 性别（单选） 3. 兴趣爱好（多选）
1.7.2013
‹#›
HTML 语义化标签：让代码“说话”
核心概念：不只是 <div>
定义：不仅是布局盒子，更描述内容用途（如头部、导航、页脚）。
价值：提升 SEO 排名 + 增强代码可读性 + 适配屏幕阅读器。
类比：就像写文章用“前言/目录/后记”，而非“第一块/第二块”。
避坑指南 & 代码示例
✅推荐写法：用 <header>、<nav>、<main>、<footer> 替代带ID的 div。
❌易错点：所有布局都只用 <div>，导致页面结构变成“黑盒”，难以维护。
💡 挑战：重构这段代码！
请将下面的“div”代码替换为语义化标签：
`<div id="header">...</div>` → ？
`<div id="menu">...</div>` → ？
1.7.2013
‹#›
开发者工具 - 浏览器的“透视眼”
📝 核心定义与价值
🔍 功能：实时查看网页HTML结构与CSS样式，支持直接在浏览器修改代码并即时预览效果。
💡 类比：像医生的X光机一样，透过网页“表面”看到底层的代码骨架。
⚡️ 快速上手与避坑
▶️ 打开方式：在Chrome中，按F12键 或 右键页面选择“检查”。
⚠️ 重要提醒：在工具里修改的内容仅在当前页面有效，刷新页面后会立即恢复原样，不要误以为修改了就永久生效了哦！
🎮 课堂小挑战
请大家现在打开开发者工具，找到我们刚才写的<h1>标签。
尝试在右侧的“样式”面板中，把标题的颜色（color）属性改成你喜欢的颜色，看看页面有什么变化？
1.7.2013
‹#›
综合实践 · 规划我的个人主页
💡 核心概念
📌 定义：明确个人主页要展示的内容（如个人信息、作品）及整体的布局结构。
🌟 为什么重要？逻辑严谨，避免“边做边改”，大幅提升编码效率。
🎨 生活化类比：规划就像画画前的“草稿”，是构建的蓝图。
📐 规划示例
✅ 方法：用纸笔手绘或思维导图梳理布局。
🏗️ 经典结构：
• Header: 头像、姓名、Slogan
• Nav: 导航栏 (首页/关于/作品/联系)
• Main: 个人简介、兴趣爱好、技能列表
• Footer: 版权信息或座右铭
⚠️ 易错点：不规划直接写代码，容易导致结构混乱，后期维护困难。
✏️ 课堂挑战
请拿出你的纸和笔，画出你的个人主页结构草图。
📝 要求：
1. 至少包含 Header, Main, Footer 三大区域。
2. 简单标注每个区域要展示的内容。
3. 发挥创意，画出你想要的风格。
1.7.2013
‹#›
综合实践 - 编写HTML结构
知识点解析
📌 核心定义
使用<header>、<nav>、<main>、<footer>等语义化标签，搭配<h1>、<img>等内容标签，搭建页面的骨架。
💡 为什么重要？
这是网页制作的第一步，正确的结构是后续美化和交互的基石。
🏗️ 生活化类比
就像根据建筑图纸，搭建房子的钢筋水泥框架。
核心与示例
💡 逻辑顺序：先搭建整体的大框架，再在框架内填充具体的文字、图片等内容。
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<header>...</header>// 头部
<main>...</main>// 主体内容
</body>
</html>
⚠️ 易错点：标签嵌套错误，如<ul>内直接写<p>。
课堂挑战
⏰ 动手时间
请同学们根据自己的“页面规划草图”，尝试编写个人主页的基础HTML结构代码。
GO! 开始编写
1.7.2013
‹#›
综合实践 - 添加CSS样式
核心知识点
📝 定义：使用元素、类、ID选择器，为网页元素设置颜色、字体、边距和背景等视觉样式。
✨ 为什么重要：这是让网页从“毛坯房”变成美观页面的关键一步。
🏠 生活化类比：为搭建好的房子进行“精装修”，确定风格与配色。
实操与示例
💡技巧：遵循“先整体后局部”的原则，先设置body样式，再细化header、nav等模块。
body {font-family: "Microsoft YaHei";background: #f4f4f4;}
header {color: white;background: #2c3e50;}
⚠️ 易错点：样式冲突或优先级导致效果未达预期。
课堂挑战
请为你的个人主页添加CSS样式，完成以下至少三点：
设置页面整体背景颜色或图片
美化页面标题（字体/颜色/大小）
为导航栏添加背景和内边距
1.7.2013
‹#›
常见问题与调试
什么是“调试”？
📝定义：发现并修复代码中的错误(bug)的过程。
🌟重要性：没人能写出完美的代码，它是解决问题的关键技能。
🧩类比：像玩拼图拼不上时，去检查是不是拿错了拼图块或放错了位置。
⚠️ 页面一片空白？
• 原因：文件路径错误，或HTML结构严重错误。
• 对策：检查文件路径，打开控制台(Console)看报错。
🎨 样式怎么不生效？
• 原因：CSS选择器写错、属性名/值有误。
• 对策：用浏览器“检查元素”查看样式是否被正确应用。
⚠️ 易错点提醒
遇到问题时，最忌讳：
1. 不知所措，陷入焦虑。
2. 盲目乱改代码。
💡 正确姿势：先冷静分析，再定位原因。
🤔 思考一下：
如果你的CSS样式没有生效，你觉得最可能的三个原因是什么？你会如何一步步排查这些问题？
1.7.2013
‹#›
网页开发的未来
技术进化：从“自行车”到“汽车”
HTML/CSS/JS 是带你起步的“自行车”，虽然基础但必不可少。而 React/Vue、WebAssembly 等新技术则是更高效的“汽车”，能带你更快、更舒适地到达目的地，适配更复杂的场景。了解趋势，能帮你更好地规划职业路线。
🤔 互动时刻：未来的网页长什么样？
你希望未来的网页具备什么现在没有的功能？会更像游戏、还是更像一个全息空间？
📱💻 响应式设计：一套代码，适配所有屏幕尺寸
前端框架
像“搭积木”一样开发，组件可复用，效率倍增
WebAssembly
浏览器也能跑高性能程序，轻松玩转3A游戏和视频剪辑
⚠️ 避坑指南
不要盲目追求新技术，打好HTML/CSS/JS的地基才是王道
1.7.2013
‹#›
课程总结：HTML & CSS 基础
核心回顾
📌 定义与分工：
• HTML 负责搭建网页的“骨架”与内容结构。
• CSS 负责网页的“穿搭”与视觉美化。
💡 为什么重要：
这是构建所有网页的基石，掌握它们意味着你已具备了从零创建简单网页的能力！
🍞 生活类比：
学会了如何制作面包 (HTML) 和如何给面包涂上美味的酱料 (CSS)。
关键工具箱
🔤 HTML 常用标签：
h1/p/a/img/ul/ol/form/header/main/footer 等基础与语义化标签。
🖌️ CSS 核心概念：
选择器、盒模型(margin/padding/border)、背景色、字体样式、Flex 布局等。
⚠️ 避坑指南：
编程技能“学完就忘”是常态，唯有不断动手实践，才能将知识真正内化为能力。
课堂小互动
请大家花 1 分钟时间思考：
“用三个关键词，
总结你今天的收获”
（例如：结构、样式、实践...）
1.7.2013
‹#›
课后作业与拓展
必做作业 · 个人主页
请继续完善你的个人主页项目，要求：
• 替换并优化个人生活照，调整尺寸与位置
• 为页面添加美观的背景色或背景图片
• 新增一个联系表单，包含至少三种不同类型的输入控件
拓展挑战 · 进阶技能
学有余力的同学，可以尝试以下任务：
• 学习“后代选择器”，为页面中的特定内容设置样式
• 探索 Flexbox 布局，尝试实现一个漂亮的三栏内容展示区
• 尝试为页面添加简单的鼠标悬停交互效果
避坑指南 · 易错点
“实践出真知”，千万不要：
❌拖延作业：趁热打铁才能更好地巩固知识
❌浅尝辄止：不要只完成最简单的部分，多尝试挑战自己
✅多问多查：遇到问题先尝试独立解决，再寻求帮助
课堂互动时刻：
除了个人主页，你还想制作一个什么样的网站？发挥你的想象力，和同桌分享一下你的创意吧！
1.7.2013
‹#›
感谢观看
欢迎随时提问 · 我们共同探讨
1.7.2013
‹#›
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。