[{"data":1,"prerenderedAt":316},["ShallowReactive",2],{"content-/guide/visual-editing":3,"related-guide":284},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":278,"_id":279,"_source":280,"_file":281,"_stem":282,"_extension":283},"/guide/visual-editing","guide",false,"","可视化编辑","使用 HTMLPAGE 的可视化编辑器创建网页","可视化编辑, 所见即所得, 编辑器, HTMLPAGE","HTMLPAGE","2025-11-27","使用","/content-images/guide/guide.jpg",{"type":16,"children":17,"toc":265},"root",[18,25,31,38,45,70,76,99,105,128,134,157,163,186,192,225,231,252,256],{"type":19,"tag":20,"props":21,"children":22},"element","h1",{"id":8},[23],{"type":24,"value":8},"text",{"type":19,"tag":26,"props":27,"children":28},"p",{},[29],{"type":24,"value":30},"使用 HTMLPAGE 的可视化编辑器快速创建和编辑页面。",{"type":19,"tag":32,"props":33,"children":35},"h2",{"id":34},"编辑器功能",[36],{"type":24,"value":37},"📌 编辑器功能",{"type":19,"tag":39,"props":40,"children":42},"h3",{"id":41},"_1-画布编辑",[43],{"type":24,"value":44},"1. 画布编辑",{"type":19,"tag":46,"props":47,"children":48},"ul",{},[49,55,60,65],{"type":19,"tag":50,"props":51,"children":52},"li",{},[53],{"type":24,"value":54},"实时编辑",{"type":19,"tag":50,"props":56,"children":57},{},[58],{"type":24,"value":59},"所见即所得",{"type":19,"tag":50,"props":61,"children":62},{},[63],{"type":24,"value":64},"自动对齐",{"type":19,"tag":50,"props":66,"children":67},{},[68],{"type":24,"value":69},"参考线辅助",{"type":19,"tag":39,"props":71,"children":73},{"id":72},"_2-元素操作",[74],{"type":24,"value":75},"2. 元素操作",{"type":19,"tag":46,"props":77,"children":78},{},[79,84,89,94],{"type":19,"tag":50,"props":80,"children":81},{},[82],{"type":24,"value":83},"添加元素",{"type":19,"tag":50,"props":85,"children":86},{},[87],{"type":24,"value":88},"调整属性",{"type":19,"tag":50,"props":90,"children":91},{},[92],{"type":24,"value":93},"设置样式",{"type":19,"tag":50,"props":95,"children":96},{},[97],{"type":24,"value":98},"删除元素",{"type":19,"tag":39,"props":100,"children":102},{"id":101},"_3-图层管理",[103],{"type":24,"value":104},"3. 图层管理",{"type":19,"tag":46,"props":106,"children":107},{},[108,113,118,123],{"type":19,"tag":50,"props":109,"children":110},{},[111],{"type":24,"value":112},"图层面板",{"type":19,"tag":50,"props":114,"children":115},{},[116],{"type":24,"value":117},"分组组织",{"type":19,"tag":50,"props":119,"children":120},{},[121],{"type":24,"value":122},"显示隐藏",{"type":19,"tag":50,"props":124,"children":125},{},[126],{"type":24,"value":127},"锁定解锁",{"type":19,"tag":39,"props":129,"children":131},{"id":130},"_4-预览和导出",[132],{"type":24,"value":133},"4. 预览和导出",{"type":19,"tag":46,"props":135,"children":136},{},[137,142,147,152],{"type":19,"tag":50,"props":138,"children":139},{},[140],{"type":24,"value":141},"实时预览",{"type":19,"tag":50,"props":143,"children":144},{},[145],{"type":24,"value":146},"响应式预览",{"type":19,"tag":50,"props":148,"children":149},{},[150],{"type":24,"value":151},"导出代码",{"type":19,"tag":50,"props":153,"children":154},{},[155],{"type":24,"value":156},"发布上线",{"type":19,"tag":32,"props":158,"children":160},{"id":159},"编辑技巧",[161],{"type":24,"value":162},"🎯 编辑技巧",{"type":19,"tag":46,"props":164,"children":165},{},[166,171,176,181],{"type":19,"tag":50,"props":167,"children":168},{},[169],{"type":24,"value":170},"学习快捷键",{"type":19,"tag":50,"props":172,"children":173},{},[174],{"type":24,"value":175},"利用预设",{"type":19,"tag":50,"props":177,"children":178},{},[179],{"type":24,"value":180},"充分利用参考线",{"type":19,"tag":50,"props":182,"children":183},{},[184],{"type":24,"value":185},"定期保存",{"type":19,"tag":32,"props":187,"children":189},{"id":188},"工作流建议",[190],{"type":24,"value":191},"💡 工作流建议",{"type":19,"tag":193,"props":194,"children":195},"ol",{},[196,201,206,211,216,221],{"type":19,"tag":50,"props":197,"children":198},{},[199],{"type":24,"value":200},"选择或创建模板",{"type":19,"tag":50,"props":202,"children":203},{},[204],{"type":24,"value":205},"调整布局和元素",{"type":19,"tag":50,"props":207,"children":208},{},[209],{"type":24,"value":210},"编辑文本内容",{"type":19,"tag":50,"props":212,"children":213},{},[214],{"type":24,"value":215},"定制样式和颜色",{"type":19,"tag":50,"props":217,"children":218},{},[219],{"type":24,"value":220},"预览和优化",{"type":19,"tag":50,"props":222,"children":223},{},[224],{"type":24,"value":156},{"type":19,"tag":32,"props":226,"children":228},{"id":227},"相关资源",[229],{"type":24,"value":230},"🔗 相关资源",{"type":19,"tag":46,"props":232,"children":233},{},[234,243],{"type":19,"tag":50,"props":235,"children":236},{},[237],{"type":19,"tag":238,"props":239,"children":241},"a",{"href":240},"/guide/editing-tips.md",[242],{"type":24,"value":159},{"type":19,"tag":50,"props":244,"children":245},{},[246],{"type":19,"tag":238,"props":247,"children":249},{"href":248},"/guide/getting-started.md",[250],{"type":24,"value":251},"快速入门",{"type":19,"tag":253,"props":254,"children":255},"hr",{},[],{"type":19,"tag":26,"props":257,"children":258},{},[259],{"type":19,"tag":260,"props":261,"children":262},"em",{},[263],{"type":24,"value":264},"可视化编辑让网页设计变成简单的操作。",{"title":7,"searchDepth":266,"depth":266,"links":267},3,[268,275,276,277],{"id":34,"depth":269,"text":37,"children":270},2,[271,272,273,274],{"id":41,"depth":266,"text":44},{"id":72,"depth":266,"text":75},{"id":101,"depth":266,"text":104},{"id":130,"depth":266,"text":133},{"id":159,"depth":269,"text":162},{"id":188,"depth":269,"text":191},{"id":227,"depth":269,"text":230},"markdown","content:guide:visual-editing.md","content","guide/visual-editing.md","guide/visual-editing","md",[285,297,308],{"_path":286,"_dir":287,"_draft":6,"_partial":6,"_locale":7,"title":288,"description":289,"keywords":290,"author":11,"date":291,"category":292,"image":293,"_type":278,"_id":294,"_source":280,"_file":295,"_stem":296,"_extension":283},"/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":298,"_dir":287,"_draft":6,"_partial":6,"_locale":7,"title":299,"description":300,"keywords":301,"author":302,"date":303,"category":304,"image":293,"_type":278,"_id":305,"_source":280,"_file":306,"_stem":307,"_extension":283},"/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":309,"_dir":287,"_draft":6,"_partial":6,"_locale":7,"title":310,"description":311,"keywords":312,"author":11,"date":291,"category":292,"image":293,"_type":278,"_id":313,"_source":280,"_file":314,"_stem":315,"_extension":283},"/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",1774945278644]