分章节，从零学会
SIMPLE 语言

01认识 SIMPLE

Simple（简称 SimpleLang）是一门前端与后端一体化的解释型语言，SIMPLE 是它的代码格式名。v3.88 是当前「网页端在线开发」版本，v0.01 为早期预览版。

SIMPLE 是什么

• 你在编辑区里写的代码，就是 SIMPLE 代码；它由引擎实时转译为 HTML 网页。
• SIMPLE 用「简单中文式指令 + 缩进」描述页面，读起来接近自然语言，无需会 HTML / CSS / JavaScript。
• 只需掌握 5 类语法：it（声明变量）、in（分级展示）、if / orif / noif（判断）、to / fr（跳转）、表达式（四则运算、比较与逻辑）。
• 无需安装任何环境：打开网页端即可编写、预览、导出。

学习前提

• 会打开浏览器、会打字即可，不需要任何编程经验。
• 建议边看边动手，每章都下载 .hc 练习文件导入后照着改。

推荐学习路径

1. 先跑通「02 快速上手」里的第一个程序。
2. 掌握「03 变量」和「04 展示」。
3. 学会「05 条件判断」做分支。
4. 学会「07 页面跳转」做多页应用。
5. 用「11 完整案例」把所学串起来。
6. 遇到问题查「13 常见问题」和「12 速查表」。

02快速上手：第一个程序

3 分钟跑通一个「你好，Simple」页面，建立整体印象。

操作步骤

1. 打开官网，点「网页端体验」进入在线开发环境。
2. 点「新建项目」，输入项目名，例如「我的第一个项目」。
3. 项目会自动带一个默认页面「页面1」，点击它进入编辑区。
4. 在代码编辑区输入：

it 标题 t 你好，Simple
标题 in t

5. 点右上角「✓ 实时转译」，或切到「转译预览」标签，即可看到「你好，Simple」放大居中显示。
6. 代码会自动保存到本地浏览器，下次打开可点「恢复最近项目」继续。

逐行解释

• it 标题 t 你好，Simple：声明一个名为「标题」的文字变量，值为「你好，Simple」。
• 标题 in t：把「标题」这个变量以文字（t）方式居中显示出来。
• 你不需要写 <html>、<head>、<body> 等标签，页面骨架由引擎自动生成。

03变量 it

用 it 声明变量。变量用于存放文字、图片或普通数据，供下文的 in 展示和 if 判断使用。

三种变量

1. 普通变量 —— 语法 it 名字 [类型] [值]
   • 例：it 备注（只声明，无值）
   • 例：it 年龄 int 18（带类型标注的值）
   • v3.88 中 int / str / float / bool / list / dict / tuple 这些类型标注，目前统一按「普通变量」处理，不做强类型校验，仅作语义提示。
   • 普通变量不会直接显示在页面上，主要供条件判断使用。
2. 文字变量 —— 语法 it 名字 t 值
   • t 表示 text，值是一段文本。
   • 例：it 标题 t 你好，Simple
   • 配合 名字 in t 显示。
3. 图片变量 —— 语法 it 名字 p
   • p 表示 picture，声明后不含文字值。
   • 真实图片需到「变量」面板上传绑定。
   • 配合 名字 in p 显示。

命名规则

• 可以以字母、下划线或中文开头（A-Z、a-z、_、中日韩汉字）。
• 后面可跟字母、数字、下划线、中文。
• 示例：标题、title、用户年龄、分数 都是合法变量名。
• 同一页面内变量名不要重复。

04展示 in

用 in 把已声明的变量渲染到页面上。v3.88 新增五种展示样式，让排版更有层次。

五种展示样式

示例

it 大标题 t 这是居中的大标题
it 副标题 t 这是居中的副标题
it 正文 t 这是正文样式，适合写较长的说明文字
it 链接 t https://SimpleHC.github.io
it 配图 p

大标题 in t
副标题 in s
正文 in b
链接 in link
配图 in p

要点

