[{"data":1,"prerenderedAt":1826},["ShallowReactive",2],{"content-/ai/code-generation":3,"related-ai":1796},{"_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":1790,"_id":1791,"_source":1792,"_file":1793,"_stem":1794,"_extension":1795},"/ai/code-generation","ai",false,"","AI 代码生成","使用 AI 自动生成高质量的 HTML、CSS 和 JavaScript 代码","代码生成, HTML, CSS, JavaScript, HTMLPAGE","HTMLPAGE","2025-11-27","AI 技术","/content-images/ai/ai.jpg",{"type":16,"children":17,"toc":1768},"root",[18,26,32,39,45,50,59,84,92,115,123,146,151,156,184,190,196,201,528,536,559,565,570,909,915,920,1286,1292,1297,1502,1508,1514,1537,1543,1561,1567,1585,1591,1596,1604,1610,1706,1712,1749,1753,1762],{"type":19,"tag":20,"props":21,"children":23},"element","h1",{"id":22},"ai-代码生成",[24],{"type":25,"value":8},"text",{"type":19,"tag":27,"props":28,"children":29},"p",{},[30],{"type":25,"value":31},"HTMLPAGE AI 不仅生成视觉设计，更能输出符合最佳实践的高质量代码，支持多种框架和用途。",{"type":19,"tag":33,"props":34,"children":36},"h2",{"id":35},"代码生成概述",[37],{"type":25,"value":38},"📌 代码生成概述",{"type":19,"tag":40,"props":41,"children":43},"h3",{"id":42},"生成范围",[44],{"type":25,"value":42},{"type":19,"tag":27,"props":46,"children":47},{},[48],{"type":25,"value":49},"HTMLPAGE AI 能够生成：",{"type":19,"tag":27,"props":51,"children":52},{},[53],{"type":19,"tag":54,"props":55,"children":56},"strong",{},[57],{"type":25,"value":58},"前端代码",{"type":19,"tag":60,"props":61,"children":62},"ul",{},[63,69,74,79],{"type":19,"tag":64,"props":65,"children":66},"li",{},[67],{"type":25,"value":68},"语义化 HTML 结构",{"type":19,"tag":64,"props":70,"children":71},{},[72],{"type":25,"value":73},"响应式 CSS 样式",{"type":19,"tag":64,"props":75,"children":76},{},[77],{"type":25,"value":78},"交互式 JavaScript",{"type":19,"tag":64,"props":80,"children":81},{},[82],{"type":25,"value":83},"现代 CSS Grid/Flexbox 布局",{"type":19,"tag":27,"props":85,"children":86},{},[87],{"type":19,"tag":54,"props":88,"children":89},{},[90],{"type":25,"value":91},"框架代码",{"type":19,"tag":60,"props":93,"children":94},{},[95,100,105,110],{"type":19,"tag":64,"props":96,"children":97},{},[98],{"type":25,"value":99},"Vue 3 Composition API",{"type":19,"tag":64,"props":101,"children":102},{},[103],{"type":25,"value":104},"React 函数组件",{"type":19,"tag":64,"props":106,"children":107},{},[108],{"type":25,"value":109},"Alpine.js 轻量框架",{"type":19,"tag":64,"props":111,"children":112},{},[113],{"type":25,"value":114},"原生 HTML/CSS/JS",{"type":19,"tag":27,"props":116,"children":117},{},[118],{"type":19,"tag":54,"props":119,"children":120},{},[121],{"type":25,"value":122},"配置与工具",{"type":19,"tag":60,"props":124,"children":125},{},[126,131,136,141],{"type":19,"tag":64,"props":127,"children":128},{},[129],{"type":25,"value":130},"Tailwind CSS 配置",{"type":19,"tag":64,"props":132,"children":133},{},[134],{"type":25,"value":135},"PostCSS 处理",{"type":19,"tag":64,"props":137,"children":138},{},[139],{"type":25,"value":140},"Webpack/Vite 兼容",{"type":19,"tag":64,"props":142,"children":143},{},[144],{"type":25,"value":145},"ESM 模块格式",{"type":19,"tag":40,"props":147,"children":149},{"id":148},"代码质量标准",[150],{"type":25,"value":148},{"type":19,"tag":27,"props":152,"children":153},{},[154],{"type":25,"value":155},"所有生成的代码遵循：",{"type":19,"tag":60,"props":157,"children":158},{},[159,164,169,174,179],{"type":19,"tag":64,"props":160,"children":161},{},[162],{"type":25,"value":163},"✅ W3C HTML 标准",{"type":19,"tag":64,"props":165,"children":166},{},[167],{"type":25,"value":168},"✅ 响应式设计规范",{"type":19,"tag":64,"props":170,"children":171},{},[172],{"type":25,"value":173},"✅ 无障碍访问 (WCAG 2.1)",{"type":19,"tag":64,"props":175,"children":176},{},[177],{"type":25,"value":178},"✅ 性能最佳实践",{"type":19,"tag":64,"props":180,"children":181},{},[182],{"type":25,"value":183},"✅ SEO 友好结构",{"type":19,"tag":33,"props":185,"children":187},{"id":186},"代码生成特性",[188],{"type":25,"value":189},"🎯 代码生成特性",{"type":19,"tag":40,"props":191,"children":193},{"id":192},"_1-智能结构规划",[194],{"type":25,"value":195},"1. 智能结构规划",{"type":19,"tag":27,"props":197,"children":198},{},[199],{"type":25,"value":200},"AI 分析需求后，自动规划最优的代码结构：",{"type":19,"tag":202,"props":203,"children":207},"pre",{"code":204,"language":205,"meta":7,"className":206,"style":7},"\u003C!-- 语义化布局 -->\n\u003Cheader role=\"banner\">\n  \u003C!-- 导航 -->\n\u003C/header>\n\n\u003Cmain role=\"main\">\n  \u003Csection aria-labelledby=\"hero-title\">\n    \u003C!-- Hero 区块 -->\n  \u003C/section>\n  \n  \u003Csection aria-labelledby=\"features-title\">\n    \u003C!-- 功能展示 -->\n  \u003C/section>\n\u003C/main>\n\n\u003Cfooter role=\"contentinfo\">\n  \u003C!-- 页脚 -->\n\u003C/footer>\n","html","language-html shiki shiki-themes github-dark github-dark",[208],{"type":19,"tag":209,"props":210,"children":211},"code",{"__ignoreMap":7},[212,224,262,271,288,298,328,360,369,386,395,424,433,449,465,473,503,512],{"type":19,"tag":213,"props":214,"children":217},"span",{"class":215,"line":216},"line",1,[218],{"type":19,"tag":213,"props":219,"children":221},{"style":220},"--shiki-default:#6A737D;--shiki-dark:#6A737D",[222],{"type":25,"value":223},"\u003C!-- 语义化布局 -->\n",{"type":19,"tag":213,"props":225,"children":227},{"class":215,"line":226},2,[228,234,240,246,251,257],{"type":19,"tag":213,"props":229,"children":231},{"style":230},"--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8",[232],{"type":25,"value":233},"\u003C",{"type":19,"tag":213,"props":235,"children":237},{"style":236},"--shiki-default:#85E89D;--shiki-dark:#85E89D",[238],{"type":25,"value":239},"header",{"type":19,"tag":213,"props":241,"children":243},{"style":242},"--shiki-default:#B392F0;--shiki-dark:#B392F0",[244],{"type":25,"value":245}," role",{"type":19,"tag":213,"props":247,"children":248},{"style":230},[249],{"type":25,"value":250},"=",{"type":19,"tag":213,"props":252,"children":254},{"style":253},"--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF",[255],{"type":25,"value":256},"\"banner\"",{"type":19,"tag":213,"props":258,"children":259},{"style":230},[260],{"type":25,"value":261},">\n",{"type":19,"tag":213,"props":263,"children":265},{"class":215,"line":264},3,[266],{"type":19,"tag":213,"props":267,"children":268},{"style":220},[269],{"type":25,"value":270},"  \u003C!-- 导航 -->\n",{"type":19,"tag":213,"props":272,"children":274},{"class":215,"line":273},4,[275,280,284],{"type":19,"tag":213,"props":276,"children":277},{"style":230},[278],{"type":25,"value":279},"\u003C/",{"type":19,"tag":213,"props":281,"children":282},{"style":236},[283],{"type":25,"value":239},{"type":19,"tag":213,"props":285,"children":286},{"style":230},[287],{"type":25,"value":261},{"type":19,"tag":213,"props":289,"children":291},{"class":215,"line":290},5,[292],{"type":19,"tag":213,"props":293,"children":295},{"emptyLinePlaceholder":294},true,[296],{"type":25,"value":297},"\n",{"type":19,"tag":213,"props":299,"children":301},{"class":215,"line":300},6,[302,306,311,315,319,324],{"type":19,"tag":213,"props":303,"children":304},{"style":230},[305],{"type":25,"value":233},{"type":19,"tag":213,"props":307,"children":308},{"style":236},[309],{"type":25,"value":310},"main",{"type":19,"tag":213,"props":312,"children":313},{"style":242},[314],{"type":25,"value":245},{"type":19,"tag":213,"props":316,"children":317},{"style":230},[318],{"type":25,"value":250},{"type":19,"tag":213,"props":320,"children":321},{"style":253},[322],{"type":25,"value":323},"\"main\"",{"type":19,"tag":213,"props":325,"children":326},{"style":230},[327],{"type":25,"value":261},{"type":19,"tag":213,"props":329,"children":331},{"class":215,"line":330},7,[332,337,342,347,351,356],{"type":19,"tag":213,"props":333,"children":334},{"style":230},[335],{"type":25,"value":336},"  \u003C",{"type":19,"tag":213,"props":338,"children":339},{"style":236},[340],{"type":25,"value":341},"section",{"type":19,"tag":213,"props":343,"children":344},{"style":242},[345],{"type":25,"value":346}," aria-labelledby",{"type":19,"tag":213,"props":348,"children":349},{"style":230},[350],{"type":25,"value":250},{"type":19,"tag":213,"props":352,"children":353},{"style":253},[354],{"type":25,"value":355},"\"hero-title\"",{"type":19,"tag":213,"props":357,"children":358},{"style":230},[359],{"type":25,"value":261},{"type":19,"tag":213,"props":361,"children":363},{"class":215,"line":362},8,[364],{"type":19,"tag":213,"props":365,"children":366},{"style":220},[367],{"type":25,"value":368},"    \u003C!-- Hero 区块 -->\n",{"type":19,"tag":213,"props":370,"children":372},{"class":215,"line":371},9,[373,378,382],{"type":19,"tag":213,"props":374,"children":375},{"style":230},[376],{"type":25,"value":377},"  \u003C/",{"type":19,"tag":213,"props":379,"children":380},{"style":236},[381],{"type":25,"value":341},{"type":19,"tag":213,"props":383,"children":384},{"style":230},[385],{"type":25,"value":261},{"type":19,"tag":213,"props":387,"children":389},{"class":215,"line":388},10,[390],{"type":19,"tag":213,"props":391,"children":392},{"style":230},[393],{"type":25,"value":394},"  \n",{"type":19,"tag":213,"props":396,"children":398},{"class":215,"line":397},11,[399,403,407,411,415,420],{"type":19,"tag":213,"props":400,"children":401},{"style":230},[402],{"type":25,"value":336},{"type":19,"tag":213,"props":404,"children":405},{"style":236},[406],{"type":25,"value":341},{"type":19,"tag":213,"props":408,"children":409},{"style":242},[410],{"type":25,"value":346},{"type":19,"tag":213,"props":412,"children":413},{"style":230},[414],{"type":25,"value":250},{"type":19,"tag":213,"props":416,"children":417},{"style":253},[418],{"type":25,"value":419},"\"features-title\"",{"type":19,"tag":213,"props":421,"children":422},{"style":230},[423],{"type":25,"value":261},{"type":19,"tag":213,"props":425,"children":427},{"class":215,"line":426},12,[428],{"type":19,"tag":213,"props":429,"children":430},{"style":220},[431],{"type":25,"value":432},"    \u003C!-- 功能展示 -->\n",{"type":19,"tag":213,"props":434,"children":436},{"class":215,"line":435},13,[437,441,445],{"type":19,"tag":213,"props":438,"children":439},{"style":230},[440],{"type":25,"value":377},{"type":19,"tag":213,"props":442,"children":443},{"style":236},[444],{"type":25,"value":341},{"type":19,"tag":213,"props":446,"children":447},{"style":230},[448],{"type":25,"value":261},{"type":19,"tag":213,"props":450,"children":452},{"class":215,"line":451},14,[453,457,461],{"type":19,"tag":213,"props":454,"children":455},{"style":230},[456],{"type":25,"value":279},{"type":19,"tag":213,"props":458,"children":459},{"style":236},[460],{"type":25,"value":310},{"type":19,"tag":213,"props":462,"children":463},{"style":230},[464],{"type":25,"value":261},{"type":19,"tag":213,"props":466,"children":468},{"class":215,"line":467},15,[469],{"type":19,"tag":213,"props":470,"children":471},{"emptyLinePlaceholder":294},[472],{"type":25,"value":297},{"type":19,"tag":213,"props":474,"children":476},{"class":215,"line":475},16,[477,481,486,490,494,499],{"type":19,"tag":213,"props":478,"children":479},{"style":230},[480],{"type":25,"value":233},{"type":19,"tag":213,"props":482,"children":483},{"style":236},[484],{"type":25,"value":485},"footer",{"type":19,"tag":213,"props":487,"children":488},{"style":242},[489],{"type":25,"value":245},{"type":19,"tag":213,"props":491,"children":492},{"style":230},[493],{"type":25,"value":250},{"type":19,"tag":213,"props":495,"children":496},{"style":253},[497],{"type":25,"value":498},"\"contentinfo\"",{"type":19,"tag":213,"props":500,"children":501},{"style":230},[502],{"type":25,"value":261},{"type":19,"tag":213,"props":504,"children":506},{"class":215,"line":505},17,[507],{"type":19,"tag":213,"props":508,"children":509},{"style":220},[510],{"type":25,"value":511},"  \u003C!-- 页脚 -->\n",{"type":19,"tag":213,"props":513,"children":515},{"class":215,"line":514},18,[516,520,524],{"type":19,"tag":213,"props":517,"children":518},{"style":230},[519],{"type":25,"value":279},{"type":19,"tag":213,"props":521,"children":522},{"style":236},[523],{"type":25,"value":485},{"type":19,"tag":213,"props":525,"children":526},{"style":230},[527],{"type":25,"value":261},{"type":19,"tag":27,"props":529,"children":530},{},[531],{"type":19,"tag":54,"props":532,"children":533},{},[534],{"type":25,"value":535},"结构优势：",{"type":19,"tag":60,"props":537,"children":538},{},[539,544,549,554],{"type":19,"tag":64,"props":540,"children":541},{},[542],{"type":25,"value":543},"清晰的语义",{"type":19,"tag":64,"props":545,"children":546},{},[547],{"type":25,"value":548},"易于导航",{"type":19,"tag":64,"props":550,"children":551},{},[552],{"type":25,"value":553},"利于 SEO",{"type":19,"tag":64,"props":555,"children":556},{},[557],{"type":25,"value":558},"无障碍友好",{"type":19,"tag":40,"props":560,"children":562},{"id":561},"_2-响应式设计代码",[563],{"type":25,"value":564},"2. 响应式设计代码",{"type":19,"tag":27,"props":566,"children":567},{},[568],{"type":25,"value":569},"自动为多屏幕生成响应式代码：",{"type":19,"tag":202,"props":571,"children":575},{"code":572,"language":573,"meta":7,"className":574,"style":7},"/* 移动优先策略 */\n.card {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 1rem;\n}\n\n/* 平板及以上 */\n@media (min-width: 768px) {\n  .card {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n/* 桌面及以上 */\n@media (min-width: 1024px) {\n  .card {\n    grid-template-columns: 1fr 1fr 1fr;\n  }\n}\n","css","language-css shiki shiki-themes github-dark github-dark",[576],{"type":19,"tag":209,"props":577,"children":578},{"__ignoreMap":7},[579,587,600,624,651,676,684,691,699,736,748,781,789,796,803,811,843,854,893,901],{"type":19,"tag":213,"props":580,"children":581},{"class":215,"line":216},[582],{"type":19,"tag":213,"props":583,"children":584},{"style":220},[585],{"type":25,"value":586},"/* 移动优先策略 */\n",{"type":19,"tag":213,"props":588,"children":589},{"class":215,"line":226},[590,595],{"type":19,"tag":213,"props":591,"children":592},{"style":242},[593],{"type":25,"value":594},".card",{"type":19,"tag":213,"props":596,"children":597},{"style":230},[598],{"type":25,"value":599}," {\n",{"type":19,"tag":213,"props":601,"children":602},{"class":215,"line":264},[603,609,614,619],{"type":19,"tag":213,"props":604,"children":606},{"style":605},"--shiki-default:#79B8FF;--shiki-dark:#79B8FF",[607],{"type":25,"value":608},"  display",{"type":19,"tag":213,"props":610,"children":611},{"style":230},[612],{"type":25,"value":613},": ",{"type":19,"tag":213,"props":615,"children":616},{"style":605},[617],{"type":25,"value":618},"grid",{"type":19,"tag":213,"props":620,"children":621},{"style":230},[622],{"type":25,"value":623},";\n",{"type":19,"tag":213,"props":625,"children":626},{"class":215,"line":273},[627,632,636,641,647],{"type":19,"tag":213,"props":628,"children":629},{"style":605},[630],{"type":25,"value":631},"  grid-template-columns",{"type":19,"tag":213,"props":633,"children":634},{"style":230},[635],{"type":25,"value":613},{"type":19,"tag":213,"props":637,"children":638},{"style":605},[639],{"type":25,"value":640},"1",{"type":19,"tag":213,"props":642,"children":644},{"style":643},"--shiki-default:#F97583;--shiki-dark:#F97583",[645],{"type":25,"value":646},"fr",{"type":19,"tag":213,"props":648,"children":649},{"style":230},[650],{"type":25,"value":623},{"type":19,"tag":213,"props":652,"children":653},{"class":215,"line":290},[654,659,663,667,672],{"type":19,"tag":213,"props":655,"children":656},{"style":605},[657],{"type":25,"value":658},"  gap",{"type":19,"tag":213,"props":660,"children":661},{"style":230},[662],{"type":25,"value":613},{"type":19,"tag":213,"props":664,"children":665},{"style":605},[666],{"type":25,"value":640},{"type":19,"tag":213,"props":668,"children":669},{"style":643},[670],{"type":25,"value":671},"rem",{"type":19,"tag":213,"props":673,"children":674},{"style":230},[675],{"type":25,"value":623},{"type":19,"tag":213,"props":677,"children":678},{"class":215,"line":300},[679],{"type":19,"tag":213,"props":680,"children":681},{"style":230},[682],{"type":25,"value":683},"}\n",{"type":19,"tag":213,"props":685,"children":686},{"class":215,"line":330},[687],{"type":19,"tag":213,"props":688,"children":689},{"emptyLinePlaceholder":294},[690],{"type":25,"value":297},{"type":19,"tag":213,"props":692,"children":693},{"class":215,"line":362},[694],{"type":19,"tag":213,"props":695,"children":696},{"style":220},[697],{"type":25,"value":698},"/* 平板及以上 */\n",{"type":19,"tag":213,"props":700,"children":701},{"class":215,"line":371},[702,707,712,717,721,726,731],{"type":19,"tag":213,"props":703,"children":704},{"style":643},[705],{"type":25,"value":706},"@media",{"type":19,"tag":213,"props":708,"children":709},{"style":230},[710],{"type":25,"value":711}," (",{"type":19,"tag":213,"props":713,"children":714},{"style":605},[715],{"type":25,"value":716},"min-width",{"type":19,"tag":213,"props":718,"children":719},{"style":230},[720],{"type":25,"value":613},{"type":19,"tag":213,"props":722,"children":723},{"style":605},[724],{"type":25,"value":725},"768",{"type":19,"tag":213,"props":727,"children":728},{"style":643},[729],{"type":25,"value":730},"px",{"type":19,"tag":213,"props":732,"children":733},{"style":230},[734],{"type":25,"value":735},") {\n",{"type":19,"tag":213,"props":737,"children":738},{"class":215,"line":388},[739,744],{"type":19,"tag":213,"props":740,"children":741},{"style":242},[742],{"type":25,"value":743},"  .card",{"type":19,"tag":213,"props":745,"children":746},{"style":230},[747],{"type":25,"value":599},{"type":19,"tag":213,"props":749,"children":750},{"class":215,"line":397},[751,756,760,764,768,773,777],{"type":19,"tag":213,"props":752,"children":753},{"style":605},[754],{"type":25,"value":755},"    grid-template-columns",{"type":19,"tag":213,"props":757,"children":758},{"style":230},[759],{"type":25,"value":613},{"type":19,"tag":213,"props":761,"children":762},{"style":605},[763],{"type":25,"value":640},{"type":19,"tag":213,"props":765,"children":766},{"style":643},[767],{"type":25,"value":646},{"type":19,"tag":213,"props":769,"children":770},{"style":605},[771],{"type":25,"value":772}," 1",{"type":19,"tag":213,"props":774,"children":775},{"style":643},[776],{"type":25,"value":646},{"type":19,"tag":213,"props":778,"children":779},{"style":230},[780],{"type":25,"value":623},{"type":19,"tag":213,"props":782,"children":783},{"class":215,"line":426},[784],{"type":19,"tag":213,"props":785,"children":786},{"style":230},[787],{"type":25,"value":788},"  }\n",{"type":19,"tag":213,"props":790,"children":791},{"class":215,"line":435},[792],{"type":19,"tag":213,"props":793,"children":794},{"style":230},[795],{"type":25,"value":683},{"type":19,"tag":213,"props":797,"children":798},{"class":215,"line":451},[799],{"type":19,"tag":213,"props":800,"children":801},{"emptyLinePlaceholder":294},[802],{"type":25,"value":297},{"type":19,"tag":213,"props":804,"children":805},{"class":215,"line":467},[806],{"type":19,"tag":213,"props":807,"children":808},{"style":220},[809],{"type":25,"value":810},"/* 桌面及以上 */\n",{"type":19,"tag":213,"props":812,"children":813},{"class":215,"line":475},[814,818,822,826,830,835,839],{"type":19,"tag":213,"props":815,"children":816},{"style":643},[817],{"type":25,"value":706},{"type":19,"tag":213,"props":819,"children":820},{"style":230},[821],{"type":25,"value":711},{"type":19,"tag":213,"props":823,"children":824},{"style":605},[825],{"type":25,"value":716},{"type":19,"tag":213,"props":827,"children":828},{"style":230},[829],{"type":25,"value":613},{"type":19,"tag":213,"props":831,"children":832},{"style":605},[833],{"type":25,"value":834},"1024",{"type":19,"tag":213,"props":836,"children":837},{"style":643},[838],{"type":25,"value":730},{"type":19,"tag":213,"props":840,"children":841},{"style":230},[842],{"type":25,"value":735},{"type":19,"tag":213,"props":844,"children":845},{"class":215,"line":505},[846,850],{"type":19,"tag":213,"props":847,"children":848},{"style":242},[849],{"type":25,"value":743},{"type":19,"tag":213,"props":851,"children":852},{"style":230},[853],{"type":25,"value":599},{"type":19,"tag":213,"props":855,"children":856},{"class":215,"line":514},[857,861,865,869,873,877,881,885,889],{"type":19,"tag":213,"props":858,"children":859},{"style":605},[860],{"type":25,"value":755},{"type":19,"tag":213,"props":862,"children":863},{"style":230},[864],{"type":25,"value":613},{"type":19,"tag":213,"props":866,"children":867},{"style":605},[868],{"type":25,"value":640},{"type":19,"tag":213,"props":870,"children":871},{"style":643},[872],{"type":25,"value":646},{"type":19,"tag":213,"props":874,"children":875},{"style":605},[876],{"type":25,"value":772},{"type":19,"tag":213,"props":878,"children":879},{"style":643},[880],{"type":25,"value":646},{"type":19,"tag":213,"props":882,"children":883},{"style":605},[884],{"type":25,"value":772},{"type":19,"tag":213,"props":886,"children":887},{"style":643},[888],{"type":25,"value":646},{"type":19,"tag":213,"props":890,"children":891},{"style":230},[892],{"type":25,"value":623},{"type":19,"tag":213,"props":894,"children":896},{"class":215,"line":895},19,[897],{"type":19,"tag":213,"props":898,"children":899},{"style":230},[900],{"type":25,"value":788},{"type":19,"tag":213,"props":902,"children":904},{"class":215,"line":903},20,[905],{"type":19,"tag":213,"props":906,"children":907},{"style":230},[908],{"type":25,"value":683},{"type":19,"tag":40,"props":910,"children":912},{"id":911},"_3-无障碍访问代码",[913],{"type":25,"value":914},"3. 无障碍访问代码",{"type":19,"tag":27,"props":916,"children":917},{},[918],{"type":25,"value":919},"确保网站对所有用户友好：",{"type":19,"tag":202,"props":921,"children":923},{"code":922,"language":205,"meta":7,"className":206,"style":7},"\u003C!-- 图片替代文本 -->\n\u003Cimg \n  src=\"product.jpg\" \n  alt=\"产品名称及主要特性描述\"\n  title=\"用户交互提示信息\"\n>\n\n\u003C!-- 表单可访问性 -->\n\u003Clabel for=\"email\">电子邮箱\u003C/label>\n\u003Cinput \n  id=\"email\" \n  type=\"email\" \n  aria-required=\"true\"\n  aria-describedby=\"email-help\"\n>\n\u003Cspan id=\"email-help\">格式: example@domain.com\u003C/span>\n\n\u003C!-- 按钮语义性 -->\n\u003Cbutton type=\"submit\" aria-label=\"提交表单\">\n  发送\n\u003C/button>\n",[924],{"type":19,"tag":209,"props":925,"children":926},{"__ignoreMap":7},[927,935,952,973,990,1007,1014,1021,1029,1068,1084,1104,1124,1141,1158,1165,1203,1210,1218,1262,1270],{"type":19,"tag":213,"props":928,"children":929},{"class":215,"line":216},[930],{"type":19,"tag":213,"props":931,"children":932},{"style":220},[933],{"type":25,"value":934},"\u003C!-- 图片替代文本 -->\n",{"type":19,"tag":213,"props":936,"children":937},{"class":215,"line":226},[938,942,947],{"type":19,"tag":213,"props":939,"children":940},{"style":230},[941],{"type":25,"value":233},{"type":19,"tag":213,"props":943,"children":944},{"style":236},[945],{"type":25,"value":946},"img",{"type":19,"tag":213,"props":948,"children":949},{"style":230},[950],{"type":25,"value":951}," \n",{"type":19,"tag":213,"props":953,"children":954},{"class":215,"line":264},[955,960,964,969],{"type":19,"tag":213,"props":956,"children":957},{"style":242},[958],{"type":25,"value":959},"  src",{"type":19,"tag":213,"props":961,"children":962},{"style":230},[963],{"type":25,"value":250},{"type":19,"tag":213,"props":965,"children":966},{"style":253},[967],{"type":25,"value":968},"\"product.jpg\"",{"type":19,"tag":213,"props":970,"children":971},{"style":230},[972],{"type":25,"value":951},{"type":19,"tag":213,"props":974,"children":975},{"class":215,"line":273},[976,981,985],{"type":19,"tag":213,"props":977,"children":978},{"style":242},[979],{"type":25,"value":980},"  alt",{"type":19,"tag":213,"props":982,"children":983},{"style":230},[984],{"type":25,"value":250},{"type":19,"tag":213,"props":986,"children":987},{"style":253},[988],{"type":25,"value":989},"\"产品名称及主要特性描述\"\n",{"type":19,"tag":213,"props":991,"children":992},{"class":215,"line":290},[993,998,1002],{"type":19,"tag":213,"props":994,"children":995},{"style":242},[996],{"type":25,"value":997},"  title",{"type":19,"tag":213,"props":999,"children":1000},{"style":230},[1001],{"type":25,"value":250},{"type":19,"tag":213,"props":1003,"children":1004},{"style":253},[1005],{"type":25,"value":1006},"\"用户交互提示信息\"\n",{"type":19,"tag":213,"props":1008,"children":1009},{"class":215,"line":300},[1010],{"type":19,"tag":213,"props":1011,"children":1012},{"style":230},[1013],{"type":25,"value":261},{"type":19,"tag":213,"props":1015,"children":1016},{"class":215,"line":330},[1017],{"type":19,"tag":213,"props":1018,"children":1019},{"emptyLinePlaceholder":294},[1020],{"type":25,"value":297},{"type":19,"tag":213,"props":1022,"children":1023},{"class":215,"line":362},[1024],{"type":19,"tag":213,"props":1025,"children":1026},{"style":220},[1027],{"type":25,"value":1028},"\u003C!-- 表单可访问性 -->\n",{"type":19,"tag":213,"props":1030,"children":1031},{"class":215,"line":371},[1032,1036,1041,1046,1050,1055,1060,1064],{"type":19,"tag":213,"props":1033,"children":1034},{"style":230},[1035],{"type":25,"value":233},{"type":19,"tag":213,"props":1037,"children":1038},{"style":236},[1039],{"type":25,"value":1040},"label",{"type":19,"tag":213,"props":1042,"children":1043},{"style":242},[1044],{"type":25,"value":1045}," for",{"type":19,"tag":213,"props":1047,"children":1048},{"style":230},[1049],{"type":25,"value":250},{"type":19,"tag":213,"props":1051,"children":1052},{"style":253},[1053],{"type":25,"value":1054},"\"email\"",{"type":19,"tag":213,"props":1056,"children":1057},{"style":230},[1058],{"type":25,"value":1059},">电子邮箱\u003C/",{"type":19,"tag":213,"props":1061,"children":1062},{"style":236},[1063],{"type":25,"value":1040},{"type":19,"tag":213,"props":1065,"children":1066},{"style":230},[1067],{"type":25,"value":261},{"type":19,"tag":213,"props":1069,"children":1070},{"class":215,"line":388},[1071,1075,1080],{"type":19,"tag":213,"props":1072,"children":1073},{"style":230},[1074],{"type":25,"value":233},{"type":19,"tag":213,"props":1076,"children":1077},{"style":236},[1078],{"type":25,"value":1079},"input",{"type":19,"tag":213,"props":1081,"children":1082},{"style":230},[1083],{"type":25,"value":951},{"type":19,"tag":213,"props":1085,"children":1086},{"class":215,"line":397},[1087,1092,1096,1100],{"type":19,"tag":213,"props":1088,"children":1089},{"style":242},[1090],{"type":25,"value":1091},"  id",{"type":19,"tag":213,"props":1093,"children":1094},{"style":230},[1095],{"type":25,"value":250},{"type":19,"tag":213,"props":1097,"children":1098},{"style":253},[1099],{"type":25,"value":1054},{"type":19,"tag":213,"props":1101,"children":1102},{"style":230},[1103],{"type":25,"value":951},{"type":19,"tag":213,"props":1105,"children":1106},{"class":215,"line":426},[1107,1112,1116,1120],{"type":19,"tag":213,"props":1108,"children":1109},{"style":242},[1110],{"type":25,"value":1111},"  type",{"type":19,"tag":213,"props":1113,"children":1114},{"style":230},[1115],{"type":25,"value":250},{"type":19,"tag":213,"props":1117,"children":1118},{"style":253},[1119],{"type":25,"value":1054},{"type":19,"tag":213,"props":1121,"children":1122},{"style":230},[1123],{"type":25,"value":951},{"type":19,"tag":213,"props":1125,"children":1126},{"class":215,"line":435},[1127,1132,1136],{"type":19,"tag":213,"props":1128,"children":1129},{"style":242},[1130],{"type":25,"value":1131},"  aria-required",{"type":19,"tag":213,"props":1133,"children":1134},{"style":230},[1135],{"type":25,"value":250},{"type":19,"tag":213,"props":1137,"children":1138},{"style":253},[1139],{"type":25,"value":1140},"\"true\"\n",{"type":19,"tag":213,"props":1142,"children":1143},{"class":215,"line":451},[1144,1149,1153],{"type":19,"tag":213,"props":1145,"children":1146},{"style":242},[1147],{"type":25,"value":1148},"  aria-describedby",{"type":19,"tag":213,"props":1150,"children":1151},{"style":230},[1152],{"type":25,"value":250},{"type":19,"tag":213,"props":1154,"children":1155},{"style":253},[1156],{"type":25,"value":1157},"\"email-help\"\n",{"type":19,"tag":213,"props":1159,"children":1160},{"class":215,"line":467},[1161],{"type":19,"tag":213,"props":1162,"children":1163},{"style":230},[1164],{"type":25,"value":261},{"type":19,"tag":213,"props":1166,"children":1167},{"class":215,"line":475},[1168,1172,1176,1181,1185,1190,1195,1199],{"type":19,"tag":213,"props":1169,"children":1170},{"style":230},[1171],{"type":25,"value":233},{"type":19,"tag":213,"props":1173,"children":1174},{"style":236},[1175],{"type":25,"value":213},{"type":19,"tag":213,"props":1177,"children":1178},{"style":242},[1179],{"type":25,"value":1180}," id",{"type":19,"tag":213,"props":1182,"children":1183},{"style":230},[1184],{"type":25,"value":250},{"type":19,"tag":213,"props":1186,"children":1187},{"style":253},[1188],{"type":25,"value":1189},"\"email-help\"",{"type":19,"tag":213,"props":1191,"children":1192},{"style":230},[1193],{"type":25,"value":1194},">格式: example@domain.com\u003C/",{"type":19,"tag":213,"props":1196,"children":1197},{"style":236},[1198],{"type":25,"value":213},{"type":19,"tag":213,"props":1200,"children":1201},{"style":230},[1202],{"type":25,"value":261},{"type":19,"tag":213,"props":1204,"children":1205},{"class":215,"line":505},[1206],{"type":19,"tag":213,"props":1207,"children":1208},{"emptyLinePlaceholder":294},[1209],{"type":25,"value":297},{"type":19,"tag":213,"props":1211,"children":1212},{"class":215,"line":514},[1213],{"type":19,"tag":213,"props":1214,"children":1215},{"style":220},[1216],{"type":25,"value":1217},"\u003C!-- 按钮语义性 -->\n",{"type":19,"tag":213,"props":1219,"children":1220},{"class":215,"line":895},[1221,1225,1230,1235,1239,1244,1249,1253,1258],{"type":19,"tag":213,"props":1222,"children":1223},{"style":230},[1224],{"type":25,"value":233},{"type":19,"tag":213,"props":1226,"children":1227},{"style":236},[1228],{"type":25,"value":1229},"button",{"type":19,"tag":213,"props":1231,"children":1232},{"style":242},[1233],{"type":25,"value":1234}," type",{"type":19,"tag":213,"props":1236,"children":1237},{"style":230},[1238],{"type":25,"value":250},{"type":19,"tag":213,"props":1240,"children":1241},{"style":253},[1242],{"type":25,"value":1243},"\"submit\"",{"type":19,"tag":213,"props":1245,"children":1246},{"style":242},[1247],{"type":25,"value":1248}," aria-label",{"type":19,"tag":213,"props":1250,"children":1251},{"style":230},[1252],{"type":25,"value":250},{"type":19,"tag":213,"props":1254,"children":1255},{"style":253},[1256],{"type":25,"value":1257},"\"提交表单\"",{"type":19,"tag":213,"props":1259,"children":1260},{"style":230},[1261],{"type":25,"value":261},{"type":19,"tag":213,"props":1263,"children":1264},{"class":215,"line":903},[1265],{"type":19,"tag":213,"props":1266,"children":1267},{"style":230},[1268],{"type":25,"value":1269},"  发送\n",{"type":19,"tag":213,"props":1271,"children":1273},{"class":215,"line":1272},21,[1274,1278,1282],{"type":19,"tag":213,"props":1275,"children":1276},{"style":230},[1277],{"type":25,"value":279},{"type":19,"tag":213,"props":1279,"children":1280},{"style":236},[1281],{"type":25,"value":1229},{"type":19,"tag":213,"props":1283,"children":1284},{"style":230},[1285],{"type":25,"value":261},{"type":19,"tag":40,"props":1287,"children":1289},{"id":1288},"_4-性能优化代码",[1290],{"type":25,"value":1291},"4. 性能优化代码",{"type":19,"tag":27,"props":1293,"children":1294},{},[1295],{"type":25,"value":1296},"生成的代码包含性能优化：",{"type":19,"tag":202,"props":1298,"children":1302},{"code":1299,"language":1300,"meta":7,"className":1301,"style":7},"// 懒加载图片\nconst images = document.querySelectorAll('img[loading=\"lazy\"]');\n\n// 原生懒加载 (现代浏览器)\n// 降级方案自动处理\n\n// 事件委托\ndocument.addEventListener('click', (e) => {\n  if (e.target.matches('.button')) {\n    handleButtonClick(e.target);\n  }\n});\n","javascript","language-javascript shiki shiki-themes github-dark github-dark",[1303],{"type":19,"tag":209,"props":1304,"children":1305},{"__ignoreMap":7},[1306,1314,1357,1364,1372,1380,1387,1395,1442,1474,1487,1494],{"type":19,"tag":213,"props":1307,"children":1308},{"class":215,"line":216},[1309],{"type":19,"tag":213,"props":1310,"children":1311},{"style":220},[1312],{"type":25,"value":1313},"// 懒加载图片\n",{"type":19,"tag":213,"props":1315,"children":1316},{"class":215,"line":226},[1317,1322,1327,1332,1337,1342,1347,1352],{"type":19,"tag":213,"props":1318,"children":1319},{"style":643},[1320],{"type":25,"value":1321},"const",{"type":19,"tag":213,"props":1323,"children":1324},{"style":605},[1325],{"type":25,"value":1326}," images",{"type":19,"tag":213,"props":1328,"children":1329},{"style":643},[1330],{"type":25,"value":1331}," =",{"type":19,"tag":213,"props":1333,"children":1334},{"style":230},[1335],{"type":25,"value":1336}," document.",{"type":19,"tag":213,"props":1338,"children":1339},{"style":242},[1340],{"type":25,"value":1341},"querySelectorAll",{"type":19,"tag":213,"props":1343,"children":1344},{"style":230},[1345],{"type":25,"value":1346},"(",{"type":19,"tag":213,"props":1348,"children":1349},{"style":253},[1350],{"type":25,"value":1351},"'img[loading=\"lazy\"]'",{"type":19,"tag":213,"props":1353,"children":1354},{"style":230},[1355],{"type":25,"value":1356},");\n",{"type":19,"tag":213,"props":1358,"children":1359},{"class":215,"line":264},[1360],{"type":19,"tag":213,"props":1361,"children":1362},{"emptyLinePlaceholder":294},[1363],{"type":25,"value":297},{"type":19,"tag":213,"props":1365,"children":1366},{"class":215,"line":273},[1367],{"type":19,"tag":213,"props":1368,"children":1369},{"style":220},[1370],{"type":25,"value":1371},"// 原生懒加载 (现代浏览器)\n",{"type":19,"tag":213,"props":1373,"children":1374},{"class":215,"line":290},[1375],{"type":19,"tag":213,"props":1376,"children":1377},{"style":220},[1378],{"type":25,"value":1379},"// 降级方案自动处理\n",{"type":19,"tag":213,"props":1381,"children":1382},{"class":215,"line":300},[1383],{"type":19,"tag":213,"props":1384,"children":1385},{"emptyLinePlaceholder":294},[1386],{"type":25,"value":297},{"type":19,"tag":213,"props":1388,"children":1389},{"class":215,"line":330},[1390],{"type":19,"tag":213,"props":1391,"children":1392},{"style":220},[1393],{"type":25,"value":1394},"// 事件委托\n",{"type":19,"tag":213,"props":1396,"children":1397},{"class":215,"line":362},[1398,1403,1408,1412,1417,1422,1428,1433,1438],{"type":19,"tag":213,"props":1399,"children":1400},{"style":230},[1401],{"type":25,"value":1402},"document.",{"type":19,"tag":213,"props":1404,"children":1405},{"style":242},[1406],{"type":25,"value":1407},"addEventListener",{"type":19,"tag":213,"props":1409,"children":1410},{"style":230},[1411],{"type":25,"value":1346},{"type":19,"tag":213,"props":1413,"children":1414},{"style":253},[1415],{"type":25,"value":1416},"'click'",{"type":19,"tag":213,"props":1418,"children":1419},{"style":230},[1420],{"type":25,"value":1421},", (",{"type":19,"tag":213,"props":1423,"children":1425},{"style":1424},"--shiki-default:#FFAB70;--shiki-dark:#FFAB70",[1426],{"type":25,"value":1427},"e",{"type":19,"tag":213,"props":1429,"children":1430},{"style":230},[1431],{"type":25,"value":1432},") ",{"type":19,"tag":213,"props":1434,"children":1435},{"style":643},[1436],{"type":25,"value":1437},"=>",{"type":19,"tag":213,"props":1439,"children":1440},{"style":230},[1441],{"type":25,"value":599},{"type":19,"tag":213,"props":1443,"children":1444},{"class":215,"line":371},[1445,1450,1455,1460,1464,1469],{"type":19,"tag":213,"props":1446,"children":1447},{"style":643},[1448],{"type":25,"value":1449},"  if",{"type":19,"tag":213,"props":1451,"children":1452},{"style":230},[1453],{"type":25,"value":1454}," (e.target.",{"type":19,"tag":213,"props":1456,"children":1457},{"style":242},[1458],{"type":25,"value":1459},"matches",{"type":19,"tag":213,"props":1461,"children":1462},{"style":230},[1463],{"type":25,"value":1346},{"type":19,"tag":213,"props":1465,"children":1466},{"style":253},[1467],{"type":25,"value":1468},"'.button'",{"type":19,"tag":213,"props":1470,"children":1471},{"style":230},[1472],{"type":25,"value":1473},")) {\n",{"type":19,"tag":213,"props":1475,"children":1476},{"class":215,"line":388},[1477,1482],{"type":19,"tag":213,"props":1478,"children":1479},{"style":242},[1480],{"type":25,"value":1481},"    handleButtonClick",{"type":19,"tag":213,"props":1483,"children":1484},{"style":230},[1485],{"type":25,"value":1486},"(e.target);\n",{"type":19,"tag":213,"props":1488,"children":1489},{"class":215,"line":397},[1490],{"type":19,"tag":213,"props":1491,"children":1492},{"style":230},[1493],{"type":25,"value":788},{"type":19,"tag":213,"props":1495,"children":1496},{"class":215,"line":426},[1497],{"type":19,"tag":213,"props":1498,"children":1499},{"style":230},[1500],{"type":25,"value":1501},"});\n",{"type":19,"tag":33,"props":1503,"children":1505},{"id":1504},"️-代码导出选项",[1506],{"type":25,"value":1507},"🛠️ 代码导出选项",{"type":19,"tag":40,"props":1509,"children":1511},{"id":1510},"_1-原生-htmlcssjs",[1512],{"type":25,"value":1513},"1. 原生 HTML/CSS/JS",{"type":19,"tag":60,"props":1515,"children":1516},{},[1517,1522,1527,1532],{"type":19,"tag":64,"props":1518,"children":1519},{},[1520],{"type":25,"value":1521},"index.html (完整 HTML 文件)",{"type":19,"tag":64,"props":1523,"children":1524},{},[1525],{"type":25,"value":1526},"styles.css (样式表)",{"type":19,"tag":64,"props":1528,"children":1529},{},[1530],{"type":25,"value":1531},"script.js (交互脚本)",{"type":19,"tag":64,"props":1533,"children":1534},{},[1535],{"type":25,"value":1536},"assets/ (图片等资源)",{"type":19,"tag":40,"props":1538,"children":1540},{"id":1539},"_2-vue-3-组件",[1541],{"type":25,"value":1542},"2. Vue 3 组件",{"type":19,"tag":60,"props":1544,"children":1545},{},[1546,1551,1556],{"type":19,"tag":64,"props":1547,"children":1548},{},[1549],{"type":25,"value":1550},"Component.vue (单文件组件)",{"type":19,"tag":64,"props":1552,"children":1553},{},[1554],{"type":25,"value":1555},"composables/ (组合式函数)",{"type":19,"tag":64,"props":1557,"children":1558},{},[1559],{"type":25,"value":1560},"stores/ (Pinia 状态管理)",{"type":19,"tag":40,"props":1562,"children":1564},{"id":1563},"_3-react-组件",[1565],{"type":25,"value":1566},"3. React 组件",{"type":19,"tag":60,"props":1568,"children":1569},{},[1570,1575,1580],{"type":19,"tag":64,"props":1571,"children":1572},{},[1573],{"type":25,"value":1574},"Component.jsx (函数组件)",{"type":19,"tag":64,"props":1576,"children":1577},{},[1578],{"type":25,"value":1579},"hooks/ (自定义 Hooks)",{"type":19,"tag":64,"props":1581,"children":1582},{},[1583],{"type":25,"value":1584},"styles/ (样式模块)",{"type":19,"tag":33,"props":1586,"children":1588},{"id":1587},"代码最佳实践",[1589],{"type":25,"value":1590},"�� 代码最佳实践",{"type":19,"tag":40,"props":1592,"children":1594},{"id":1593},"模块化组织",[1595],{"type":25,"value":1593},{"type":19,"tag":202,"props":1597,"children":1599},{"code":1598},"project/\n├── css/\n│   ├── base.css\n│   ├── layout.css\n│   └── components.css\n├── js/\n│   ├── main.js\n│   └── utils.js\n└── assets/\n",[1600],{"type":19,"tag":209,"props":1601,"children":1602},{"__ignoreMap":7},[1603],{"type":25,"value":1598},{"type":19,"tag":40,"props":1605,"children":1607},{"id":1606},"使用-css-变量",[1608],{"type":25,"value":1609},"使用 CSS 变量",{"type":19,"tag":202,"props":1611,"children":1613},{"code":1612,"language":573,"meta":7,"className":574,"style":7},":root {\n  --color-primary: #3b82f6;\n  --space-4: 0.25rem;\n  --font-size-base: 1rem;\n}\n",[1614],{"type":19,"tag":209,"props":1615,"children":1616},{"__ignoreMap":7},[1617,1629,1650,1675,1699],{"type":19,"tag":213,"props":1618,"children":1619},{"class":215,"line":216},[1620,1625],{"type":19,"tag":213,"props":1621,"children":1622},{"style":242},[1623],{"type":25,"value":1624},":root",{"type":19,"tag":213,"props":1626,"children":1627},{"style":230},[1628],{"type":25,"value":599},{"type":19,"tag":213,"props":1630,"children":1631},{"class":215,"line":226},[1632,1637,1641,1646],{"type":19,"tag":213,"props":1633,"children":1634},{"style":1424},[1635],{"type":25,"value":1636},"  --color-primary",{"type":19,"tag":213,"props":1638,"children":1639},{"style":230},[1640],{"type":25,"value":613},{"type":19,"tag":213,"props":1642,"children":1643},{"style":605},[1644],{"type":25,"value":1645},"#3b82f6",{"type":19,"tag":213,"props":1647,"children":1648},{"style":230},[1649],{"type":25,"value":623},{"type":19,"tag":213,"props":1651,"children":1652},{"class":215,"line":264},[1653,1658,1662,1667,1671],{"type":19,"tag":213,"props":1654,"children":1655},{"style":1424},[1656],{"type":25,"value":1657},"  --space-4",{"type":19,"tag":213,"props":1659,"children":1660},{"style":230},[1661],{"type":25,"value":613},{"type":19,"tag":213,"props":1663,"children":1664},{"style":605},[1665],{"type":25,"value":1666},"0.25",{"type":19,"tag":213,"props":1668,"children":1669},{"style":643},[1670],{"type":25,"value":671},{"type":19,"tag":213,"props":1672,"children":1673},{"style":230},[1674],{"type":25,"value":623},{"type":19,"tag":213,"props":1676,"children":1677},{"class":215,"line":273},[1678,1683,1687,1691,1695],{"type":19,"tag":213,"props":1679,"children":1680},{"style":1424},[1681],{"type":25,"value":1682},"  --font-size-base",{"type":19,"tag":213,"props":1684,"children":1685},{"style":230},[1686],{"type":25,"value":613},{"type":19,"tag":213,"props":1688,"children":1689},{"style":605},[1690],{"type":25,"value":640},{"type":19,"tag":213,"props":1692,"children":1693},{"style":643},[1694],{"type":25,"value":671},{"type":19,"tag":213,"props":1696,"children":1697},{"style":230},[1698],{"type":25,"value":623},{"type":19,"tag":213,"props":1700,"children":1701},{"class":215,"line":290},[1702],{"type":19,"tag":213,"props":1703,"children":1704},{"style":230},[1705],{"type":25,"value":683},{"type":19,"tag":33,"props":1707,"children":1709},{"id":1708},"相关资源",[1710],{"type":25,"value":1711},"🔗 相关资源",{"type":19,"tag":60,"props":1713,"children":1714},{},[1715,1727,1738],{"type":19,"tag":64,"props":1716,"children":1717},{},[1718,1725],{"type":19,"tag":1719,"props":1720,"children":1722},"a",{"href":1721},"/features/export-multiple-frameworks.md",[1723],{"type":25,"value":1724},"多框架导出",{"type":25,"value":1726}," - 导出选项详解",{"type":19,"tag":64,"props":1728,"children":1729},{},[1730,1736],{"type":19,"tag":1719,"props":1731,"children":1733},{"href":1732},"/guide/performance-optimization.md",[1734],{"type":25,"value":1735},"性能优化",{"type":25,"value":1737}," - 性能调优指南",{"type":19,"tag":64,"props":1739,"children":1740},{},[1741,1747],{"type":19,"tag":1719,"props":1742,"children":1744},{"href":1743},"/guide/semantic-html.md",[1745],{"type":25,"value":1746},"无障碍访问",{"type":25,"value":1748}," - 语义化 HTML",{"type":19,"tag":1750,"props":1751,"children":1752},"hr",{},[],{"type":19,"tag":27,"props":1754,"children":1755},{},[1756],{"type":19,"tag":1757,"props":1758,"children":1759},"em",{},[1760],{"type":25,"value":1761},"生成的代码可直接使用，也可根据需要进一步定制。",{"type":19,"tag":1763,"props":1764,"children":1765},"style",{},[1766],{"type":25,"value":1767},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":7,"searchDepth":264,"depth":264,"links":1769},[1770,1774,1780,1785,1789],{"id":35,"depth":226,"text":38,"children":1771},[1772,1773],{"id":42,"depth":264,"text":42},{"id":148,"depth":264,"text":148},{"id":186,"depth":226,"text":189,"children":1775},[1776,1777,1778,1779],{"id":192,"depth":264,"text":195},{"id":561,"depth":264,"text":564},{"id":911,"depth":264,"text":914},{"id":1288,"depth":264,"text":1291},{"id":1504,"depth":226,"text":1507,"children":1781},[1782,1783,1784],{"id":1510,"depth":264,"text":1513},{"id":1539,"depth":264,"text":1542},{"id":1563,"depth":264,"text":1566},{"id":1587,"depth":226,"text":1590,"children":1786},[1787,1788],{"id":1593,"depth":264,"text":1593},{"id":1606,"depth":264,"text":1609},{"id":1708,"depth":226,"text":1711},"markdown","content:ai:code-generation.md","content","ai/code-generation.md","ai/code-generation","md",[1797,1808,1817],{"_path":1798,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1799,"description":1800,"keywords":1801,"schemaType":1802,"author":11,"date":1803,"image":1804,"_type":1790,"_id":1805,"_source":1792,"_file":1806,"_stem":1807,"_extension":1795},"/ai/architecture-overview","AI架构概述 - HTMLPAGE智能网页生成系统","HTMLPAGE AI系统架构深度解析，了解多智能体协作、实时流式生成、模块化组装等核心技术，探索AI如何革新网页设计流程。","AI网页生成, 多智能体系统, 实时流式AI, 智能网页设计, AI架构, 机器学习","TechArticle","2025-11-24","/content-images/ai/architecture-overview.jpg","content:ai:architecture-overview.md","ai/architecture-overview.md","ai/architecture-overview",{"_path":1809,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1810,"description":1811,"keywords":1812,"author":11,"date":12,"category":1813,"image":14,"_type":1790,"_id":1814,"_source":1792,"_file":1815,"_stem":1816,"_extension":1795},"/ai/batch-creation","批量页面创建","模板 + 提示词模式组合进行多页面高效率生成","批量页面创建, 批量生成, 提示词模板, HTMLPAGE","应用场景","content:ai:batch-creation.md","ai/batch-creation.md","ai/batch-creation",{"_path":1818,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":1819,"description":1820,"keywords":1821,"author":11,"date":12,"category":1822,"image":14,"_type":1790,"_id":1823,"_source":1792,"_file":1824,"_stem":1825,"_extension":1795},"/ai/case-studies","AI 案例研究","HTMLPAGE AI 在不同行业和场景中的成功应用案例","AI 案例研究, 成功案例, 页面生成, HTMLPAGE","案例研究","content:ai:case-studies.md","ai/case-studies.md","ai/case-studies",1774945284745]