Svelte要求HTML标签全小写、自闭合标签显式闭合、事件用on:click绑定、插值仅支持表达式、逻辑用{#if}和{#each}块；style属性需移至scoped style块或加global修饰。

直接复制粘贴会报错：HTML 标签大小写和自闭合规则不兼容

原生 HTML 里 <img src="x" alt="html怎么转svelte组件_HTML代码如何快速转为Svelte格式" > 可以不闭合，Svelte 会当语法错误；<input> 这种首字母大写的标签会被当成组件，但你只是想写个 <input>。浏览器不挑，Svelte 编译器很较真。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 所有 HTML 标签强制小写：<div> → <code><div>，<code><br> → <br>
• 自闭合标签必须显式闭合：<img src="x" alt="html怎么转svelte组件_HTML代码如何快速转为Svelte格式" > → <img src="x" alt="html怎么转svelte组件_HTML代码如何快速转为Svelte格式" >（注意斜杠前有空格）
• <script></script> 和 <style></style> 标签保留，但内容不能含未转义的 { 或 }，否则被解析为 Svelte 表达式

svelte-check 报 Unused CSS selector：内联样式没删干净

HTML 转组件时容易留着 style="color: red" 或 class="btn"，但 Svelte 的 <style></style> 块默认是 scoped，这些 class 在 CSS 里没定义，就触发警告。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 先清空所有 属性，把样式逻辑挪到 <style></style> 块里
• 如果保留 class 名，确保 <style></style> 中有对应声明，比如 .btn { color: red; }
• 不想用 scoped？加 global 修饰：<style global></style>，但会污染全局，慎用

事件绑定写成 onclick="doIt()" 不生效：Svelte 用 on:click

HTML 里的字符串式事件（onclick、onchange）在 Svelte 里完全无效，编译器不会执行，也不报错，只是静默忽略。


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 全部替换为 on:事件名 形式：onclick="foo()" → on:click={foo}
• 需要传参？用箭头函数：on:click={() => foo(item)}，别写 on:click={foo(item)}（会立即执行）
• 表单控件注意受控性：<input value="{name}"> 不会双向同步，得用 bind:value={name}

动态内容写 {{value}} 报错：插值语法只支持表达式，不支持语句

从 HTML 模板（比如 PHP/JSX）习惯抄过来的 {{ if (x) { ... } }} 或 {{ console.log(x) }}，在 Svelte 里直接编译失败。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 仅允许简单表达式：{{ name }}、{{ count + 1 }}、{{ items.length }}
• 逻辑分支用 {#if} 块：{#if user} <div>Hello {user.name}</div>{/if}
• 循环用 {#each}：{#each posts as post} <h2>{post.title}</h2> {/each}

最常被跳过的其实是属性绑定逻辑——比如 disabled 在 HTML 里写 disabled="disabled"，Svelte 要么写 disabled（布尔属性存在即 true），要么 disabled={isDisabled}。漏掉这层映射，交互就卡住。