• in 前面的名字，必须是已经用 it 声明过的变量名，否则该行会被忽略。
• in link 会把值当作链接地址，渲染成绿色按钮，点击在新标签页打开。
• 每行 in 会在页面上生成一个独立区块。
• 如需把内容放到指定位置，请用 变量名 in point x y，详见「14 图形化定位」。

05条件判断 if / orif / noif

根据条件决定显示哪些内容，是让页面「变聪明」的关键。

三种关键词

• if 条件: —— 条件成立时执行下方缩进块。
• orif 条件: —— 「否则若」，可写多个，紧跟在前面的 if / orif 之后。
• noif: —— 「否则」，相当于「上面的条件都不满足」；注意 noif 后面不带条件。

示例

it 分数 int 85
if 分数 >= 90:
    优秀 in t
orif 分数 >= 60:
    及格 in t
noif:
    需努力 in t

• 分数 85：不满足第一个条件，满足第二个，显示「及格」。
• 缩进表示「属于谁」：优秀 in t 缩进在 if 下，表示它是 if 命中时才执行的内容。

06表达式与运算符

条件里可以写表达式，SIMPLE 支持四则运算、比较、逻辑、包含四类运算。

运算符

四则运算

• 支持 + - * / % 及一元负号（如 -5），遵循先乘除、后加减，可用小括号 () 改变优先级。
• 示例：2 + 3 * 4 等于 14；(2 + 3) * 4 等于 20；10 % 3 等于 1。
• 变量的值是数字时可直接参与运算，如 满分 - 已扣 >= 60。

字面量

• 数字：18、3.14
• 字符串：'你好' 或 "你好"（单双引号均可）
• 布尔：true、false
• 空值：None

比较规则

• 两侧都是数字时按数值比较；否则按字符串比较。
• in 用于子串包含判断。

组合示例

it 年龄 int 18
it 名字 t 张三
if 年龄 == 18 and 名字 in '张三':
    匹配 in t

07页面跳转 to / fr

用 to 或 fr 在页面之间跳转，构建多页应用。

语法

1. 跳到当前项目的另一页：to 页面名

   to 关于

2. 显式指定来源页与目标页（同项目）：页面A to 页面B

   首页 to 关于

3. 跨项目跳转：fr 项目A 页面A to 项目B 页面B

   fr 我的项目 首页 to 我的项目 关于

要点

• 「页面名」是你在「页面」区点 + 新建页面时填写的名字。
• 跳转链接在导出后会自动生成真实的 .html 链接。
• 跨项目跳转要求目标项目也被一并导入 / 导出，否则链接不可点击（编辑区会有提示）。

08语法规范

几条必须遵守的基本规则，遵守后代码几乎不会出错。

缩进

• 用缩进表示层次，同一代码块必须对齐。
• Tab 会被当作 2 个空格；建议统一用 2 或 4 个空格。
• 只有 if / orif / noif 下面需要缩进块，其余语句顶格写。

注释

• 以 # 开头的行是注释，会被忽略。
• 例：# 这是一行注释

空行与骨架

• 空行自动忽略，可用空行给代码分区。
• 页面自带 HTML 骨架，不要写 <html> / <head> / <body> / <style> 等标签。
• 编辑器顶部有快捷提示，忘记语法时可参考。

09项目与图片管理

学会管理左侧的项目 / 页面树，以及给图片变量上传图片。

项目 / 页面树

• 新建项目：点「项目」旁 +。
• 新建页面：点「页面」旁 +。
• 重命名 / 删除：鼠标移到项目或页面上，点 ✎（重命名）或 🗑（删除）。
• 删除不可恢复，请谨慎操作。

图片上传

1. 先用代码声明图片变量，如 it 头像 p。
2. 切到「变量」标签，找到「头像」条目。
3. 点「上传」选择本地图片；「更换」替换图片、「删除」移除图片。
4. 图片会以 dataURL 内嵌保存，随 .hc 一并导出，不会丢失。

变量面板

