[{"data":1,"prerenderedAt":388},["ShallowReactive",2],{"content-/guide":3,"related-guide":356},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":5,"title":7,"description":8,"keywords":9,"category":10,"author":11,"date":12,"image":13,"body":14,"_type":350,"_id":351,"_source":352,"_file":353,"_stem":354,"_extension":355},"/guide","",false,"使用指南 - HTMLPAGE 完整教程","从入门到精通，学习如何使用 HTMLPAGE 创建专业网页，包括 AI 生成、模板使用、响应式设计等完整教程。","HTMLPAGE 教程, 使用指南, 网页制作教程, AI 页面生成, 响应式设计","使用指南","HTMLPAGE","2025-11-23","/content-images/guide/guide.jpg",{"type":15,"children":16,"toc":347},"root",[17,24,30,37,93,99,199,205,225,231,256,262,321,325],{"type":18,"tag":19,"props":20,"children":21},"element","h1",{"id":10},[22],{"type":23,"value":10},"text",{"type":18,"tag":25,"props":26,"children":27},"p",{},[28],{"type":23,"value":29},"欢迎来到 HTMLPAGE 使用指南！无论你是初学者还是专业开发者，这里都有适合你的教程。",{"type":18,"tag":31,"props":32,"children":36},"section-title",{"description":33,"icon":34,"title":35},"快速上手 HTMLPAGE 的基础功能","🚀","🚀 入门必读",[],{"type":18,"tag":38,"props":39,"children":41},"article-grid",{":columns":40},"3",[42,52,60,68,77,85],{"type":18,"tag":43,"props":44,"children":51},"article-card",{"category":45,"description":46,"icon":47,"title":48,"to":49,":tags":50},"快速开始","5分钟上手 HTMLPAGE，了解基础功能和操作流程，快速创建你的第一个专业网页","⚡","快速入门指南","/guide/getting-started","[\"新手入门\", \"基础教程\", \"快速开始\"]",[],{"type":18,"tag":43,"props":53,"children":59},{"category":45,"description":54,"icon":55,"title":56,"to":57,":tags":58},"学会用 AI 快速创建专业网页，掌握提示词优化技巧，让 AI 准确理解你的需求","🤖","AI 页面生成教程","/guide/ai-generation","[\"AI生成\", \"智能创建\", \"提示词\"]",[],{"type":18,"tag":43,"props":61,"children":67},{"category":45,"description":62,"icon":63,"title":64,"to":65,":tags":66},"高效使用模板库，加速页面创建，一键应用专业设计的网页模板并快速定制","📋","模板使用指南","/guide/template-usage","[\"模板\", \"快速应用\", \"定制化\"]",[],{"type":18,"tag":43,"props":69,"children":76},{"category":70,"description":71,"icon":72,"title":73,"to":74,":tags":75},"基础操作","创建 HTMLPAGE 账号，云端保存你的作品，随时随地访问和编辑你的项目","👤","注册登录","/guide/account-management","[\"账号\", \"云端保存\", \"多设备\"]",[],{"type":18,"tag":43,"props":78,"children":84},{"category":70,"description":79,"icon":80,"title":81,"to":82,":tags":83},"从模板市场选择合适的起点，了解如何筛选和预览模板，找到最适合的设计","🎯","选择模板","/guide/template-selection","[\"模板市场\", \"筛选\", \"预览\"]",[],{"type":18,"tag":43,"props":86,"children":92},{"category":70,"description":87,"icon":88,"title":89,"to":90,":tags":91},"拖拽修改页面元素和布局，实时预览编辑效果，轻松调整样式和内容","🖱️","可视化编辑","/guide/visual-editing","[\"拖拽编辑\", \"所见即所得\", \"实时预览\"]",[],{"type":18,"tag":31,"props":94,"children":98},{"description":95,"icon":96,"title":97},"掌握更多高级功能，创建专业级网页","🎨","🎨 进阶功能",[],{"type":18,"tag":38,"props":100,"children":101},{":columns":40},[102,111,119,127,134,143,151,159,167,176,184,192],{"type":18,"tag":43,"props":103,"children":110},{"category":104,"description":105,"icon":106,"title":107,"to":108,":tags":109},"设计与布局","创建适配各种设备的自适应网页，完美显示在桌面、平板、手机等所有屏幕上","📱","响应式设计教程","/guide/responsive-design","[\"响应式\", \"移动适配\", \"多设备\"]",[],{"type":18,"tag":43,"props":112,"children":118},{"category":104,"description":113,"icon":114,"title":115,"to":116,":tags":117},"使用灵活的12列布局网格，创建专业的页面结构，实现精确的元素对齐","📐","栅格系统","/guide/grid-system","[\"栅格布局\", \"12列\", \"对齐\"]",[],{"type":18,"tag":43,"props":120,"children":126},{"category":104,"description":121,"icon":122,"title":123,"to":124,":tags":125},"丰富的预制组件和模块，包括导航、表单、卡片、按钮等常用元素","🧩","组件库","/guide/component-library","[\"组件\", \"模块\", \"预制元素\"]",[],{"type":18,"tag":43,"props":128,"children":133},{"category":104,"description":129,"icon":96,"title":130,"to":131,":tags":132},"自定义颜色、字体和间距，打造独特的视觉风格，符合品牌形象","样式定制","/guide/style-customization","[\"样式\", \"配色\", \"字体\"]",[],{"type":18,"tag":43,"props":135,"children":142},{"category":136,"description":137,"icon":138,"title":139,"to":140,":tags":141},"导出与集成","导出为 Vue、React、HTML 等格式，将页面无缝集成到现有项目中","📦","多框架导出指南","/guide/export-frameworks","[\"导出\", \"多框架\", \"代码生成\"]",[],{"type":18,"tag":43,"props":144,"children":150},{"category":136,"description":145,"icon":146,"title":147,"to":148,":tags":149},"导出清晰、规范的代码，符合最佳实践，易于维护和扩展","💻","代码优化","/guide/code-optimization","[\"代码质量\", \"规范\", \"可维护性\"]",[],{"type":18,"tag":43,"props":152,"children":158},{"category":136,"description":153,"icon":154,"title":155,"to":156,":tags":157},"处理图片、字体等静态资源，优化资源加载，提升页面性能","🖼️","资源管理","/guide/asset-management","[\"资源\", \"图片\", \"性能\"]",[],{"type":18,"tag":43,"props":160,"children":166},{"category":136,"description":161,"icon":162,"title":163,"to":164,":tags":165},"将生成的页面集成到现有项目，了解如何配置和部署","🔗","项目集成","/guide/project-integration","[\"集成\", \"部署\", \"配置\"]",[],{"type":18,"tag":43,"props":168,"children":175},{"category":169,"description":170,"icon":171,"title":172,"to":173,":tags":174},"SEO 优化","提升网页在搜索引擎中的排名，增加自然流量，优化元数据和结构","📈","SEO 优化指南","/guide/seo-optimization","[\"SEO\", \"搜索优化\", \"流量\"]",[],{"type":18,"tag":43,"props":177,"children":183},{"category":169,"description":178,"icon":179,"title":180,"to":181,":tags":182},"配置标题、描述、关键词等 SEO 元数据，提高搜索引擎可见性","🏷️","元数据设置","/guide/meta-settings","[\"元数据\", \"Meta标签\", \"SEO\"]",[],{"type":18,"tag":43,"props":185,"children":191},{"category":169,"description":186,"icon":187,"title":188,"to":189,":tags":190},"使用正确的 HTML 结构，提高页面的可访问性和 SEO 表现","📝","语义化标签","/guide/semantic-html","[\"HTML\", \"语义化\", \"可访问性\"]",[],{"type":18,"tag":43,"props":193,"children":198},{"category":169,"description":194,"icon":47,"title":195,"to":196,":tags":197},"提升页面加载速度，优化用户体验，提高搜索引擎评分","性能优化","/guide/performance-optimization","[\"性能\", \"加载速度\", \"优化\"]",[],{"type":18,"tag":31,"props":200,"children":204},{"description":201,"icon":202,"title":203},"学习专业的工作流程和技巧","💡","💡 最佳实践",[],{"type":18,"tag":38,"props":206,"children":208},{":columns":207},"2",[209,218],{"type":18,"tag":43,"props":210,"children":217},{"category":211,"description":212,"icon":213,"title":214,"to":215,":tags":216},"最佳实践","从需求分析到发布的完整流程：明确需求 → 选择起点 → 内容填充 → 视觉优化 → 响应式调试 → SEO 配置 → 导出发布","🔄","工作流程建议","/guide/workflow-guide","[\"工作流\", \"流程\", \"方法论\"]",[],{"type":18,"tag":43,"props":219,"children":224},{"category":211,"description":220,"icon":80,"title":221,"to":222,":tags":223},"企业官网、落地页、个人作品集、电商页面等常见场景的最佳实践和注意事项","常见场景指南","/guide/common-scenarios","[\"应用场景\", \"实践案例\", \"经验\"]",[],{"type":18,"tag":31,"props":226,"children":230},{"description":227,"icon":228,"title":229},"提升效率的实用技巧","🔧","🔧 技巧与窍门",[],{"type":18,"tag":38,"props":232,"children":233},{":columns":40},[234,241,249],{"type":18,"tag":43,"props":235,"children":240},{"category":236,"description":237,"icon":202,"title":236,"to":238,":tags":239},"AI 使用技巧","详细描述需求、分步优化、参考案例、明确元素，让 AI 生成更符合预期的页面","/guide/ai-tips","[\"AI技巧\", \"提示词\", \"优化\"]",[],{"type":18,"tag":43,"props":242,"children":248},{"category":243,"description":244,"icon":245,"title":243,"to":246,":tags":247},"编辑技巧","快捷键、组件复用、图层管理、样式继承等编辑器高效使用技巧","⌨️","/guide/editing-tips","[\"快捷键\", \"效率\", \"编辑器\"]",[],{"type":18,"tag":43,"props":250,"children":255},{"category":195,"description":251,"icon":34,"title":252,"to":253,":tags":254},"图片压缩、代码精简、懒加载、CDN 加速等性能优化实用方法","性能优化技巧","/guide/performance-tips","[\"性能\", \"优化\", \"加速\"]",[],{"type":18,"tag":31,"props":257,"children":261},{"description":258,"icon":259,"title":260},"扩展阅读和深入学习","📖","📖 相关资源",[],{"type":18,"tag":38,"props":263,"children":264},{":columns":40},[265,272,277,284,292,299,306,314],{"type":18,"tag":43,"props":266,"children":271},{"category":267,"description":268,"icon":55,"title":269,"to":270},"功能文档","AI 功能详细介绍，了解智能生成的工作原理和技术细节","AI 页面生成","/features/ai-page-generation",[],{"type":18,"tag":43,"props":273,"children":276},{"category":267,"description":274,"icon":88,"title":89,"to":275},"编辑器使用说明，掌握所有编辑功能和操作技巧","/features/visual-drag-drop",[],{"type":18,"tag":43,"props":278,"children":283},{"category":267,"description":279,"icon":280,"title":281,"to":282},"模板库使用指南，了解如何查找和使用模板","🏪","模板市场","/features/template-market",[],{"type":18,"tag":43,"props":285,"children":291},{"category":286,"description":287,"icon":288,"title":289,"to":290},"实际案例","软件产品推广页面案例，学习成功案例的设计思路","💼","SaaS 落地页","/use-cases/saas-landing-page",[],{"type":18,"tag":43,"props":293,"children":298},{"category":286,"description":294,"icon":295,"title":296,"to":297},"公司网站制作案例，了解企业官网的设计要点","🏢","企业官网","/use-cases/corporate-website",[],{"type":18,"tag":43,"props":300,"children":305},{"category":286,"description":301,"icon":302,"title":303,"to":304},"电商产品页案例，学习如何提升转化率","🛒","电商页面","/use-cases/ecommerce-optimization",[],{"type":18,"tag":43,"props":307,"children":313},{"category":308,"description":309,"icon":310,"title":311,"to":312},"技术深入","了解 HTMLPAGE AI 工作原理，深入技术细节","🏗️","AI 技术架构","/ai/multi-agent-architecture",[],{"type":18,"tag":43,"props":315,"children":320},{"category":308,"description":316,"icon":317,"title":318,"to":319},"技术架构详解，探索多智能体协作机制","🤝","多智能体系统","/ai/architecture-overview",[],{"type":18,"tag":322,"props":323,"children":324},"hr",{},[],{"type":18,"tag":25,"props":326,"children":327},{},[328,330,336,338,345],{"type":23,"value":329},"💡 ",{"type":18,"tag":331,"props":332,"children":333},"strong",{},[334],{"type":23,"value":335},"需要帮助？",{"type":23,"value":337}," 查看各个教程的详细说明，或访问 ",{"type":18,"tag":339,"props":340,"children":342},"a",{"href":341},"/",[343],{"type":23,"value":344},"帮助中心",{"type":23,"value":346}," 获取更多资源。",{"title":5,"searchDepth":348,"depth":348,"links":349},3,[],"markdown","content:guide:index.md","content","guide/index.md","guide/index","md",[357,369,380],{"_path":358,"_dir":359,"_draft":6,"_partial":6,"_locale":5,"title":360,"description":361,"keywords":362,"author":11,"date":363,"category":364,"image":365,"_type":350,"_id":366,"_source":352,"_file":367,"_stem":368,"_extension":355},"/blog/accessibility-guidelines","blog","无障碍设计指南","WCAG 标准和无障碍设计最佳实践","无障碍设计指南, Blog, HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg","content:blog:accessibility-guidelines.md","blog/accessibility-guidelines.md","blog/accessibility-guidelines",{"_path":370,"_dir":359,"_draft":6,"_partial":6,"_locale":5,"title":371,"description":372,"keywords":373,"author":374,"date":375,"category":376,"image":365,"_type":350,"_id":377,"_source":352,"_file":378,"_stem":379,"_extension":355},"/blog/accessible-ux-research-guide","无障碍用户研究完全指南：从规划到实施的每一步","深入了解如何进行包容性的用户体验研究，确保残障用户的声音被听见，让产品真正为所有人而设计","用户研究, 无障碍设计, 包容设计, UX研究, 残障用户, 无障碍访问","HTMLPAGE 内容团队","2025-12-01","无障碍与设计","content:blog:accessible-ux-research-guide.md","blog/accessible-ux-research-guide.md","blog/accessible-ux-research-guide",{"_path":381,"_dir":359,"_draft":6,"_partial":6,"_locale":5,"title":382,"description":383,"keywords":384,"author":11,"date":363,"category":364,"image":365,"_type":350,"_id":385,"_source":352,"_file":386,"_stem":387,"_extension":355},"/blog/react-hooks-guide","React Hooks 实战指南","深入理解 React Hooks，包括 useState、useEffect、自定义 Hooks 等","React Hooks 实战指南, Blog, HTMLPAGE","content:blog:react-hooks-guide.md","blog/react-hooks-guide.md","blog/react-hooks-guide",1774945259950]