HTML 如何在本地使用Codepen中的代码

在本文中，我们将介绍如何从Codepen上获取代码并将其用于本地开发。Codepen是一个在线代码编辑器，可以帮助开发者实时编写、调试和共享前端代码。

阅读更多：HTML 教程

1. 打开Codepen并选择代码

首先，打开Codepen网站（https://codepen.io/）并登录你的账户。在搜索栏中输入你想要获取的代码相关的关键词，并从搜索结果中选择一个你喜欢的项目。

2. 复制代码

在Codepen项目页面，你将看到HTML、CSS和JavaScript等代码块。根据你的需求，复制你所需要的代码块。例如，如果你只需要复制HTML代码片段，只需复制HTML代码块的内容。

3. 创建本地HTML文件

在你的本地开发环境中创建一个新的HTML文件。使用你喜欢的文本编辑器（如Visual Studio Code、Sublime Text等）打开一个空白文件，并将之前复制的代码粘贴进去。

<!DOCTYPE html>
<html>
  <head>
    <title>Your Page Title</title>
    <!-- 在这里粘贴你从Codepen复制的CSS和JavaScript链接 -->
    <!-- 或将CSS和JavaScript代码直接写在<head>标签内 -->
  </head>
  <body>
    <!-- 在这里粘贴你从Codepen复制的HTML代码 -->
  </body>
</html>

4. 复制CSS和JavaScript链接（可选）

如果在Codepen上的项目中使用了外部CSS和JavaScript库，你需要在本地HTML文件中添加相应的链接。在你复制的代码中找到相关的链接，并将其粘贴到你的本地HTML文件中。例如：

<!DOCTYPE html>
<html>
  <head>
    <title>Your Page Title</title>
    <link rel="stylesheet" type="text/css" href="https://example.com/your-stylesheet.css">
    <script src="https://example.com/your-javascript.js"></script>
  </head>
  <body>
    <!-- 在这里粘贴你从Codepen复制的HTML代码 -->
  </body>
</html>

如果代码在Codepen中使用了内联CSS或JavaScript，你可以直接将其复制粘贴到<head>标签内。

5. 保存并运行代码

保存你的本地HTML文件，并在浏览器中打开该HTML文件。你将看到从Codepen复制的代码在本地环境中运行和呈现出来。

示例

作为示例，我们将复制Codepen上一个简单的按钮代码，并将其用于本地开发。

在Codepen中获取到的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Button Example</title>
    <link rel="stylesheet" type="text/css" href="button-styles.css">
  </head>
  <body>
    <button class="btn">Click me!</button>
  </body>
</html>

我们将创建一个新的HTML文件，将上述代码粘贴进去。同时，我们需要下载button-styles.css文件并放在同级目录下。

在本地HTML文件中添加CSS链接：

<!DOCTYPE html>
<html>
  <head>
    <title>Button Example</title>
    <link rel="stylesheet" type="text/css" href="button-styles.css">
  </head>
  <body>
    <button class="btn">Click me!</button>
  </body>
</html>

保存并运行该HTML文件，你将在浏览器中看到一个带有”Click me!”文本的按钮。