• 展示当前页面所有变量：普通、文字 t、图片 p。
• 图片变量拥有专属的「上传 / 更换 / 删除」按钮。

10实时转译与导出

SIMPLE 会实时转译为 HTML，你可以随时预览，并把成果导出成网页或可继续编辑的工程文件。

实时转译

• 编辑时引擎实时把 SIMPLE 转译为 HTML，切到「转译预览」即可看到结果。
• 点「↗ 新标签打开」可独立预览。
• 点顶部「✓ 实时转译」立即转译当前页。

导出

• 导出 .hc：保存项目（含图片），之后可用「导入项目 .hc」继续开发。
• 导出单个 .html：只导出当前页面。
• 导出全部页面 · 打包 .zip：所有页面打包成 zip（多文件）。
• 导出全部页面 · 合并成 1 个 .html：合并成单文件，含顶部导航，可点击跳转。

11完整案例：个人名片

做两张页面——「名片」和「联系方式」。名片显示头像、判断是否成年，并跳到联系方式页。

步骤

1. 新建项目「个人名片」。
2. 把默认页面「页面1」重命名为「名片」，写入：

it 姓名 t 张三
it 简介 t 一名热爱编程的初学者
it 头像 p
it 年龄 int 20

姓名 in t
简介 in t
头像 in p

if 年龄 >= 18:
    成年人 in t
noif:
    未成年人 in t

to 联系方式

3. 切到「变量」面板，为「头像」上传图片。
4. 新建页面「联系方式」，写入：

it 邮箱 t zhang@example.com
邮箱 in t

to 名片

5. 切「转译预览」查看效果。
6. 点「导出全部页面 · 合并成 1 个 .html」下载，即可得到一个可跳转的完整网页。

12语法速查表

一页看完 v3.88 全部语法，可收藏备用。

13常见问题

遇到问题先来这里排查。

• 为什么 标题 in t 没显示？
  变量名未声明或拼写不一致。请先用 it 标题 t ... 声明。
• in 那行没效果？
  in 前面的变量名必须与 it 声明完全一致。
• 缩进不对会怎样？
  可能把代码分到错误的块，导致 if 逻辑异常；保持块内代码对齐即可。
• 图片为什么是空的？
  图片变量需要在「变量」面板上传图片，it 图片 p 只是声明。
• 跳转点了没反应？
  跨项目跳转的目标项目未一并导出；导出时记得包含目标项目。
• 数据保存在哪里？
  浏览器 localStorage，清缓存会丢失；请用「导出 .hc」备份重要项目。
• int / str 等类型有效吗？
  v3.88 目前统一按普通变量处理，暂不做类型约束；数值变量会按数字参与四则运算与数值比较。

14图形化定位 in point

想让某个内容出现在页面的指定位置？v3.88 新增「图形化编程界面」，在画布上点一下就能确定坐标，自动生成 变量名 in point x y 代码，所见即所得。

语法

• 文字点：变量名 in point x y —— 把变量内容放到坐标 (x, y) 处。
• 图片点：变量名 in point x y —— 若变量是图片 p，则在该坐标显示图片。
• x 和 y 分别是横、纵坐标，单位为像素 px，以页面左上角为原点。

it 点A t 我在这里
点A in point 180 120

坐标也可以用变量

x、y 除了写具体数字，还能引用数值变量，让位置由逻辑决定：

it 坐标X int 320
it 坐标Y int 240
it 点B t 由变量定位
点B in point 坐标X 坐标Y

用图形画布确定坐标

1. 在编辑区顶部切到「图形画布」标签。
2. 输入变量名，选择「文字 t」或「图片 p」，填好「内容」。
3. 在画布上点击任意位置，会出现一个定位点并显示坐标。
4. 点「插入坐标点」，引擎会自动在同一页面生成变量声明和 变量名 in point x y。
5. 切到「转译预览」，即可看到内容精确落在你点击的位置。

15图形化前端开发

v2.00 为 SIMPLE 增加四大能力：触发区域色块、URL 图片、文件下载、Python 标准库导入，并内置图形化编程界面（色块创建、触发区域），让「简单的点击也能带动一段逻辑」。

