一、基础布局 & 容器标签
表格
| 小程序组件 | 对应 HTML 标签 | 说明 & 差异 |
|---|---|---|
<view> | <div> | 最常用容器，块级元素，布局主力；小程序无真正 div，统一用 view |
<text> | <span> | 行内文本容器；文本必须包在 text 里，否则部分样式、长按复制会失效 |
<block> | 无对应标签（逻辑容器） | 仅作循环 / 条件渲染占位，不渲染到页面，纯逻辑标签 |
二、行内元素 & 文本修饰
表格
| 小程序组件 | 对应 HTML 标签 | 说明 |
|---|---|---|
<rich-text> | <div>（渲染富文本） | 渲染 HTML 片段，等价 HTML 里 innerHTML |
三、图片 & 媒体资源
表格
| 小程序组件 | 对应 HTML 标签 | 说明 |
|---|---|---|
<image> | <img> | 图片标签；小程序 image 默认有默认宽高，需手动改样式 |
<video> | <video> | 视频播放器，属性大体对齐，小程序独有更多微信专属配置 |
| “ | “ | 音频标签，用法基本一致 |
四、表单系列（高频重点）
表格
| 小程序组件 | 对应 HTML 标签 | 差异要点 |
|---|---|---|
<input> | <input> | 单行输入框，type 类型规则基本一致 |
<textarea> | <textarea> | 多行文本域 |
<button> | <button> | 按钮；小程序 button 自带默认样式，样式重置频率很高 |
<checkbox> | <input type="checkbox"> | 复选框，需搭配 <checkbox-group> 使用 |
<radio> | <input type="radio"> | 单选框，需搭配 <radio-group> 使用 |
<picker> | <select> | 下拉选择器，功能等价 select，小程序支持多类型（时间、地区等） |
<switch> | <input type="checkbox"> | 开关组件，等价 HTML 开关样式复选框 |
<label> | <label> | 关联表单项，用法一致，点击文字选中控件 |
五、导航 & 链接
表格
| 小程序组件 | 对应 HTML 标签 | 说明 |
|---|---|---|
<navigator> | <a> | 页面跳转链接；小程序内部跳转、外部链接都靠它，替代 a 标签 |
六、列表 & 滚动容器
表格
| 小程序组件 | 对应 HTML 标签 | 说明 |
|---|---|---|
<scroll-view> | 外层 div + CSS overflow | 滚动容器；小程序专门封装的滚动组件，替代 CSS 滚动，支持横向 / 纵向滚动 |
七、画布 & 绘图
表格
| 小程序组件 | 对应 HTML 标签 | 说明 |
|---|---|---|
<canvas> | <canvas> | 画布绘图，API 逻辑基本一致，小程序需指定 type/canvas-id |
八、原生视图 & 特殊组件
表格
| 小程序组件 | 对应 HTML 标签 | 说明 |
|---|---|---|
<movable-view> | 无原生对应 | 可拖拽视图，HTML 需 JS 实现拖拽，小程序原生组件 |
<swiper> / <swiper-item> | 轮播（JS 实现） | 轮播图，HTML 无原生轮播标签，小程序内置 |
