编写整洁的代码
学习如何格式化 HTML，使其更易于阅读
编写整洁的代码 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 4 节课。
为什么简洁的代码很重要
编写简洁的代码
欢迎来到下一课！今天，我们将学习如何编写简洁、易读且有条理的 HTML 代码。简洁的代码可以让网页更易于管理和理解。
为什么简洁的代码很重要？
简洁的代码有助于：
- 让代码更易于阅读和理解。
- 减少错误和调试时间。
- 更有效地与他人协作。
让我们学习一些编写简洁 HTML 的技巧！
使用正确的缩进
缩进可以整理代码，并展示 HTML 元素的结构。每个嵌套元素都应缩进几个空格或一个制表符。
示例：
提示：始终使用一致的缩进方式！
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
关闭所有标签
请确保每个开始标签都有对应的结束标签。忘记关闭标签可能会导致布局问题。
示例：
正确：
<p>This is a paragraph.</p>
错误：
<p>This is a paragraph.
使用有意义的名称
使用 class 或 id 属性时，请使用能够描述其用途的有意义名称。
示例：
提示：避免使用 div1 或 random123 之类的名称。
<p id="welcome-text">Welcome to my website!</p>
<div class="menu">Menu items go here.</div>
添加注释
注释可以解释代码，帮助他人（以及未来的您自己！）理解代码。请使用 <!-- --> 语法添加注释。
示例：
提示：注释应简短明了。
<!-- This is a heading -->
<h1>Welcome to My Page</h1>
<!-- This section contains the navigation menu -->
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
</div>
使用语义化标签
语义化标签可以描述内容的用途。例如：
<header>：用于顶部区域或页眉。<article>：用于独立的文章。<footer>：用于底部区域或页脚。
示例：
<header>
<h1>Welcome to My Blog</h1>
</header>
<article>
<h2>First Post</h2>
<p>This is my first blog post.</p>
</article>
<footer>
<p>© 2024 My Blog</p>
</footer>
整理文件
请整理好 HTML、CSS 和 JavaScript 文件。可以使用以下文件夹：
- images：用于存放所有图片。
- css：用于存放 CSS 文件。
- js：用于存放 JavaScript 文件。
示例文件夹结构：
project/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── script.js
└── images/
└── logo.png
简洁代码回顾
做得好！
恭喜您！您已经学会了如何编写简洁、有条理的 HTML 代码。简洁的代码可以让项目更易于维护和分享。在下一课中，我们将探索可访问性基础知识，确保您的网页对所有人都易于使用。准备好让您的网页更具包容性吧！
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 16
- 课程
- 35
常见问题解答
「编写整洁的代码」课时是免费的吗？
是的 — 「编写整洁的代码」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 4 节课。
「编写整洁的代码」这节课中我会学到什么？
学习如何格式化 HTML，使其更易于阅读 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「编写整洁的代码」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。