分章节，从零学会
HIC 语言

01认识 HIC

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

HIC 是什么

• 你在编辑区里写的代码，就是 HIC 代码；它由引擎实时转译为 HTML 网页。
• HIC 用「简单中文式指令 + 缩进」描述页面，读起来接近自然语言，无需会 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 分钟跑通一个「你好，HiCode」页面，建立整体印象。

操作步骤

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

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

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

逐行解释

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

03变量 it

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

三种变量

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

命名规则

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

04展示 in

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

五种展示样式

示例

it 大标题 t 这是居中的大标题
it 副标题 t 这是居中的副标题
it 正文 t 这是正文样式，适合写较长的说明文字
it 链接 t https://HiCodeHC.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表达式与运算符

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

运算符

四则运算

• 支持 + - * / % 及一元负号（如 -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实时转译与导出

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

实时转译

• 编辑时引擎实时把 HIC 转译为 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语法速查表

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

13常见问题

遇到问题先来这里排查。

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

14图形化定位 in point

想让某个内容出现在页面的指定位置？v1.00 新增「图形化编程界面」，在画布上点一下就能确定坐标，自动生成 变量名 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

v2.00 为 HIC 增加四大能力：触发区域色块、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

v1.00 的图片变量 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 声明式导入常用标准库，让 HIC 代码能表达「系统操作、数据处理、时间、存储、网络并发」等更底层的逻辑：

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

16原生 HTML 块 v3.01

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

① 语法

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

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

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

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

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

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

① 三种版本

② Python 编译块 py:( … )end

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

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

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

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

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

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

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