必须先精简描述为明确主谓宾短句并确认响应式需求，再在codebuddy中用“/htmlcss”命令调用混元生成html+css；生成结果含完整骨架和内联样式，但需手动补transition、height等缺失属性，并验证class唯一性、img标签存在性及html5合规性。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用混元生成HTML结构前的必要准备
你手头有一份清晰的页面描述，比如“首页顶部是深蓝色导航栏，中间是居中的诗词卡片，每张卡片带作者名、诗句正文和灰色小字出处”，但直接粘贴进混元可能产出语义模糊或结构松散的代码。必须先做两件事：删掉口语化修饰词（如“看起来很雅致”“大概有个按钮”），把描述压缩成主谓宾明确的短句；再确认是否需要响应式——如果没提“手机端”“适配小屏”，混元默认只写PC端代码，后期补媒体查询会多花一倍时间。
在CodeBuddy中调用混元生成HTML+CSS
打开CodeBuddy IDE → 新建空白HTML文件 → 按快捷键 Ctrl+K（Windows）或 Cmd+K（Mac）唤出Hy3命令面板 → 输入“/htmlcss”并回车 → 在弹出框中粘贴精简后的页面描述 → 点击“生成”。
这一步不能跳过命令前缀“/htmlcss”，否则混元会以普通对话模式响应，返回解释性文字而非可运行代码块。生成结果默认包含完整HTML骨架（含doctype、head、body）和内联style标签，无需手动补全基础结构。
三种典型描述的处理方式
方法一：带明确组件名称的描述
例如：“一个登录表单，含用户名输入框、密码输入框、记住我复选框、登录按钮”。直接粘贴，混元会自动识别语义化标签：input[type="text"]、input[type="password"]、input[type="checkbox"]、button[type="submit"]。它还会给form加novalidate属性——这是为避免浏览器原生校验干扰后续JS逻辑，【不加这个属性可能导致表单无法提交】。
方法二：依赖视觉关系的描述
例如：“标题在左，搜索框在右，两者水平对齐且高度一致”。混元会优先用flex布局实现，但注意：它默认不写height值，仅靠align-items: center拉齐。若父容器未设固定高度，搜索框实际会塌缩。此时需在生成后手动给父容器加height: 60px之类的具体数值。
方法三：含动效或交互意图的描述
例如：“鼠标悬停时卡片上浮并加阴影”。混元能正确写出:hover伪类和transform: translateY(-4px)，但不会自动添加transition属性。必须在生成的CSS里补上transition: all 0.2s ease，否则悬停效果会突兀闪现。
生成后必须验证的三项内容
① 打开浏览器开发者工具 → 切换到Elements面板 → 检查所有class名是否唯一，避免多个卡片共用card类却无嵌套层级区分；
② 在Console中输入document.querySelectorAll('img').length → 若返回0但描述中写了“每张卡片配一张诗人画像”，说明混元漏掉了img标签，需手动补全；
③ 把生成的HTML粘贴进W3C验证器 → 重点看“Element X is not supported in HTML5”类报错，常见于误用<center></center>或<font></font>等废弃标签，必须替换成CSS控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
