给Web开辟者的HarmonyOS指南01-文本样式
给Web开辟者的HarmonyOS指南01-文本样式本系列教程得当 HarmonyOS 初学者，为那些熟悉用 HTML 与 CSS 语法的 Web 前端开辟者准备的。
本系列教程会将 HTML/CSS 代码片段更换为等价的 HarmonyOS/ArkUI 代码。
开辟环境准备
[*]DevEco Studio 5.0.3
[*]HarmonyOS Next API 15
https://i-blog.csdnimg.cn/direct/3413046ee20e4e4499ef991135cff234.png
页面结构 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
关键区别总结
[*]组件化思维：
[*]HTML使用标签表现不同语义
[*]ArkUI使用组件表现UI元素，不强调语义
[*]样式应用方式：
[*]HTML/CSS分离内容和样式
[*]ArkUI使用链式API直接在组件上设置样式
[*]结构方式：
[*]HTML依赖CSS盒模型和Flexbox
[*]ArkUI内置容器组件如Column、Row实现结构
[*]语法结构：
[*]HTML使用开闭标签和属性
[*]ArkUI使用TypeScript语法和方法链
学习发起
[*]明白组件化思维：将HTML标签概念变化为组件概念
[*]掌握ArkUI基础组件：
[*]Text：文本组件
[*]Span：文本片段
[*]Column：纵向容器
[*]Row：横向容器
[*]链式API调用风俗：样式设置通过链式方法调用而非CSS属性
[*]结构思维变化：使用容器组件的嵌套来实现复杂结构
总结
作为Web开辟者，迁移到HarmonyOS开辟需要变化思维模式，从标签和CSS的分离到组件和链式API的结合。虽然语法不同，但概念是相通的。只要掌握了基本对应关系，Web开辟者能够快速顺应HarmonyOS开辟。
希望这篇 HarmonyOS Next 教程对你有所资助，期待您的
页:
[1]