当前位置： 首页 > article >正文

从切图仔到鸿蒙开发01-文本样式

article 2026/2/26 1:36:59

从切图仔到鸿蒙开发01-文本样式

本系列教程适合 HarmonyOS 初学者，为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。

本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。

请添加图片描述

页面结构 HTML 与 ArkUI

在 Web 开发中，HTML 文档结构由<html>、<head>和<body>等标签组成，其中<body>标签包含了页面中所有可见的内容。

而在 HarmonyOS 的 ArkUI 框架中，使用@Entry和@Component装饰器定义组件，并通过build()方法定义页面内容。

基本结构对比

HTML文档结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title>
</head>
<body><!-- 页面内容放这里 -->
</body>
</html>

ArkUI组件结构：

@Entry
@Component
struct MyComponent {build() {// 页面内容放这里}
}

文本处理对比

在Web开发中，我们习惯使用各种HTML标签来表示不同语义的文本内容，例如标题、段落、强调等。

而在HarmonyOS的ArkUI中，文本处理方式有所不同，主要依赖 Text 组件和 Span 组件。

基本概念对比

HTML概念HarmonyOS/ArkUI概念
语义化标签 (h1-h6, p等)无需语义化标签，统一使用Text组件
标签嵌套组件链式调用和嵌套
样式通过CSS设置样式通过链式API设置
内联样式直接在组件后链式调用样式方法

文本显示对比

下面通过具体示例对比HTML和ArkUI的文本显示方式：

1. 标题和段落

HTML代码：

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<p>我是一个段落<br>我被换行了</p>

ArkUI代码：

// 鸿蒙系统中没有语义化标签的概念
// 所有文本都使用Text组件，通过样式区分不同级别
Text('我是一级标题').fontSize(32) // 通过字体大小区分标题级别.fontWeight(FontWeight.Bold)Text('我是二级标题').fontSize(24).fontWeight(FontWeight.Bold)// 以此类推...// 段落和换行
Text('我是一个段落\n我被换行了')
// 注意：在ArkUI中使用\n实现换行，而不是<br>标签
2. 文本样式

HTML代码：

<p>我是<strong>加粗</strong>的</p>
<p>我是<em>倾斜</em>的</p>
<p>我是<del>删除线</del>的</p>
<p>我是<ins>下划线</ins>的</p>

ArkUI代码：

// 在ArkUI中，样式化的文本使用Text和Span组合实现
Text() {Span('我是')Span('加粗').fontWeight(FontWeight.Bold) // 对应HTML的<strong>Span('的文本')
}Text() {Span('我是')Span('倾斜').fontStyle(FontStyle.Italic) // 对应HTML的<em>Span('的文本')
}Text() {Span('我是')Span('删除线').decoration({ type: TextDecorationType.LineThrough }) // 对应HTML的<del>Span('的文本')
}Text() {Span('我是')Span('下划线').decoration({ type: TextDecorationType.Underline }) // 对应HTML的<ins>Span('的文本')
}

布局容器

在HTML中，我们使用 <div> 作为通用容器来组织内容。

在ArkUI中，主要使用 Column 和 Row 等容器。

HTML代码：

<div class="column"><!-- 内容放这里 -->
</div><style>* {margin: 0;padding: 0;/* 为了与 ArkUI 盒子模型保持一致，所有 HTML 元素的 CSS 盒模型被设置为 border-box */box-sizing: border-box;}.column{display: flex;flex-direction: column;gap: 10px;width: 100%;height: 100%;align-items: center;}
</style>

ArkUI代码：

// 默认为纵向排列的容器，类似于CSS的flex-direction: column
Column({ space: 10 }) { // space参数设置子组件之间的间距，类似CSS的gap// 内容放这里
}
.width('100%') // 设置宽度，链式API调用
.height('100%') // 设置高度
.alignItems(HorizontalAlign.Center) // 水平对齐方式，类似CSS的align-items

关键区别总结

  1. 组件化思维：
    • HTML使用标签表示不同语义
    • ArkUI使用组件表示UI元素，不强调语义
  2. 样式应用方式：
    • HTML/CSS分离内容和样式
    • ArkUI使用链式API直接在组件上设置样式
  3. 布局方式：
    • HTML依赖CSS盒模型和Flexbox
    • ArkUI内置容器组件如Column、Row实现布局
  4. 语法结构：
    • HTML使用开闭标签和属性
    • ArkUI使用TypeScript语法和方法链

学习建议

