HTML静态页面需拆解为src/routes/下的.tsx/.jsx组件，用component$包裹，内联脚本样式抽离为useClientEffect$/styled$，文档标签通过useDocumentHead$注入，class/id需用useId$/styled$处理，第三方脚本封装为client:load组件，状态必须用useStore$/useSignal$管理。
HTML静态页面怎么接入Qwik的预渲染流程
Qwik不是直接运行HTML文件的框架，它需要把HTML结构转换成可序列化、可恢复的组件树。直接扔一个index.html进去不会触发水合（hydration）或预渲染——Qwik会忽略它，除非你显式声明为入口。
- 必须把原始HTML结构拆进
src/routes/下的.tsx或.jsx文件里，比如src/routes/index.tsx，用component$包裹根组件 - 原HTML中内联的
<script>和<style>要抽离：JS逻辑转成useClientEffect$或useVisibleTask$，CSS优先走styled$或useStyles$ -
<meta>、<title>等文档级标签不能写在组件JSX里，得通过useDocumentHead$注入，否则SSR输出不完整
class和id属性为什么在Qwik里容易失效
Qwik默认启用“惰性加载+细粒度水合”，DOM节点如果没被标记为交互目标（比如没绑定onClick$），就不会保留原始class或id——这是为了减小序列化体积，但会让CSS选择器或document.getElementById()查不到元素。
- 想保留
id，必须配合useId$()生成稳定ID，并在JSX中显式写入：id={useId$()} -
class若来自服务端静态生成（如CMS输出），需用qwik/jsx-runtime的dangerouslySetInnerHTML绕过Qwik的属性归一化，但会失去响应性 - 更安全的做法是用
styled$封装样式，让Qwik管理作用域，避免依赖全局class名
如何处理原HTML里的第三方脚本（比如统计、广告）
Qwik不允许在组件顶层执行script标签，也不支持innerHTML插入含<script>的字符串——会直接被过滤或报unsafe-script警告。
- 把第三方脚本封装成独立
client:load组件，用useClientMount$在客户端挂载时动态appendChild - 广告类脚本建议延迟到
useVisibleTask$触发后加载，避免阻塞首屏 - 统计脚本（如GA4）别用
gtag()全局调用，改用Qwik提供的useLocation$监听路由变化后手动发事件
Qwik的响应式架构对HTML语义的影响
Qwik的“可恢复性”要求每个状态变更都可序列化，所以原HTML里靠data-属性存状态、靠querySelector手动读写的模式会断裂——这些值在服务端渲染时不存在，客户端水合后也拿不到。
立即学习“前端免费学习笔记（深入）”；
- 所有状态必须走
useStore$或useSignal$，不能靠DOM属性临时存取 -
aria-*属性可以保留，但data-*只适合做纯标记（如data-testid），不能当状态载体 - 表单控件必须绑定
value和onInput$，原生<input value="xxx">写法会导致服务端/客户端值不一致
最常被忽略的是：Qwik的响应式不是“重绘DOM”，而是“恢复执行上下文”。HTML结构只是初始快照，后续所有交互都基于JSX树的增量更新。没走component$和信号绑定的HTML块，本质上就是静态快照，动不了。