① 触发区域色块（cf / stop）

用 cf 区域名 标记一段代码开始，用 cf 区域名 stop 标记结束。转译后这段代码会被渲染成一个彩色的「色块」。用户点击该色块，或长按约 0.6 秒，即可展开 / 收起这段内容。

cf 卡1
    it 提示 t 点击我试试
    提示 in s
cf 卡1 stop

• cf 是「click-fire / 点击触发」的关键词，后面的 卡1 是触发区域名称，可自由起名。
• 缩进在 cf 卡1 与 cf 卡1 stop 之间的代码，就是点击 / 长按后才展示的「那一段」。
• 区域未展开时内容隐藏；点一下展开，再点一下收起。
• 编辑器顶部「+ 触发区域」代码片段按钮可一键插入模板。

② 图片变量直接填 URL

v3.88 的图片变量 it 名字 p 只能上传本地图片。v2.00 支持直接填一个图片 URL，转译后自动从该地址加载，无需上传：

it 徽标 p https://picsum.photos/400/300
徽标 in p

• 写法仍是 it 名字 p URL，只要值是 http(s):// 或 data: 开头，就会被当作网络图片直接引用。
• 在「变量」面板里同样可以把图片 URL 填进去。

③ 文件下载（app / d）

想让用户下载一个文件？v2.00 可用 it 名 app 声明一个「可上传文件的变量」，再用 名 in d 在页面渲染一个下载按钮，点击后浏览器弹出下载。

it 安装包 app
安装包 in d

• app 变量需要到「变量」面板上传一个文件（任意类型）。
• 名 in d（download 等价）把该文件渲染成下载按钮，用户点击即下载你上传的文件。
• 导出限制：只要使用了「文件下载」，导出请选「打包 .zip」，以保证下载文件被正确包含。.hc 与合并单文件导出会提示改用 zip。

④ Python 标准库导入（use）

v2.00 在需要后端 / 原生运行时能力的环境中支持用 use 声明式导入常用标准库，让 SIMPLE 代码能表达「系统操作、数据处理、时间、存储、网络并发」等更底层的逻辑：

use os, sys, subprocess, math, json, re
use time, datetime, shutil, tempfile
use zipfile, gzip, pickle, sqlite3, urllib
use threading, asyncio

16原生 HTML 块

想直接写一段 HTML 网页元素？v3.01 新增「原生 HTML 块」：用 html:( … )end 包裹，括号里的内容 SIMPLE 完全不做编译，而是原样放进最终导出的 HTML 中。

① 语法

html:(
  <div class="card">这里可以放任意 HTML</div>
)end

• html:( 是块的开始标记，)end 是块的结束标记。
• 两标记之间的所有内容（多行都行）都会被原样保留，不会参与 SIMPLE 编译。
• 括号里的 # 不会被当成注释，it / in 等 不会被当成 SIMPLE 语句——它们都是普通 HTML / 文本。

② 从上往下编译，位置即顺序

HTML 块和其他 SIMPLE 语句一样，遵循从上到下的声明顺序。下面这段代码——

it 标题 t 卡片页
html:(
  <div>原生 HTML 块</div>
)end
标题 in t

编译顺序是：先 it 标题（声明变量）→ 再 html:(…)（注入原生 HTML）→ 最后 标题 in t（展示标题）。导出后，HTML 块会出现在它声明的位置。

③ 能放什么

④ 编辑器内快速插入

网页端编辑器顶部有一个「+ 原生 HTML」代码片段按钮，点击即可一键插入 html:( … )end 模板。直接 html 与 end 关键字还会被高亮，方便辨认块的边界。

17三版发布 + 编译 Python / C++

v3.66 起 Simple 每次发布都分为三种版本，并且把「能编译其他语言成 HTML」这一能力按版本开放：M（轻量）仅内部 SIMPLE、R（标准）加 Python、X（全能）再加 C++。

