跟着编程：构建简单网页
按照分步说明创建有趣的网页
跟着编程：构建简单网页 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 1 节课，共 2 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 2 节课。
构建您的第一个网页
跟着编写：构建一个简单网页
欢迎开始您的第一个编码项目！本课中，我们将逐步构建一个简单的网页。请跟随教程学习 HTML、CSS 和基础设计如何组合在一起。
目标：创建一个个人简介页面。
设置文件
第 1 步：设置文件
首先，为项目创建一个文件夹，并添加一个 HTML 文件：
- 在计算机上创建一个名为 MyWebPage 的新文件夹。
- 在文件夹中创建一个名为
index.html的文件。 - 在代码编辑器（例如 Visual Studio Code）中打开该文件。
提示：文件名 index.html 通常用于网站的主页。
添加基本结构
第 2 步：添加基本结构
现在，将基本的 HTML 结构添加到文件中。这包括 <!DOCTYPE html>、<html>、<head> 和 <body> 标签。
示例：
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
添加个人简介部分
第 3 步：添加个人简介部分
让我们添加一个部分，用于显示您的姓名和简短介绍。
示例：
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
添加图片
第 4 步：添加图片
接下来，使用 <img> 标签添加个人头像。将图片保存到项目文件夹中，并在 HTML 文件中链接该图片。
示例：
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
添加兴趣爱好列表
第 5 步：添加兴趣爱好列表
使用 <ul> 和 <li> 标签创建兴趣爱好的无序列表。
示例：
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
添加链接
第 6 步：添加链接
使用 <a> 标签添加指向您最喜欢的网站的链接。
示例：
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
添加内联样式
第 7 步：添加内联样式
让我们使用 style 属性，直接为 HTML 添加一些基本样式。
示例：
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
网页项目回顾
做得很好！
恭喜您！您已经逐步构建出了自己的第一个网页。在这个项目中，您学习了如何组织 HTML 结构、添加内容，以及使用内联样式设置样式。请继续尝试，为页面添加新的部分！
提示：尝试将页面托管到 GitHub Pages，与朋友分享吧！
常见问题解答
「跟着编程：构建简单网页」课时是免费的吗？
是的 — 「跟着编程：构建简单网页」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 2 节课。
「跟着编程：构建简单网页」这节课中我会学到什么？
按照分步说明创建有趣的网页 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 2 节。
「跟着编程：构建简单网页」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 跟着编程：构建简单网页
- HTML 寻宝游戏