  1. 理解组件化思维：将HTML标签概念转变为组件概念
  2. 掌握ArkUI基础组件：
    • Text：文本显示
    • Span：富文本片段
    • Column：纵向容器
    • Row：横向容器
  3. 链式API调用习惯：样式设置通过链式方法调用而非CSS属性
  4. 布局思维转变：使用容器组件的嵌套来实现复杂布局

总结

作为Web开发者，迁移到HarmonyOS开发需要转变思维模式，从标签和CSS的分离到组件和链式API的结合。虽然语法不同，但概念是相通的。只要掌握了基本对应关系，Web开发者能够快速适应HarmonyOS开发。

希望这篇 HarmonyOS Next 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏 支持。

相关文章：

从切图仔到鸿蒙开发01-文本样式

从切图仔到鸿蒙开发01-文本样式 本系列教程适合 HarmonyOS 初学者&#xff0c;为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。 本系列教程会将 HTML/CSS 代码片段替换为等价的 HarmonyOS/ArkUI 代码。 页面结构 HTML 与 ArkUI 在 Web 开发中&#xff0c;HTML 文档结…...

编程日记 2026/2/21 17:42:44

菱形虚拟继承的原理

一 &#xff1a;菱形继承的问题 普通的菱形继承存在数据冗余和二义性的问题 &#xff0c;如下代码&#xff1a; class Person { public:string _name; //姓名 };class Student : public Person { protected:int _num; //学号 };class Teacher : public Person { protected:int…...

编程日记 2026/2/19 6:55:38

【数据结构】C语言实现树和森林的遍历

C语言实现树和森林的遍历 导读一、树的遍历二、森林的遍历2.1 为什么森林没有后序遍历？2.2 森林中存不存在层序遍历？三、C语言实现3.1 准备工作3.2 数据结构的选择3.3 树与森林的创建3.4 树与森林的遍历3.4.1 先根遍历3.4.2 后根遍历3.4.3 森林的遍历3.5 树与森林的销毁3.6 算…...

编程日记 2026/2/23 1:14:35

第四天 开始Unity Shader的学习之旅之Unity中的基础光照

Unity Shader的学习笔记 第四天 开始Unity Shader的学习之旅之Unity中的基础光照 文章目录 Unity Shader的学习笔记前言一、我们是如何看到这个世界的1. 光源2.吸收和散射3.着色 二、标准光照模型1. 自发光2. 高光反射① Phong模型② Blinn-Phong模型 3.漫反射4.环境光 总结 前…...

编程日记 2026/2/16 18:54:59

基于SpringBoot的“社区居民诊疗健康管理系统”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“社区居民诊疗健康管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统模块功能结构图 局部E-R图 系统首…...

编程日记 2026/2/25 17:24:29

React Native集成到现有原生Android应用

使用React Native（以下简称RN）从头开始制作一个新的应用会是一个非常好的选择。但如果只想给现有的原生应用中添加一两个视图或是业务流程，RN也同样不在话下。只需简单几步，就可以给原有应用加上新的基于RN的特性、画面和视图等。 一、核心概念 把 React Native 组件集成…...

编程日记 2025/7/22 15:09:48

Java-空链基础入门

经过调研和细致观察&#xff0c;我们发现空链对于初次接触或是对Stream和Optional不太熟悉的人来说&#xff0c;确实存在一定的上手难度&#xff0c;宛如开启了“地狱模式”。为了降低这一门槛&#xff0c;我们决定通过一系列由简入深的案例演示&#xff0c;来逐步引导大家掌握…...

编程日记 2026/2/24 14:04:20

【江协科技STM32】Unix时间戳BKP备份寄存器RTC实时时钟（学习笔记）

Unix时间戳 Unix 时间戳&#xff08;Unix Timestamp&#xff09;定义为从UTC/GMT的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒时间戳存储在一个秒计数器中&#xff0c;秒计数器为32位/64位的整型变量世界上所有时区的秒计数器相同&#xff0c;不同时区通过…...

编程日记 2026/2/17 9:17:05

PCDN网络设备

PCDN&#xff08;Peer-to-Peer Content Delivery Network&#xff0c;点对点内容分发网络&#xff09;是一种基于P2P技术的内容分发网络。它利用用户终端设备之间的直接数据传输来减少中心服务器的压力&#xff0c;并提高内容交付的速度和效率。 PCDN的工作原理 节点共享&…...

编程日记 2026/2/24 11:06:29

3.17-3.23 Web3 游戏周报：Pixudi 双榜领跑，The Forgotten Runiverse 登陆三大主机平台

回顾上周的区块链游戏概况&#xff0c;查看 Footprint Analytics 与 ABGA 最新发布的数据报告。 【3.17–3.23】Web3 游戏行业动态 Ronin 将与 Alpha Growth 等合作推出 1300 万美元增长计划&#xff0c;以向 DeFi 扩张Notcoin 开发工作室 Open Builders 宣布推出 Not Games …...

编程日记 2026/2/24 20:29:07

AppInventor2生成3位数的水仙花数

生成3位水仙花数&#xff08;每位数字的立方之和刚好等于这个数字&#xff09;的代码&#xff0c;如下&#xff1a; 来源&#xff1a;【生成Python】AppInventor2中文网已支持代码块转换Python源码&#xff01; - App Inventor 2 中文网 - 清泛IT社区&#xff0c;为创新赋能&…...

编程日记 2026/2/20 0:48:46

【聚类算法解析系列02】经典聚类算法（上）——K-Means与层次聚类

【聚类算法解析系列02】经典聚类算法&#xff08;上&#xff09;——K-Means与层次聚类 引言&#xff1a;算法背后的认知革命 K-Means与层次聚类&#xff0c;这两个诞生于1960年代的算法&#xff0c;至今仍是工业界使用率最高的聚类工具。它们分别代表了两种根本性的世界观&am…...

编程日记 2026/2/23 0:03:55

shadcn如何给dialog增加关闭按钮和隐藏右上角关闭按钮

增加关闭按钮&#xff1a; <DialogFooter><DialogClose asChild><button className"rounded-sm bg-black/100 px-3 py-2 text-xs font-semibold text-white shadow-xs hover:bg-black/90" >Close</button></DialogClose> </DialogF…...

编程日记 2026/2/18 3:02:56

华为机试牛客刷题之HJ59 找出字符串中第一个只出现一次的字符

HJ59 找出字符串中第一个只出现一次的字符 描述 对于给定的字符串&#xff0c;找出第一个只出现一次的字符。如果不存在&#xff0c;则输出 −1。 输入描述&#xff1a; 在一行上输入一个长度为 1≦len(s)≦10^3 、仅由小写字母构成的字符串 s。 输出描述&#xff1a; 如果存…...

编程日记 2026/2/14 23:57:33

C# 中实现一个线程持续读取，另一个线程负责写入，且写入时读取线程暂停

实现思路 暂停信号&#xff1a;通过 ManualResetEventSlim 通知读取线程暂停。 暂停确认&#xff1a;读取线程收到暂停信号后&#xff0c;发送确认信号。 原子性控制&#xff1a;确保写入操作执行期间&#xff0c;读取线程处于完全暂停状态。 恢复机制&#xff1a;写入完成后…...

编程日记 2026/2/21 7:25:40

[Effective C++]条款22:将成员变量声明为private

. 在C中&#xff0c;将成员变量声明为private而不是public&#xff0c;主要是为了遵循面向对象编程&#xff08;OOP&#xff09;的封装原则。他有助于隐藏对象的内部实现细节&#xff0c;提供更好地控制&#xff0c;安全性和可维护性。 1、数据隐藏与封装 将成员变量声明为pr…...

编程日记 2026/2/22 14:00:58

心法利器[132] | 大模型系统性能优化trick

心法利器 本栏目主要和大家一起讨论近期自己学习的心得和体会。具体介绍&#xff1a;仓颉专项&#xff1a;飞机大炮我都会&#xff0c;利器心法我还有。 2023年新的文章合集已经发布&#xff0c;获取方式看这里&#xff1a;又添十万字-CS的陋室2023年文章合集来袭&#xff0c;更…...

编程日记 2026/2/16 4:05:14

Android第六次面试总结（Java设计模式篇一）

单例模式属于创建型设计模式&#xff0c;它保证一个类仅有一个实例&#xff0c;并且提供一个全局访问点来获取该实例。下面为你详细阐述单例模式的好处和坏处。 好处 资源优化&#xff1a;单例模式能保证一个类只有一个实例&#xff0c;这对于那些创建和销毁开销大的对象&…...

编程日记 2026/2/22 4:36:49

stm第九天433M无线遥控灯

1.433M无线模块工作原理 数据发射模块的工作频率为315M&#xff0c;采用声表谐振器SAW稳频&#xff0c;频率稳定度极高&#xff0c;当环境温度在-25~85度之间变化时&#xff0c;频飘仅为3ppm.接收到信号&#xff0c;接收模块对应针脚输出高电平&#xff0c;有DO D1 D2 D3&#…...

编程日记 2026/2/25 20:02:55

六十天前端强化训练之第三十天之深入解析Vue3电商项目：TechStore全栈实践（文结尾附有源代码）

欢迎来到编程星辰海的博客讲解 看完可以给一个免费的三连吗&#xff0c;谢谢大佬&#xff01; 目录 深入解析Vue3电商项目&#xff1a;TechStore全栈实践 一、项目架构设计 二、核心功能实现 三、组合式API深度实践 四、性能优化实践 五、项目扩展方向 六、开发经验总结…...

编程日记 2026/2/19 18:42:45

类与对象(中)（详解）

【本节目标】 1. 类的6个默认成员函数 2. 构造函数 3. 析构函数 4. 拷贝构造函数 5. 赋值运算符重载 6. const成员函数 7. 取地址及const取地址操作符重载 1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&…...

编程日记 2026/2/20 22:47:44

Spring Boot框架中常用注解

以下是Spring Boot框架中常用注解的详细说明&#xff0c;包括名称、用途、用法、使用位置及扩展示例&#xff0c;按功能模块分类整理&#xff1a; 一、核心启动与配置注解 1. SpringBootApplication 用途&#xff1a;主启动类注解&#xff0c;整合了 Configuration、EnableAu…...

编程日记 2026/2/22 20:54:44

ResNet与注意力机制：深度学习中的强强联合

引言 在深度学习领域&#xff0c;卷积神经网络&#xff08;CNN&#xff09;一直是图像处理任务的主流架构。然而&#xff0c;随着网络深度的增加&#xff0c;梯度消失和梯度爆炸问题逐渐显现&#xff0c;限制了网络的性能。为了解决这一问题&#xff0c;ResNet&#xff08;残差…...

编程日记 2026/2/23 19:09:31

notify_one() 会阻塞吗？

notify_one() 不会阻塞。它是用于唤醒一个等待中的线程&#xff0c;通常是通过条件变量&#xff08;std::condition_variable&#xff09;来使用的。调用 notify_one() 会使一个处于等待状态的线程被唤醒并继续执行&#xff0c;但它本身并不会阻塞。 当调用 notify_one() 时&a…...

编程日记 2026/2/19 6:50:13

Flutter项目之页面实现以及路由fluro

目录&#xff1a; 1、项目代码结构2、页面编写以及路由配置main.dart(入口文件)page_content.dartindex.dartapplication.dartpubspec.yamllogin.dartdio_http.dart 3、Fluro路由routes.dartnot_found_page.dart(路由优化&#xff0c;找不到页面时展示此页面) 4、注册页面 1、项…...

编程日记 2026/2/19 20:58:02

《Python实战进阶》第31集：特征工程：特征选择与降维技术

第31集&#xff1a;特征工程&#xff1a;特征选择与降维技术 摘要 特征工程是机器学习和数据科学中不可或缺的一环&#xff0c;其核心目标是通过选择重要特征和降低维度来提升模型性能并减少计算复杂度。本集聚焦于特征选择与降维技术&#xff0c;涵盖过滤法、包裹法、嵌入法等…...

编程日记 2026/2/18 11:21:25

大模型在支气管哮喘手术全流程风险预测与治疗方案制定中的应用研究

目录 一、引言 1.1 研究背景与意义 1.2 研究目标与方法 1.3 研究创新点 二、支气管哮喘概述 2.1 定义与发病机制 2.2 分类与临床表现 2.3 诊断标准与方法 三、大模型技术原理与应用现状 3.1 大模型的基本原理 3.2 在医疗领域的应用案例分析 3.3 适用于支气管哮喘预…...

编程日记 2026/2/15 17:59:18

C++类与对象的第二个简单的实战练习-3.24笔记

哔哩哔哩C面向对象高级语言程序设计教程&#xff08;118集全&#xff09; 实战二 Cube.h #pragma once class Cube { private:double length;double width;double height; public:double area(void);double Volume(void);//bool judgement(double L1, double W1, double H1);…...

编程日记 2026/2/23 17:54:58

react自定义hook

自定义hook&#xff1a; 用来封装复用的逻辑&#xff0c;&#xff0c;自定义hook是以use开头的普通函数&#xff0c;&#xff0c;将组件中可复用的状态逻辑抽取到自定义的hook中&#xff0c;简化组件代码 常见自定义hook例子&#xff1a; 封装一个简单的计数器 import {useS…...

编程日记 2025/7/22 17:01:58

Rk3568驱动开发_设备树点亮LED_10

设备树中添加节点 在设备树文件中添加led节点&#xff0c;添加完后需要重新编译内核&#xff0c;因为单独编译这个设备树文件生成的dtb文件目前不能直接做替换&#xff0c;所以要编译内核将编译好的boot.img文件烧录到设备里&#xff0c;boot.img里包含新添加的设备树节点&…...

编程日记 2026/2/19 13:09:35