① 三种版本

② Python 编译块 py:( … )end

py:(
    print('你好，SIMPLE 编译的 Python')
    for i in range(3):
        print('n =', i)
)end

• py:( 开始，)end 结束，中间的 Python 源码会按声明顺序保留。
• 导出时，SIMPLE 内置的转译器把这段 Python 编译成 HTML 输出，页面里会出现一个「编译运行」区。
• 块内 # 是 Python 注释，不会被当成 SIMPLE 备注；it / in 也不会被当成 SIMPLE 语句。
• py3:(…) 与 py:(…) 等价，都归并为 Python 块。
• 该能力在 R、X 版可用；M 版会提示「本版本未含 Python 编译能力」。

③ C++ 编译块 cpp:( … )end

cpp:(
    #include <iostream>
    using namespace std;
    int main() {
        cout << "你好，SIMPLE 编译的 C++";
        return 0;
    }
)end

• 同样用 cpp:( … )end 包裹，SIMPLE 内置转译器把 C++ 源码编译为 HTML 输出。
• cxx:(…) 与 cpp:(…) 等价。
• 该能力仅在 X 全能版可用；R、M 版会按各自边界提示。

④ 完全自包含，不请求外部库

为满足“离线可用”，以上编译全部由 SIMPLE 内置的转译宿主完成：导出的 HTML 页面不引用任何外部官方库、不加载 CDN、不访问任何网址，Py/C++ 块在导出页里各自生成一个可点击执行的「编译运行」区域并实时输出结果。

18循环与控制流

SIMPLE v3.88 新增完整控制流语法：while 循环、break / continue、say 带插值输出、set / let 变量声明、add / sub / mul / div 简写、列表 / 字典字面量，让语言从"条件判断"扩展到完整流程控制。

① while 循环

用 while 条件: 开始循环块，缩进内的语句会反复执行直到条件不成立。循环最多 50 次 自动中断（防止死循环）。

set count = 0
while count < 5:
    say 第 {count} 次
    count add 1

• 条件写法与 if 相同：支持 >= / < / == / != / and / or / not / in。
• 循环块用 缩进 界定（2 空格起）。
• 最多 50 次自动安全上限。

② break / continue

break 立即跳出循环；continue 跳过本轮后续语句直接进入下一轮。

let i be 0
while i < 10:
    i add 1
    if i == 3: continue
    if i == 7: break
    say {i}

③ say 输出（带插值）

say 输出一段文本，用 {变量名} 做插值。变量不存在会被替换为空字符串。

set name = Simple
set score = 95
say 你好 {name}，你的成绩是 {score} 分
say {name} 的 10 倍是 {score * 10}

④ set / let 变量声明

set 变量名 = 值 或 let 变量名 be 值 声明并赋值一个普通变量。两者等价，set 更像数学赋值，let 更接近函数式直觉。

set x = 10
let y be 20
set sum = x + y
say {sum}

⑤ add / sub / mul / div 简写

对已声明变量做复合运算：变量 add 增量、变量 sub 减量、变量 mul 因子、变量 div 除数。

let a be 5
a add 3        # a = 8
a sub 2        # a = 6
a mul 4        # a = 24
a div 3        # a = 8

⑥ 列表 / 字典字面量

用 [值1, 值2, 值3] 写列表；{键: 值, 键2: 值2} 写字典。在表达式里可直接参与运算或判断。

set nums = [10, 20, 30]
set info = {name: Simple, lang: SIMPLE, ver: v3.88}
say 列表长度 {len(nums)}
say 名字 {info.name}
if 20 in nums:
    say 20 在列表里

⑦ 多行注释 //

除了原本的 # 单行注释，v3.88 新增 // 注释，行为完全相同。两种写法都可用。

// 这是 v3.88 新增的注释
# 这是原本就有的注释
set x = 42    # 行尾注释也可以

19函数与内置函数

