HTML 界面元素

HTML块用于表示界面元素。有些元素又被称为容器，它们可以包含其它的元素。容器块有 row（行）、column（列），和 group（组）。所有HTML块都有一个右侧样式槽，用于连接样式（Style）设置外观特征。样式将在Style章节说明。

HTML分类中的块最终将生成HTML（超文本标记语言）表示的元素（elements），这些元素可以分为两大类：内联元素和块级元素，它们在页面布局和显示方式上有明显区别。

内联元素（inline elements）
- 内联元素不会在前后生成换行符，它们会与相邻的内联元素排在同一行。
- 内联元素的宽度和高度（width/height）由内容决定，不能直接设置。
- 内联元素的上下边距（margin/padding-top/bottom）无效，但左右边距（margin/padding-left/right）有效。
块级元素（block elements）
- 块级元素会从新的一行开始，并占据父容器的全部宽度。
- 块级元素可以设置宽度和高度（width/height）。
- 块级元素的所有边距（margin/padding）都有效。

内联元素块包括 text（文本）、link（链接）、image（图片）、button（按钮）和 tag（文本标签），其余的块将生成块级元素。

root 根容器

HTML根容器是工作区自动生成的初始块。界面的所有元素都应该连接到根容器，自上而下布局。

属性

bgcolor - 页面背景色。
fluid - 全宽。默认根容器会根据视口（viewport）宽度自动调整外边距；勾选后，根容器将占据整个视口宽度。

点击设置图标将打开HTML设置界面：

App Language

Additional CSS

设置项

App Language - App界面语言（English/中文）。Node-App内置控件（如小部件）根据该选项显示对应语言的界面。
App Language设置的目标是由Node-App创建的用户程序。工具栏语言选项设置的是Node-App本身的界面语言。
Additional CSS - 附加CSS。作为内部样式（Internal Style）添加到App页面。熟悉CSS的用户可以在这里定义样式类，并通过Style分类中的类名（classes）块应用到指定元素。或定义CSS媒体查询（Media Queries）规则，实现响应式设计。

row 行

行块内部可以包含列（column）或其它HTML块。行内的列块支持网格系统（grid system），网格系统是一种划分界面的方式，在Style分类的列宽样式中说明。

column 列

列块应包含于行块内部，允许在列中嵌套行，实现复杂布局。列块支持网格系统（grid system），在Style分类的列宽样式中说明。

group 组

组将其内部的块包装为一个整体（通过<div>标签），便于布局调整或应用样式。当设置了ID属性后，组容器可以由DOM脚本设置样式，相关脚本块在DOM章节说明。

属性

ID - 元素唯一标识。设置该标识后，组容器可以由DOM脚本设置样式。
type - 组类型：
- div - 分区组。
- control - 控件组。

当类型为控件组时，组内包含的text、label、input、select、button，将被封装为一个整体控件。

样例

分区组（不影响内部元素的外观）。
Input
控件组（内部元素被封装为一个整体控件）。
Input

text 文本

文本块表示一个内联文本，多个文本块连接在一起时，会作为连续的一行显示。当设置了ID属性后，文本内容可以被DOM脚本访问。

属性

text - 文本内容。
ID - 元素唯一标识。设置该标识后，文本内容可以被DOM脚本访问（text get/set content）。

样例

@text1@text2

paragraph 文本段

文本段块表示一段文本。与内联文本不同，多个连续的文本段不会拼接在一起。文本段以HTML标签实现，文本中的换行用 表示。当设置了ID属性后，文本内容可以被DOM脚本访问。

属性

paragraph - 文本内容。
ID - 元素唯一标识。设置该标识后，文本内容可以被DOM脚本访问（text get/set content）。

样例

The first line of paragraph.
The second line of paragraph.

Another paragraph.

link 链接

链接是一个内联元素块，表示一个指向URL地址的超文本链接。

属性

text - 显示的文本。
target - 打开链接的目标位置：
- self - 自身（替换当前标签页）。
- blank - 在新标签页打开。
href - 链接的URL地址。

在Node-App预览区显示的链接将自动在新标签页（blank）打开，应用发布时恢复为设置的目标位置。

样例

Node-Matrix

image 图片

图片是一个内联元素块，表示一个由URL源指定的图片。当设置了ID属性后，图片的源可以被DOM脚本访问。

属性

ID - 元素唯一标识。设置该标识后，图片的URL源可以被DOM脚本访问（image get/set src）。
align - 图片与内联文本并列时的对齐方式：
- default - 默认对齐。
- top - 与行的顶部对齐。
- bottom - 与行的底部对齐。
- middle - 与父亲元素居中对齐。
- baseline - 基线与父元素的基线对齐。
- text-top - 顶部与父元素的字体顶部对齐。
- text-bottom - 底部与父元素的字体底部对齐。
src - 图片的URL源。

样例

TEXT

label 标签

label 标签通常与输入控件（input、textarea、select、checkbox、range）配合使用，用以标识控件名称或功能。标签通过控件的ID与之关联，点击标签，关联的控件将获得输入焦点。

