第16课 探秘网页与代码 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-05-14
|
37页
|
104人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第16课 探秘网页与代码 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 7.30 MB |
| 发布时间 | 2026-05-14 |
| 更新时间 | 2026-05-14 |
| 作者 | xkw_7550 |
| 品牌系列 | - |
| 审核时间 | 2026-05-14 |
| 下载链接 | https://m.zxxk.com/soft/57852780.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第16课
探秘网页与代码
2025-2026学年 · 人教版初中信息科技 · 七年级全一册
主讲人：[教师姓名]
1.7.2013
同学们好！欢迎来到今天的信息科技课。在我们开始之前，我想问大家一个问题：你们每天都会上网，浏览各种各样的网页，对吗？那你们有没有想过，这些丰富多彩的网页背后，究竟隐藏着什么秘密？今天，就让我们一起开启一场奇妙的探索之旅，去揭开网页与代码的神秘面纱！
‹#›
课程导入 - 我们每天都在“逛”的世界
“ 网页是我们获取信息、娱乐和社交的主要方式 ”
01 定义 · Definition
网页是互联网上的基本文档，由文字、图片、视频等元素构成，通过浏览器向用户展示信息的数字载体。
02 价值 · Value
它是信息时代的“超级百科全书”与“全球大商场”，让我们足不出户便能了解世界、学习知识、与亲友交流。
03 类比 · Analogy
如果说互联网是一座存放海量知识的巨大数字图书馆，那么，一个个网页就是其中可以无限翻页的“魔法书”。
🎯 互动任务：请打开你最常用的网站，快速观察一下：它由标题、图片、按钮等哪些部分组成？
💡 思考时刻：这些丰富多彩的网页是如何制作出来的？是不是和用Word写作文一样简单？
1.7.2013
同学们请看屏幕，这些网站是不是都非常熟悉？B站、淘宝、QQ空间……它们都是我们日常生活中离不开的网页。网页就像一本本神奇的魔法书，互联网就是那个巨大的图书馆。我们每天都在这个图书馆里遨游。那么，这些精彩的“魔法书”是如何被创造出来的呢？这就是我们今天要探索的秘密。
‹#›
揭秘网页的“三剑客”
HTML · 结构之骨
超文本标记语言，是网页的“骨架”，决定了内容的组织方式。
💡 形象类比：建筑设计师绘制的房屋结构图。
CSS · 样式之皮
层叠样式表，是网页的“皮肤”和“装修”，负责颜色、字体、布局等视觉表现。
💡 形象类比：室内设计师，决定墙壁颜色与家具风格。
JavaScript · 行为之魂
赋予网页生命力的编程语言，负责交互逻辑和动态效果，让网页“动起来”。
💡 形象类比：电工与程序员，让灯光亮起、电梯运行。
🎮 互动任务：大家来找茬
对比纯HTML网页与“三剑客”协同制作的网页，说说它们分别发挥了什么作用？
🤔 思考时刻
如果只能选择一位“剑客”来制作网页，你会选谁？为什么？
1.7.2013
要建造一栋漂亮的房子，需要设计师、装修师和电工。同样，要制作一个精彩的网页，也需要三位“剑客”的通力合作。它们就是HTML、CSS和JavaScript。HTML负责搭建骨架，CSS负责美化装修，而JavaScript则负责让网页动起来，充满活力。接下来，我们就来认识一下这三位神奇的“剑客”。
‹#›
网页的“快递”之旅
💡 核心概念：网页的浏览过程，就是电脑（客户端）向服务器发送请求，服务器打包网页并“快递”回来的过程。
▌ 什么是“请求”与“响应”？
你在浏览器输入网址并回车 →发出请求 (Request)→ 服务器接收到请求，将HTML、图片等网页文件打包 →返回响应 (Response)→ 浏览器将文件组装成你看到的网页。
🗺️ 角色类比：就像点外卖
你(用户) → 下单(请求) → 餐厅(服务器) → 打包饭菜(网页文件) → 外卖员(互联网) → 送到你家(浏览器显示)
👥 课堂互动：角色扮演
请三位同学分别扮演：用户、浏览器、服务器，现场模拟一次网页请求的全过程。
🤔 思考时刻
如果“后厨太忙”(服务器过载) 或者“找不到你要的菜”(网页不存在)，你的浏览器会发生什么？
1.7.2013
我们每次浏览网页，都像在进行一次“快递”之旅。我们是顾客，在浏览器这个APP里下单，服务器这个后厨接到订单后，把做好的网页“饭菜”打包，通过互联网这个外卖小哥，送到我们的电脑上。这个过程，就是请求与响应。理解了这个过程，我们就能明白网络是如何工作的。
‹#›
准备我们的“武器”——代码编辑器
编写代码就像写文章或画画一样，也需要趁手的工具 ——代码编辑器，它是程序员不可或缺的“神兵利器”。
❖ 定义与价值：它是为程序员量身定制的文本编辑器，提供语法高亮、自动补全和错误提示，帮助大家高效、舒适地写代码，大幅提升开发效率。
❖ 形象类比：如果说写作文需要钢笔，画画需要画笔，那么写代码就需要“代码编辑器”。这是开启编程之旅的第一步。
在线工具：repl.it / CodePen
无需安装，浏览器即开即用
桌面软件：VS Code
功能强大，专业开发者首选
动手任务：初探编辑器
请打开浏览器访问 repl.it，尝试创建一个新的 HTML 项目。观察界面，找一找哪里是“代码编写区”，哪里是“效果预览区”？
思考：能用 Word 写代码吗？
为什么我们不能直接用Word来写代码？（提示：Word 会在文档中添加很多我们看不见的隐藏格式代码，这些会干扰程序的运行）
1.7.2013
工欲善其事，必先利其器。要学习编程，我们首先需要一把趁手的“武器”——代码编辑器。它就像我们的画笔和颜料。
今天，我们将使用像repl.it这样的在线编辑器，它非常方便，打开浏览器就能用。让我们一起动手，准备好我们的“武器”，开始我们的创作吧！
‹#›
PART 01
HTML - 网页的骨架
HyperText Markup Language · 网页开发的基石
1.7.2013
好了，现在我们已经认识了网页的“三剑客”，也准备好了我们的“武器”。接下来，让我们首先聚焦第一位“剑客”——HTML。它负责构建网页的骨架，是所有网页的基础。让我们一起走进HTML的世界！
‹#›
初识HTML - 网页的“骨架”
核心认知：HTML 不是一门编程语言，而是用「标签」来描述网页结构的标记语言。
📝 标签是什么？
•定义：由尖括号 `< >` 包围的关键词，通常成对出现（如 `<p>` 和 `</p>`），是给浏览器的“排版指令”。
•类比：如果网页是一篇文章，标签就是文章的标点符号和段落格式，定义了哪里是标题、哪里是正文。
🔍 第一个网页代码
<!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head>
<body> <h1>你好，世界！</h1> <p>这是我的第一个HTML网页。</p> </body> </html>
🛠️ 动手试一试：
打开repl.it，输入右侧代码并运行。尝试修改 `<title>` 里的文字，看看浏览器标签页有什么变化？
⚠️ 避坑指南：
1. 记得写“结束标签”，不要漏掉反斜杠 `/`。
2. 虽然HTML不严格区分大小写，但建议养成全小写的好习惯。
1.7.2013
HTML的核心就是“标签”。大家看，这些被尖括号包围的关键词，就像是给浏览器的指令。比如<h1>告诉浏览器，这是一个大标题。<p>告诉浏览器，这是一个新段落。就像我们写作文需要标点符号一样，HTML用标签来组织内容。现在，让我们亲手写下第一行代码，感受一下吧！
‹#›
HTML标题标签 - 网页的“各级标题”
核心概念与价值
📌 定义：从 <h1> 到 <h6> 共六级，定义不同重要程度的标题，构建网页信息骨架。
🌟 价值：既方便用户快速浏览理解内容结构，也能帮助搜索引擎抓取关键信息。
📖 类比：就像书籍的目录。<h1>是“书名”，<h2>是“章节名”，<h3>则是“小节名”。
代码结构示例
<h1>动物世界</h1>
<h2>哺乳动物</h2>
<h3>猫科动物</h3>
<p>包括狮子、老虎、家猫等...</p>
<h2>鸟类</h2>
动手试一试：我的“最爱电影”网页
1. 用 <h1> 写电影名称；
2. 用 <h2> 写“剧情简介”、“主要演员”等次级标题；
3. 用 <p> 标签补充详细内容。
避坑指南：不要“越级”使用
❌错误示范：<h1> 后直接跟 <h3>。
💡正确认知：标题标签是用来表示内容的逻辑层级，而不是简单调整字体大小的工具。层级混乱会影响用户体验和SEO效果。
1.7.2013
一篇好文章需要有清晰的章节结构，网页也是如此。HTML提供了从<h1>到<h6>六个级别的标题标签，就像书的目录一样。
<h1>是最重要的主标题，通常一个页面只有一个；<h2>是章节标题，用于分割大的内容块；以此类推。合理使用它们，可以让我们的网页结构清晰，条理分明，不仅用户看着舒服，搜索引擎也能更好地抓取关键信息。
大家要注意，标题标签不仅仅是用来调整字号大小的，更重要的是表达逻辑关系，千万不要出现“越级”的情况。接下来，请大家动手创建一个介绍你喜欢的电影的网页，练习一下这些标签的使用。
‹#›
HTML段落与换行 - 让文字有条理
核心语法：段落与换行
用<p>标签包裹一整段完整文本；用自闭合标签<br>在段落内部实现强制换行，二者搭配使用让文本结构清晰。
📝 定义：浏览器会自动在 <p> 标签前后添加空白，用于区分不同语义块；<br> 仅在当前位置中断文本，不产生新段落。
✨ 价值：规范的分段和换行，是提升网页可读性的基础，能有效降低用户的阅读疲劳感。
🖋️ 类比：写作文时，另起一行空两格就是 <p>；在行末画一条斜线“//”不另起一段，就是 <br>。
💻 代码演示：
<p>这是第一段。它包含了一些文字，阐述一个观点。</p>
<p>这是第二段。浏览器会自动在我和上一段之间留一些空白。</p>
<p>这是第三段，<br>这里换行了，但我仍然属于第三段的内容。</p>
✍️ 动手任务：写一段关于你的周末计划的文字，要求至少包含两个段落，并在其中一个段落里使用 <br> 进行换行。
⚠️ 易错点提示：不要在代码里按多次空格或回车来调整页面布局。HTML中多个空格/换行通常被解析为一个空格，精确的页面布局需要使用 CSS。
1.7.2013
写文章要分段，网页内容也一样。<p>标签就是用来划分段落的，它会自动在段落前后留出空白。如果想在段落中间换行，就需要用到<br>标签。记住，在HTML里，再多的空格和回车，浏览器也只会当作一个空格来处理。所以，一定要用正确的标签来控制格式。
‹#›
HTML链接 - 网页的“超能力”
核心：<a> 标签
📝 定义：即 Anchor (锚点)，通过 href 属性定义链接的目标地址，是创建超链接的核心。
🌐 价值：互联网的“灵魂”。它将孤立的网页编织成网，实现了信息的自由跳转与互联。
📚 类比：就像书籍中的“详见附录”或“参见第XX页”，指引你从一处内容无缝跳转到另一处。
💻 代码示例
<p>访问我的学校官网：<a href="https://www.example-school.edu.cn">阳光中学</a></p>
<p>打开一个新窗口：<a href="https://www.bilibili.com" target="_blank">B站</a></p>
动手任务：我的收藏夹
创建一个网页，列出至少3个你喜欢的网站链接（如游戏、视频、学习类）。
挑战：尝试让其中一个链接点击后在新窗口打开。
易错点提示
1. 不要忘记给 href 的值加上英文引号。
2. 检查链接是否有效最直接的方法：点击它。
1.7.2013
互联网之所以被称为“网”，就是因为有无数的链接将网页串联起来。这个神奇的功能就是由<a>标签实现的。通过href属性，我们可以指定要跳转到的网址。这就是网页的“超能力”，让我们可以在信息的海洋中自由穿梭。
‹#›
HTML图片 · 让网页“活”起来
核心语法：使用 <img> 标签在网页中插入图片
它是一个自闭合标签，通过src定位资源，alt提供描述。
🎯价值：极大丰富内容，增强视觉冲击力，“一图胜千言”。
🖼️形象类比：<img> 标签是一个“相框”，src 是照片所在的抽屉，alt 是相框背后的说明。
💻 代码示例：
<p>这是我的宠物猫：</p>
<img src="my_cat.jpg"
alt="可爱的橘猫"
width="300">
📝 动手与避坑：
•任务：复制图片URL到 src，给它起个alt名字。
•避坑：检查路径是否正确；不要忘记写 alt 属性，对用户和SEO都很重要！
1.7.2013
“一图胜千言”，图片能让我们的网页变得生动有趣。在HTML中，我们使用<img>标签来插入图片。
大家看左边的这个相框，这是一个很好的比喻：`src`属性就像相框背后的“地址”，告诉浏览器去哪里找这张图片；`alt`属性则是写在背面的“说明文字”，当图片因为网络或路径问题无法显示时，它能告诉用户这里本该是什么。这是一个非常重要的无障碍属性，体现了对所有用户的尊重。
现在，请大家动手在自己的个人介绍页面里，试着插入一张你喜欢的生活照或者风景照吧。记得要先右键复制图片的网络地址哦。
‹#›
HTML列表 - 让信息更有序
核心概念与价值
标签定义：<ul> (无序列表，如圆点清单) | <ol> (有序列表，如数字步骤) | <li> (定义每一个列表项)。
核心价值：将碎片化信息结构化，提升内容的可读性和逻辑清晰度。
形象类比：<ul> 像“购物清单”(无序)，<ol> 像“菜谱步骤”(有序)。
实战与避坑
🎯 动手任务：用 <ul> 列出你最爱的电影的演员，用 <ol> 列出它的获奖记录。
⚠️ 易错点：切记 <li> 标签不能单独使用，必须放在 <ul> 或 <ol> 标签内部。
代码演示
<h3>我的爱好（无序列表）</h3>
<ul>
<li>打篮球 </li>
<li>看电影 </li>
<li>编程 </li>
</ul>
<h3>周末计划（有序列表）</h3>
<ol>
<li>早上：完成作业 </li>
<li>下午：去公园玩 </li>
<li>晚上：看一本书 </li>
</ol>
1.7.2013
当我们需要列出一系列相关的信息时，列表就派上用场了。HTML提供了两种列表：无序列表`<ul>`和有序列表`<ol>`。无序列表就像购物清单，没有固定顺序；有序列表则像操作步骤，顺序至关重要。通过`<li>`标签定义每一个列表项，我们可以让信息变得井井有条。
‹#›
HTML 表格：规整的“数据表格”
核心定义与价值
📝 标签解析：用<table>定义整张表，每一行是<tr>，单元格是<td>。
💡 核心价值：展示成绩单、课程表等“二维数据”的最佳载体，逻辑清晰。
🎯 通俗类比：像我们用的格子本，本子是 table，横线行是 tr，小格子是 td。
代码示例：成绩单
<table border="1">
<tr> <td>姓名 </td> <td>语文 </td> <td>数学 </td> </tr>
<tr> <td>张三 </td> <td>95 </td> <td>98 </td> </tr>
<tr> <td>李四 </td> <td>92 </td> <td>90 </td> </tr>
</table>
🛠️ 动手挑战：制作课程表
创建一个简单的课程表，至少包含周一至周五的列，以及上午三节课的行，填入你熟悉的课程名。
⚠️ 避坑指南
1. border="1"仅作学习用，真实开发用CSS控制样式更灵活。
2. 表格是用来展示“数据”的，不要用来做网页的整体布局。
1.7.2013
如何清晰地展示像课程表、成绩单这样的二维数据呢？答案就是表格。HTML中的<table>标签就像我们的格子本，<tr>代表一行，<td>代表一个单元格。通过组合它们，我们就能创建出结构清晰的表格。不过要记住，表格是用来展示数据的，而不是用来做网页布局的哦。
‹#›
HTML表单 - 与用户“对话”
定义与价值
▍什么是表单？
使用 <form> 标签创建容器，内部可包含 <input> (输入框、按钮)、<textarea> (文本域)、<select> (下拉菜单) 等交互元素。
▍它有什么用？
网站收集用户信息的主要方式，例如：登录账号、注册会员、站内搜索、提交意见反馈等。
▍形象类比
就像一份“调查问卷”或“申请表”，网站通过它向用户“提问”并收集答案。
代码示例
1.7.2013
‹#›
HTML语义化标签 - 让代码更“有意义”
核心知识
💡 定义：除了定义结构，还能清晰描述内容含义的标签。如 <header> 代表头部，<footer> 代表尾部。
✨ 价值：代码更易阅读维护，利于搜索引擎抓取 (SEO) 与无障碍访问适配。
📚 类比：就像给文章贴上“封面、目录、正文、后记”的标签，而非简单的“纸张1、纸张2”。
代码结构示例
<body>
<header></header>
<nav></nav>
<main>
<article></article>
</main>
<footer></footer>
</body>
思考与实践
🤔 思考：对比 <div id="header"> 和 <header>，哪个更好？为什么？
✍️ 动手：尝试重构你的个人主页代码，优先使用语义化标签替代无意义的 div 堆砌。
⚠️ 避坑：避免“div 万能论”。虽然 div 很通用，但在表达特定页面区块时，优先使用语义化标签。
1.7.2013
写代码不仅要让电脑能看懂，更要让人能看懂。HTML5引入了一系列语义化标签，比如<header>表示页眉，<footer>表示页脚，<main>表示主要内容。使用这些标签，我们的代码就像贴上了清晰的标签，结构一目了然。这不仅方便我们自己维护，也有利于搜索引擎更好地理解我们的网页内容。
‹#›
HTML总结与实践
核心回顾
构建完整网页骨架
HTML 不是一门编程语言，而是一种标记语言。通过合理嵌套标签、使用属性和遵循语义化结构，我们可以为网页赋予清晰的骨架，让浏览器理解并正确展示内容。
掌握 HTML 的核心在于理解标签与内容之间的对应关系。
关键要素拆解
📌 标签 (Tags)
HTML的基本单位，用于描述不同类型的内容（如标题、段落、图片）。
🔧 属性 (Attributes)
为标签提供额外的信息和功能（如链接地址、图片描述）。
🏗️ 结构 (Structure)
通过标题层级、列表、表格等元素，构建逻辑清晰的页面骨架。
任务：制作个人名片
请综合运用所学，完成一个“个人名片”网页：
1. 一个醒目的标题（你的名字）
2. 插入一张个人照片
3. 一段简短的自我介绍（段落）
4. 用无序列表列出你的爱好
5. 一个链接指向班级博客或学校官网
展示与分享
邀请同学展示作品，并讲解自己用到了哪些关键的 HTML 标签。
1.7.2013
到这里，我们已经学习了HTML的大部分基础标签。现在是时候把它们综合起来，做一个完整的作品了。请大家动手创建一个属于你自己的个人名片网页。这个任务将用到我们今天学到的标题、段落、图片、链接和列表等知识。完成后，我们会邀请几位同学来分享自己的作品。
‹#›
PART 02
CSS - 网页的皮肤
CASCADING STYLE SHEETS
1.7.2013
我们已经用HTML搭建好了网页的骨架，但它看起来还很朴素。接下来，让我们请出第二位“剑客”——CSS。它就像一位神奇的造型师，能为我们的网页“穿上漂亮的衣服”，让它变得五彩斑斓，魅力十足。
‹#›
初识CSS — 为网页“穿上漂亮衣服”
核心定义：网页的“造型师”
层叠样式表 (CSS) 是一门用于控制 HTML 文档外观和格式的语言，决定了网页看起来是什么样子。
▍规则构成：由“选择器”（选谁）和“声明块”（怎么变）组成，例如“h1 { color: red; }”。
▍核心价值：实现了内容(HTML) 与 表现(样式)的彻底分离，让修改与维护更高效。
▍趣味类比：HTML是模特，CSS是造型师。同一个模特，换个造型师就能换百套风格。
✏️ 动手小任务：在 HTML 的 <head> 中添加 <style>，尝试将所有段落(<p>)的颜色改为红色。
⚠️ 避坑指南：属性值后千万不要忘记写分号(;)，以及注意拼写 color 不要写成 colour。
💡 基础代码示例：
<style>
h1{color:blue;font-size:36px; }
</style>
<h1>我是蓝色的大标题 </h1>
1.7.2013
CSS的工作方式很简单：首先用“选择器”找到你想要美化的HTML元素，然后在“声明块”里告诉浏览器要怎么美化它。比如，我们可以选择所有的<h1>标题，然后告诉浏览器把它们变成蓝色，字号变大。这样，内容和样式就分开了，我们可以轻松地更换网页的“造型”。
‹#›
CSS选择器 - “精准打击”目标元素
📝 核心概念：三种基础选择器
元素选择器 (Element Selector)如: p, h1, div
📢 类比：广播通知，对“所有人”（页面上所有同类型元素）说话。
ID 选择器 (ID Selector)如: #my-title, #header
🔎 类比：点名叫一个同学，在页面中必须是“唯一”的。
类选择器 (Class Selector)如: .highlight, .warning
👥 类比：对某个“兴趣小组”说话，可同时选中多个元素。
/* 1. 元素选择器：所有p标签变灰 */p { color: gray; }
/* 2. ID选择器：选中id="special"的元素 */#special { font-weight: bold; }
/* 3. 类选择器：选中class="warning"的元素 */.warning { color: red; }
<p>普通文本</p> <p id="special">特殊</p> <div class="warning">警告</div>
动手挑战：改造个人名片
1. 用#名字选择器，把名字变成蓝色。
2. 创建一个.important类，让自我介绍段落加粗并斜体。
⚠️ 易错点提示
一个页面中，ID选择器的值必须是唯一的，不能重复使用。而类选择器则没有这个限制，可以在多个元素上复用。
1.7.2013
要精准地美化网页，我们需要强大的“选择器”。元素选择器像广播，影响所有同类元素。ID选择器像点名，只针对一个独一无二的元素。而类选择器则像小组通知，可以同时选中多个元素。灵活运用这三种选择器，我们就能对网页进行“精准打击”。
‹#›
CSS颜色 - 为网页“调色”
核心概念：为网页赋予色彩
CSS 为开发者提供了多种灵活的方式定义颜色，包括直接使用颜色名称、通过 RGB 数值定义以及使用精确的十六进制色值。
▍定义与价值
颜色名（如 red）简单直观，RGB 值与十六进制值则提供了精准的色彩控制。丰富的色彩是提升网页视觉吸引力的关键。
▍形象类比
CSS颜色值就像画家的调色板。颜色名是“成品颜料”，而 RGB/十六进制是让你用“三原色”自由调配的工具。
📝 动手任务：用浏览器取色器，从喜欢的图片中提取一个颜色的十六进制值，将网页标题设为此色。
⚠️ 易错点：RGB数值范围是 0-255，超出范围会被自动截断；十六进制必须以“#”开头。
/* 1. 使用颜色名 */
h1 { color:blue; }
/* 2. 使用 RGB 值 (橙色) */
p { color:rgb(255, 165, 0); }
/* 3. 使用十六进制值 (绿色) */
.highlight { color:#008000; }
小技巧：
十六进制值 #F00 是 #FF0000 的简写，常用于快速书写纯色。
1.7.2013
色彩是网页设计的灵魂。CSS为我们提供了一个巨大的调色板。我们可以直接使用red、blue这样的颜色名，也可以像画家一样，用RGB值或十六进制值来精确调配出任何颜色。掌握了颜色的用法，你就能让你的网页变得五彩斑斓。
‹#›
CSS字体 — 改变文字的“风格”
核心属性定义
• font-family (字体类型)
设置字体的家族，如微软雅黑、宋体、Arial等。浏览器会按顺序查找用户电脑中已安装的字体。
• font-size (字体大小)
控制文字尺寸。常用单位: px (像素，固定值)、em (相对父元素)、% (相对父元素)。
• font-weight (字体粗细)
设置字重。最常用值为 normal (默认正常) 和 bold (加粗)。
代码演示
<style>
body{
/* 设置默认字体与大小 */
font-family:"Microsoft YaHei", sans-serif;
font-size:16px;
}
h1{
/* 标题放大并加粗 */
font-size:2em;
font-weight:bold;
}
</style>
价值与实战
💡 价值与类比
就像写书法时选择不同的笔和字号一样：用“钢笔”写小字，用“毛笔”写大字，CSS属性赋予了网页文字多样的“书写风格”。合适的样式能显著提升可读性。
✍️ 动手任务
给你的个人名片页面设置样式：正文用“微软雅黑”，18px；标题使用“宋体 (SimSun)”并加粗。
⚠️ 易错提示
设置font-family时，请务必提供多个备选字体（如 sans-serif），以防用户电脑未安装首选字体导致显示异常。
1.7.2013
文字是网页信息的核心，美观的字体能大大提升阅读体验。通过CSS的font-family、font-size和font-weight等属性，我们可以自由地选择字体、调整大小和设置粗细，就像我们用不同的笔写字一样，创造出丰富的视觉效果。
‹#›
CSS背景 - 为网页“换墙纸”
核心概念：颜色与图像
● 定义：用background-color设置纯色背景；用background-image: url("路径")设置图片背景。
● 价值与类比：背景能营造氛围，提升网页质感。前者如同给房间刷纯色油漆，后者如同贴上精美的墙纸。
实战与避坑
✅ 动手任务：先为名片页设浅蓝色背景；再找一张淡雅图片，实现“不重复、全屏覆盖”的效果。
⚠️ 易错提示：小尺寸图片默认会平铺重复，需配合background-repeat与background-size进行精确控制。
style.css
<style>
body{
background-color:#f0f0f0;/* 浅灰底色 */
/* 背景图片设置 (已注释) */
/* background-image: url("bg.jpg"); */
/* background-repeat: no-repeat; */
/* background-size: cover; */
}
</style>
1.7.2013
一个好的背景能为网页增色不少。CSS提供了两种设置背景的方式：用`background-color`设置纯色背景，就像给房间刷油漆；用`background-image`设置图片背景，就像给房间贴墙纸。通过调整背景，我们可以轻松改变整个网页的氛围。
‹#›
CSS边框 - 给元素“画个框”
💡 核心概念：border 属性
▌ 定义与语法
一个“三合一”的简写属性，可同时定义边框的宽度、样式和颜色。
例：border: 2px solid red;
▌ 价值与应用
用于视觉分隔内容区块，或者为按钮、卡片等元素添加醒目的轮廓，增强层次感。
▌ 生活类比
CSS 边框就像是给照片加了一个精致的相框，让“照片”（网页内容）从背景中跳脱出来，更加聚焦。
.box{
border:2px solid blue;/* 宽度 | 样式 | 颜色 */
padding:10px;/* 内容与边框的距离 */
margin:20px;/* 元素与其他元素的距离 */
}
小试牛刀
在你的个人名片页面中，尝试给自我介绍的段落添加一个：
灰色、虚线样式的边框。
避坑指南
不要混淆这两个概念：
padding：内容与边框的“内部”距离。
margin：元素与其他元素的“外部”距离。
1.7.2013
有时候，我们需要给某些内容加上一个边框，让它更醒目。CSS的border属性就能帮我们实现这个功能。我们可以设置边框的宽度、样式（如实线、虚线）和颜色。同时，通过padding和margin，我们还能控制内容与边框、以及元素与元素之间的距离。
‹#›
CSS盒子模型 - 理解元素的“占位空间”
核心概念与价值
•构成：每一个HTML元素都是一个“盒子”，由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分共同组成。
•计算逻辑：元素实际占据宽度 = 左/右外边距 + 左/右边框 + 左/右内边距 + 内容宽度。这是实现精确网页布局的基石。
思考与避坑
思考：若设置了 width:100px 和 padding:10px，元素实际占了多宽？ (答案：120px)
避坑：添加padding/border会“撑大”盒子导致布局错乱，推荐使用box-sizing: border-box;统一计算规则。
生活化类比：快递包裹
•内容：包裹里的物品 (核心信息)
•内边距：防震泡沫 (留白保护)
•边框：纸箱外壳 (可见边界)
•外边距：包裹间的空隙 (互不干扰)
div{
width: 200px;/* 内容宽度 */
padding: 20px;border: 5px solid #000;margin: 30px;
}
// 实际占据宽度 = 30+5+20+200+20+5+30 = 310px
1.7.2013
理解CSS布局的关键，在于理解“盒子模型”。想象一下，每个HTML元素都是一个快递包裹。包裹里的物品是内容，保护物品的泡沫是内边距，包装箱是边框，而包裹之间的距离就是外边距。一个元素实际占多大地方，是这四部分共同决定的。掌握了盒子模型，你才能真正控制网页的布局。
‹#›
CSS布局 - 简单的排版艺术
核心：display 属性
控制元素在页面上的显示行为，决定它是“独占一行”还是“与其他元素并排”，是实现页面布局的基础工具。
block · 块级
像排队一样，一人一列，独占一行。
例: <div>, <p>
inline · 行内
像挤公交，并排站，不换行。
例: <span>, <a>
💡 进阶技巧：使用inline-block可以让元素既并排显示，又能设置宽和高。
代码示例
.block { display: block; background: #ccc; }
.inline { display: inline; background: #eee; }
<div class="block">块元素1</div> <!-- 换行 -->
<span class="inline">行内1</span><span class="inline">行内2</span>
动手与避坑
🎯 任务：使用 <ul> 和 <li> 做一个导航栏，并设置 <li> 的 display 为 inline-block。
⚠️ 易错：行内元素(inline)不能直接设置宽(width)和高(height)。
1.7.2013
网页布局的核心，在于控制元素是“独占一行”还是“并排显示”。这就是`display`属性的作用。`block`元素像排队一样，一人一列；`inline`元素则挤在一起。通过修改`display`属性，我们可以轻松实现导航栏、图文混排等简单的布局效果。大家可以尝试用列表标签来做一个导航栏。
‹#›
CSS总结与实践
✨ 综合运用 CSS 选择器、盒子模型与布局知识，为 HTML 页面注入风格与灵魂
知识点回顾
🔍 选择器：精准定位并找到你想要美化的 HTML 元素。
🎨 样式声明：设置颜色、字体、背景等具体视觉属性。
📦 盒子模型：掌握 Margin、Border、Padding，理解元素的占位。
🧩 布局排版：灵活运用 Display 等属性，掌控页面整体结构。
实践：美化我的名片
01. 氛围营造：为名片设置一个符合个人风格的背景（纯色或图片）。
02. 文字排版：调整姓名标题与个人介绍的字体、大小和颜色，突出重点。
03. 细节打磨：为个人照片添加精致的圆角和边框效果。
04. 间距调整：优化元素间的内边距与外边距，让页面疏密有致。
教学互动时刻
🏆 网页设计展
邀请同学上台展示自己的“作品”。
💡 心得分享
分享你认为最有趣或最有成就感的一个 CSS 效果，以及你是如何实现它的？
1.7.2013
我们已经学习了CSS的各种“魔法”，现在是时候把它们用起来了。请大家回到之前创建的个人名片页面，用我们今天学到的CSS知识，为它进行一次彻底的“美容”。你可以更换背景、调整字体、添加边框，让它变得独一无二。期待看到大家的精彩作品！
‹#›
CSS补充 - 响应式设计初探
💡 核心知识点
利用 CSS3 的媒体查询 (Media Queries)，检测屏幕尺寸等设备特性，从而为网页应用不同的样式规则，实现自适应布局。
❓ 定义与价值：媒体查询赋予了网页“感知环境”的能力，使同一份代码能适配电脑、平板、手机等不同设备，保证良好的用户体验。
🤖 形象类比：它就像一个“变形金刚”，能根据所处的“环境”（屏幕大小），自动改变自身的“形态”（布局结构）。
🧠 思考：观察手机与电脑端网站，导航栏和内容列数通常有何变化？
✍️ 实践：添加一条媒体查询，当浏览器宽度小于 768px 时，将 body 背景色改为 #f0f0f0。
⚠️ 易错：逻辑搞反（如把 max-width 当 min-width 使用）。
/* 默认桌面端样式 */
body { font-size: 16px; }
/* 响应式断点: 手机端 */
@media (max-width: 600px) {
body { font-size: 14px; }
h1 { font-size: 1.5em; }
}
“ 一次编写，随处运行 ”
响应式设计是现代Web开发的基石。
通过媒体查询，让你的网页在任何设备上都能“得体”展示，
不仅是技术的体现，更是对用户体验的尊重。
1.7.2013
我们希望我们的网页在电脑、平板和手机上都看起来很棒，这就是响应式设计。CSS的媒体查询就像一个“变形金刚”，它可以检测屏幕的大小，并应用不同的样式。比如，在手机上，我们可以让字体变小，布局变紧凑。这是现代网页设计的必备技能。
‹#›
PART 03
JavaScript - 网页的灵魂
THE SOUL OF THE WEB
1.7.2013
我们已经有了骨架（HTML）和皮肤（CSS），现在，是时候为我们的网页注入灵魂了！欢迎第三位“剑客”——JavaScript。它能让我们的网页“动”起来，响应用户的操作，实现各种酷炫的交互效果。让我们一起进入动态的世界！
‹#›
初识JavaScript - 让网页“动”起来
核心定位：网页的“交互魔术师”
JavaScript 是一门脚本语言，赋予了网页动态交互能力，让信息从“死”变“活”。
❖ 定义与能力：直接运行于浏览器。可修改 HTML 内容、改变 CSS 样式，响应用户点击或鼠标移动。
❖ 价值体现：将静态的信息展示页面，升级为可交互的动态应用程序。
❖ 趣味类比：若 HTML 是演员，CSS 是造型师，那么 JS 就是掌控全场的导演，决定了内容如何呈现与互动。
<button onclick="alert('你好，JS！')">点击我</button>
<script>
// 控制台打印信息
console.log("JavaScript正在运行...");
</script>
动手试一试
将上方代码复制到你的网页，点击按钮看看效果。并按下 F12 打开“开发者工具”，在 Console 面板中寻找打印的文字。
避坑指南
不要把 JS 代码直接放在 head 标签里，这会导致找不到还没加载出来的 HTML 元素。建议将 <script> 标签放在 </body> 结束之前。
1.7.2013
如果说HTML是演员，CSS是服装师，那么JavaScript就是导演。导演可以指挥演员做动作，换服装，还能和观众互动。同样，JavaScript可以动态地修改网页内容和样式，让网页变得有生命。现在，让我们写一行简单的JS代码，让网页弹出一个问候框，感受一下它的魔力吧！
‹#›
JS获取元素 - “找到”你想要操作的对象
核心方法：使用document.getElementById()精准定位页面上的HTML元素
📝 概念解析
定义：document是整个网页的“大管家”。通过getElementById()方法，传入唯一的 ID，就能直接拿到你想要的元素。
价值：获取元素是修改内容、改变样式、添加交互的前提。找不到对象，一切操作都无从谈起。
类比：就像在全校大操场（document）上，通过独一无二的学号（ID），直接找到并喊出那个学生。
👋 实战与避坑
💡 动手任务：在你的个人名片页面上，加一个按钮。点击它，用代码找到名字元素，并把内容改成“超级程序员”。
⚠️ 易错点：1. 参数是字符串，ID名一定要加引号；2. 如果页面没有对应ID，会返回 null，后续操作会报错。
index.html / JavaScript
<p id="demo">这是一个段落</p>
<button onclick="changeText()">改变文本</button>
<script>
function changeText() {
// 1. 通过ID精准找到元素
var para = document.getElementById("demo");
// 2. 修改内容
para.innerHTML ="文本已经被JS改变了！";
}
</script>
1.7.2013
要指挥演员，首先得找到他。在JavaScript中，我们通过document对象来查找页面上的元素。最常用的方法就是getElementById()，它通过元素的ID来精准定位。就像通过学号找学生一样，非常准确。找到元素后，我们就可以对它进行各种操作了。
‹#›
JS修改样式 - “遥控”CSS
核心逻辑：获取 DOM 元素后，直接修改其style属性以动态改变页面样式。
▍ 语法要点：遵循“驼峰命名法”。例如：CSS中的background-color，在JS中需写为backgroundColor。
▍ 核心价值：实现交互响应，如鼠标悬停变色、动画效果触发、响应式布局的实时调整等。
▍ 趣味类比：JS就像一个万能遥控器，DOM元素是电视，我们通过“按键”(修改属性)随时调节画面的“亮度”和“对比度”(CSS样式)。
<p id="text">鼠标移到我身上</p>
letel = document.getElementById('text');
el.onmouseover= () => {
el.style.color="#C8102E";
el.style.fontSize="20px";
};
课堂小练手
在个人名片页面中，让头像在鼠标悬停时，边框变成中国红，鼠标离开时恢复原样。
避坑指南
千万不要在JS里直接写CSS连字符属性名（如style.font-size），这会引发语法错误。
1.7.2013
找到元素后，我们就可以像拿着遥控器一样，随时改变它的样式。通过 element.style 属性，我们可以动态修改颜色、字体大小等。
大家要特别注意，在 JavaScript 中，CSS 属性名的写法会有一点小变化，比如 background-color 要写成 backgroundColor，这叫“驼峰命名法”，这是初学者最容易犯错的地方。
掌握了这个技巧，你就能做出各种动态交互效果，比如鼠标悬停时变色，这也是我们这节课的小任务。
‹#›
JS事件处理 - 与用户“互动”
交互的核心：捕捉并响应
▌ 什么是事件？
事件是用户或浏览器执行的「动作」，如点击(click)、鼠标移入(mouseover)、按键(keydown)等。当事件发生时，对应的处理函数就会被“唤醒”执行。
▌ 生活中的类比：就像家里的“传感器”
门被打开 → 自动亮灯；有人按门铃 → 起身去开门。事件就像触发条件，处理函数就是对应的响应动作。
易错点警示：
使用addEventListener时，事件名不要加 'on' 前缀。正确写法："click"，而非 "onclick"。
// 获取按钮元素
const btn = document.getElementById('btn');
// 绑定点击事件监听
btn.addEventListener('click', () => {
console.log('你点击了我!');
});
动手挑战
目标：制作一个“点赞”按钮
1. 创建一个按钮和一个显示数字的文本框。
2. 每次点击按钮，数字加1。
3. 思考：怎么获取当前的数字？
1.7.2013
交互的本质就是响应事件。用户的每一次点击、鼠标移动，都是一个事件。我们可以通过JavaScript为元素绑定事件处理函数，就像给家里安装传感器一样。当特定事件发生时，我们预设的代码就会自动执行。这就是网页能够与我们互动的秘密。
‹#›
JS总结与实践
知识点回顾
✨ 获取元素
使用getElementById()等方法精准定位页面元素。
✏️ 修改内容
利用innerHTML属性动态更新网页文本与结构。
🎨 修改样式
通过style属性控制元素的视觉外观。
⚡ 事件处理
使用addEventListener()为元素绑定点击等交互逻辑。
综合实践：智能名片
基于之前的静态名片，为其赋予交互能力：
1. 一键切换主题
添加按钮，点击后实现页面背景色在浅色与深色模式间的瞬间切换。
2. 显示/隐藏信息
添加按钮，控制“个人爱好”列表的显示与隐藏状态，增加神秘感。
互动时刻
🎤 展示与分享
邀请同学上台，展示自己实现的“智能个人名片”，分享实现过程中的思路和小技巧。
🎉 体验成就感
感受代码赋予网页“生命”的乐趣，为自己掌握了新技能点赞！
1.7.2013
我们已经掌握了JavaScript的核心技能：找到元素、修改内容、修改样式和处理事件。现在，让我们把这些技能融合起来，升级我们的个人名片，让它变得更“智能”。你可以添加一个切换主题的按钮，或者一个显示隐藏内容的按钮。让我们看看谁的名片最有创意！
‹#›
PART 04
综合与展望
SYNTHESIS AND OUTLOOK
1.7.2013
经过前面的学习，我们已经掌握了网页开发的三大核心技术。现在，让我们将它们整合起来，完成一个完整的项目，并一起展望未来的学习之路。
‹#›
综合实践 · 打造我的专属网站
核心知识点
本项目旨在让大家将理论转化为实践，综合运用所学知识完成一个完整的网页作品：
•HTML：构建页面骨架与内容结构
•CSS：定制色彩、排版与视觉风格
•JavaScript：赋予页面交互与动态效果
项目任务清单
🎯 选题方向：个人爱好、偶像、家乡介绍等
📋 任务要求：
1. 结构清晰：语义化标签搭建网页骨架
2. 视觉美观：合理运用选择器与布局技巧
3. 交互体验：实现至少一个动态功能
4. 团队协作：两人一组，分工明确
规划与结构
建议步骤：确定主题 → 绘制草图 → 分配任务 → 编码实现 → 联调测试。推荐的标准项目目录结构如下：
my_website/
├── index.html # 首页入口
├── styles/
│ └── main.css # 样式文件
└── scripts/
└── app.js # 交互逻辑
1.7.2013
理论学习的最终目的是为了实践。现在，我给大家布置一个最终项目：创建一个属于你自己的个人小网站。你可以选择任何你感兴趣的主题，比如你的爱好、你的偶像或者你的家乡。这个项目将综合运用我们学到的HTML、CSS和JavaScript知识。希望大家能发挥创意，完成一个出色的作品！
‹#›
课程总结与未来展望
知识点回顾
HTML · 结构之骨
定义网页内容的语义与骨架，决定信息的组织方式。
CSS · 视觉之肤
负责页面的布局与美化，赋予网站独特的风格与美感。
JavaScript · 交互之魂
处理逻辑与动态交互，让网页从“静态展示”变为“动态响应”。
进阶技术版图
•前端框架：React / Vue / Angular，构建复杂交互应用。
•后端开发：Node.js / Python，掌握数据处理与业务逻辑。
•数据存储：MySQL / MongoDB，管理海量网站数据。
互动与寄语
💡 开放性讨论：
“你觉得十年后的网页，会是什么样子的？”
🌟 老师寄语：
编程不仅是编写代码，更是逻辑思维的锻炼和创造的过程。愿大家带着好奇心，不断探索技术边界，去创造属于自己的精彩！
1.7.2013
今天的课程即将结束。我们一起探索了HTML、CSS和JavaScript这三大技术，揭开了网页的神秘面纱。但这仅仅是一个开始。未来，还有更多有趣的技术等待我们去学习，比如React、Vue等前端框架，以及Node.js、Python等后端技术。编程的世界广阔无垠，希望大家能保持好奇心，不断探索和创造，用代码书写属于你们自己的精彩未来！
‹#›
感谢观看
THANKS FOR WATCHING
期待与你在代码的世界里相遇
1.7.2013
感谢同学们的认真参与和积极互动！希望这次探秘之旅能激发你们对编程的兴趣。下课！
‹#›
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。