网站首页 > 知识剖析 正文
课程目标:
动手实验用文心快码 Baidu Comate编码,使用 html/css/js 代码还原 文心快码 Baidu Comate在IDE对话区的欢迎页,排版如下图所示。
新建一个空文件夹,命名为Comate-playground,把它拖拽到 VS Code 中打开,或者在vscode中打开,新建一个名为 index.html 文件
等待 Comate 帮你初始化这个文件
你可以自己写一遍,这个结构:
此时我们有了一个最基本的 html 结构,这个结构让浏览器知道这是一个 html 的页面
(+简单介绍下html页面的代码结构,很简单,两个<head>中间需要写的define这个head的内容,)
为了方便我们快速预览页面的效果,建议另外安装 ms-vscode.live-server 插件,你就可以边改代码,边预览对应的效果了
想简单了解下 html?在对话中提问 Comate:“我正在学习 html,请在一个 html body 中列举一些常见的标签的例子”
一个页面主要由:内容 + 样式 + 交互组成,接下来我们引导 Comate 一起完成开发
内容:
5.1.1 如何添加图片
5.1.2 如何制作一个输入框并添加输入框内容
- 我们可以写注释来提示 Comate 写代码。在 html 中,<!-- xxx --> 这样的标记代表注释。我们可以把光标放在一个空行区域,用快捷键 command + / 快速打出这样的标记。如下图所示:
样式:
5.2.1 如何修改背景颜色,渐变等
5.2.2 如何将标题区域居中
5.2.3 如何让输入框驻在底部
- 在添加样式前,我们可以听取 Comate 的建议:“如何给 html 元素添加样式”。
第二课时:
交互:点赞点踩(点击后填充、点赞与点踩互斥)
图片资源 | 地址 |
Comate logo | https://comate.now.baidu-int.com/download/resources/misc/comate-logo.png |
点赞 icon | https://comate.now.baidu-int.com/download/resources/misc/like.svg |
已点赞 icon | https://comate.now.baidu-int.com/download/resources/misc/filledLike.svg |
点踩 icon | https://comate.now.baidu-int.com/download/resources/misc/dislike.svg |
已点踩 icon | https://comate.now.baidu-int.com/download/resources/misc/filledDislike.svg |
结构优化,提问 Comate:“如何把 script 和 css 放到单独文件中”
使用 Comate 调优 js 函数,并添加函数注释
恭喜,你和 Comate 一起实现了一个不简单的编码任务!
进入文心快码 Baidu Comate 官网,体验智能编码之旅,还有超多福利!
猜你喜欢
- 2025-06-24 HTTP/3 黑科技:三次握手如何进阶 QUIC?30 年通信细节揭秘
- 2025-06-24 Markdown 语法速查手册与教程(markdown语法是什么意思)
- 2025-06-24 二 计算机网络 前端学习 物理层 链路层 网络层 传输层 应用层 HTTP
- 2025-06-24 计算机网络之HTTP协议(http网络协议原理)
- 2025-06-24 零基础学习网站必知—http协议等资料大全
- 2025-06-24 Python文件操作:读写txt/csv/json的终极方案
- 2025-06-24 Tomcat处理HTTP请求流程解析(tomcat如何解析http参数)
- 2025-06-24 一日一技:如何正确渲染大模型返回的Markdown?
- 2025-06-24 从零开始,30天学会在Shopify上开店之店铺设置–Day5
- 2025-06-24 壹起航:网站优化之网站代码优化(网站代码优化工具)
- 07-19如何解决#DIV/0! Excel 中的错误(excel div/0是什么意思)
- 07-19你知道"#VALUE!"、"#DIV/0!"等EXCEL错误值都是什么意思吗?
- 07-19Excel遇到#DIV/0、#VALUE!别慌!教你用优雅地屏蔽所有错误值!
- 07-19Excel中#DIV/0!错误详解,新手避坑指南
- 07-19Spring Boot集成OAuth2:实现安全认证与授权的详细指南
- 07-19【实用篇】收到全电发票,怎么查验真伪?
- 07-19微软Office Open XML中的数字签名漏洞
- 07-19开具红字增值税专用发票信息表出错,怎么办?
- 最近发表
-
- 如何解决#DIV/0! Excel 中的错误(excel div/0是什么意思)
- 你知道"#VALUE!"、"#DIV/0!"等EXCEL错误值都是什么意思吗?
- Excel遇到#DIV/0、#VALUE!别慌!教你用优雅地屏蔽所有错误值!
- Excel中#DIV/0!错误详解,新手避坑指南
- Spring Boot集成OAuth2:实现安全认证与授权的详细指南
- 【实用篇】收到全电发票,怎么查验真伪?
- 微软Office Open XML中的数字签名漏洞
- 开具红字增值税专用发票信息表出错,怎么办?
- SpringBoot数据校验与优雅处理详解
- 深入理解 JSR 303:数据校验在 Spring Boot 中的应用
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)