第20课 组建网站跟我做 课件 2025-2026学年人教版初中信息科技七年级全一册
2026-05-13
|
38页
|
118人阅读
|
0人下载
普通
资源信息
| 学段 | 初中 |
|---|---|
| 学科 | 信息科技 |
| 教材版本 | 初中信息科技人教版七年级全一册 |
| 年级 | 七年级 |
| 章节 | 第20课 组建网站跟我做 |
| 类型 | 课件 |
| 知识点 | - |
| 使用场景 | 同步教学-新授课 |
| 学年 | 2025-2026 |
| 地区（省份） | 全国 |
| 地区（市） | - |
| 地区（区县） | - |
| 文件格式 | PPTX |
| 文件大小 | 2.06 MB |
| 发布时间 | 2026-05-13 |
| 更新时间 | 2026-05-13 |
| 作者 | xkw_7550 |
| 品牌系列 | - |
| 审核时间 | 2026-05-13 |
| 下载链接 | https://m.zxxk.com/soft/57848599.html |
| 价格 | 1.00储值（1储值=1元） |
| 来源 | 学科网 |
内容正文：
第20课 组建网站跟我做
人教版初中信息科技 · 七年级全一册
2025 - 2026 学年
1.7.2013
大家好，欢迎来到今天的信息科技课。今天我们将一起学习一个非常有趣和实用的技能——如何组建一个属于自己的网站。在接下来的课程中，我们将从零开始，一步步揭开网站制作的神秘面纱，最终亲手打造一个展示自我的网络空间。准备好了吗？让我们一起开始吧！
‹#›
课程目录
CONTENTS
01
网站入门与基础认知
• 什么是网站？网站的“三驾马车”
• 我们的“施工工具”与第一个网页
02
HTML基础标签详解
• 文本、格式化、列表、图片、超链接标签
• 表格、表单与语义化标签实践
03
CSS基础样式设计
• CSS的引入方式与基础选择器
• 文本、背景、边框样式与布局模型
04
综合实践与总结
• 项目规划、代码编写与调试
• 总结与展望
1.7.2013
本次课程将分为四个部分。首先，我们会了解网站的基本概念和制作工具。接着，深入学习HTML语言，掌握构建网页结构的基础标签。然后，我们会学习CSS，为我们的网页添加漂亮的样式。最后，我们将通过一个综合实践项目，把所学知识融会贯通，完成一个完整的网站。
‹#›
01 网站入门与基础认知
什么是网站？
网站是在互联网上，使用网页集合展示特定内容的场所。它就像一座建在互联网上的“房子”，专门用来存放文字、图片、视频等各类信息。
生活中的案例
每天使用的在线学习平台、游戏官网、视频网站等，都是典型的网站。你也可以把它想象成一个“在线日记本”或“个人展示厅”，用来展示你的照片、日记和兴趣爱好。
易错点辨析
不要把“网站”和“网页”混淆！
网站是由多个网页组成的整体集合，而网页只是其中单独的一页。就像一本完整的书是由许多页纸装订在一起的一样。
通俗的技术解释
网站本质上是存储在服务器上的一系列文件。当你在Chrome、Edge等浏览器输入网址时，浏览器就像一个“信使”，去服务器把这些文件“取”回来，再渲染成我们看到的图文并茂的页面。
课堂互动时刻
请大家思考并分享：
你最喜欢的一个网站是什么？你为什么喜欢它？它主要向你展示了哪些内容？
1.7.2013
首先，我们来回答一个最基本的问题：什么是网站？简单来说，网站就是一个建在互联网上的“房子”，用来展示各种信息。大家每天访问的各种网页，其实都是网站的一部分。一个网站通常由很多个网页组成，就像一本书有很多页。现在，请大家思考一下，你最喜欢的网站是什么？它给你留下了什么印象？
‹#›
01 网站入门与基础认知
网站的“三驾马车”：HTML · CSS · JavaScript
HTML · 搭建“骨架”
核心：超文本标记语言，用标签定义网页内容的结构，如标题、段落、图片。
🗣️ 类比：就像人的骨骼与器官，决定了基本形态，没有它，其他技术都无处依附。
CSS · 描绘“皮肤”
核心：层叠样式表，控制网页元素的外观表现，如颜色、字体、位置和动画效果。
🗣️ 类比：如同衣服、发型和妆容，让网站变得美观、有风格，给用户更好的视觉体验。
JavaScript · 赋予“灵魂”
核心：网页脚本语言，实现交互功能，响应用户的点击、输入等行为。
🗣️ 类比：像人的动作、表情和思维，让静态的页面“活”起来，完成复杂的逻辑。
💡 课堂小互动：打开任意一个你喜欢的网站，在页面空白处点击鼠标右键 → 选择“检查”或“审查元素”。试着在弹出的窗口中找到HTML的标签结构和CSS的样式代码，感受它们是如何“协同工作”的！
1.7.2013
那么，一个漂亮的网站是如何建成的呢？这需要三位“工匠”的通力合作，它们就是HTML、CSS和JavaScript。大家可以把它们想象成一个人的骨架、衣服和动作。HTML搭建结构，CSS负责美化，JavaScript让页面动起来。接下来，请大家动手尝试一下，在你喜欢的网站上点击右键，选择“检查”，看看背后的代码世界是什么样的。
‹#›
01 网站入门与基础认知
我们的“施工工具”：浏览器与编辑器
👀 浏览器：预览之眼
它是查看网站效果的“眼睛”。推荐使用Google Chrome或Microsoft Edge，它们内置强大的开发者工具，能实时调试页面布局与样式，是前端开发必备的“透视镜”。
🛠️ 核心逻辑与避坑指南
▍核心分工：浏览器负责“看”，编辑器负责“造”，两者缺一不可。
▍形象比喻：编辑器是装满代码“锤子与锯子”的工具箱，浏览器是验收房子的验收员。
▍易错点：严禁用Word或系统自带的“记事本”写代码！它们会自动添加隐藏格式，导致程序报错。
⚒️ 编辑器：代码工坊
推荐神器：Visual Studio Code (VS Code)。免费、轻量且功能强大，拥有海量插件，能让写代码事半功倍。
📝 互动任务：请打开电脑安装VS Code，并试着找一找左侧的“文件浏览器”和中间的“代码编辑区”。
1.7.2013
工欲善其事，必先利其器。要制作网站，我们需要两样法宝：浏览器和代码编辑器。
浏览器，比如Chrome，是我们的预览工具，让我们随时看到作品的样子。而代码编辑器，我们推荐使用VS Code，它是我们编写代码的利器。现在，请大家动手安装VS Code，熟悉一下它的界面。
‹#›
01 网站入门与基础认知
我们的第一个网页：Hello World!
核心知识点
一个基本的HTML网页由``声明，以及html、head、body这三个核心标签构成。
趣味类比
就像写作文：声明是格式要求，`html` 是作文本，`head` 是标题作者信息，而 `body` 就是正文内容。
避坑指南
标签必须成对出现（如 `` 和 ``）且正确嵌套，忘记写结束标签是最常见的新手错误。
💻 代码示例 (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello, World!</h1>
</body></html>
动手试一试
打开 VS Code，新建一个名为index.html的文件，输入左侧代码，保存后用浏览器打开它！
见证奇迹的时刻
如果操作正确，你的浏览器上会显示一个醒目的 "Hello, World!"。这就是你的第一个网页诞生了！
1.7.2013
现在，让我们来写人生中的第一行代码！一个最简单的网页，就像一篇文章，有声明、有头部信息、有正文。大家看这个代码示例，我们将它输入到VS Code中，保存为`index.html`，然后用浏览器打开它。见证奇迹的时刻到了！你将看到一个写着“Hello, World!”的网页。
‹#›
01 网站入门与基础认知
HTML 文档基本结构解析
📝 核心知识点
<head> 标签：存放页面的元数据，决定浏览器标题等幕后信息。
<body> 标签：包含了所有用户在页面上能直接看到的内容。
📖 生动类比
<head> 就像是书的扉页与版权页：包含书名、作者等信息，读者通常不直接阅读。
<body> 则是书的正文内容：是读者打开书真正要看的故事和知识。
⚠️ 避坑指南
切勿将页面内容错误地写在 <head> 标签内！
这会导致内容无法在页面上正常显示。
💻 代码示例
• <meta charset="UTF-8">
• <title>我的第一个网页</title>
• <h1>Hello, World!</h1>
课堂动手：修改 <title> 标签内容为“我爱编程”，刷新浏览器，观察标签页标题的变化！
1.7.2013
我们刚刚写的代码里，<head>和<body>分别扮演什么角色呢？<head>是网页的“幕后工作者”，负责存放一些元信息，比如页面的标题。而<body>则是“台前表演者”，包含了所有我们能看到的内容。大家可以动手修改<title>里的文字，看看浏览器的标签页会发生什么神奇的变化。
‹#›
PART 02
HTML基础标签详解
DETAILED EXPLANATION OF HTML BASIC TAGS
1.7.2013
好了，基础概念我们已经了解了。接下来，我们将进入第二部分，深入学习HTML的各种标签。这些标签就像积木一样，我们将用它们来搭建网页的各种元素。准备好，让我们开始吧！
‹#›
02 HTML基础标签详解
核心语法规则
标签通常由“开始”和“结束”标签成对组成，内容包裹其中；部分标签为自闭合类型，无需结束标签。标签可包含属性，提供额外描述信息。
生活中的类比
标签如同快递包裹上的“易碎”贴纸，告知浏览器如何处理内容。如：<p> 告知“这是段落”，<img> 的 src 属性指明“图片的地址”。
⚠️ 易错提醒
标签与属性名区分大小写。尽管多数浏览器兼容大写，但遵循标准请全部使用小写。
<!DOCTYPE html>
<html>// 页面根标签
<body>
<h1>标签语法示例</h1>
<p title="这是一个提示">这是一个带有title属性的段落。</p>
<img src="https://picsum.photos/200/300"alt="风景图" />// 自闭合标签
</body>
</html>
🤔 课堂思考
为什么像 <img>、<br> 这样的标签不需要结束标签？
💡 提示：思考一下，它们本身是否包含“其他内容”？
1.7.2013
学习HTML，首先要掌握它的语法规则。大部分标签都是成对出现的，像括号一样。但也有一些特殊的标签，比如`<img>`，它是自闭合的，因为它本身就是一个独立的元素，不需要包含其他内容。大家可以思考一下，为什么会这样设计呢？
‹#›
02 HTML基础标签详解| 文本标签：标题与段落
核心知识点
使用 <h1> 到 <h6> 标签定义不同级别的标题，重要性依次递减。<h1> 最重要，通常代表页面的主题。
使用 <p> 标签来定义文本段落，让内容结构更清晰。
案例理解
这就像写文章：
• <h1> = 书籍的总书名
• <h2> = 书中的章节名
• <p> = 每个章节下的正文段落
易错点提示
不要单纯为了让文字变大而滥用 <h1>。它不仅仅是样式标签，更是定义页面核心主题的语义标签。
最佳实践：一个页面最好只使用一次 <h1>。
代码示例：自我介绍页面结构
<h1>我的个人介绍</h1>
<h2>关于我</h2>
<p>大家好，我叫小明，今年13岁，喜欢编程和阅读。</p>
<h2>我的爱好</h2>...
动手试一试：创建“我的最爱书籍”网页
请大家动手写一段代码，介绍你最喜欢的一本书。
要求：
1. 用 <h1> 定义书名。
2. 用 <h2> 分别定义“作者介绍”和“内容简介”。
3. 用 <p> 标签填写具体的内容。
1.7.2013
接下来我们学习如何在网页上组织文字。这是HTML最基础也是最常用的功能之一。
首先，我们有一套“标题标签”，从 <h1> 到 <h6>，数字越小，代表的标题级别越高，越重要。这就像我们看一本书，书名就是 <h1>，是最重要的，然后每一章的名字是 <h2>，再往下分节可能就是 <h3>。请大家特别注意，不要为了把字变大而随便用 <h1>，一个页面最好只出现一次 <h1>，用来定义页面的核心主题。
其次，就是段落标签 <p>。我们平时写文章分段，在网页上就要靠它。
左下角展示了一个简单的自我介绍页面结构，大家可以看到 <h1>、<h2> 和 <p> 是如何配合使用的。现在，请大家动手，尝试创建一个介绍你最喜欢的一本书的页面，记得用上这几个标签。
‹#›
02 HTML基础标签详解
格式化标签：让文字更有“个性”
核心知识点
使用<strong>标签让文字加粗，用于表示内容的重要性；使用<em>标签让文字变成斜体，用于表示语气或语义的强调。
生活案例
这就像我们在写作文时，会给重要的词语加上下划线，或者用不同颜色的笔来标注重点。HTML标签就是网页里的“荧光笔”和“加粗笔”。
易错提醒
<b>和<i>虽然也能改变样式，但它们没有语义，只是单纯的“加粗”和“斜体”。现代网页设计推荐使用语义化更强的 <strong> 和 <em>。
代码示例：在段落中强调重点
<p>今天天气很好，我决定去公园玩。</p>
<p>妈妈告诉我，<span color="rgba(167, 243, 208, 1)" bold="true"><strong>出门前一定要带钥匙</strong></span>。</p>
<p>我心里想：<span color="rgba(253, 186, 116, 1)" italic="true"><em>今天一定会很开心！</em></span></p>
✋ 课堂小练习
写一小段话，描述你周末的计划。
要求：用 <strong> 标出你认为最重要的事情，用 <em> 标出你最期待的事情。
1.7.2013
有时候，我们需要让文字更有表现力。在HTML中，<strong>标签可以让文字加粗，用来表示内容的重要性；<em>标签可以让文字变成斜体，用来表示语气或内容的强调。
虽然 <b> 和 <i> 标签也能达到加粗和斜体的视觉效果，但它们是纯样式标签，不包含任何语义。而 <strong> 和 <em> 不仅改变了样式，还向浏览器、搜索引擎和读屏软件传达了“这里很重要”的信息，这是现代网页设计更推荐的做法。
现在，请大家在自己的编辑器里，写一段话描述你的周末计划，并尝试使用这两个标签来突出重点。
‹#›
02 HTML基础标签详解
列表标签：让信息更有条理
核心概念
•无序列表 (<ul>)：各项内容并列，无先后顺序。
•有序列表 (<ol>)：内容按数字或字母排序，顺序重要。
•列表项 (<li>)：定义列表中的每一条目。
📚 场景举例
• 购物清单、功能特性 → 用 <ul> 展示并列关系。
• 考试步骤、排行榜 → 用 <ol> 展示先后顺序。
💻 代码演示
<!-- 1. 无序列表：我的爱好 -->
<h3>我的爱好</h3>
<ul><li>编程</li> <li>篮球</li></ul>
<!-- 2. 有序列表：周末计划 -->
<h3>周末计划</h3>
<ol><li>完成作业</li> <li>去打球</li></ol>
⚠️ 避坑指南
单独的 <li> 标签无法正确渲染列表样式，它必须嵌套在 <ul> 或 <ol> 标签内部。
✏️ 课堂小练
请动手创建一个网页，包含：
1. 你最爱的3部电影 (无序列表)
2. 推荐观看的先后顺序 (有序列表)
1.7.2013
当我们需要罗列信息时，列表标签就派上用场了。<ul>用于创建无序列表，适合展示没有顺序要求的内容，比如购物清单。<ol>用于创建有序列表，适合展示有步骤或排名的内容。列表中的每一项都用<li>标签表示。现在，请大家动手列出你最喜欢的三部电影。
‹#›
02 HTML基础标签详解
图片标签：为网页添加“颜值”
💡 核心知识点
使用<img>标签插入图片，它是自闭合标签。必须包含src(图片路径) 和alt(文字描述) 属性。
⚠️ 易错警示
千万不要忘记写alt属性，这是无障碍访问的标准。同时要仔细检查src路径是否正确，避免出现“裂图”。
✍️ 动手挑战
在你的个人介绍页面中，插入一张你喜欢的图片（或自拍）。检查是否正确设置了 src 和 alt 属性。
<h3>我的宠物猫</h3>
<img src="my_cat.jpg" alt="一只可爱的橘猫" width="300" height="200">
<p>这是我的宠物猫，它的名字叫“橘子”。</p>
1.7.2013
一个网页如果只有文字会很枯燥，我们需要图片来增添“颜值”。<img>标签就是用来插入图片的。它有两个非常重要的属性：src用来指定图片的路径，alt用来提供图片的文字描述。alt属性非常重要，它能在图片无法显示时提供说明，也有助于网站的无障碍访问。现在，请大家在自己的页面里插入一张图片。
‹#›
02 HTML基础标签详解
超链接标签：让网页“四通八达”
🔑 核心知识点
使用<a>(anchor) 标签创建超链接，通过href属性指定链接跳转的目标地址。
💡 趣味案例
<a> 标签就像一个“任意门”，而 href 属性就是门上的地址。点击它，就能瞬间“传送”到另一个网页或网站。
⚠️ 易错提示
href 属性值必须写完整网址（如https://...）。若只写www.xxx.com，浏览器会误认为是本地文件，导致链接失效。
<p>想了解更多关于编程的知识吗？可以访问 <a href="https://www.w3school.com.cn" target="_blank">W3School</a>。</p>
<p>也可以给我发邮件：<a href="mailto:xiaoming@example.com">xiaoming@example.com</a></p>
✋ 课堂小挑战：请动手在你的个人介绍页面中，添加两个链接：一个指向你最喜欢的网站，另一个链接到你的邮箱地址。
1.7.2013
超链接是互联网的灵魂，它让网页之间相互连接，构成了庞大的网络。在HTML中，我们使用 <a> 标签来创建超链接，其中 href 属性是最重要的，它指定了链接跳转的目标。
这里有一个有趣的比喻：<a> 标签就像哆啦A梦的“任意门”，而 href 属性就是门上的目的地地址。点击它，用户就能瞬间传送到另一个网页或网站。
大家在写代码时要注意一个常见的错误：href 属性的值一定要写完整的网址，比如要包含 https:// 这部分。如果只写 www.baidu.com，浏览器可能会把它当作本地文件路径，导致链接打不开。
此外，我们不仅可以链接到其他网站，还可以创建邮件链接，方便用户直接发邮件联系你。现在，请大家在自己的页面里动手添加一个网站链接和一个邮件链接，让你的网页也能“四通八达”。
‹#›
02 HTML基础标签详解
表格标签：规整地展示数据
核心知识点
使用<table>标签创建表格，<tr>定义行，<td>定义单元格，<th>定义表头。
通俗理解
HTML表格就像我们常用的Excel表。整个表格由<table>包裹，<tr>代表每一行，<td>就是其中的一个个小格子。
避坑指南
要注意每个<tr>内部的<td>数量保持一致，否则在页面上表格可能会出现错位、变形等异常显示。
<table border="1">
<tr><th>时间</th><th>课程</th></tr>
<tr><td>第一节</td><td>语文</td></tr>
<tr><td>第二节</td><td>数学</td></tr>
</table>
动手试一试
利用今天学到的表格标签，动手创建一个简单的表格，来记录你本周的零花钱收支情况吧。
提示：记得包含“日期”、“收入/支出”、“金额”列哦。
1.7.2013
当我们需要展示一些结构化的数据时，表格就非常有用。<table>标签定义整个表格，<tr>定义行，<td>定义单元格。我们还可以用<th>来定义表头。使用表格时要注意，每一行的单元格数量最好保持一致，否则表格可能会显示不正常。现在，请大家动手创建一个表格来记录你的零花钱吧。
‹#›
02 HTML基础标签详解
表单标签：与用户互动
核心知识点
使用 <form> 标签创建表单，用于收集用户输入。常用的表单元素有 <input>、<textarea>、<button> 等。
形象类比
表单就像一份调查问卷，<form> 是问卷的整体，<input> 是具体的问题（如姓名、年龄），<button> 则是问卷最后的“提交”按钮。
避坑指南
不要忘记 <input> 的 type 属性！它决定了输入框的功能（文本、密码、单选框等）。虽然默认是文本框，但显式写出 type="text" 是更好的编程习惯。
<h3>用户注册</h3>
<form>
<input type="text"id="username"
1.7.2013
网站不仅是展示信息，有时也需要与用户互动，收集信息。这时就需要用到表单。
<form>标签定义表单，里面可以包含各种输入框、按钮等元素。
<input>标签是最常用的表单元素，通过type属性可以变成文本框、密码框等。
现在，请大家动手设计一个简单的反馈表单。
‹#›
02 HTML基础标签详解
语义化标签：让网页结构更“有意义”
核心与价值
HTML5 引入了如 <header>、<nav>、<main>、<footer> 等一系列语义化标签。它们不只是样式，而是明确描述了内容的“角色”与用途。
📖 生活类比：
就像写文章时，明确区分“前言”、“目录”、“正文”和“后记”。浏览器、搜索引擎和开发者都能一眼看懂页面结构。
避坑指南
新手常滥用 <div> 划分所有区域。虽然 <div> 也能实现布局，但全是 div 的代码会变成“一锅粥”，难以维护。建议在逻辑结构上优先使用语义化标签。
🤔 思考一下：
对比纯 <div> 和语义化标签的代码，哪种可读性更高？这对搜索引擎SEO有什么帮助？
代码示例
<header>
<h1>我的网站</h1>
</header>
<nav>...</nav>
<main>
<p>这是我的主页内容...</p>
</main>
<footer>...</footer>
1.7.2013
为了让我们的代码更有意义，HTML5引入了语义化标签。比如<header>代表页面头部，<nav>代表导航，<main>代表主要内容，<footer>代表页脚。使用这些标签，不仅让我们的代码结构更清晰，也有助于搜索引擎更好地理解我们的网页内容。大家可以思考一下，这样的代码是不是比满屏的<div>更容易阅读呢？
‹#›
02 HTML基础标签详解
实践：搭建个人介绍页面的HTML结构
💡 核心知识点
将之前学到的各类标签组合，构建一个完整的个人介绍页面，涵盖头部、导航、内容主体与页脚。
🧩 案例理解
这就像搭积木：用不同形状的积木（各类标签），按规则组合，搭建出一座完整、结构清晰的城堡（网页）。
⚠️ 避坑指南
严禁标签嵌套混乱，例如将列表标签 <ul> 直接放在段落标签 <p> 内部，需严格遵守HTML语法规范。
<!DOCTYPE html> <html> <head> <title>我的个人主页</title> </head>
<body> <header> <h1>欢迎来到我的个人主页</h1> </header>
<nav> <ul> <li><a href="#about">关于我</a></li> ... </ul> </nav>
<main> <section id="about"> <h2>关于我</h2> <img src="me.jpg" /> <p>...</p> </section>
<section id="hobbies">...</section> <section id="contact">...</section> </main>
<footer> <p>© 2026 我的版权. </p> </footer> </body> </html>
✍️ 课堂挑战
请大家动手实践：参考左侧的结构与右侧的代码，结合自己的姓名、爱好、联系方式，编写一份属于你自己的个人介绍HTML页面。
1.7.2013
现在是时候把我们学到的所有标签整合起来了！我们将使用语义化标签搭建页面结构，然后在里面填充标题、段落、图片、列表和链接。这就像搭积木一样，把我们学过的知识融会贯通。请大家动手，编写一个属于你自己的个人介绍页面的HTML代码。
‹#›
PART 03
CSS基础样式设计
1.7.2013
我们已经用HTML搭建好了网页的骨架，现在，是时候给它穿上漂亮的衣服了。欢迎来到第三部分——CSS基础样式设计。我们将学习如何使用CSS来美化我们的网页，让它变得更加生动和美观。
‹#›
03 CSS基础样式设计
什么是 CSS ？
CSS (Cascading Style Sheets) 即“层叠样式表”，是专门控制HTML网页元素视觉表现的语言。它赋予网页色彩、布局和美感，让单调的内容变得生动有趣。
形象的比喻
如果把HTML比作建好的“毛坯房”，CSS就是专业的“室内设计师”。设计师负责选择墙纸颜色、家具样式和摆放位置，最终让房子变得舒适、美观、宜居。
新手易错点
CSS 规则中，属性和值之间必须用冒号“:”分隔；每一条样式声明的末尾，都必须加上英文分号“;”。这是初学者最容易忘记的细节。
📝 代码示例：简单的样式设置
<style>
/* 选中所有 h1 标签，设置样式 */
h1 {
color: blue; /* 字体颜色为蓝色 */
font-size: 36px; /* 字号为36像素 */
}
p {
color: gray; /* 字体颜色为灰色 */
}
</style>
🤔 课堂思考
在上面的代码里：
1. `h1` 和 `p` 扮演了什么角色？
2. `color` 和 `font-size` 代表什么？
3. `blue` 和 `36px` 又是什么含义？
1.7.2013
那么，CSS到底是什么呢？它的全称是层叠样式表，是专门用来美化网页的语言。如果说HTML是毛坯房，那CSS就是室内设计师。看这个例子，我们用CSS把标题变成了蓝色，段落变成了灰色。大家思考一下，代码中的各个部分分别代表什么？
‹#›
03 CSS基础样式设计
CSS 的三种引入方式
样式表与HTML结合主要有三种形式：行内样式（内联）、内部样式表（内嵌）和外部样式表（外联）。根据不同场景选择合适的方式是项目可维护性的关键。
生活化类比理解
• 行内样式 = 单独定制的“私人订制”服装
• 内部样式表 = 为一家人制定的“家庭穿衣规则”
• 外部样式表 = 公开出版、人人可参考的“时尚杂志”
⚠️ 易错与避坑指南
行内样式拥有最高优先级，会覆盖其他样式，但这破坏了结构与表现分离的原则，不利于维护。开发中应尽量避免使用。
💻 代码示例
<!-- 2. 内部样式表: 作用于整个页面 -->
<style> p { color: green; } </style>
<!-- 3. 外部样式表: 推荐使用，解耦代码 -->
<link rel="stylesheet" href="styles.css">
<!-- 1. 行内样式: 写在标签内，不推荐维护 -->
<h1style="color: red;">我是红色的标题</h1>
<p>我是绿色的段落 (内部样式表)</p>
课堂动手小挑战
尝试为同一个段落标签 <p>，同时设置三种不同颜色。思考：最终页面上显示的是哪种颜色？这揭示了什么关于“优先级”的规律？
1.7.2013
CSS有三种引入方式。行内样式直接写在标签里，优先级最高但最不推荐。内部样式表写在`<style>`标签里，作用于整个页面。外部样式表是最推荐的方式，将CSS代码放在单独的文件里，方便管理和复用。大家可以动手试一试，看看不同方式的优先级是怎样的。
‹#›
03 CSS基础样式设计
CSS 基础选择器：精准定位页面元素的三把“钥匙”
核心知识点
选择器用于选中需要设置样式的HTML元素。最常用的三类基础选择器是：元素选择器、ID选择器和类选择器。
生活中的类比
• 元素选择器：对“全班所有同学”下达指令
• ID选择器：点名“学号001的同学”单独指示
• 类选择器：召集“所有篮球队成员”开会
关键区别与易错点
•ID选择器(#)：唯一性，在同一个页面中只能使用一次，不可重复。
•类选择器(.)：复用性，可以被页面中多个不同的元素共享使用。
/* 1. 元素选择器：选中所有 p 标签 */
p { color: #333; font-size: 14px; }
/* 2. ID选择器：选中 id="special" 的元素 (唯一) */
#special { color: rgb(200, 16, 46); font-weight: bold; }
/* 3. 类选择器：选中所有 class="highlight" 的元素 (多个) */
.highlight { background-color: rgb(254, 243, 199); }
动手试一试
尝试修改代码：给页面上的多个不同标签(如 <h1>、<span>、<div>) 都加上同一个类名，看看它们是不是都应用了相同的样式？
1.7.2013
要使用CSS，首先要学会“选择”元素。我们有三种基础选择器：元素选择器，直接选择标签；ID选择器，用`#`号选择唯一的元素；类选择器，用`.`号选择一组元素。ID是唯一的，而类可以被多个元素共享。现在，请大家动手尝试给多个元素添加同一个类，看看效果如何。
‹#›
03 CSS基础样式设计
文本样式：让文字更美观
核心知识点
使用CSS的color,font-size,font-family,text-align等属性来设置文本的样式，提升阅读体验。
属性释义
•color / font-size：文字颜色与大小
•font-family：字体 (如宋体、黑体)
•text-align：对齐方式 (左/中/右对齐)
避坑指南
在设置font-family时，建议指定多个字体作为备选方案（用英文逗号分隔），浏览器会自动按顺序查找系统中可用的字体。
<style>.title { color: #2c3e50; font-size: 28px; font-family: "Microsoft YaHei", sans-serif; text-align: center; } .content { color: #34495e; font-size: 16px; line-height: 1.8; }</style><h1 class="title">欢迎来到我的世界</h1> <p class="content">这里是我的个人介绍...</p>
动手实操：在你的个人介绍页面中，使用CSS设置标题的颜色、字号和居中对齐，并设置段落的行高，使其更易读。
1.7.2013
接下来我们学习如何美化文字。通过`color`、`font-size`、`font-family`和`text-align`等属性，我们可以轻松地改变文字的颜色、大小、字体和对齐方式。特别是`line-height`属性，可以调整行间距，让大段文字更易于阅读。现在，请大家动手美化自己页面的文字吧。
‹#›
03 CSS基础样式设计
背景样式：为网页增添底色
💡 核心知识点
使用background-color设置纯色背景，使用background-image设置图片背景，构建页面基调。
🏠 生活化案例
•background-color像给房间刷乳胶漆
•background-image像给房间贴装饰墙纸
⚠️ 避坑指南
设置背景图时，务必检查图片路径是否正确。建议同时设置一个纯色背景作为图片加载失败时的备用方案。
body{ background-color: #f5f5f5; } /* 浅灰底色 */
.banner{
background-image: url('banner.jpg');
background-size: cover; /* 铺满容器 */
color: #fff; padding: 50px;
}
🎨 课堂动手任务
为你的个人介绍页面设置一个淡色背景，并给页面头部加一张背景图。
1.7.2013
一个单调的白色背景太无趣了。我们可以用CSS为网页添加背景色或背景图片。background-color用于设置纯色背景，就像刷墙。background-image则可以设置图片背景，就像贴墙纸。在使用背景图片时，别忘了设置一个备用的背景色，防止图片加载失败。现在，请大家为自己的页面添加漂亮的背景吧。
‹#›
03 CSS基础样式设计
边框样式：给元素画个框
💡 核心知识点
使用border属性为元素添加边框，它是border-width、border-style、border-color的简写形式。
🖼️ 生活中的类比
就像给照片加相框：你可以自由选择相框的“粗细”（宽度）、“纹理”（实线/虚线）以及“颜色”。
⚠️ 易错点
border-style必须设置！否则边框不会显示。常用值: solid(实线), dashed(虚线), dotted(点线)。
🏃 动手挑战
回到你的个人介绍页面，试着为照片元素添加一个圆角和虚线边框效果吧！
/* 代码示例：给一个 div 加上虚线边框和圆角 */
.box{
border: 2px dashed #3498db;
border-radius: 10px; /* 圆角半径 */
padding: 20px; /* 内部间距 */
}
1.7.2013
有时候，我们需要给元素加上边框来突出显示。border属性可以帮我们实现这个效果，它可以设置边框的宽度、样式和颜色。我们还可以用border-radius来创建圆角效果。这就像给照片加上一个漂亮的相框。现在，请大家动手为自己页面的照片添加一个边框吧。
‹#›
03 CSS基础样式设计
盒子模型：理解元素的空间
🔑 核心知识点
CSS中，每个元素都像一个盒子，由内容(content)、内边距(padding)、边框(border)和外边距(margin)这四个部分共同组成。
📦 生活化类比
想象一个快递包裹：内容是物品，内边距是防震泡沫，边框是纸箱厚度，而外边距则是包裹之间要留出的空隙。
⚠️ 易错点提醒
元素总宽度 ≠ 内容宽度！
总宽度 = 内容宽 + 左右padding + 左右border。布局时切勿忽略内边距和边框的影响。
💻 代码示例
.box {
width: 200px; height: 100px;
padding: 20px; /* 内边距 */
border: 5px solid black; /* 边框 */
margin: 30px; /* 外边距 */
background-color: lightblue;
}
<div class="box">我是一个盒子</div>
🤔 课堂互动思考
根据左侧的公式，这个例子中的盒子，实际渲染后的总宽度是多少？
答案：200 + 20*2 + 5*2 = 250px
1.7.2013
要理解CSS布局，必须先理解盒子模型。每个HTML元素都可以看作一个盒子，它由内容、内边距、边框和外边距构成。内边距是内容和边框的距离，外边距是元素和其他元素的距离。计算元素总宽度时，一定要把内边距和边框都算进去。大家思考一下，这个例子中的盒子总宽度是多少呢？
‹#›
03 CSS基础样式设计
浮动布局：让元素并排显示 (float)
核心知识点
使用float属性可让元素向左/右“浮动”，脱离文档流。常用于快速实现多栏布局，让文字或其他元素环绕在它周围。
直观案例：报纸排版
这就像报纸上的图文混排：文章中的图片可以设置为左浮动或右浮动，而周围的文字会自动围绕着图片排列，填充空白空间。
避坑指南：高度塌陷
若父元素中只包含浮动子元素，父元素会“高度塌陷”（表现为高度0）。必须使用“清除浮动”技巧，如添加 clearfix 类来修复。
代码示例：图文混排 + 清除浮动
.img-left { float: left; margin-right: 20px; }
.clearfix::after { content: ""; display: table; clear: both; }
<!-- 父容器加 .clearfix 防止塌陷 -->
<div class="clearfix">
<img src="cat.jpg" class="img-left"> <!-- 图片左浮 -->
<p>这段文字会自动环绕在图片右侧...</p>
</div>
✋ 课堂动手练习
回到你正在制作的“个人介绍页”项目：
尝试给你的个人头像添加float: left;样式，并调整合适的右边距。看看文字是不是自然地跑到了照片的右侧？
1.7.2013
如何让元素并排显示呢？ float属性可以帮我们实现。它可以让元素向左或向右浮动，实现类似报纸图文混排的效果。但要注意，使用浮动后可能会导致父元素高度塌陷，需要用clearfix这样的技巧来清除浮动。现在，请大家动手让自己的照片浮动起来。
‹#›
03 CSS基础样式设计
Flexbox 布局入门：现代布局神器
核心知识点
Flexbox (Flexible Box) 是一种一维布局模式，专为构建响应式页面和组件设计。它可以帮我们用极少的代码，轻松实现元素的水平/垂直居中、自动填充、均分空间等复杂对齐需求。
生活化类比
把Flexbox想象成一个可以伸缩的“智能收纳盒”。盒子就是容器，里面的物品就是子元素。无论物品数量多少，它们都能自动调整大小和间距，整齐地填满整个盒子，不需要我们手动计算每个物品的位置。
新手易错点
Flexbox 属性分为两类：一类是加在父容器上的（如display: flex），用来控制整体排列规则；另一类是加在子元素上的（如flex: 1），用来控制单个元素的行为。写代码时要分清“父”与“子”。
.container{/* 父容器 */
display:flex;/* 开启 Flexbox 模式 */
justify-content:space-between;/* 水平方向分散对齐 */
align-items:center;/* 垂直方向居中 */
}
.item{/* 子元素 */
flex:1;/* 平分剩余空间 */
}
课堂动手挑战
尝试在你的个人介绍页面上，使用 Flexbox 重新排列导航栏，让各个导航选项在水平方向上均匀分布。
1.7.2013
浮动布局虽然经典，但有时不够灵活。现代CSS提供了更强大的布局方式——Flexbox。它就像一个智能收纳盒，可以轻松实现元素的居中、均分等复杂布局。通过设置容器的`display: flex`，我们就能开启Flexbox布局。现在，请大家尝试用Flexbox来美化你的导航栏。
‹#›
03 CSS基础样式设计
实践：为个人介绍页面添加样式
核心知识点
综合运用CSS选择器和各种样式属性，为之前写好的HTML页面进行全方位美化。
课程“毕业设计”
把没有样式的HTML“毛坯房”，装修成美观、结构清晰的网页“精装修”。
注意：样式冲突
当多个规则作用于同一元素时，牢记优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器。
/* styles.css */
body {
font-family: "Microsoft YaHei", Arial, sans-serif; line-height: 1.6;
margin: 0; padding: 0; background: #f4f4f4; color: #333;
}
header { background: #2c3e50; color: white; text-align: center; padding: 1rem; }
nav a { color: white; text-decoration: none; padding: 1rem; display: block; }
nav a:hover { background: rgba(26, 188, 156, 1); }
main { max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
section { background: white; padding: 2rem; margin-bottom: 2rem; border-radius: 5px; }
footer { text-align: center; padding: 1rem; background: #2c3e50; color: white; }
动手试一试
将左侧代码保存为styles.css，在HTML文件中通过<link>标签引入。
查看页面变化后，尝试修改颜色、字体等属性，创造出你专属的个人页面风格吧！
1.7.2013
现在，到了我们CSS部分的“毕业设计”环节！我们将综合运用前面学到的所有知识，为我们的个人介绍页面添加完整的样式。
大家可以参考左边这个示例代码，将它保存为CSS文件并引入到你的HTML中。这就像是给之前盖好的房子（HTML结构）进行精装修。看看你的页面会发生怎样的变化，然后大胆地修改颜色、字体，创造出属于你自己的风格吧！
同时要注意，如果遇到样式没有生效的情况，要检查是不是CSS选择器发生了冲突，记得我们讲过的优先级规则哦。
‹#›
PART 04
综合实践与总结
COMPREHENSIVE PRACTICE AND SUMMARY
1.7.2013
恭喜大家完成了HTML和CSS的学习！在最后一部分，我们将把所有知识融会贯通，从零开始，完整地规划、设计并制作一个网站。这将是一次真正的实战演练，让我们开始吧！
‹#›
04 综合实践与总结
💡 核心认知：规划先行
动手写代码前，需明确网站主题、页面结构和风格。就像建房子前先画设计图，标明层数、房间功能与布局。
⚠️ 避坑指南：切忌“裸奔”开发
跳过规划直接写代码，极易导致网站结构混乱，后期牵一发而动全身，修改成本极高。
📐 实战拆解：个人介绍网站
• 主题：打造专属个人名片，展示自我风采。
• 结构：头部(标题)+导航(关于/爱好/联系)+内容区(照片/简介/列表)+底部(版权)。
• 风格：简洁清新为主，推荐搭配“蓝色+灰色”的冷色调，突显专业与冷静。
💬 课堂讨论时刻
如果让你来设计一个介绍你学校的网站，你会规划哪些核心板块？
1.7.2013
在动手写代码之前，最重要的一步是规划。我们需要明确网站的主题、结构和设计风格。这就像建房子前要先画设计图。一个好的规划能让我们的开发过程事半功倍。现在，大家可以讨论一下，如果要设计一个介绍学校的网站，应该包含哪些板块呢？
‹#›
04 综合实践与总结
编写 HTML 结构：搭建网站的“钢筋骨架”
核心思路与案例类比
核心：根据前期规划，使用语义化标签搭建网站的 HTML 骨架，确立整体结构。
类比：就像按照建筑图纸，搭建房子的钢筋水泥框架。
易错点警示
1. 标签嵌套逻辑混乱，导致浏览器无法正确解析页面结构。
2. 遗漏 HTML 文档的必要“零部件”，如 `<head>`、`<body>` 等根标签。
常用语义化标签清单
• 页面布局：`<header>` (页头), `<nav>` (导航), `<main>` (主体), `<footer>` (页脚)
• 内容模块：使用 `<section>` 标签划分不同的内容区域，让代码更具可读性。
动手挑战时刻
请打开你的代码编辑器，根据之前的规划图，写出网站的基础 HTML 结构代码。完成后，可尝试在浏览器中打开预览。
1.7.2013
规划完成后，我们就可以开始搭建网站的骨架了。这一步，我们将使用HTML语义化标签，根据我们的设计图，写出网站的HTML结构。这就像按照图纸搭建房子的框架。请大家动手，写出自己网站的HTML代码。
‹#›
04
综合实践与总结
添加 CSS 样式 · 基础篇
💡 核心知识点
编写外部 CSS 文件，为页面建立基础样式规范。包括定义全局的背景色、字体类型、文本颜色等，是构建网页视觉风格的第一步。
🏠 生活化案例：这就像给房子刷上基础的墙漆，确定了整个空间的基调。
⚠️ 常见易错点：颜色十六进制值（如 #fff）或字体名称（如 '思源黑体'）的拼写错误，导致样式无法生效。
📝 实操清单
• 为 body 标签设置统一的背景色和字体族。
• 为 header 和 footer 设置专属的背景色与文字对比色。
• 确保 CSS 文件正确链接到 HTML 的 head 标签中。
✋ 课堂互动：动手时间
不要只看，现在打开你的代码编辑器：
为你的个人网站设置一个你喜欢的背景色，再挑选一种易读的字体。完成后保存并在浏览器刷新预览效果。
1.7.2013
有了骨架，我们就要开始“装修”了。首先是基础装修，我们要设置页面的整体背景色、字体和颜色方案。这就像给房子刷上统一的墙漆，确定整体的基调。
这一页的重点在于“外部样式表”的使用和基础样式的设置。
请大家特别注意右侧的实操清单，最关键的是为 body 设置全局样式，这是最高效的方式。另外，拼写颜色值和字体名时一定要仔细，这是初学者非常容易“踩坑”的地方。
现在，请大家暂停观看，打开编辑器，动手完成右下角的任务：为你的网站设置一个你喜欢的背景色和字体。
‹#›
04 综合实践与总结
使用 Flexbox 进行页面布局
💡 核心知识点
使用 Flexbox 实现导航栏水平排列；利用 margin 实现内容区域水平居中，奠定网站骨架。
🛋️ 生活化理解
就像布置客厅：沙发、茶几、电视摆放得错落有致、居中对齐，Flexbox 就是你的“装修工”。
⚠️ 避坑指南
最容易忘记的一步：必须先给父容器设置display: flex，否则 Flexbox 属性都不会生效。
✏️ 互动时刻
现在动手：在你的代码编辑器中，给导航栏的父级元素添加 Flexbox 属性，让它水平居中。
1.7.2013
基础装修完成后，我们要开始摆放“家具”了，也就是进行页面布局。我们将使用强大的Flexbox来实现导航栏的水平排列和内容区域的居中。这一步非常关键，它决定了网站的整体结构和视觉效果。请大家动手，用Flexbox来布局你的导航栏。
‹#›
04 综合实践与总结 · 美化细节
核心知识点
为页面元素增加“呼吸感”与“互动性”：
给链接添加鼠标悬停反馈、给列表和图片增加圆角、边框或阴影，提升整体精致度。
生活类比
这就像为房间做软装：给单调的沙发配上几个漂亮的抱枕，给空白的墙面挂上几幅艺术画。代码美化细节，就是为网页增加“生活气息”和“设计感”。
技术实现 & 易错点
•伪类使用：注意:hover选择器的书写格式，不要遗漏冒号。
•样式属性：灵活运用border-radius(圆角) 和box-shadow(阴影) 快速提升质感。
互动挑战
请打开你的代码编辑器，为之前制作的导航栏链接，添加鼠标悬停时变色的效果。
完成后，试着为内容卡片增加一点圆角和阴影吧！
1.7.2013
主体布局完成后，我们需要进行细节美化。比如，为链接添加鼠标悬停效果，为内容区块添加圆角和阴影，让整个网站看起来更精致、更有层次感。这就像给房间添置装饰品，让它更有生活气息。请大家动手，为你的导航链接添加一个悬停变色的效果。
‹#›
04 综合实践与总结
核心知识点 & 生活案例
💡知识点：在浏览器中打开HTML文件进行预览，遇问题时使用开发者工具调试定位。
🏠打个比方：就像房子建好后进行验收，哪里漏水、哪里灯不亮，都需要检查并修复。
易错点 & 实操技巧
❌常见坑：代码拼写或语法错误，导致样式“失灵”。
🔧小妙招：Chrome浏览器按F12或右键“检查”，在工具里实时修改CSS看效果，再同步回代码文件。
课堂互动 · 动动手！
打开你的网站，用开发者工具尝试修改元素颜色，看看页面会发生什么变化？
开发者工具是程序员的“专属显微镜”，
帮你快速看透代码背后的页面逻辑。
1.7.2013
完成代码编写后，我们需要在浏览器中预览效果。如果发现问题，不要着急，我们可以使用浏览器的开发者工具来调试。开发者工具就像一个强大的诊断仪，可以帮助我们快速定位并修复问题。大家可以动手打开开发者工具，尝试实时修改样式，看看效果。
‹#›
04 综合实践与总结
总结与展望 · 回顾所学，探索无限可能
核心回顾
从网站构成到HTML/CSS基础，我们梳理了完整的建站流程。大家亲手从0到1搭建了专属的“网络小屋”，迈出了关键一步。
避坑指南
⚠️ 切勿“学完即止”：编程的遗忘曲线很陡峭。基础是为了走得更远，唯有持续练习、动手敲代码，才能将知识转化为能力。
互动分享
请几位同学上台展示你的“网络小屋”，分享制作过程中遇到的困难和解决办法，让我们互相学习！
技术盘点 · 我们已经掌握
✅HTML结构：构建网页的骨架，合理布局标签。
✅CSS样式：调整字体、颜色、背景，美化页面视觉。
✅Flexbox布局：轻松搞定弹性布局，让内容排列更灵活。
进阶之路 · 下一步探索
🚀CSS进阶：学习动画、过渡效果，让页面更生动。
🚀JavaScript：引入交互逻辑，让网站“动”起来，响应用户操作。
🚀响应式设计：适配手机、平板，打造全终端完美体验。
1.7.2013
到这里，我们的课程就要结束了。我们一起回顾一下，我们学习了网站的基本构成，掌握了HTML和CSS的基础知识，并亲手搭建了一个网站。这只是一个开始，未来还有更多有趣的技术等着我们去探索，比如JavaScript和响应式设计。最后，欢迎几位同学来分享一下自己的作品和心得。
‹#›
感谢观看
期待你的第一个网站上线！
THANKS FOR WATCHING
1.7.2013
感谢大家的参与和努力！希望这次课程能为大家打开一扇通往Web世界的大门。编程的道路充满挑战，但也充满乐趣。请继续保持好奇心和动手能力，期待在未来的互联网世界里，看到你们亲手创建的精彩网站！谢谢大家！
‹#›
$
资源预览图
1
2
3
4
5
6
相关资源
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。