属性

label - 标签文本。
for - 关联控件的ID。
row align - 行对齐。当标签与关联控件在同一行（row），并处于不同列（column）时，勾选使二者对齐。

样例

User Name

input 输入框

输入框用于接收用户输入，支持不同的输入类型（type）。当设置了ID属性后，输入框可以被DOM脚本访问，如获取/设置输入值、响应事件、切换状态、设置样式等。与输入框相关的脚本块在DOM章节说明。

属性

ID - 元素唯一标识。设置该标识后，输入框可以被DOM脚本访问。
type - 输入框类型：
- text - 文本。
- number - 数字（包括小数）。
- password - 密码。
- date - 日期（yyyy-mm-dd）。
- time - 时间（hh:mi）。
- datetime - 日期与时间（yyyy-mm-ddThh:mi）。
- color - 颜色（#rrggbb）。

样例

textarea 文本区

文本区用于多行文本输入。当设置了ID属性后，文本区可以被DOM脚本访问，如获取/设置输入文本、响应事件、切换状态、设置样式等。与文本区相关的脚本块在DOM章节说明。

属性

ID - 元素唯一标识。设置该标识后，文本区可以被DOM脚本访问。
rows - 界面显示的行数。

样例

button 按钮

按钮是一个内联元素块，用于触发DOM点击事件。当设置了ID属性后，按钮可以被DOM脚本访问，如响应事件、切换状态、设置样式等。与按钮相关的脚本块在DOM章节说明。

属性

ID - 元素唯一标识。设置该标识后，按钮可以被DOM脚本访问。
icon - 按钮的图标。
label - 按钮上显示的文本。
color - 按钮的颜色。

样例

select 下拉列表

下拉列表由 select 块及其包含的 option 下拉选项块构成。下拉列表的值为当前选中的选项值（value）。当设置了ID属性后，下拉列表可以被DOM脚本访问，如获取/设置选中值、响应事件、切换状态、设置样式等。与下拉列表相关的脚本块在DOM章节说明。

属性

ID - 元素唯一标识。设置该标识后，下拉列表可以被DOM脚本访问。
option - 下拉选项。下拉列表可以包含多个下拉选项。选项属性：
- value - 选项值。定义能被DOM脚本获取或设置的值。
- text - 选项文本。在界面显示的选项名称。

样例

checkbox 复选框

复选框用于获取用户的二值选择（'true'/'false'或1/0）。当设置了ID属性后，复选框可以被DOM脚本访问，如获取/设置值、响应事件、切换状态、设置样式等。与复选框相关的脚本块在DOM章节说明。

属性

ID - 元素唯一标识。设置该标识后，复选框可以被DOM脚本访问。
label - 标签文本。
switch - 勾选后，复选框将展示为一个拨动开关。
inline - 当有多个连续的复选框需要排列在同一行时，勾选使其成为内联元素。

样例

Checkbox

Switch

radio 单选按钮

单选按钮通常以分组形式出现，数个单选按钮以相同的名称分为一组，组内只可切换某个按钮为选中状态。单选按钮通过name属性，而不是ID来访问。对具有相同name的一组单选按钮，DOM块 radios get value 可获取该组按钮的选中值（value），DOM块 radios set value 可设置该组按钮的选中值。与单选按钮相关的脚本块在DOM章节说明。

属性

name - 单选按钮的分组名称。DOM脚本通过分组名称来获取或设置一组单选按钮的选中值。
label - 标签文本。
value - 选项值。定义能被DOM脚本获取或选中的值。
inline - 当有多个连续的单选按钮需要排列在同一行时，勾选使其成为内联元素。

样例

Breakfast

Lunch

Dinner

range 滑块

滑块用于输入等距的离散数值。当设置了ID属性后，滑块可以被DOM脚本访问，如获取/设置输入值、响应事件、切换状态、设置样式等。与滑块相关的脚本块在DOM章节说明。

属性

ID - 元素唯一标识。设置该标识后，滑块可以被DOM脚本访问。
min - 最小值（可以为负数或小数）。
max - 最大值（可以为负数或小数）。
step - 步进间隔（只能为整数）。

样例

tag 标签

tag 标签用于表示HTML语言定义的文本级元素（text-level elements）。典型的文本级元素包括：（斜体）、（加粗）、（下划线）、（上标）、（下标）、（高亮）、<kbd>（键盘输入）等。

属性

<tag> - 标签名。
text - 标签文本。

样例

italic_subboldmarkCtrl

HTML 界面元素 ​

root 根容器 ​

row 行 ​

column 列 ​

group 组 ​

text 文本 ​

paragraph 文本段 ​

link 链接 ​

image 图片 ​

label 标签 ​

input 输入框 ​

textarea 文本区 ​

button 按钮 ​

select 下拉列表 ​

checkbox 复选框 ​

radio 单选按钮 ​

range 滑块 ​

tag 标签 ​