我的作品111，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

README.md

assets

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

            
            <!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 css 文件 -->
  <link rel="stylesheet" href="./style.css">
  <!-- 引入 js 文件 -->
  <script src="./index.js"></script>
</head>

<body>
  <h1 class="title">
    Hello 笔.COOL
  </h1>
  <img src="./assets/v2-2dd18f8c55d2614a5e9c2a9601a41019_1440w.jpg" />
  <img src="./assets/screenshot_20260327_183733.jpg" />
<img src="./assets/屏幕截图 2025-05-17 032249.png" />
  <img class="icon" src="https://bi.cool/static/case-materials/icons/html.svg" />
</body>

</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

            
            body {
  background-color: #fefefe;
}

.title {
  margin-top: 95px;
  text-align: center;
}

.desc {
  color: #777;
  text-align: center;
}

.icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 30px auto;
}

img {
  width: 100px;
}

编辑器加载中

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

编辑器加载中

README.md

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

            
            # HTML/JS/CSS 项目模板

笔COOL提供的基础HTML项目，样式、脚本分离到单独的文件

## 用途

- 想要简单练习 HTML
- 快速预览AI生成的 HTML 
- 展示自己的 HTML 作品

## 文件

- **index.html**： 网页入口文件（笔COOL目前会编译并运行 index.html 以及它所引用的文件）
- **sytle.css**： 样式文件
- **index.js**： 脚本文件

你可以自行添加更多的文件

## 内容
项目介绍
- 通过 `<link rel="stylesheet" href="./style.css">` 引入样式文件
- 通过 `<script src="./index.js"></script>` 引入脚本文件
- 页面显示标题 "Hello 笔.COOL"，副标题 "一笔一划，绘就人生；一码一境，酷创未来。"，一个 HTML 图标
- 控制台输出 `["Hello 笔.COOL 控制台"]`，用于展示控制台能力

## 模板使用

- 首页点击 **创建项目**，选择 **新建 HTML/JS/CSS 项目** 即可使用该模板

- 或访问 https://bi.cool/project 即可快速进入此模版

编辑器加载中

预览

控制台