SIMPLE v3.88 新增编译期内联函数：用 fn 定义、call 调用、return 提前结束、raise 抛出中断。所有函数在编译期被展开，不增加运行时开销。同时提供 11 个内置函数 覆盖常用场景。

① fn / call 定义与调用

用 fn 函数名(参数1, 参数2): 开始定义，fn end 结束；用 call 函数名(实参1, 实参2) 调用。编译期会把函数体内联展开到调用位置。

fn add(a, b):
    let r be a + b
    say {a} + {b} = {r}
fn end

fn greet(name):
    say 你好，{name}
fn end

call add(10, 5)
call greet(Simple)
call add(100, 200)

• 参数名与实参值按顺序对应，编译期会做「保存旧值 → 注入新值 → 恢复旧值」。
• 函数体内可以使用任何 SIMPLE 语句（if / while / say / 变量声明等）。
• 不支持嵌套高阶函数（fn 里再 fn），但顶层 fn 可互相调用。
• 调用不存在的函数不会报错，编译期会输出 [unknown function 名字] 提示。

② return 提前返回

在 fn 体内用 return 可提前结束函数执行，后续语句不再运行。可选写 return 值 把值存到内部变量（供 call 方之后判断）。

fn check(score):
    if score >= 60:
        say 及格
        return
    say 不及格
fn end

call check(85)   # → 及格
call check(30)   # → 不及格

③ raise 中断

raise 消息 会立即中断后续所有代码执行（不仅是当前函数），类似"抛异常"。适合表达不可恢复的错误。

fn divide(a, b):
    if b == 0:
        raise 除数不能为零
    let r be a / b
    say 结果 {r}
fn end

call divide(10, 2)   # → 结果 5
call divide(10, 0)   # → 报错并中断

④ 11 个内置函数

let nums be [3, 7, 2, 9, 5]
say 最大 {max(nums)}
say 最小 {min(nums)}
say 长度 {len(nums)}
say sqrt 16 = {sqrt(16)}

let squared be []
let i be 0
while i < 5:
    set v = i * i
    squared = push(squared, v)
    i add 1
say 平方序列 {squared}

20sru 用户输入

sru 是 SIMPLE 语言第一个交互语法：一行代码在页面上生成一个输入框，让用户输入数据，自动赋值到指定变量。支持缩放、交互模式、圆角三个参数。

① 最简写法

只写关键字 + 目标变量，其余参数自动取默认值。

sru = name         // 默认 100% 宽度，自动载入，圆角
sru(80) = age      // 80% 宽度

② 完整写法（3 参数）

sru(100), t, y = username
//   ↑    ↑  ↑
//  宽度  模式 圆角
//  10~100 t=手动 y=圆角
//         f=自动 f=直角

③ 两种交互模式对比

// f = 自动载入 — 打字时实时更新变量
sru(100), f, y = search
say 你正在输入 {search}

// t = 手动载入 — 用户点"确定"按钮才赋值
sru(80), t, y = password
say 已收到：{password}

④ 与 int / double / str 配合使用

sru 读进来的一律是字符串。如果需要数字，用类型转换函数包一层。

sru = rawAge
set age = int(rawAge)
say 你今年 {age} 岁，明年 {age + 1} 岁

sru(60), t, y = score
set scoreNum = double(score)
say 原始 {score} → 数字 {scoreNum} × 2 = {scoreNum * 2}

21int / double / str 类型转换

sru 读进来的值一律是字符串。int / double / str 三个内置函数让你在 SIMPLE 代码里自由转换类型，写加减乘除、做判断都更方便。

① int(x) — 整数

set n = int(42.7)     // n = 42（截断小数）
set x = int("-99")    // x = -99（字符串→整数）
let bad be int("hello")  // 返回原始字符串（转换失败不报错）

② double(x) — 浮点数

set pi = double("3.14159")   // pi = 3.14159
let half be double(1) / 2     // half = 0.5

③ str(x) — 字符串

sru = scoreRaw
set score = double(scoreRaw)
say 得分是 {score}
set note = str(score) + " 分，原始输入 " + scoreRaw
say {note}