CodePen HTML

在本文中，我们将学习 CodePen HTML。让我们先了解一下 CodePen。

什么是 CodePen？

CodePen 是一个在线社区，用于检查用 HTML、CSS 和 JavaScript 编写的代码。它是一个开源的在线代码编辑器，这意味着任何人都可以免费使用它。

它由 Alex Vazquez、Tim Sabat 和 Chris Coyier 于 11 年前（2012 年）创立。它是开发人员或网页设计师可以使用的最佳代码编辑器之一，无需安装任何东西即可轻松编写和检查代码。

下面是 CodePen 的图片

您只需单击 “Go make one!” 按钮即可开始编写代码。CodePen 中有三个部分。第一部分用于编写 HTML 代码，第二部分用于编写 CSS 代码，第三部分用于编写 JavaScript 代码。它还提供了一个 “Settings” 选项，您可以在其中根据需要自定义代码编辑器。

如果您正在创建任何项目，那么您绝对应该使用 CodePen 编辑器。它就像一块空白画布，您可以随心所欲地填充。它允许您运行和测试新的框架。它用户友好，因为它提供了许多功能，可以帮助您在不犯错误的情况下编写最佳代码。您可以同时看到 HTML 编辑器、CSS 编辑器和 JavaScript 编辑器。它可以在笔记本电脑浏览器或移动浏览器上使用。如果您成为专业用户，您可以更改其他设置，例如笔的详细信息、添加个性化截图等。

CodePen 的用途

• 学习和教育：正在学习网页设计课程的学员可以使用 CodePen 编写代码来测试和运行代码。有经验的编码员创建了各种实时演示，您可以利用它们来获取知识并完善您的 Web 开发技能。它允许您与他人共享代码并获得他人的反馈，以编写最佳代码。
• 代码共享：它是一个非常好的编辑器，允许您与同事共享您编写的代码，甚至可以将代码片段直接添加到您的博客文章中。
• 快速原型设计和实验：您可以快速原型化您的想法，实时预览您的代码，并实时查看输出。
• 协作开发：它允许您与其他设计者协作，并在同一项目上与他们合作。因此，这个编辑器可以帮助您轻松高效地协作和工作。
• 测试和调试：它包含调试工具，允许您检查代码、查找错误并优化代码。这个编辑器可以在几秒钟内找到代码中的问题，并帮助您创建完美的代码。

如何使用 CodePen？

创建 CodePen 帐户

您需要先访问网站 codepen.io 并创建一个帐户以提高效率。您可以单击 “Sign Up for Free”（免费注册）按钮，如下所示

您将看到下面的页面，您可以使用 Google、GitHub、Facebook 或 Email 免费注册 CodePen。

创建帐户后，您将收到来自 CodePen 的电子邮件，用于验证您的电子邮件地址。电子邮件的外观如下

您需要单击 “Click to Verify Email”（点击验证电子邮件） 并验证您的电子邮件地址。

用户界面探索

电子邮件验证后，您将进入 CodePen 的仪表板，您可以在其中看到您的作品，例如您创建的笔、集合、已删除的项目、活动、资产、固定的项目等。界面如下

创建第一个笔

单击 CodePen 仪表板左上角的 “Pen”（笔） 选项，然后在下方单击 “Pen”（笔），如下所示

您将看到下面的代码编辑器界面，它分为三个部分：HTML、CSS 和 JS。

HTML 代码写在 HTML 部分下，CSS 代码写在 CSS 部分下，JS 代码写在 JS 部分下。您甚至可以为您的笔命名。

保存和共享您的作品

保存笔：编写完笔后，您可以保存您的作品。尽管作品会在 CodePen 中自动保存，但点击保存按钮是一个好习惯，可以确保进度已保存。

共享笔：您可以共享您的作品，方法是与他人共享 笔链接，以便他们可以看到您的代码并与之互动。CodePen 允许您将您的 笔嵌入到网站中。

CodePen 编辑器的功能

• 它允许您将笔嵌入到任何其他网站。它提供了对嵌入式笔的完全控制。
• 它提供了一个 Embed builder（嵌入生成器），允许您更改设置。
• 它提供了一个演示模式，允许您在会议上共享您的笔。
• 它提供了一个对教学有用的教授模式。它允许您实时更新学生的屏幕。
• 它提供了一个名为 CodePen Projects 的功能。免费用户只能创建项目，而 PRO 用户可以创建多个项目。
• 它提供了一个名为 Collection（集合） 的功能，允许您组织一组笔。

CodePen PRO 编辑器的功能

• 它提供了一个 Live View（实时视图） 功能，允许您在各种设备上实时预览更新。
• 它提供了一个 Asset Hosting（资产托管） 功能，允许您将文件拖放到编辑器中。
• 它提供了一个 Collab Mode（协作模式） 功能，允许您与 2-6 人协作。
• 它提供了一个 Private Everything（所有内容私有） 功能，允许您将您的笔设为私有，这意味着在它们私有期间没有人可以看到您的笔。
• 它提供了一个 Custom CSS（自定义 CSS） 功能，允许您应用自定义 CSS。
• 它提供了一个 No Ads（无广告） 功能，因此您将不会看到任何广告，并且没有人会在您的作品上看到广告。

结论

在本文中，我们了解了 CodePen HTML。我们了解了如何使用 CodePen、如何创建 CodePen 帐户、如何创建第一个笔、如何保存笔、如何共享笔、CodePen 编辑器的功能、CodePen PRO 编辑器的功能以及 CodePen 的应用。