结构与样式

Kraken 中实现了 W3C 标准的 HTML 标签与 CSS 样式，因此可以完全使用 Web 开发的方式来书写页面结构与样式。

搭建页面结构

Kraken 支持大部分常用的标准 HTML 标签（所有支持的标签请参考开发文档），使用这些标签可以帮我们搭建出页面的基本结构。

以下例子演示了如何使用原生 HTML 标签写一个简单的博客文章结构：

示例：

  1. <div>
  2.   <div>Kraken 入门教程</div>
  3.   <div>2021-1-1</div>
  4.   <div>
  5.     <img src="https://img.alicdn.com/imgextra/i4/O1CN01GIxaZ01V0isGFLuJQ_!!6000000002591-2-tps-400-339.png" />
  6.   </div>
  7.   <div>
  8.     Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter
  9.     进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C
  10.     标准实现，拥有非常庞大的前端开发者生态。
  11.   </div>
  12. </div>

添加样式

Kraken 支持大部分常用的 CSS 样式（所有支持的样式请参考开发文档)，接下来我们继续在上面博客文章示例的 HTML 代码示例上添加样式：

为方便演示，代码示例中统一使用 React / Rax 支持的 JSX 语法来设置内联 style。

示例：

  1. <div style={{ margin: '20px' }}>
  2.   <div style={{ fontSize: '30px', margin: '10px 0' }}>Kraken 入门教程</div>
  3.   <div style={{ fontSize: '14px', color: '#666' }}>2021-1-1</div>
  4.   <div style={{ margin: '10px 0' }}>
  5.     <img
  6.       style={{ width: '100%' }}
  7.       src="https://img.alicdn.com/imgextra/i4/O1CN01GIxaZ01V0isGFLuJQ_!!6000000002591-2-tps-400-339.png"
  8.     />
  9.   </div>
  10.   <div style={{ fontSize: '16px' }}>
  11.     Kraken 是一款基于 W3C 标准的高性能渲染引擎。Kraken 底层基于 Flutter
  12.     进行渲染，通过其自绘渲染的特性，保证多端一致性。上层基于 W3C
  13.     标准实现，拥有非常庞大的前端开发者生态。
  14.   </div>
  15. </div>

渲染效果：

结构与样式 - 图1
请选择以下任意一种方式预览：
1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：
2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：
结构与样式 - 图2