01认识 HIC
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
HiCode（简称 HC）是一门前端与后端一体化的解释型语言，HIC 是它的代码格式名。v1.00 是当前「网页端在线开发」版本，v0.01 为早期预览版。
HIC 是什么
- 你在编辑区里写的代码，就是 HIC 代码；它由引擎实时转译为 HTML 网页。
- HIC 用「简单中文式指令 + 缩进」描述页面，读起来接近自然语言，无需会 HTML / CSS / JavaScript。
- 只需掌握 5 类语法：
it（声明变量）、in（分级展示）、if / orif / noif（判断）、to / fr（跳转）、表达式（四则运算、比较与逻辑）。 - 无需安装任何环境：打开网页端即可编写、预览、导出。
学习前提
- 会打开浏览器、会打字即可，不需要任何编程经验。
- 建议边看边动手，每章都下载
.hc练习文件导入后照着改。
推荐学习路径
- 先跑通「02 快速上手」里的第一个程序。
- 掌握「03 变量」和「04 展示」。
- 学会「05 条件判断」做分支。
- 学会「07 页面跳转」做多页应用。
- 用「11 完整案例」把所学串起来。
- 遇到问题查「13 常见问题」和「12 速查表」。
📝 本章练习
- 下载本章
.hc导入，观察三段文案的显示效果。 - 把「标题」「简介」「说明」的文字改成你自己的话。
- 新增一行
it 新变量 t ...和对应的新变量 in t，观察变化。
02快速上手：第一个程序
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
3 分钟跑通一个「你好，HiCode」页面，建立整体印象。
操作步骤
- 打开官网，点「网页端体验」进入在线开发环境。
- 点「新建项目」，输入项目名，例如「我的第一个项目」。
- 项目会自动带一个默认页面「页面1」，点击它进入编辑区。
- 在代码编辑区输入：
it 标题 t 你好，HiCode
标题 in t- 点右上角「✓ 实时转译」，或切到「转译预览」标签，即可看到「你好，HiCode」放大居中显示。
- 代码会自动保存到本地浏览器，下次打开可点「恢复最近项目」继续。
逐行解释
it 标题 t 你好，HiCode：声明一个名为「标题」的文字变量，值为「你好，HiCode」。标题 in t：把「标题」这个变量以文字（t）方式居中显示出来。- 你不需要写
<html>、<head>、<body>等标签，页面骨架由引擎自动生成。
📝 本章练习
- 新建项目手动输入上面两行，验证与下载文件效果一致。
- 把「你好，HiCode」改成「你好，世界」，实时预览。
03变量 it
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
用 it 声明变量。变量用于存放文字、图片或普通数据，供下文的 in 展示和 if 判断使用。
三种变量
- 普通变量 —— 语法
it 名字 [类型] [值]- 例：
it 备注（只声明，无值） - 例：
it 年龄 int 18（带类型标注的值） - v1.00 中
int / str / float / bool / list / dict / tuple这些类型标注，目前统一按「普通变量」处理，不做强类型校验，仅作语义提示。 - 普通变量不会直接显示在页面上，主要供条件判断使用。
- 例：
- 文字变量 —— 语法
it 名字 t 值t表示 text，值是一段文本。- 例：
it 标题 t 你好，HiCode - 配合
名字 in t显示。
- 图片变量 —— 语法
it 名字 pp表示 picture，声明后不含文字值。- 真实图片需到「变量」面板上传绑定。
- 配合
名字 in p显示。
命名规则
- 可以以字母、下划线或中文开头（
A-Z、a-z、_、中日韩汉字）。 - 后面可跟字母、数字、下划线、中文。
- 示例：
标题、title、用户年龄、分数都是合法变量名。 - 同一页面内变量名不要重复。
小贴士
文字值里可以包含空格和中文，直接写在 t 后面即可，无需加引号。一行只能声明一个变量。
注意
变量声明本身不会在页面上显示，必须用 in 才会真正展示出来。
📝 本章练习
- 声明三种变量（普通 / 文字 t / 图片 p）。
- 分别用
in t、in p展示。 - 给普通变量加类型（如
int），观察它始终按普通变量处理。
04展示 in
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
用 in 把已声明的变量渲染到页面上。v1.00 新增五种展示样式，让排版更有层次。
五种展示样式
| 写法 | 等价 | 样式 | 用途 |
|---|---|---|---|
变量名 in t | text | 大标题 | 页面主标题，居中放大加粗 |
变量名 in s | sub | 副标题 | 次级标题，略小、略淡 |
变量名 in b | body | 正文 | 较长说明文字，左对齐自动换行 |
变量名 in link | — | 链接 | 把值渲染成可点击的按钮链接 |
变量名 in p | img | 图片 | 居中显示图片，带圆角阴影 |
示例
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 图形化定位」。
📝 本章练习
- 把五种样式各写一遍，观察标题、副标题、正文、链接、图片的差异。
- 试试
in text/in sub/in body等价写法。 - 把
in b换成一段更长的文字，体验自动左对齐换行。
05条件判断 if / orif / noif
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
根据条件决定显示哪些内容，是让页面「变聪明」的关键。
三种关键词
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 命中时才执行的内容。
注意
条件后面要加英文冒号 :；块内代码必须比条件行多缩进；同一级代码要保持对齐。
📝 本章练习
- 把分数改成 95，看是否显示「优秀」；改成 50，看是否显示「需努力」。
- 增加一条
orif 分数 == 59:中间分支。
06表达式与运算符
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
条件里可以写表达式，HIC 支持四则运算、比较、逻辑、包含四类运算。
运算符
| 类别 | 运算符 | 含义 | 示例 |
|---|---|---|---|
| 四则 | + - * / % | 加 / 减 / 乘 / 除 / 取余 | 2 + 3 * 4 |
| 比较 | == | 等于 | 年龄 == 18 |
| 比较 | != | 不等于 | 名字 != "张三" |
| 比较 | < > <= >= | 小于 / 大于 / 小于等于 / 大于等于 | 分数 >= 60 |
| 逻辑 | and | 且（都成立） | a and b |
| 逻辑 | or | 或（任一成立） | a or b |
| 逻辑 | not | 非（取反） | not a |
| 包含 | in | 右侧是否包含左侧子串 | "hello" in "xxhello" |
四则运算
- 支持
+ - * / %及一元负号（如-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📝 本章练习
- 用
or/not/in组合条件写到if里。 - 改数字和字符串做比较，观察结果变化。
08语法规范
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
几条必须遵守的基本规则，遵守后代码几乎不会出错。
缩进
- 用缩进表示层次，同一代码块必须对齐。
Tab会被当作 2 个空格；建议统一用 2 或 4 个空格。- 只有
if / orif / noif下面需要缩进块，其余语句顶格写。
注释
- 以
#开头的行是注释，会被忽略。 - 例：
# 这是一行注释
空行与骨架
- 空行自动忽略，可用空行给代码分区。
- 页面自带 HTML 骨架，不要写
<html>/<head>/<body>/<style>等标签。 - 编辑器顶部有快捷提示，忘记语法时可参考。
📝 本章练习
- 添加注释、空行，保持缩进一致。
- 故意打乱缩进，观察转译异常，再改回正确缩进。
09项目与图片管理
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
学会管理左侧的项目 / 页面树，以及给图片变量上传图片。
项目 / 页面树
- 新建项目：点「项目」旁
+。 - 新建页面：点「页面」旁
+。 - 重命名 / 删除：鼠标移到项目或页面上，点
✎（重命名）或🗑（删除）。 - 删除不可恢复，请谨慎操作。
图片上传
- 先用代码声明图片变量，如
it 头像 p。 - 切到「变量」标签，找到「头像」条目。
- 点「上传」选择本地图片；「更换」替换图片、「删除」移除图片。
- 图片会以 dataURL 内嵌保存，随
.hc一并导出，不会丢失。
变量面板
- 展示当前页面所有变量：普通、文字
t、图片p。 - 图片变量拥有专属的「上传 / 更换 / 删除」按钮。
📝 本章练习
- 在变量面板上传一张图片，观察显示效果。
- 尝试「更换」和「删除」图片。
10实时转译与导出
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
HIC 会实时转译为 HTML，你可以随时预览，并把成果导出成网页或可继续编辑的工程文件。
实时转译
- 编辑时引擎实时把 HIC 转译为 HTML，切到「转译预览」即可看到结果。
- 点「↗ 新标签打开」可独立预览。
- 点顶部「✓ 实时转译」立即转译当前页。
导出
- 导出 .hc：保存项目（含图片），之后可用「导入项目 .hc」继续开发。
- 导出单个 .html：只导出当前页面。
- 导出全部页面 · 打包 .zip：所有页面打包成 zip（多文件）。
- 导出全部页面 · 合并成 1 个 .html：合并成单文件，含顶部导航，可点击跳转。
小贴士
重要项目请养成「导出 .hc」备份的习惯；网页端数据保存在浏览器本地，清缓存可能丢失。
📝 本章练习
- 分别尝试 4 种导出方式。
- 导出
.hc再重新导入，确认数据完整。
11完整案例：个人名片
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
做两张页面——「名片」和「联系方式」。名片显示头像、判断是否成年，并跳到联系方式页。
步骤
- 新建项目「个人名片」。
- 把默认页面「页面1」重命名为「名片」，写入：
it 姓名 t 张三
it 简介 t 一名热爱编程的初学者
it 头像 p
it 年龄 int 20
姓名 in t
简介 in t
头像 in p
if 年龄 >= 18:
成年人 in t
noif:
未成年人 in t
to 联系方式- 切到「变量」面板，为「头像」上传图片。
- 新建页面「联系方式」，写入：
it 邮箱 t zhang@example.com
邮箱 in t
to 名片- 切「转译预览」查看效果。
- 点「导出全部页面 · 合并成 1 个 .html」下载，即可得到一个可跳转的完整网页。
📝 本章练习
- 复刻个人名片案例。
- 扩展一个「技能」页面，并加入跳转。
12语法速查表
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
一页看完 v1.00 全部语法，可收藏备用。
| 功能 | 语法 |
|---|---|
| 声明普通变量 | it 名字 [类型] [值] |
| 声明文字变量 | it 名字 t 值 |
| 声明图片变量 | it 名字 p |
| 显示大标题 | 名字 in t（text 等价） |
| 显示副标题 | 名字 in s（sub 等价） |
| 显示正文 | 名字 in b（body 等价） |
| 显示链接 | 名字 in link |
| 显示图片 | 名字 in p（img 等价） |
| 图形化定位 | 名字 in point x y（x、y 为像素坐标，可引用数值变量） |
| 条件判断 | if 条件: / orif 条件: / noif: |
| 页面跳转（同项目） | to 页面 或 页面A to 页面B |
| 跨项目跳转 | fr 项目A 页面A to 项目B 页面B |
| 注释 | # 注释内容 |
| 四则运算 | + - * / % ( )，如 2 + 3 * 4 |
| 比较 / 逻辑 / 包含 | == != < > <= >= and or not in |
📝 本章练习
- 对照速查表，自查一遍全部语法。
- 在空项目里，把每类语法各写一条。
13常见问题
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
遇到问题先来这里排查。
- 为什么
标题 in t没显示？
变量名未声明或拼写不一致。请先用it 标题 t ...声明。 in那行没效果？in前面的变量名必须与it声明完全一致。- 缩进不对会怎样？
可能把代码分到错误的块，导致 if 逻辑异常；保持块内代码对齐即可。 - 图片为什么是空的？
图片变量需要在「变量」面板上传图片，it 图片 p只是声明。 - 跳转点了没反应？
跨项目跳转的目标项目未一并导出；导出时记得包含目标项目。 - 数据保存在哪里？
浏览器 localStorage，清缓存会丢失；请用「导出 .hc」备份重要项目。 int/str等类型有效吗？
v1.00 目前统一按普通变量处理，暂不做类型约束；数值变量会按数字参与四则运算与数值比较。
📝 本章练习
- 故意用未声明的变量名写
in，观察效果。 - 再修正成正确写法，养成自查习惯。
14图形化定位 in point
📥 下载本章练习 .hc下载后在「网页端体验」→「导入项目 .hc」即可查看
想让某个内容出现在页面的指定位置？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用图形画布确定坐标
- 在编辑区顶部切到「图形画布」标签。
- 输入变量名，选择「文字 t」或「图片 p」，填好「内容」。
- 在画布上点击任意位置，会出现一个定位点并显示坐标。
- 点「插入坐标点」，引擎会自动在同一页面生成变量声明和
变量名 in point x y。 - 切到「转译预览」，即可看到内容精确落在你点击的位置。
小贴士
如果选了「图片 p」，图片本身请到「变量」面板上传；画布只负责生成位置的坐标代码，不含图片数据。
注意
坐标点是绝对定位，会盖在普通排版内容之上；坐标值建议在画布内（画布尺寸即参考视口），过大可能超出屏幕。
📝 本章练习
- 下载本章练习，观察三个坐标点的位置差异。
- 在图形画布上点一个点，插入坐标代码，验证「点击处 = 显示处」。
- 把
坐标X / 坐标Y改成别的数字，看「点B」如何随之移动。