!7888 TS组件文档格式刷新

Merge pull request !7888 from LiAn/OpenHarmony-3.1-Release

zh-cn/application-dev/reference/arkui-ts/ts-animatorproperty.md

 # 属性动画
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 组件的通用属性发生变化时，可以创建属性动画进行渐变，提升用户体验。
 
+>  **说明：**
+>
+>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 | 名称         | 参数类型                                     | 默认值             | 描述                      |
-| -------- | -------- | -------- | -------- |
+| ---------- | ---------------------------------------- | --------------- | ----------------------- |
 | duration   | number                                   | 1000            | 单位为毫秒，默认动画时长为1000毫秒。    |
 | curve      | Curve                                    | Curve.Linear    | 默认曲线为线性。                |
 | delay      | number                                   | 0               | 单位为毫秒，默认不延时播放。          |
 | iterations | number                                   | 1               | 默认播放一次，设置为-1时表示无限次播放。   |
 | playMode   | [PlayMode](ts-appendix-enums.md#playmode枚举值说明) | PlayMode.Normal | 设置动画播放模式，默认播放完成后重头开始播放。 |
 
+## Curve枚举说明
 
-- Curve枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Linear | 表示动画从头到尾的速度都是相同的。 | 
-  | Ease | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。 | 
-  | EaseIn | 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。 | 
-  | EaseOut | 表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。 | 
-  | EaseInOut | 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。 | 
-  | FastOutSlowIn | 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 | 
-  | LinearOutSlowIn | 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 | 
-  | FastOutLinearIn | 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 | 
-  | ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 | 
-  | Sharp | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 | 
-  | Rhythm | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 | 
-  | Smooth | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 | 
-  | Friction | 阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。 | 
-
+| 名称                  | 描述                                       |
+| ------------------- | ---------------------------------------- |
+| Linear              | 表示动画从头到尾的速度都是相同的。                        |
+| Ease                | 表示动画以低速开始，然后加快，在结束前变慢，CubicBezier(0.25, 0.1, 0.25, 1.0)。 |
+| EaseIn              | 表示动画以低速开始，CubicBezier(0.42, 0.0, 1.0, 1.0)。 |
+| EaseOut             | 表示动画以低速结束，CubicBezier(0.0, 0.0, 0.58, 1.0)。 |
+| EaseInOut           | 表示动画以低速开始和结束，CubicBezier(0.42, 0.0, 0.58, 1.0)。 |
+| FastOutSlowIn       | 标准曲线，cubic-bezier(0.4, 0.0, 0.2, 1.0)。 |
+| LinearOutSlowIn     | 减速曲线，cubic-bezier(0.0, 0.0, 0.2, 1.0)。 |
+| FastOutLinearIn     | 加速曲线，cubic-bezier(0.4, 0.0, 1.0, 1.0)。 |
+| ExtremeDeceleration | 急缓曲线，cubic-bezier(0.0, 0.0, 0.0, 1.0)。 |
+| Sharp               | 锐利曲线，cubic-bezier(0.33, 0.0, 0.67, 1.0)。 |
+| Rhythm              | 节奏曲线，cubic-bezier(0.7, 0.0, 0.2, 1.0)。 |
+| Smooth              | 平滑曲线，cubic-bezier(0.4, 0.0, 0.4, 1.0)。 |
+| Friction            | 阻尼曲线，CubicBezier(0.2, 0.0, 0.2, 1.0)。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AttrAnimationExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-blank.md

 # Blank
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column时生效。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,25 +21,27 @@
 
 Blank(min?:  Length)
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | min | Length | 否 | 0 | 空白填充组件在容器主轴上的最小大小。 | 
+**参数：** 
 
+| 参数名  | 参数类型   | 必填   | 默认值  | 参数描述               |
+| ---- | ------ | ---- | ---- | ------------------ |
+| min  | Length | 否    | 0    | 空白填充组件在容器主轴上的最小大小。 |
 
 ## 属性
 
 | 名称    | 参数类型  | 默认值        | 描述           |
-| -------- | -------- | -------- | -------- |
+| ----- | ----- | ---------- | ------------ |
 | color | Color | 0x00000000 | 设置空白填充的填充颜色。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> - 不支持通用属性方法。
+>  **说明：**
+>
+>  不支持通用属性方法。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BlankExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-button.md

 # Button
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供按钮组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## 权限列表
 
@@ -19,43 +18,42 @@
 
 ## 接口
 
-- Button(options?: {type?: ButtonType, stateEffect?: boolean})
+**方法1：** Button(options?: {type?: ButtonType, stateEffect?: boolean})
 
-  **表1** options参数说明
+表1 options参数说明
 
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | type | ButtonType | 否 | Capsule | 描述按钮风格。 | 
-  | stateEffect | boolean | 否 | true | 按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。 | 
+| 参数名         | 参数类型       | 必填   | 默认值     | 参数描述                              |
+| ----------- | ---------- | ---- | ------- | --------------------------------- |
+| type        | ButtonType | 否    | Capsule | 描述按钮风格。                           |
+| stateEffect | boolean    | 否    | true    | 按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。 |
 
+**方法2：** Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
 
-- Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
+使用文本内容创建相应的按钮组件，此时Button无法包含子组件。
 
-  使用文本内容创建相应的按钮组件，此时Button无法包含子组件。
-
-  **表2** value参数说明
-  
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | label | string | 否 | - | 按钮文本内容。 |
-  | options | Object | 否 | - | 见options参数说明。 |
+表2 value参数说明
 
+| 参数名     | 参数类型   | 必填   | 默认值  | 参数描述          |
+| ------- | ------ | ---- | ---- | ------------- |
+| label   | string | 否    | -    | 按钮文本内容。       |
+| options | Object | 否    | -    | 见options参数说明。 |
 
 ## 属性
 
 | 名称          | 参数类型       | 默认值     | 描述                                |
-| -------- | -------- | -------- | -------- |
+| ----------- | ---------- | ------- | --------------------------------- |
 | type        | ButtonType | Capsule | 设置Button样式。                       |
 | stateEffect | boolean    | true    | 状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。 |
 
-- ButtonType枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Capsule | 胶囊型按钮（圆角默认为高度的一半）。 | 
-  | Circle | 圆形按钮。 | 
-  | Normal | 普通按钮（默认不带圆角）。 | 
+## ButtonType枚举说明
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+| 名称      | 描述                 |
+| ------- | ------------------ |
+| Capsule | 胶囊型按钮（圆角默认为高度的一半）。 |
+| Circle  | 圆形按钮。              |
+| Normal  | 普通按钮（默认不带圆角）。      |
+
+>  **说明：**
 >  - 按钮圆角通过[通用属性borderRadius设置](ts-universal-attributes-border.md)（不支持通过border接口设置圆角）。
 >  - 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为高度的一半。
 >  - 当按钮类型为Circle时，borderRadius即为按钮半径，若未设置borderRadius按钮半径则为宽、高中较小值的一半。
@@ -64,7 +62,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ButtonExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md

 # Checkbox
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供多选框组件，通常用于某选项的打开或关闭。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 
 无
@@ -18,30 +18,30 @@
 
 Checkbox( name?: string,  group?: string )
 
-- 参数
-  | 参数名  | 参数类型 | 必填  | 默认值 | 参数描述 |
-  | --------| --------| ------ | -------- | -------- |
-  | name    | string | 否 | - | 多选框名称。 |
-  | group   | string | 否 | - | 多选框的群组名称。 |
+**参数：** 
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述      |
+| ----- | ------ | ---- | ---- | --------- |
+| name  | string | 否    | -    | 多选框名称。    |
+| group | string | 否    | -    | 多选框的群组名称。 |
 
 ## 属性
 
-
 | 名称            | 参数类型  | 默认值   | 描述           |
-| ------------- | ------- | ------ | -------- |
+| ------------- | ----- | ----- | ------------ |
 | select        | bool  | false | 设置多选框是否选中。   |
 | selectedColor | Color | -     | 设置多选框选中状态颜色。 |
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| ----------| -------- |
-|onChange(callback: (value: boolean) => void) | 当选中状态发生变化时，触发该回调。<br>- value为true时，表示已选中。<br>- value为false时，表示未选中。 | 
+| ---------------------------------------- | ---------------------------------------- |
+| onChange(callback: (value: boolean) => void) | 当选中状态发生变化时，触发该回调。<br>- value为true时，表示已选中。<br>- value为false时，表示未选中。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CheckboxExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md

 # CheckboxGroup
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 多选框群组，用于控制多选框全选或者不全选状态。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 
 无
@@ -19,36 +20,37 @@ CheckboxGroup( group?: string )
 
 创建多选框群组，可以控制群组内的Checkbox全选或者不全选，相同group的Checkbox和CheckboxGroup为同一群组。
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | group | string | 否 | - | 群组名称。|
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述  |
+| ----- | ------ | ---- | ---- | ----- |
+| group | string | 否    | -    | 群组名称。 |
 
 ## 属性
 
 | 名称            | 参数类型  | 默认值   | 描述               |
-| -------- | -------- | -------- | -------- |
+| ------------- | ----- | ----- | ---------------- |
 | selectAll     | bool  | false | 设置是否全选。          |
 | selectedColor | Color | -     | 设置被选中或部分选中状态的颜色。 |
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
-| onChange (callback: (names: Array&lt;string&gt;, status: SelectStatus) => void ) |CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。<br>- names：群组内所有被选中的多选框名称。<br>- status：选中状态。| 
+| ---------------------------------------- | ---------------------------------------- |
+| onChange (callback: (names: Array&lt;string&gt;, status: SelectStatus) => void ) | CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。<br>- names：群组内所有被选中的多选框名称。<br>- status：选中状态。 |
 
-- SelectStatus枚举说明
-  | 名称  | 描述 | 
-  | ----- | -------------------- |
-  | All   | 群组多选择框全部选择。 |
-  | Part  | 群组多选择框部分选择。 |
-  | None  | 群组多选择框全部没有选择。 |
+## SelectStatus枚举说明
 
+| 名称   | 描述            |
+| ---- | ------------- |
+| All  | 群组多选择框全部选择。   |
+| Part | 群组多选择框部分选择。   |
+| None | 群组多选择框全部没有选择。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CheckboxExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md

@@ -2,39 +2,37 @@
 
 数据面板组件，用于将多个数据占比情况使用占比图进行展示。
 
-
 ## 权限列表
 
 无
 
-
 ## 子组件
 
 无
 
-
 ## 接口
 
 DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | values | number[] | 是 | - | 数据值列表，最大支持9个数据。 |
-  | max | number | 否 | 100 | -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。 |
-  | type<sup>8+</sup> | DataPanelType | 否 | DataPanelType.Circle | 数据面板的类型。 |
+**参数**: 
 
+| 参数名               | 参数类型          | 必填   | 默认值                  | 参数描述                                     |
+| ----------------- | ------------- | ---- | -------------------- | ---------------------------------------- |
+| values            | number[]      | 是    | -                    | 数据值列表，最大支持9个数据。                          |
+| max               | number        | 否    | 100                  | -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。 |
+| type<sup>8+</sup> | DataPanelType | 否    | DataPanelType.Circle | 数据面板的类型。                                 |
 
-- DataPanelType枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Line | 线型数据面板。 | 
-  | Circle | 环形数据面板。 |
+## DataPanelType枚举说明
 
+| 名称     | 描述      |
+| ------ | ------- |
+| Line   | 线型数据面板。 |
+| Circle | 环形数据面板。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DataPanelExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md

 # DatePicker
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 选择日期的滑动选择器组件。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## 权限列表
 
 无
 
-
 ## 子组件
 
 无
 
-
 ## 接口
 
 DatePicker(options?: DatePickerOptions)
 
 根据指定范围的Date创建可以选择日期的滑动选择器。
 
-- options参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 |
-  | end | Date | 否 | Date('2100-12-31') | 指定选择器的结束日期。 |
-  | selected | Date | 否 | 当前系统日期 | 设置选中项的日期。 |
+**options参数:**
 
+| 参数名      | 参数类型 | 必填   | 默认值                | 参数描述        |
+| -------- | ---- | ---- | ------------------ | ----------- |
+| start    | Date | 否    | Date('1970-1-1')   | 指定选择器的起始日期。 |
+| end      | Date | 否    | Date('2100-12-31') | 指定选择器的结束日期。 |
+| selected | Date | 否    | 当前系统日期             | 设置选中项的日期。   |
 
 ## 属性
 
 | 名称    | 参数类型    | 默认值   | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ----- | ------- | ----- | ---------------------------------------- |
 | lunar | boolean | false | 日期是否显示农历。<br/>-&nbsp;true：展示农历。<br/>-&nbsp;false：不展示农历。 |
 
-
 ## 事件
 
 | 名称                                       | 功能描述        |
-| -------- | -------- | 
+| ---------------------------------------- | ----------- |
 | onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | 选择日期时触发该事件。 |
 
 ### DatePickerResult对象说明
-  | 名称 | 参数类型 | 描述 | 
-  | -------- | -------- | -------- |
-  | year | number | 选中日期的年。 | 
-  | month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 | 
-  | day | number | 选中日期的日。 | 
+| 名称    | 参数类型   | 描述                          |
+| ----- | ------ | --------------------------- |
+| year  | number | 选中日期的年。                     |
+| month | number | 选中日期的月(0~11)，0表示1月，11表示12月。 |
+| day   | number | 选中日期的日。                     |
 
 
 ## 示例
@@ -57,7 +53,8 @@ DatePicker(options?: DatePickerOptions)
 
 ### 日期选择器（显示农历）
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerExample01 {
@@ -84,7 +81,8 @@ struct DatePickerExample01 {
 
 ### 日期选择器（不显示农历）
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerExample02 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-divider.md

 # Divider
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供分隔器组件，分隔不同内容块/内容元素。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## 权限列表
 
 无
 
-
 ## 子组件
 
 无
 
-
 ## 接口
 
 Divider()
 
-
 ## 属性
 
 | 名称          | 参数类型                                     | 默认值               | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ----------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
 | vertical    | boolean                                  | false             | 使用水平分割线还是垂直分割线，false: 水平分割线， true:垂直分割线。 |
 | color       | Color                                    | -                 | 设置分割线颜色。                                 |
 | strokeWidth | Length                                   | 1                 | 设置分割线宽度。                                 |
@@ -36,10 +32,10 @@ Divider()
 
 不支持通用事件。
 
-
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DividerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md

 # Gauge
 
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 数据量规图表组件，用于将数据展示为环形图表。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## 权限列表
 
 无
 
-
 ## 子组件
 
 无
 
-
 ## 接口
 
 Gauge(value:{value: number, min?: number, max?: number})
 
-- 参数
-    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | 是 | - | 当前数据值。 | 
-  | min | number | 否 | 0 | 当前数据段最小值。 | 
-  | max | number | 否 | 100 | 当前数据段最大值。 | 
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述      |
+| ----- | ------ | ---- | ---- | --------- |
+| value | number | 是    | -    | 当前数据值。    |
+| min   | number | 否    | 0    | 当前数据段最小值。 |
+| max   | number | 否    | 100  | 当前数据段最大值。 |
 
 ## 属性
 
-  | 名称 | 参数类型 | 默认值 | 描述 | 
-| -------- | -------- | -------- | -------- |
+| 名称          | 参数类型                                     | 默认值  | 描述                          |
+| ----------- | ---------------------------------------- | ---- | --------------------------- |
 | value       | number                                   | 0    | 设置当前数据图表的值。                 |
 | startAngle  | Angle                                    | -150 | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。 |
 | endAngle    | Angle                                    | 150  | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。 |
@@ -44,7 +40,8 @@ Gauge(value:{value: number, min?: number, max?: number})
 ## 示例
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GaugeExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md

 # Image
 
+图片组件，用来渲染展示图片。
+
 >  **说明：**
 >
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-图片组件，用来渲染展示图片。
-
-
 ## 权限说明
 
 使用网络图片时，需要在config.json文件对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。
@@ -32,11 +31,11 @@
 
 Image(src: string | PixelMap | Resource)
 
-- 参数
-  | 参数名  | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-  | ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-  | src  | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是    | -    | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
+**参数：**
 
+| 参数名  | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
+| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| src  | string\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)\|&nbsp;[Resource](../../ui/ts-types.md#resource类型) | 是    | -    | 图片的数据源，支持本地图片和网络图片。<br/>当使用相对路径引用图片资源时，例如`Image("common/test.jpg")`，不支持该Image组件被跨包/跨模块调用，建议使用`$r`方式来管理需全局使用的图片资源。<br/>\- 支持的图片格式包括png、jpg、bmp、svg和gif。<br/>\- 支持`Base64`字符串。格式`data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, 其中`[base64 data]`为`Base64`字符串数据。<br/>\- 支持`dataability://`路径前缀的字符串，用于访问通过data&nbsp;ability提供的图片路径。 |
 
 ## 属性
 
@@ -44,35 +43,37 @@ Image(src: string | PixelMap | Resource)
 | --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
 | alt                   | string \| [Resource](../../ui/ts-types.md#resource类型) | -        | 加载时显示的占位图。支持本地图片和网络路径。                   |
 | objectFit             | ImageFit                                 | Cover    | 设置图片的缩放类型。                               |
-| objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
-| interpolation         | ImageInterpolation                       | None     | 设置图片的插值效果，仅针对图片放大插值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
-| renderMode            | ImageRenderMode                          | Original | 设置图片渲染的模式。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
-| sourceSize            | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | -        | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
+| objectRepeat          | [ImageRepeat](ts-appendix-enums.md#imagerepeat枚举说明) | NoRepeat | 设置图片的重复样式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
+| interpolation         | ImageInterpolation                       | None     | 设置图片的插值效果，仅针对图片放大插值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
+| renderMode            | ImageRenderMode                          | Original | 设置图片渲染的模式。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;svg类型图源不支持该属性。 |
+| sourceSize            | {<br/>width:&nbsp;number,<br/>height:&nbsp;number<br/>} | -        | 设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-&nbsp;PixelMap资源不支持该属性。 |
 | syncLoad<sup>8+</sup> | boolean                                  | false    | 设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。  |
 
-- ImageFit枚举说明
-  | 名称      | 描述                                                         |
-  | --------- | ------------------------------------------------------------ |
-  | Cover     | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。 |
-  | Contain   | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。   |
-  | Fill      | 不保持宽高比进行放大缩小，使得图片填充满显示边界。           |
-  | None      | 保持原有尺寸显示。                                           |
-  | ScaleDown | 保持宽高比显示，图片缩小或者保持不变。                       |
-
-- ImageInterpolation枚举说明
-  | 名称     | 描述                       |
-  | ------ | ------------------------ |
-  | None   | 不使用插值图片数据。               |
-  | High   | 高度使用插值图片数据，可能会影响图片渲染的速度。 |
-  | Medium | 中度使用插值图片数据。              |
-  | Low    | 低度使用插值图片数据。              |
-
-- ImageRenderMode枚举说明
-  | 名称       | 描述                    |
-  | -------- | --------------------- |
-  | Original | 按照原图进行渲染，包括颜色。        |
-  | Template | 将图像渲染为模板图像，忽略图片的颜色信息。 |
+## ImageFit枚举说明
+
+| 名称        | 描述                               |
+| --------- | -------------------------------- |
+| Cover     | 保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。  |
+| Contain   | 保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。    |
+| Fill      | 不保持宽高比进行放大缩小，使得图片填充满显示边界。        |
+| None      | 保持原有尺寸显示。通常配合objectRepeat属性一起使用。 |
+| ScaleDown | 保持宽高比显示，图片缩小或者保持不变。              |
 
+## ImageInterpolation枚举说明
+
+| 名称     | 描述                       |
+| ------ | ------------------------ |
+| None   | 不使用插值图片数据。               |
+| High   | 高度使用插值图片数据，可能会影响图片渲染的速度。 |
+| Medium | 中度使用插值图片数据。              |
+| Low    | 低度使用插值图片数据。              |
+
+## ImageRenderMode枚举说明
+
+| 名称       | 描述                    |
+| -------- | --------------------- |
+| Original | 按照原图进行渲染，包括颜色。        |
+| Template | 将图像渲染为模板图像，忽略图片的颜色信息。 |
 
 ## 事件
 
@@ -85,7 +86,7 @@ Image(src: string | PixelMap | Resource)
 
 ## 示例
 
-```
+```ts
 // Image1
 @Entry
 @Component
@@ -152,7 +153,7 @@ struct ImageExample1 {
 
 ![zh-cn_image_0000001250492613](figures/zh-cn_image_0000001250492613.gif)
 
-```
+```ts
 // Image2
 @Entry
 @Component
@@ -221,7 +222,7 @@ struct ImageExample2 {
 
 ![zh-cn_image_0000001205812616](figures/zh-cn_image_0000001205812616.png)
 
-```
+```ts
 // Image3
 @Entry
 @Component

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md

 # ImageAnimator
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -25,7 +25,7 @@ ImageAnimator()
 ## 属性
 
 | 参数名称       | 参数类型                                     | 默认值      | 必填   | 参数描述                                     |
-| -------- | -------- | -------- | -------- | -------- |
+| ---------- | ---------------------------------------- | -------- | ---- | ---------------------------------------- |
 | images     | Array&lt;{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}&gt; | []       | 是    | 设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：<br/>src：图片路径，图片格式为svg，png和jpg。<br/>width：图片宽度。<br/>height：图片高度。<br/>top：图片相对于组件左上角的纵向坐标。<br/>left：图片相对于组件左上角的横向坐标。<br/>duration：每一帧图片的播放时长，单位毫秒。 |
 | state      | AnimationStatus                          | Initial  | 否    | 默认为初始状态，用于控制播放状态。                        |
 | duration   | number                                   | 1000     | 否    | 单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中设置了单独的duration后，该属性设置无效。 |
@@ -35,25 +35,26 @@ ImageAnimator()
 | fillMode   | FillMode                                 | Forwards | 否    | 设置动画开始前和结束后的状态，可选值参见FillMode说明。          |
 | iterations | number                                   | 1        | 否    | 默认播放一次，设置为-1时表示无限次播放。                    |
 
-- AnimationStatus枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Initial | 动画初始状态。 |
-  | Running | 动画处于播放状态。 |
-  | Paused | 动画处于暂停状态。 |
-  | Stopped | 动画处于停止状态。 |
+## AnimationStatus枚举说明
+
+| 名称      | 描述        |
+| ------- | --------- |
+| Initial | 动画初始状态。   |
+| Running | 动画处于播放状态。 |
+| Paused  | 动画处于暂停状态。 |
+| Stopped | 动画处于停止状态。 |
 
-- FillMode枚举值说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | None | 播放完成后恢复初始状态。 |
-  | Forwards | 播放完成后保持动画结束时的状态。 |
+## FillMode枚举值说明
 
+| 名称       | 描述               |
+| -------- | ---------------- |
+| None     | 播放完成后恢复初始状态。     |
+| Forwards | 播放完成后保持动画结束时的状态。 |
 
 ## 事件
 
 | 名称                              | 功能描述            |
-| -------- | -------- |
+| ------------------------------- | --------------- |
 | onStart()&nbsp;=&gt;&nbsp;void  | 状态回调，动画开始播放时触发。 |
 | onPause()&nbsp;=&gt;&nbsp;void  | 状态回调，动画暂停播放时触发。 |
 | onRepeat()&nbsp;=&gt;&nbsp;void | 状态回调，动画重新播放时触发。 |
@@ -63,7 +64,8 @@ ImageAnimator()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageAnimatorExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-loadingprogress.md

 # LoadingProgress
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 用于显示加载进展。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -22,19 +23,17 @@ LoadingProgress()
 
 创建加载进展组件。
 
-
-
 ## 属性
 
 | 名称    | 参数类型  | 默认值  | 描述          |
-| -------- | -------- | -------- | -------- |
+| ----- | ----- | ---- | ----------- |
 | color | Color | -    | 设置加载进度条前景色。 |
 
 
-
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LoadingProgressExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md

 # Marquee
 
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。
 
 
-跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 权限列表
@@ -22,20 +22,20 @@
 
 Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
 
-- 参数
-    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | start | boolean | 是 | - | 控制是否进入播放状态。 | 
-  | step | number | 否 | 6 | 滚动动画文本滚动步长。 | 
-  | loop | number | 否 | -1 | 设置重复滚动的次数，小于等于零时无限循环。 | 
-  | fromStart | boolean | 否 | true | 设置文本从头开始滚动或反向滚动。 | 
-  | src | string | 是 | - | 需要滚动的文本。 | 
+**参数：**
 
+| 参数名       | 参数类型    | 必填   | 默认值  | 参数描述                  |
+| --------- | ------- | ---- | ---- | --------------------- |
+| start     | boolean | 是    | -    | 控制是否进入播放状态。           |
+| step      | number  | 否    | 6    | 滚动动画文本滚动步长。           |
+| loop      | number  | 否    | -1   | 设置重复滚动的次数，小于等于零时无限循环。 |
+| fromStart | boolean | 否    | true | 设置文本从头开始滚动或反向滚动。      |
+| src       | string  | 是    | -    | 需要滚动的文本。              |
 
 ## 事件
 
-  | 名称 | 功能描述 | 
-| -------- | -------- |
+| 名称                                       | 功能描述       |
+| ---------------------------------------- | ---------- |
 | onStart(callback: () => void) | 开始滚动时触发回调。 |
 | onBounce(callback: () => void) | 滚动到底时触发回调。 |
 | onFinish(callback: () => void) | 滚动完成时触发回调。 |
@@ -44,7 +44,8 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
 ## 示例
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MarqueeExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md

 # Navigation
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -27,7 +27,7 @@ Navigation()
 ## 属性
 
 | 名称             | 参数类型                                     | 默认值                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| -------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
 | title          | string&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -                        | 页面标题。                                    |
 | subtitle       | string                                   | -                        | 页面副标题。                                   |
 | menus          | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -                        | 页面右上角菜单。                                 |
@@ -37,41 +37,44 @@ Navigation()
 | hideTitleBar   | boolean                                  | false                    | 隐藏标题栏。                                   |
 | hideBackButton | boolean                                  | false                    | 隐藏返回键。                                   |
 
-- NavigationMenuItem类型接口说明
-  | 名称 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | 是 | - | 菜单栏单个选项的显示文本。 | 
-  | icon | string | 否 | - | 菜单栏单个选项的图标资源路径。 | 
-  | action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 | 
+## NavigationMenuItem类型说明
 
-- Object类型接口说明
-  | 名称 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | 是 | - | 工具栏单个选项的显示文本。 | 
-  | icon | string | 否 | - | 工具栏单个选项的图标资源路径。 | 
-  | action | ()&nbsp;=&gt;&nbsp;void | 否 | - | 当前选项被选中的事件回调。 | 
+| 名称     | 类型                      | 必填   | 默认值  | 描述              |
+| ------ | ----------------------- | ---- | ---- | --------------- |
+| value  | string                  | 是    | -    | 菜单栏单个选项的显示文本。   |
+| icon   | string                  | 否    | -    | 菜单栏单个选项的图标资源路径。 |
+| action | ()&nbsp;=&gt;&nbsp;void | 否    | -    | 当前选项被选中的事件回调。   |
 
-- NavigationTitleMode枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 | 
-  | Mini | 固定为小标题模式（图标+主副标题）。 | 
-  | Full | 固定为大标题模式（主副标题）。 | 
+## Object类型接口说明
 
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-  > 目前可滚动组件只支持List。
+| 名称     | 类型                      | 必填   | 默认值  | 描述              |
+| ------ | ----------------------- | ---- | ---- | --------------- |
+| value  | string                  | 是    | -    | 工具栏单个选项的显示文本。   |
+| icon   | string                  | 否    | -    | 工具栏单个选项的图标资源路径。 |
+| action | ()&nbsp;=&gt;&nbsp;void | 否    | -    | 当前选项被选中的事件回调。   |
 
+## NavigationTitleMode枚举说明
+
+| 名称   | 描述                                       |
+| ---- | ---------------------------------------- |
+| Free | 当内容为可滚动组件时，标题随着内容向上滚动而缩小（子标题的大小不变、淡出）。向下滚动内容到顶时则恢复原样。 |
+| Mini | 固定为小标题模式（图标+主副标题）。                       |
+| Full | 固定为大标题模式（主副标题）。                          |
+
+>  **说明：**
+>
+>  目前可滚动组件只支持List。
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onTitleModeChange(callback:&nbsp;(titleMode:&nbsp;NavigationTitleMode)&nbsp;=&gt;&nbsp;void) | 当titleMode为NavigationTitleMode.Free时，随着可滚动组件的滑动标题栏模式发生变化时触发此回调。 |
 
 
 ## 示例
 
-```
+```ts
 // Example 01
 @Entry
 @Component
@@ -159,7 +162,7 @@ struct NavigationExample {
 
 ![zh-cn_image_0000001237616085](figures/zh-cn_image_0000001237616085.gif)
 
-```
+```ts
 // Example 02
 @Entry
 @Component

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md

 # Progress
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 进度条，用于显示内容加载或操作处理进度。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -17,34 +17,34 @@
 无
 
 
-## 接口说明
+## 接口
 
 Progress(value: {value: number, total?: number, type?: ProgressType})
 
 创建进度组件，用于显示内容加载或操作处理进度。
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | 是 | - | 指定当前进度值。 |
-  | total | number | 否 | 100 | 指定进度总长。 |
-  | type | ProgressType | 否 | ProgressType.Linear | 指定进度条样式。 |
+**参数：** 
 
+| 参数名   | 参数类型         | 必填   | 默认值                 | 参数描述     |
+| ----- | ------------ | ---- | ------------------- | -------- |
+| value | number       | 是    | -                   | 指定当前进度值。 |
+| total | number       | 否    | 100                 | 指定进度总长。  |
+| type  | ProgressType | 否    | ProgressType.Linear | 指定进度条样式。 |
 
-- ProgressType枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Linear | 线性样式。 |
-  | Ring<sup>8+</sup> | 环形无刻度样式，环形圆环逐渐填充完成过程。 |
-  | Eclipse | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 |
-  | ScaleRing<sup>8+</sup> | 环形有刻度样式，类似时钟刻度形式加载进度。 |
-  | Capsule<sup>8+</sup> | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 |
+## ProgressType枚举说明
 
+| 名称                     | 描述                                       |
+| ---------------------- | ---------------------------------------- |
+| Linear                 | 线性样式。                                    |
+| Ring<sup>8+</sup>      | 环形无刻度样式，环形圆环逐渐填充完成过程。                    |
+| Eclipse                | 圆形样式，展现类似月圆月缺的进度展示效果，从月牙逐渐到满月的这个过程代表了下载的进度。 |
+| ScaleRing<sup>8+</sup> | 环形有刻度样式，类似时钟刻度形式加载进度。                    |
+| Capsule<sup>8+</sup>   | 胶囊样式，头尾两端处，进度条由弧形变成直线和直线变成弧形的过程；中段处，进度条正常往右走的过程。 |
 
 ## 属性
 
 | 名称                 | 参数类型                                     | 默认值  | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ------------------ | ---------------------------------------- | ---- | ---------------------------------------- |
 | value              | number                                   | -    | 设置当前进度值。                                 |
 | color              | Color                                    | -    | 设置进度条前景色。                                |
 | style<sup>8+</sup> | {<br/>strokeWidth？:&nbsp;Length,<br/>scaleCount？:&nbsp;number,<br/>scaleWidth？:&nbsp;Length<br/>} | -    | 定义组件的样式。<br/>strokeWidth:&nbsp;设置进度条宽度。<br/>scaleCount:&nbsp;设置环形进度条总刻度数。<br/>scaleWidth:&nbsp;设置环形进度条刻度粗细。<br/>刻度粗细大于进度条宽度时，刻度粗细为系统默认粗细。 |
@@ -52,7 +52,8 @@ Progress(value: {value: number, total?: number, type?: ProgressType})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ProgressExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md

 # QRCode
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 显示二维码信息。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,27 +21,28 @@
 
 QRCode(value: string)
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | 是 | - | 二维码内容字符串。 | 
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述      |
+| ----- | ------ | ---- | ---- | --------- |
+| value | string | 是    | -    | 二维码内容字符串。 |
 
 ## 属性
 
 | 名称    | 参数类型  | 默认值   | 描述       |
-| -------- | -------- | -------- | -------- |
+| ----- | ----- | ----- | -------- |
 | color | Color | Black | 设置二维码颜色。 |
 
 
 ## 事件
 
-通用事件仅支持点击事件。
+通用事件仅支持[点击事件](ts-universal-events-click.md)。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct QRCodeExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-radio.md

 # Radio
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 单选框，提供相应的用户交互选择项。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,30 +21,31 @@
 
 Radio(options: {value: string, group: string})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | 是 | - | 当前单选框的值。|
-  | group | string | 是 | - | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。|
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述                                |
+| ----- | ------ | ---- | ---- | ----------------------------------- |
+| value | string | 是    | -    | 当前单选框的值。                            |
+| group | string | 是    | -    | 当前单选框的所属群组名称，相同group的Radio只能有一个被选中。 |
 
 ## 属性
 
 | 名称      | 参数类型    | 默认值   | 描述          |
-| -------- | -------- | -------- | -------- |
+| ------- | ------- | ----- | ----------- |
 | checked | boolean | false | 设置单选框的选中状态。 |
 
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onChange(callback: (value: boolean) => void) | 单选框选中状态改变时触发回调。<br> -value为true时，代表选中。<br> -value为false时，代表未选中。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RadioExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-rating.md

 # Rating
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 评分条组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -17,21 +17,21 @@
 无
 
 
-## 接口说明
+## 接口
 
 Rating(options?: { rating: number, indicator?: boolean })
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | rating | number | 是 | 0 | 设置并接收评分值。 | 
-  | indicator | boolean | 否 | false | 仅作为指示器使用，不可操作。 | 
+**参数：**
 
+| 参数名       | 参数类型    | 必填   | 默认值   | 参数描述           |
+| --------- | ------- | ---- | ----- | -------------- |
+| rating    | number  | 是    | 0     | 设置并接收评分值。      |
+| indicator | boolean | 否    | false | 仅作为指示器使用，不可操作。 |
 
 ## 属性
 
 | 名称        | 参数类型                                     | 默认值  | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
 | stars     | number                                   | 5    | 设置评星总数。                                  |
 | stepSize  | number                                   | 0.5  | 操作评级的步长。                                 |
 | starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | -    | backgroundSrc：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地。<br/>foregroundSrc：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。<br/>secondarySrc：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地。 |
@@ -40,13 +40,14 @@ Rating(options?: { rating: number, indicator?: boolean })
 ## 事件
 
 | 名称                                       | 功能描述                |
-| -------- | -------- |
+| ---------------------------------------- | ------------------- |
 | onChange(callback:(value:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 操作评分条的评星发生改变时触发该回调。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RatingExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md

 # RichText
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 富文本组件，解析并显示HTML格式文本。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 
 无
@@ -15,27 +16,25 @@
 
 ## 接口
 
-RichText\(content:string\)
+RichText\(content: string\)
 
-- 参数
-
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | content | string | 是 | - | 表示HTML格式的字符串。 |
+**参数：**
 
+| 参数名     | 参数类型   | 必填   | 默认值  | 参数描述          |
+| ------- | ------ | ---- | ---- | ------------- |
+| content | string | 是    | -    | 表示HTML格式的字符串。 |
 
 ## 事件
 
-
 | 名称                   | 描述         |
-| -------- | -------- |
+| -------------------- | ---------- |
 | onStart() => void    | 加载网页时触发。   |
 | onComplete() => void | 网页加载结束时触发。 |
 
 ## 支持标签
 
 | 名称                  | 描述                                       | 示例                                       |
-| -------- | -------- | -------- |
+| ------------------- | ---------------------------------------- | ---------------------------------------- |
 | \<h1>--\<h6>        | 被用来定义HTML，\<h1>定义重要等级最高的标题，\<h6>定义重要等级最低的标题。 | \<h1>这是一个标题\</h1>\<h2>这是h2标题\</h2>       |
 | \<p>\</p>           | 定义段落。                                    | \<p>这是一个段落\</p>                          |
 | \<br/>              | 插入一个简单的换行符。                              | \<p>这是一个段落\<br/>这是换行段落\</p>              |
@@ -49,7 +48,8 @@ RichText\(content:string\)
 
 ## 示例
 示例效果请以真机运行为准，当前IDE预览器不支持。
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RichTextExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md

 # ScrollBar
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,35 +21,38 @@
 
 ScrollBar(value: ScrollBarOptions)
 
-- ScrollBarOptions的参数描述
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
-  | direction | ScrollBarDirection | 否 | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。 |
-  | state | BarState | 否 | BarState.Auto | 滚动条状态。 |
+**参数：**
+
+| 参数名       | 参数类型                                     | 必填   | 默认值                         | 参数描述                    |
+| --------- | ---------------------------------------- | ---- | --------------------------- | ----------------------- |
+| scroller  | [Scroller](ts-container-scroll.md#scroller) | 是    | -                           | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
+| direction | ScrollBarDirection                       | 否    | ScrollBarDirection.Vertical | 滚动条的方向，控制可滚动组件对应方向的滚动。  |
+| state     | BarState                                 | 否    | BarState.Auto               | 滚动条状态。                  |
 
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-  > ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。
-  > 
-  > 滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。
+>  **说明：**
+>  ScrollBar组件负责定义可滚动区域的行为样式，ScrollBar的子节点负责定义滚动条的行为样式。
+>
+>  滚动条组件与可滚动组件通过Scroller进行绑定，且只有当两者方向相同时，才能联动，ScrollBar与可滚动组件仅支持一对一绑定。
 
-- ScrollBarDirection枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Vertical | 纵向滚动条。 | 
-  | Horizontal | 横向滚动条。 | 
+## ScrollBarDirection枚举说明
 
-- BarState枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | On | 常驻显示。 | 
-  | Off | 不显示。 | 
-  | Auto | 按需显示(触摸时显示，无操作2s后消失)。 | 
+| 名称         | 描述     |
+| ---------- | ------ |
+| Vertical   | 纵向滚动条。 |
+| Horizontal | 横向滚动条。 |
 
+## BarState枚举说明
+
+| 名称   | 描述                    |
+| ---- | --------------------- |
+| On   | 常驻显示。                 |
+| Off  | 不显示。                  |
+| Auto | 按需显示(触摸时显示，无操作2s后消失)。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollBarExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md

 #  Search
 
-> ![](public_sys-resources/icon-note.gif) **说明：** 
+提供搜索框组件，用于提供用户搜索内容的输入区域。
+
+> **说明：** 
 >
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
-提供搜索框组件，用于提供用户搜索内容的输入区域。
-
 ## 权限列表
 
 无
@@ -18,15 +18,14 @@
 
 Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })
 
-- 参数
-
-  | 参数名         | 参数类型             | 必填   | 默认值  | 参数描述                                     |
-  | ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
-  | value       | string           | 否    | -    | 搜索文本值。                                   |
-  | placeholder | string           | 否    | -    | 无输入时的提示文本。                               |
-  | icon        | string           | 否    | -    | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
-  | controller  | SearchController | 否    | -    | 控制器。                                     |
+**参数：**
 
+| 参数名         | 参数类型             | 必填   | 默认值  | 参数描述                                     |
+| ----------- | ---------------- | ---- | ---- | ---------------------------------------- |
+| value       | string           | 否    | -    | 搜索文本值。                                   |
+| placeholder | string           | 否    | -    | 无输入时的提示文本。                               |
+| icon        | string           | 否    | -    | 搜索图标路径，默认使用系统搜索图标，支持的图标格式: svg, jpg和png。 |
+| controller  | SearchController | 否    | -    | 控制器。                                     |
 
 ## 属性
 
@@ -61,17 +60,17 @@ caretPosition(value: number): viod
 
 设置输入光标的位置。
 
-- 参数
-
-  | 参数名   | 参数类型   | 必填   | 默认值  | 参数描述              |
-  | ----- | ------ | ---- | ---- | ----------------- |
-  | value | number | 是    | -    | 从字符串开始到光标所在位置的长度。 |
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述              |
+| ----- | ------ | ---- | ---- | ----------------- |
+| value | number | 是    | -    | 从字符串开始到光标所在位置的长度。 |
 
 
 ##  示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SearchExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md

 #  Select
 
-> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 提供下拉选择菜单，可以让用户在多个选项之间选择。
 
+>  **说明：** 
+>
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 
 无
@@ -16,17 +18,17 @@
 
 Select(options: Array\<SelectOption\>)
 
-- SelectOption参数
+**参数：**
 
-  | 参数名 | 参数类型                                        | 必填 | 默认值 | 参数描述       |
-  | ------ | ----------------------------------------------- | ---- | ------ | -------------- |
-  | value  | [ResourceStr](../../ui/ts-types.md) | 是   | -      | 下拉选项内容。 |
-  | icon   | [ResourceStr](../../ui/ts-types.md) | 否   | -      | 下拉选项图片。 |
+| 参数名   | 参数类型                                | 必填   | 默认值  | 参数描述    |
+| ----- | ----------------------------------- | ---- | ---- | ------- |
+| value | [ResourceStr](../../ui/ts-types.md) | 是    | -    | 下拉选项内容。 |
+| icon  | [ResourceStr](../../ui/ts-types.md) | 否    | -    | 下拉选项图片。 |
 
 ## 属性
 
 | 名称                      | 参数类型                                  | 默认值  | 描述                       |
-| ----------------------- | --------------------------------------------------- | ------ | ----------------------------------------------- |
+| ----------------------- | ------------------------------------- | ---- | ------------------------ |
 | selected                | number                                | -    | 设置下拉菜单初始选择项的索引，第一项的索引为0。 |
 | value                   | string                                | -    | 设置下拉按钮本身的文本显示。           |
 | font                    | [Font](../../ui/ts-types.md)          | -    | 设置下拉按钮本身的文本样式：           |
@@ -41,12 +43,13 @@ Select(options: Array\<SelectOption\>)
 ## 事件
 
 | 名称                                       | 功能描述                                   |
-| ----------------------------------------------------------- | ------------------------------------------------------------ |
+| ---------------------------------------- | -------------------------------------- |
 | onSelect(callback: (index: number, value?:string) => void） | 下拉菜单选中某一项的回调。index：选中项的索引。value：选中项的值。 |
 
 ##  示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SelectExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md

 # Slider
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 滑动条组件，用来快速调节设置值，如音量、亮度等。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,30 +21,31 @@
 
 Slider(value:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | 否 | 0 | 当前进度值。 |
-  | min | number | 否 | 0 | 设置最小值。 |
-  | max | number | 否 | 100 | 设置最大值。 |
-  | step | number | 否 | 1 | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。 |
-  | style | SliderStyle | 否 | SliderStyle.OutSet | 设置Slider的滑块样式。 |
-  | direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis枚举说明) | 否 | Axis.Horizontal | 设置滑动条滑动方向为水平或竖直方向。 |
-  | reverse<sup>8+</sup> | boolean | 否 | false | 设置滑动条取值范围是否反向。 |
+**参数：**
+
+| 参数名                    | 参数类型                                  | 必填   | 默认值                | 参数描述                                   |
+| ---------------------- | ------------------------------------- | ---- | ------------------ | -------------------------------------- |
+| value                  | number                                | 否    | 0                  | 当前进度值。                                 |
+| min                    | number                                | 否    | 0                  | 设置最小值。                                 |
+| max                    | number                                | 否    | 100                | 设置最大值。                                 |
+| step                   | number                                | 否    | 1                  | 设置Slider滑动跳动值，当设置相应的step时，Slider为间歇滑动。 |
+| style                  | SliderStyle                           | 否    | SliderStyle.OutSet | 设置Slider的滑块样式。                         |
+| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis枚举说明) | 否    | Axis.Horizontal    | 设置滑动条滑动方向为水平或竖直方向。                     |
+| reverse<sup>8+</sup>   | boolean                               | 否    | false              | 设置滑动条取值范围是否反向。                         |
 
-- SliderStyle枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | OutSet | 滑块在滑轨上。 |
-  | InSet | 滑块在滑轨内。 |
+## SliderStyle枚举说明
 
+| 名称     | 描述      |
+| ------ | ------- |
+| OutSet | 滑块在滑轨上。 |
+| InSet  | 滑块在滑轨内。 |
 
 ## 属性
 
 不支持触摸热区设置。
 
 | 名称            | 参数类型    | 默认值   | 描述                |
-| -------- | -------- | -------- | -------- |
+| ------------- | ------- | ----- | ----------------- |
 | blockColor    | Color   | -     | 设置滑块的颜色。          |
 | trackColor    | Color   | -     | 设置滑轨的背景颜色。        |
 | selectedColor | Color   | -     | 设置滑轨的已滑动颜色。       |
@@ -57,20 +58,21 @@ Slider(value:{value?: number, min?: number, max?: number, step?: number, style?:
 通用事件仅支持：OnAppear，OnDisAppear。
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void） | Slider滑动时触发事件回调。<br/>value：当前进度值。<br/>mode：拖动状态。 |
 
-- SliderChangeMode枚举说明
-  | 名称 | 值 | 描述 |
-  | -------- | -------- | -------- |
-  | Begin | 0 | 用户开始拖动滑块。 |
-  | Moving | 1 | 用户拖动滑块中。 |
-  | End | 2 | 用户结束拖动滑块。 |
+## SliderChangeMode枚举说明
 
+| 名称     | 值    | 描述        |
+| ------ | ---- | --------- |
+| Begin  | 0    | 用户开始拖动滑块。 |
+| Moving | 1    | 用户拖动滑块中。  |
+| End    | 2    | 用户结束拖动滑块。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SliderExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md

 # Span
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 文本段落，只能作为Text子组件，呈现一段文本信息。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,18 +21,18 @@
 
 Span(content: string)
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | content | string | 是 | - | 文本内容。 | 
+**参数:**
 
+| 参数名     | 参数类型   | 必填   | 默认值  | 参数描述  |
+| ------- | ------ | ---- | ---- | ----- |
+| content | string | 是    | -    | 文本内容。 |
 
 ## 属性
 
 通用属性方法仅支持通用文本样式，不支持触摸热区设置。
 
 | 名称         | 参数类型                                     | 默认值                                      | 描述             |
-| -------- | -------- | -------- | -------- |
+| ---------- | ---------------------------------------- | ---------------------------------------- | -------------- |
 | decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype枚举说明),<br/>color?:&nbsp;Color<br/>} | {<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} | 设置文本装饰线样式及其颜色。 |
 | textCase   | [TextCase](ts-appendix-enums.md#textcase枚举说明) | Normal                                   | 设置文本大小写。       |
 
@@ -41,13 +41,14 @@ Span(content: string)
 
 通用事件仅支持点击事件。
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SpanExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md

 # Stepper
 
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+步骤导航器。
 
 
-步骤导航器。
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 权限列表
@@ -22,12 +22,11 @@
 
 Stepper(value?: { index?: number })
 
+**参数：**
 
-- 参数
-    | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | index | number | 否 | 0 | 设置步骤导航器显示第几个StepperItem。 | 
-
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述                     |
+| ----- | ------ | ---- | ---- | ------------------------ |
+| index | number | 否    | 0    | 设置步骤导航器显示第几个StepperItem。 |
 
 ## 属性
 
@@ -36,8 +35,8 @@ Stepper(value?: { index?: number })
 
 ## 事件
 
-  | 名称 | 描述 | 
-| -------- | -------- |
+| 名称                                       | 描述                                       |
+| ---------------------------------------- | ---------------------------------------- |
 | onFinish(callback: () => void) | 步骤导航器最后一个StepperItem的nextLabel被点击时触发该回调 。 |
 | onSkip(callback: () => void) | 当前显示的StepperItem状态为ItemState.Skip时，nextLabel被点击时触发该回调。 |
 | onChange(callback:&nbsp;(prevIndex?:&nbsp;number,&nbsp;index?:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 点击左边或者右边文本按钮进行步骤切换时触发该事件。<br/>-&nbsp;prevIndex：切换前的步骤页索引值。<br/>-&nbsp;index：切换后的步骤页（前一页或者下一页）索引值。 |
@@ -45,7 +44,8 @@ Stepper(value?: { index?: number })
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StepperExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepperitem.md

 # StepperItem
 
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+步骤导航器元素。
 
 
-步骤导航器元素。
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 权限列表
@@ -26,19 +26,19 @@ StepperItem()
 ## 属性
 
 | 参数名       | 参数类型      | 默认值              | 参数描述                                  |
-| -------- | -------- | -------- | -------- |
+| --------- | --------- | ---------------- | ------------------------------------- |
 | prevLabel | string    | -                | 当步骤导航器大于一页，除第一页默认值都为"返回"。             |
 | nextLabel | string    | -                | 步骤导航器大于一页时，最后一页默认值为"开始"，其余页默认值为"下一步"。 |
 | status    | ItemState | ItemState.Normal | 步骤导航器元素的状态。                           |
 
-- ItemState枚举说明
-    | 名称 | 描述 | 
-  | -------- | -------- |
-  | Normal | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。 | 
-  | Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。 | 
-  | Waiting | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 | 
-  | Skip | 跳过状态，表示跳过当前步骤, 进入下一个StepperItem。 | 
+## ItemState枚举说明
 
+| 名称       | 描述                                       |
+| -------- | ---------------------------------------- |
+| Normal   | 正常状态，右侧文本按钮正常显示，可点击进入下一个StepperItem。     |
+| Disabled | 不可用状态，右侧文本按钮灰度显示，不可点击进入下一个StepperItem。   |
+| Waiting  | 等待状态，右侧文本按钮不显示，使用等待进度条，不可点击进入下一个StepperItem。 |
+| Skip     | 跳过状态，表示跳过当前步骤, 进入下一个StepperItem。    |
 
 ## 示例
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md

 # Text
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 文本，用于呈现一段信息。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,16 +21,16 @@
 
 Text(content?: string)
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | content | string | 否 | '' | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
+**参数：**
 
+| 参数名     | 参数类型   | 必填   | 默认值  | 参数描述                                     |
+| ------- | ------ | ---- | ---- | ---------------------------------------- |
+| content | string | 否    | ''   | 文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效。 |
 
 ## 属性
 
 | 名称             | 参数类型                                     | 默认值                                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | textAlign      | TextAlign                                | TextAlign.Start                          | 设置多行文本的文本对齐方式。                           |
 | textOverflow   | {overflow:&nbsp;TextOverflow}            | {overflow:&nbsp;TextOverflow.Clip}       | 设置文本超长时的显示方式。<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。 |
 | maxLines       | number                                   | Infinity                                 | 设置文本的最大行数。                               |
@@ -39,42 +39,48 @@ Text(content?: string)
 | baselineOffset | Length                                   | -                                        | 设置文本基线的偏移量。                              |
 | textCase       | TextCase                                 | TextCase.Normal                          | 设置文本大小写。                                 |
 
-- TextAlign枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Center | 文本居中对齐。 |
-  | Start | 根据文字书写相同的方向对齐。 |
-  | End | 根据文字书写相反的方向对齐。 |
-
-- TextOverflow枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Clip | 文本超长时进行裁剪显示。 |
-  | Ellipsis | 文本超长时显示不下的文本用省略号代替。 |
-  | None | 文本超长时不进行裁剪。 |
-
-- TextDecorationType枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Underline | 文字下划线修饰。 |
-  | LineThrough | 穿过文本的修饰线。 |
-  | Overline | 文字上划线修饰。 |
-  | None | 不使用文本装饰线。 |
-
-- TextCase枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Normal | 保持文本原有大小写。 |
-  | LowerCase | 文本采用全小写。 |
-  | UpperCase | 文本采用全大写。 |
-
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+## TextAlign枚举说明
+
+| 名称     | 描述             |
+| ------ | -------------- |
+| Center | 文本居中对齐。        |
+| Start  | 根据文字书写相同的方向对齐。 |
+| End    | 根据文字书写相反的方向对齐。 |
+
+## TextOverflow枚举说明
+
+| 名称       | 描述                  |
+| -------- | ------------------- |
+| Clip     | 文本超长时进行裁剪显示。        |
+| Ellipsis | 文本超长时显示不下的文本用省略号代替。 |
+| None     | 文本超长时不进行裁剪。         |
+
+## TextDecorationType枚举说明
+
+| 名称          | 描述        |
+| ----------- | --------- |
+| Underline   | 文字下划线修饰。  |
+| LineThrough | 穿过文本的修饰线。 |
+| Overline    | 文字上划线修饰。  |
+| None        | 不使用文本装饰线。 |
+
+## TextCase枚举说明
+
+| 名称        | 描述         |
+| --------- | ---------- |
+| Normal    | 保持文本原有大小写。 |
+| LowerCase | 文本采用全小写。   |
+| UpperCase | 文本采用全大写。   |
+
+>  **说明：**
+>
 >  不支持Text内同时存在文本内容和Span子组件。（如果同时存在，只显示Span内的内容)。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextExample1 {
@@ -112,7 +118,8 @@ struct TextExample1 {
 
 ![zh-cn_image_0000001219864155](figures/zh-cn_image_0000001219864155.gif)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md

 # TextArea
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供多行文本输入组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,12 +21,12 @@
 
 TextArea(value?:{placeholder?: string, controller?: TextAreaController})
 
-- 参数
-  | 参数名                     | 参数类型                                     | 必填   | 默认值  | 参数描述           |
-  | ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
-  | placeholder             | string                                   | 否    | -    | 无输入时的提示文本。     |
-  | controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否    | -    | 设置TextArea控制器。 |
+**参数：**
 
+| 参数名                     | 参数类型                                     | 必填   | 默认值  | 参数描述           |
+| ----------------------- | ---------------------------------------- | ---- | ---- | -------------- |
+| placeholder             | string                                   | 否    | -    | 无输入时的提示文本。     |
+| controller<sup>8+</sup> | [TextAreaController](#textareacontroller8) | 否    | -    | 设置TextArea控制器。 |
 
 ## 属性
 
@@ -40,13 +40,13 @@ TextArea(value?:{placeholder?: string, controller?: TextAreaController})
 | caretColor               | Color                                    | -     | 设置输入框光标颜色。                               |
 | inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | -     | 通过正则表达式设置输入过滤器。满足表达式的输入允许显示，不满足的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，不支持过滤8到10位的强密码。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
 
-- TextAlign枚举说明
-  | 名称     | 描述      |
-  | ------ | ------- |
-  | Start  | 水平对齐首部。 |
-  | Center | 水平居中对齐。 |
-  | End    | 水平对齐尾部。 |
+## TextAlign枚举说明
 
+| 名称     | 描述      |
+| ------ | ------- |
+| Start  | 水平对齐首部。 |
+| Center | 水平居中对齐。 |
+| End    | 水平对齐尾部。 |
 
 ## 事件
 
@@ -74,18 +74,19 @@ caretPosition(value: number): void
 
 设置输入光标的位置。
 
-- 参数
-  | 参数名   | 参数类型   | 必填   | 默认值  | 参数描述                |
-  | ----- | ------ | ---- | ---- | ------------------- |
-  | value | number | 是    | -    | 从字符串开始到光标所在位置的字符长度。 |
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述                |
+| ----- | ------ | ---- | ---- | ------------------- |
+| value | number | 是    | -    | 从字符串开始到光标所在位置的字符长度。 |
 
 ## 示例
 
 
 ### 多行文本输入
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextAreaExample1 {
@@ -122,7 +123,8 @@ struct TextAreaExample1 {
 
 ### 设置光标
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextAreaExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md

 # TextClock
 
-> ![](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 TextClock通过文本显示当前系统时间，支持不同时区的时间显示，时间显示最高精度到秒级。
 
+> **说明：** 
+>
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 
 无
@@ -16,23 +18,23 @@ TextClock通过文本显示当前系统时间，支持不同时区的时间显
 
 TextClock(options?: {timeZoneOffset?: number, contorller?: TextClockController})
 
-- 参数
+**参数:**
 
-  | 参数名   | 参数类型 | 必填 | 默认值             | 参数描述                                                     |
-  | -------- | -------- | ---- | ------------------ | ------------------------------------------------------------ |
-  | timeZoneOffset | number   | 否   | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 |
-  | contorller | [TextClockContorller](#TextClockController) | 否 | null | 绑定一个控制器，用来控制文本时钟的状态。|
+| 参数名            | 参数类型                                     | 必填   | 默认值   | 参数描述                                     |
+| -------------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
+| timeZoneOffset | number                                   | 否    | 时区偏移量 | 设置时区偏移量。取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8；对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间。 |
+| contorller     | [TextClockContorller](#TextClockController) | 否    | null  | 绑定一个控制器，用来控制文本时钟的状态。                     |
 
 ## 属性
 
 | 名称     | 参数类型   | 默认值      | 描述                                       |
-| ------ | -------- | -------- | ------------------------------------------------------------ |
+| ------ | ------ | -------- | ---------------------------------------- |
 | format | string | 'hhmmss' | 设置显示时间格式，如“yyyy/mm/dd”、“yyyy-mm-dd”等。支持的时间格式化字符串：<ul><li>yyyy（年份）</li><li>mm（英文月份简写）</li><li>mmm（英文月份简写）</li><li>mmmm（英文月份全称）</li><li>dd（英文星期简写）</li><li>ddd（英文星期简写）</li><li>dddd（英文星期全称）</li><li>HH（24小时制）</li><li>hh（12小时制）</li><li>MM/mm（分钟）</li><li>SS/ss（秒）</li></ul> |
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------------------------------------------- | ------------------------------------------------------------ |
+| ---------------------------------------- | ---------------------------------------- |
 | onDateChange(event: (value: number) => void) | 提供时间变化回调,该事件最小回调间隔为秒。<br /> value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 |
 
 ## TextClockController
@@ -61,7 +63,8 @@ stop()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct Second {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md

 # TextInput
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供单行文本输入组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,12 +21,12 @@
 
 TextInput(value?:{placeholder?: string controller?: TextInputController})
 
-- 参数
-  | 参数名                     | 参数类型                                     | 必填   | 默认值  | 参数描述            |
-  | ----------------------- | ---------------------------------------- | ---- | ---- | --------------- |
-  | placeholder             | string                                   | 否    | -    | 无输入时的提示文本。      |
-  | controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否    | -    | 设置TextInput控制器。 |
+**参数：**
 
+| 参数名                     | 参数类型                                     | 必填   | 默认值  | 参数描述            |
+| ----------------------- | ---------------------------------------- | ---- | ---- | --------------- |
+| placeholder             | string                                   | 否    | -    | 无输入时的提示文本。      |
+| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | 否    | -    | 设置TextInput控制器。 |
 
 ## 属性
 
@@ -42,23 +42,24 @@ TextInput(value?:{placeholder?: string controller?: TextInputController})
 | maxLength                | number                                   | -                 | 设置文本的最大输入字符数。                            |
 | inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?:&nbsp;(value:&nbsp;string)<br/>} | -                 | 正则表达式，满足表达式的输入允许显示，不满足正则表达式的输入被忽略。仅支持单个字符匹配，不支持字符串匹配。例如：^(?=.\*\d)(?=.\*[a-z])(?=.\*[A-Z]).{8,10}$，8到10位的强密码不支持过滤。<br/>-&nbsp;value：设置正则表达式。<br/>-&nbsp;error：正则匹配失败时，返回被忽略的内容。 |
 
-- EnterKeyType枚举说明
-  | 名称                  | 描述        |
-  | ------------------- | --------- |
-  | EnterKeyType.Go     | 显示Go文本。   |
-  | EnterKeyType.Search | 显示为搜索样式。  |
-  | EnterKeyType.Send   | 显示为发送样式。  |
-  | EnterKeyType.Next   | 显示为下一个样式。 |
-  | EnterKeyType.Done   | 标准样式。     |
+## EnterKeyType枚举说明
+
+| 名称                  | 描述        |
+| ------------------- | --------- |
+| EnterKeyType.Go     | 显示Go文本。   |
+| EnterKeyType.Search | 显示为搜索样式。  |
+| EnterKeyType.Send   | 显示为发送样式。  |
+| EnterKeyType.Next   | 显示为下一个样式。 |
+| EnterKeyType.Done   | 标准样式。     |
 
-- InputType枚举说明
-  | 名称                 | 描述            |
-  | ------------------ | ------------- |
-  | InputType.Normal   | 基本输入模式。       |
-  | InputType.Password | 密码输入模式。       |
-  | InputType.Email    | e-mail地址输入模式。 |
-  | InputType.Number   | 纯数字输入模式。      |
+## InputType枚举说明
 
+| 名称                 | 描述            |
+| ------------------ | ------------- |
+| InputType.Normal   | 基本输入模式。       |
+| InputType.Password | 密码输入模式。       |
+| InputType.Email    | e-mail地址输入模式。 |
+| InputType.Number   | 纯数字输入模式。      |
 
 ## 事件
 
@@ -85,19 +86,20 @@ controller: TextInputController = new TextInputController()
 caretPosition(value:&nbsp;number): void
 
 设置光标移动到指定位置。
-- 参数
 
-  | 参数名   | 参数类型   | 必填   | 默认值  | 参数描述                                     |
-  | ----- | ------ | ---- | ---- | ---------------------------------------- |
-  | value | number | 是    | -    | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述                                     |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| value | number | 是    | -    | 设置输入光标的位置。<br/>value：从字符串开始到光标所在位置的字符长度。 |
 
 ## 示例
 
 
 ### 单行文本输入
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextInputExample1 {
@@ -130,7 +132,8 @@ struct TextInputExample1 {
 
 ### 设置光标
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextInputExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md

 # TextPicker
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 文本类滑动选择器组件。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -23,30 +23,31 @@ TextPicker(value: {range: string[], selected?: number})
 
 根据range指定的选择范围创建文本选择器。
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | range | string[] | 是 | - | 选择器的数据选择范围。 | 
-  | selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 | 
+**参数：**
 
+| 参数名      | 参数类型     | 必填   | 默认值   | 参数描述            |
+| -------- | -------- | ---- | ----- | --------------- |
+| range    | string[] | 是    | -     | 选择器的数据选择范围。     |
+| selected | number   | 否    | 第一个元素 | 选中项在数组中的index值。 |
 
 ## 属性
 
 | 名称                      | 参数类型   | 默认值  | 描述               |
-| -------- | -------- | -------- | -------- |
+| ----------------------- | ------ | ---- | ---------------- |
 | defaultPickerItemHeight | Length | -    | 默认Picker内容项元素高度。 |
 
 
 ## 事件
 
 | 名称                                       | 描述                                       |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后，触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的下标。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextPickerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-texttimer.md

 # TextTimer
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 文本计时器组件，支持自定义时间格式。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -17,28 +17,29 @@
 无
 
 
-## 接口说明
+## 接口
 
 TextTimer(options: { isCountDown?: boolean, count?: number, controller?: TextTimerController })
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | isCountDown | boolean | 否 | false | 是否倒计时。 | 
-  | count | number | 否 | 60000 | 倒计时时间（isCountDown为true时生效），单位为毫秒。<br/>-&nbsp;count&lt;=0时，使用默认值为倒计时初始值。<br/>-&nbsp;count&gt;0时，count值为倒计时初始值。 | 
-  | controller | [TextTimerController](#texttimercontroller) | 否 | null | TextTimer控制器。 | 
+**参数：**
+
+| 参数名         | 参数类型                                     | 必填   | 默认值   | 参数描述                                     |
+| ----------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
+| isCountDown | boolean                                  | 否    | false | 是否倒计时。                                   |
+| count       | number                                   | 否    | 60000 | 倒计时时间（isCountDown为true时生效），单位为毫秒。<br/>-&nbsp;count&lt;=0时，使用默认值为倒计时初始值。<br/>-&nbsp;count&gt;0时，count值为倒计时初始值。 |
+| controller  | [TextTimerController](#texttimercontroller) | 否    | null  | TextTimer控制器。                            |
 
 ## 属性
 
 | 名称     | 参数类型   | 默认值           | 描述                             |
-| -------- | -------- | -------- | -------- |
+| ------ | ------ | ------------- | ------------------------------ |
 | format | string | 'hh:mm:ss.ms' | 自定义格式，需至少包含一个hh、mm、ss、ms中的关键字。 |
 
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onTimer(callback:&nbsp;(utc:&nbsp;number,&nbsp;elapsedTime:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 时间文本发生变化时触发。<br/>utc：当前显示的时间，单位为毫秒。<br/>elapsedTime：计时器经过的时间，单位为毫秒。 |
 
 
@@ -74,7 +75,8 @@ reset()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextTimerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md

 # TimePicker
 
+选择时间的滑动选择器组件。
+
 > **说明：**
+>
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-选择时间的滑动选择器组件。
-
-
 ## 权限列表
 
 无
@@ -23,30 +23,30 @@ TimePicker(options?: TimePickerOptions)
 
 默认以00：00至23：59的时间区间创建滑动选择器。
 
-- options参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | selected | Date | 否 | 当前系统时间 | 设置选中项的时间。 |
+**参数：**
 
+| 参数名      | 参数类型 | 必填   | 默认值    | 参数描述      |
+| -------- | ---- | ---- | ------ | --------- |
+| selected | Date | 否    | 当前系统时间 | 设置选中项的时间。 |
 
 ## 属性
 
 | 名称              | 参数类型    | 默认值   | 描述                    |
-| -------- | -------- | -------- | -------- |
+| --------------- | ------- | ----- | --------------------- |
 | useMilitaryTime | boolean | false | 展示时间是否为24小时制，不支持动态修改。 |
 
 
 ## 事件
 
 | 名称                                       | 功能描述        |
-| -------- | -------- | 
+| ---------------------------------------- | ----------- |
 | onChange(callback: (value: TimePickerResult ) => void) | 选择时间时触发该事件。 |
 
-### TimePickerResult对象说明
-  | 名称 | 参数类型 | 描述 | 
-  | -------- | -------- | -------- |
-  | hour | number | 选中时间的时。 | 
-  | minute | number | 选中时间的分。 | 
+## TimePickerResult对象说明
+| 名称     | 参数类型   | 描述      |
+| ------ | ------ | ------- |
+| hour   | number | 选中时间的时。 |
+| minute | number | 选中时间的分。 |
 
 
 ## 示例
@@ -54,7 +54,8 @@ TimePicker(options?: TimePickerOptions)
 
 ### 时间选择器
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md

 # Toggle
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -18,25 +19,25 @@
 
 Toggle(options: { type: ToggleType, isOn?: boolean })
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | type | ToggleType | 是 | - | 开关类型。 |
-  | isOn | boolean | 否 | false | 开关是否打开，true：打开，false：关闭。 |
+**参数：**
 
+| 参数名  | 参数类型       | 必填   | 默认值   | 参数描述                     |
+| ---- | ---------- | ---- | ----- | ------------------------ |
+| type | ToggleType | 是    | -     | 开关类型。                    |
+| isOn | boolean    | 否    | false | 开关是否打开，true：打开，false：关闭。 |
 
-- ToggleType枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)的默认值为：<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
-  | Button | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。 |
-  | Switch | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)默认值为：<br>{<br/>&nbsp;top: 12 vp,<br/>&nbsp;right: 12 vp,<br/>&nbsp;bottom: 12 vp,<br/>&nbsp;left: 12 vp<br/> } |
+## ToggleType枚举说明
 
+| 名称       | 描述                                       |
+| -------- | ---------------------------------------- |
+| Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)的默认值为：<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
+| Button   | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。       |
+| Switch   | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。<br>>&nbsp;**说明：**<br/>>&nbsp;[通用属性padding](ts-universal-attributes-size.md)默认值为：<br>{<br/>&nbsp;top: 12 vp,<br/>&nbsp;right: 12 vp,<br/>&nbsp;bottom: 12 vp,<br/>&nbsp;left: 12 vp<br/> } |
 
 ## 属性
 
 | 名称               | 参数    | 默认值  | 参数描述                                     |
-| -------- | -------- | -------- | -------- |
+| ---------------- | ----- | ---- | ---------------------------------------- |
 | selectedColor    | Color | -    | 设置组件打开状态的背景颜色。                           |
 | switchPointColor | Color | -    | 设置Switch类型的圆形滑块颜色。<br/>>&nbsp;**说明：**<br/>>&nbsp;仅对type为ToggleType.Switch生效。 |
 
@@ -44,13 +45,14 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
 ## 事件
 
 | 名称                                       | 功能描述          |
-| -------- | -------- |
+| ---------------------------------------- | ------------- |
 | onChange(callback:&nbsp;(isOn:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) | 开关状态切换时触发该事件。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ToggleExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md

 # Web
 
->![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** 
->该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 提供具有网页显示能力的Web组件。
 
+> **说明：** 
+>
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 访问在线网页时需添加网络权限：ohos.permission.INTERNET
 
@@ -14,25 +15,25 @@
 
 ## 接口
 
--   Web\(options: { src: string, controller?: WebController }\)
+Web\(options: { src: string, controller?: WebController }\)
 
-    表1 options参数说明
-
-    | 参数名        | 参数类型                            | 必填   | 默认值  | 参数描述    |
-    | ---------- | ------------------------------- | ---- | ---- | ------- |
-    | src        | string                          | 是    | -    | 网页资源地址。 |
-    | controller | [WebController](#webcontroller) | 否    | -    | 控制器。    |
+表1 options参数说明
 
+| 参数名        | 参数类型                            | 必填   | 默认值  | 参数描述    |
+| ---------- | ------------------------------- | ---- | ---- | ------- |
+| src        | string                          | 是    | -    | 网页资源地址。 |
+| controller | [WebController](#webcontroller) | 否    | -    | 控制器。    |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif)**说明：**
+> **说明：**
 >
 > - 不支持转场动画；
 > - 不支持多实例；
 > - 仅支持本地音视频播放。
 
 ## 属性
+
 | 名称                 | 参数类型                                     | 默认值               | 描述                                       |
-| ----------------- | ---------------------------------------- | -------------- | ---------------------------------------- |
+| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
 | domStorageAccess   | boolean                                  | false             | 设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。 |
 | fileAccess         | boolean                                  | false             | 设置是否开启通过[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)访问应用中rawfile路径的文件， 默认启用。 |
 | fileFromUrlAccess  | boolean                                  | true              | 设置是否允许通过网页中的JavaScript脚本访问[$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md#资源引用)的内容，默认未启用。 |
@@ -41,14 +42,14 @@
 | javaScriptAccess   | boolean                                  | true              | 设置是否允许执行JavaScript脚本，默认允许执行。             |
 | mixedMode          | [MixedMode](#mixedmode枚举说明)              | MixedMode.None    | 设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。 |
 | onlineImageAccess  | boolean                                  | true              | 设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。 |
-| zoomAccess        | boolean                                  | true           | 设置是否支持手势进行缩放，默认允许执行缩放。|
-| overviewModeAccess | boolean                                  | true           | 设置是否使用概览模式加载网页，默认使用该方式。|
-| databaseAccess| boolean                                  | false           | 设置是否开启数据库存储API权限，默认不开启。|
-| cacheMode |  [CacheMode](#cachemode枚举说明) | CacheMode.Default| 设置缓存模式。|
+| zoomAccess         | boolean                                  | true              | 设置是否支持手势进行缩放，默认允许执行缩放。                   |
+| overviewModeAccess | boolean                                  | true              | 设置是否使用概览模式加载网页，默认使用该方式。                  |
+| databaseAccess     | boolean                                  | false             | 设置是否开启数据库存储API权限，默认不开启。                  |
+| cacheMode          | [CacheMode](#cachemode枚举说明)              | CacheMode.Default | 设置缓存模式。                                  |
 | textZoomAtio       | number                                   | 100               | 设置页面的文本缩放百分比，默认为100%。                    |
 | userAgent          | string                                   | -                 | 设置用户代理。                                  |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >
 >  通用属性仅支持[width](ts-universal-attributes-size.md#属性)、[height](ts-universal-attributes-size.md#属性)、[padding](ts-universal-attributes-size.md#属性)、[margin](ts-universal-attributes-size.md#属性)、[border](ts-universal-attributes-border.md#属性)。
 
@@ -57,7 +58,7 @@
 不支持通用事件。
 
 | 名称                                       | 功能描述                                     |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| ---------------------------------------- | ---------------------------------------- |
 | onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页触发alert()告警弹窗时触发回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（只有确认场景），并且根据用户的确认操作调用JsResult通知Web组件。<br />- url：当前显示弹窗所在网页的URL。<br />- message：弹窗中显示的信息。<br />- result：通知Web组件用户操作行为。</p> |
 | onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>刷新或关闭场景下，在即将离开当前页面时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。<br />- url：当前显示弹窗所在网页的URL。<br />- message：弹窗中显示的信息。<br />- result：通知Web组件用户操作行为。</p> |
 | onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult对象说明) }) => boolean) | <p>网页调用confirm()告警时触发此回调。<br />当回调返回false时，触发默认弹窗。当回调返回true时，系统应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件。<br />- url：当前显示弹窗所在网页的URL。<br />- message：弹窗中显示的信息。<br />- result：通知Web组件用户操作行为。</p> |
@@ -77,7 +78,7 @@
 ## ConsoleMessage对象说明
 
 | 接口名称                                     | 功能描述                   |
-| ------------------------------- | ---------------------- |
+| ---------------------------------------- | ---------------------- |
 | getLineNumber(): number                  | 获取ConsoleMessage的行数。   |
 | getMessage(): string                     | 获取ConsoleMessage的日志信息。 |
 | getMessageLevel(): [MessageLevel](#messagelevel枚举说明) | 获取ConsoleMessage的信息级别。 |
@@ -145,7 +146,7 @@ Web组件返回的请求/响应头对象。
 onRenderExited接口返回的渲染进程退出的具体原因。
 
 | 名称                           | 描述                |
-| ---------------------------- | ------------------------------ |
+| ---------------------------- | ----------------- |
 | PROCESS_ABNORMAL_TERMINATION | 渲染进程异常退出。         |
 | PROCESS_WAS_KILLED           | 收到SIGKILL，或被手动终止。 |
 | PROCESS_CRASHED              | 渲染进程崩溃退出，如段错误。    |
@@ -162,7 +163,7 @@ onRenderExited接口返回的渲染进程退出的具体原因。
 
 ## CacheMode枚举说明
 | 名称      | 描述                                   |
-| ---------- | ---------------------------------- |
+| ------- | ------------------------------------ |
 | Default | 使用未过期的cache加载资源，如果cache中无该资源则从网络中获取。 |
 | None    | 加载资源使用cache，如果cache中无该资源则从网络中获取。     |
 | Online  | 加载资源不使用cache，全部从网络中获取。               |
@@ -172,12 +173,12 @@ onRenderExited接口返回的渲染进程退出的具体原因。
 通知Web组件的文件选择结果。
 
 | 接口名称                                     | 功能描述                                   |
-| ---------------------------------------------- | ------------------------------------------------------------ |
+| ---------------------------------------- | -------------------------------------- |
 | handleFileList(fileList: Array\<string>): void | 通知Web组件进行文件选择操作。fileList: 需要进行操作的文件列表。 |
 
 ## FileSelectorParam对象说明
 | 接口名称                          | 功能描述         |
-| ---------------------------------------- | ------------------ |
+| ----------------------------- | ------------ |
 | title(): string               | 获取文件选择器标题。   |
 | mode(): FileSelectorMode      | 获取文件选择器的模式。  |
 | accpetType(): Array\<string\> | 获取文件过滤类型。    |
@@ -185,7 +186,7 @@ onRenderExited接口返回的渲染进程退出的具体原因。
 
 ## FileSelectorMode枚举说明
 | 名称                      | 描述         |
-| ---------------------------- | ------------------------------ |
+| ----------------------- | ---------- |
 | FILE_OPEN_MODE          | 打开上传单个文件。  |
 | FILE_OPEN_MULTIPLE_MODE | 打开上传多个文件。  |
 | FILE_OPEN_FOLDER_MODE   | 打开上传文件夹模式。 |
@@ -374,7 +375,7 @@ getCookieManager(): WebCookie
 获取web组件cookie管理对象。
 - 返回值
   | 参数类型      | 说明                                       |
-  | ------- | --------- |
+  | --------- | ---------------------------------------- |
   | WebCookie | web组件cookie管理对象，参考[WebCookie](#webcookie)定义。 |
 ## WebCookie
 通过WebCookie可以控制Web组件中的cookie的各种行为，其中每个应用中的所有web组件共享一个WebCookie。通过controller方法中的getCookieManager方法可以获取WebCookie对象，进行后续的cookie管理操作。
@@ -386,12 +387,12 @@ setCookie(url: string, value: string): boolean
 - 参数说明
 
   | 参数名   | 参数类型   | 必填   | 默认值  | 参数描述              |
-  | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
+  | ----- | ------ | ---- | ---- | ----------------- |
   | url   | string | 是    | -    | 要设置的cookie所属的url。 |
   | value | string | 是    | -    | cookie的值。         |
 - 返回值 
   | 参数类型    | 说明            |
-  | ------- | --------- |
+  | ------- | ------------- |
   | boolean | 设置cookie是否成功。 |
 
 ### saveCookieSync
@@ -400,7 +401,7 @@ saveCookieSync(): boolean
 将当前存在内存中的cookie同步到磁盘中，该方法为同步方法。
 - 返回值
   | 参数类型    | 说明                   |
-  | ------- | --------- |
+  | ------- | -------------------- |
   | boolean | 同步内存cookie到磁盘操作是否成功。 |
 ## 示例
 

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md

 # XComponent
 
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-  > 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
  可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。
 
+  >  **说明：**
+  >
+  >  该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 
   无
@@ -17,20 +18,19 @@
 
  XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
 
-  - 参数
-
-    | 名称        | 参数类型                                      | 必填 | 描述                                                         |
-    | ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
-    | id          | string                                        | 是   | 组件的唯一标识，支持最大的字符串长度128。                    |
-    | type        | string                                        | 是   | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。|
-    | libraryname | string                                        | 否   | 应用Native层编译输出动态库名称。                             |
-    | controller  | [XComponentController](#XComponentController) | 否   | 给组件绑定一个控制器，通过控制器调用组件方法。               |
+**参数：**
 
+| 名称          | 参数类型                                     | 必填   | 描述                                       |
+| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| id          | string                                   | 是    | 组件的唯一标识，支持最大的字符串长度128。                   |
+| type        | string                                   | 是    | 用于指定XComponent组件类型，可选值为：<br/>-surface：组件内容单独送显，直接合成到屏幕。<br/>-component：组件内容与其他组件合成后统一送显。 |
+| libraryname | string                                   | 否    | 应用Native层编译输出动态库名称。                      |
+| controller  | [XComponentController](#XComponentController) | 否    | 给组件绑定一个控制器，通过控制器调用组件方法。                  |
 
 ## 事件
 
 | 名称                               | 功能描述         |
-| ------------------------------- | ------------------------ |
+| -------------------------------- | ------------ |
 | onLoad(context?: object) => void | 插件加载完成时回调事件。 |
 | onDestroy() => void              | 插件卸载完成时回调事件。 |
 
@@ -50,11 +50,11 @@ getXComponentSurfaceId(): string
 
 获取XComponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。
 
-  - 返回值
+**返回值：**
 
-    | 类型   | 描述                        |
-    | ------ | --------------------------- |
-    | string | XComponent持有Surface的ID。 |
+| 类型     | 描述                      |
+| ------ | ----------------------- |
+| string | XComponent持有Surface的ID。 |
 
 ### setXComponentSurfaceSize
 
@@ -62,12 +62,12 @@ setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}):
 
 设置XComponent持有Surface的宽度和高度。
 
-- 参数
+**参数：**
 
-  | 参数名        | 参数类型 | 必填 | 默认值 | 描述                          |
-  | ------------- | -------- | ---- | ------ | ----------------------------- |
-  | surfaceWidth  | number   | 是   | -      | XComponent持有Surface的宽度。 |
-  | surfaceHeight | number   | 是   | -      | XComponent持有Surface的高度。 |
+| 参数名           | 参数类型   | 必填   | 默认值  | 描述                      |
+| ------------- | ------ | ---- | ---- | ----------------------- |
+| surfaceWidth  | number | 是    | -    | XComponent持有Surface的宽度。 |
+| surfaceHeight | number | 是    | -    | XComponent持有Surface的高度。 |
 
 ### getXComponentContext
 
@@ -75,18 +75,18 @@ getXComponentContext(): Object
 
 获取XComponent实例对象的context。
 
-- 返回值
+**返回值：**
 
-  | 类型   | 描述                                                         |
-  | ------ | ------------------------------------------------------------ |
-  | Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
+| 类型     | 描述                                       |
+| ------ | ---------------------------------------- |
+| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义。 |
 
 ## 示例
 
 提供surface类型XComponent，支持相机预览等能力。  
 示例效果请以真机运行为准，当前IDE预览器不支持。
 
-```
+```ts
 import camera from '@ohos.multimedia.camera';
 @Entry
 @Component

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md

 # LongPressGesture
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,31 +14,32 @@
 
 LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
 
-- 参数
-  | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | 否 | 1 | 触发长按的最少手指数，最小为1指， 最大取值为10指。 | 
-  | repeat | boolean | 否 | false | 是否连续触发事件回调。 | 
-  | duration | number | 否 | 500 | 最小触发长按的时间，单位为毫秒（ms）。 | 
+**参数：**
 
+| 参数名称     | 参数类型    | 必填   | 默认值   | 参数描述                             |
+| -------- | ------- | ---- | ----- | -------------------------------- |
+| fingers  | number  | 否    | 1     | 触发长按的最少手指数，最小为1指， 最大取值为10指。 |
+| repeat   | boolean | 否    | false | 是否连续触发事件回调。                      |
+| duration | number  | 否    | 500   | 最小触发长按的时间，单位为毫秒（ms）。             |
 
 ## 事件
 
 | 名称                                       | 功能描述                           |
-| -------- | -------- | 
+| ---------------------------------------- | ------------------------------ |
 | onAction((event?: GestureEvent) => void) | LongPress手势识别成功回调。             |
 | onActionEnd((event?: GestureEvent) => void) | LongPress手势识别成功，手指抬起后触发回调。     |
 | onActionCancel(event: () => void) | LongPress手势识别成功，接收到触摸取消事件触发回调。 |
 
-- GestureEvent对象中与LongPress手势相关的属性
-  | 属性名称 | 属性类型 | 描述 | 
-  | -------- | -------- | -------- |
-  | repeat | boolean | 事件是否为重复触发事件。 | 
+## GestureEvent对象中与LongPress手势相关的属性
 
+| 属性名称   | 属性类型    | 描述           |
+| ------ | ------- | ------------ |
+| repeat | boolean | 事件是否为重复触发事件。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LongPressGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md

 # PanGesture
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,62 +14,65 @@
 
 PanGesture(options?: { fingers?: number, direction?: PanDirection, distance?: number } | [PanGestureOptions](#pangestureoptions))
 
-- 参数
-  | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | 否 | 1 | 触发滑动的最少手指数，最小为1指， 最大取值为10指。 |
-  | direction | PanDirection | 否 | All | 设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（\|）运算。 |
-  | distance | number | 否 | 5.0 | 最小滑动识别距离，单位为vp。 |
+**参数：**
 
-- PanDirection枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | All | 所有方向可滑动。 | 
-  | Horizontal | 水平方向可滑动。 | 
-  | Vertical | 竖直方向可滑动。 | 
-  | Left | 向左滑动。 | 
-  | Right | 向右滑动。 | 
-  | Up | 向上滑动。 | 
-  | Down | 向下滑动。 | 
-  | None | 任何方向都不可滑动。 | 
+| 参数名称      | 参数类型         | 必填   | 默认值  | 参数描述                               |
+| --------- | ------------ | ---- | ---- | ---------------------------------- |
+| fingers   | number       | 否    | 1    | 触发滑动的最少手指数，最小为1指， 最大取值为10指。   |
+| direction | PanDirection | 否    | All  | 设置滑动方向，此枚举值支持逻辑与(&)和逻辑或（\|）运算。 |
+| distance  | number       | 否    | 5.0  | 最小滑动识别距离，单位为vp。                    |
 
+## PanDirection枚举说明
 
-### PanGestureOptions
+| 名称         | 描述         |
+| ---------- | ---------- |
+| All        | 所有方向可滑动。   |
+| Horizontal | 水平方向可滑动。   |
+| Vertical   | 竖直方向可滑动。   |
+| Left       | 向左滑动。      |
+| Right      | 向右滑动。      |
+| Up         | 向上滑动。      |
+| Down       | 向下滑动。      |
+| None       | 任何方向都不可滑动。 |
+
+## PanGestureOptions
 
 通过PanGestureOptions对象接口可以动态修改滑动手势识别器的属性，从而避免通过状态变量修改属性（状态变量修改会导致UI刷新）。
 
 PanGestureOptions(options?: { fingers?: number, direction?: PanDirection, distance?: number })
 
-- 参数
-  同PanGesture参数说明。
+**参数：**
+
+同PanGesture参数说明。
 
-- 接口
-  | 名称 | 功能描述 | 
-  | -------- | -------- |
-  | setDirection(value: PanDirection) | 设置direction属性。 | 
-  | setDistance(value: number) | 设置distance属性。 | 
-  | setFingers(value: number) | 设置fingers属性。 | 
+**接口：**
 
+| 名称                                     | 功能描述           |
+| -------------------------------------- | -------------- |
+| setDirection(value: PanDirection) | 设置direction属性。 |
+| setDistance(value: number)        | 设置distance属性。  |
+| setFingers(value: number)         | 设置fingers属性。   |
 
 ## 事件
 
 | 名称                                       | 功能描述                     |
-| -------- | -------- | 
+| ---------------------------------------- | ------------------------ |
 | onActionStart(callback: (event?: GestureEvent) => void) | Pan手势识别成功回调。             |
 | onActionUpdate(callback: (event?: GestureEvent) => void) | Pan手势移动过程中回调。            |
 | onActionEnd(callback: (event?: GestureEvent) => void) | Pan手势识别成功，手指抬起后触发回调。     |
 | onActionCancel(callback: () => void) | Pan手势识别成功，接收到触摸取消事件触发回调。 |
 
-- GestureEvent对象中与Pan手势相关的属性
-  | 属性名称 | 属性类型 | 描述 | 
-  | -------- | -------- | -------- |
-  | offsetX | number | 手势事件偏移量，单位为vp。 | 
-  | offsetY | number | 手势事件偏移量，单位为vp。 | 
+## GestureEvent对象中与Pan手势相关的属性
 
+| 属性名称    | 属性类型   | 描述             |
+| ------- | ------ | -------------- |
+| offsetX | number | 手势事件偏移量，单位为vp。 |
+| offsetY | number | 手势事件偏移量，单位为vp。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PanGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md

 # PinchGesture
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,33 +14,34 @@
 
 PinchGesture(options?: { fingers?: number, distance?: number })
 
-- 参数
-  | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | 否 | 2 | 触发捏合的最少手指数, 最小为2指，最大为5指。 |
-  | distance | number | 否 | 3.0 | 最小识别距离，单位为vp。 |
+**参数：**
 
+| 参数名称     | 参数类型   | 必填   | 默认值  | 参数描述                          |
+| -------- | ------ | ---- | ---- | ----------------------------- |
+| fingers  | number | 否    | 2    | 触发捏合的最少手指数, 最小为2指，最大为5指。 |
+| distance | number | 否    | 3.0  | 最小识别距离，单位为vp。                 |
 
 ## 事件
 
 | 名称                                       | 功能描述                       |
-| -------- | -------- |
+| ---------------------------------------- | -------------------------- |
 | onActionStart((event?: GestureEvent) => void) | Pinch手势识别成功回调。             |
 | onActionUpdate((event?: GestureEvent) => void) | Pinch手势移动过程中回调。            |
 | onActionEnd((event?: GestureEvent) => void) | Pinch手势识别成功，手指抬起后触发回调。     |
 | onActionCancel(event: () => void) | Pinch手势识别成功，接收到触摸取消事件触发回调。 |
 
-- GestureEvent对象中与Pinch手势相关的属性
-  | 属性名称 | 属性类型 | 描述 |
-  | -------- | -------- | -------- |
-  | scale | number | 缩放比例，用于PinchGesture手势触发场景。 |
-  | pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。 |
-  | pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。 |
+## GestureEvent对象中与Pinch手势相关的属性
 
+| 属性名称         | 属性类型   | 描述                         |
+| ------------ | ------ | -------------------------- |
+| scale        | number | 缩放比例，用于PinchGesture手势触发场景。 |
+| pinchCenterX | number | 捏合手势中心点X轴坐标，单位为px。         |
+| pinchCenterY | number | 捏合手势中心点Y轴坐标，单位为px。         |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PinchGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md

 # RotationGesture
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,31 +14,32 @@
 
 RotationGesture(options?: { fingers?: number, angle?: number })
 
-- 参数
-  | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | 否 | 2 | 触发旋转的最少手指数, 最小为2指，最大为5指。 | 
-  | angle | number | 否 | 1.0 | 触发旋转手势的最小改变度数，单位为度数。 | 
+**参数：**
 
+| 参数名称    | 参数类型   | 必填   | 默认值  | 参数描述                          |
+| ------- | ------ | ---- | ---- | ----------------------------- |
+| fingers | number | 否    | 2    | 触发旋转的最少手指数, 最小为2指，最大为5指。 |
+| angle   | number | 否    | 1.0  | 触发旋转手势的最小改变度数，单位为度数。          |
 
 ## 事件
 
 | 名称                                       | 功能描述                          |
-| -------- | -------- |
+| ---------------------------------------- | ----------------------------- |
 | onActionStart((event?: GestureEvent) => void) | Rotation手势识别成功回调。             |
 | onActionUpdate((event?: GestureEvent) => void) | Rotation手势移动过程中回调。            |
 | onActionEnd((event?: GestureEvent) => void) | Rotation手势识别成功，手指抬起后触发回调。     |
 | onActionCancel(event: () => void) | Rotation手势识别成功，接收到触摸取消事件触发回调。 |
 
-- GestureEvent对象中与Rotation手势相关的属性
-  | 属性名称 | 属性类型 | 描述 | 
-  | -------- | -------- | -------- |
-  | angle | number | 旋转角度。 | 
+## GestureEvent对象中与Rotation手势相关的属性
 
+| 属性名称  | 属性类型   | 描述    |
+| ----- | ------ | ----- |
+| angle | number | 旋转角度。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RotationGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md

 # SwipeGesture
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,38 +14,40 @@
 
 SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: number })
 
-- 参数
-  | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
-  | direction | SwipeDirection | 否 | SwipeDirection.All | 滑动方向。 |
-  | speed | number | 否 | 100 | 识别滑动的最小速度（100VP/秒）。 |
+**参数：**
 
-- SwipeDirection枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | All | 所有方向。 | 
-  | Horizontal | 水平方向。 | 
-  | Vertical | 竖直方向。 | 
+| 参数名称      | 参数类型           | 必填   | 默认值                | 参数描述                          |
+| --------- | -------------- | ---- | ------------------ | ----------------------------- |
+| fingers   | number         | 否    | 1                  | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
+| direction | SwipeDirection | 否    | SwipeDirection.All | 滑动方向。                         |
+| speed     | number         | 否    | 100                | 识别滑动的最小速度（100VP/秒）。           |
 
+## SwipeDirection枚举说明
+
+| 名称         | 描述    |
+| ---------- | ----- |
+| All        | 所有方向。 |
+| Horizontal | 水平方向。 |
+| Vertical   | 竖直方向。 |
 
 ## 事件
 
 | 名称                                       | 功能描述        |
-| -------- | -------- |
+| ---------------------------------------- | ----------- |
 | onAction(callback:(event?: GestureEvent) => void) | 滑动手势识别成功回调。 |
 
+## GestureEvent对象中与Swipe手势相关的属性
 
-- GestureEvent对象中与Swipe手势相关的属性
-  | 参数名 | 类型 | 说明 | 
-  | -------- | -------- | -------- |
-  | angle | number | 滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 | 
-  | speed | number | 滑动手势的速度，是所有手指滑动的平均速度，单位为VP/秒。 | 
+| 参数名   | 类型     | 说明                                       |
+| ----- | ------ | ---------------------------------------- |
+| angle | number | 滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 |
+| speed | number | 滑动手势的速度，是所有手指滑动的平均速度，单位为VP/秒。            |
 
 ![zh-cn_image_0000001231374559](figures/zh-cn_image_0000001231374661.png)
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SwipeGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md

 # TapGesture
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,23 +14,24 @@
 
 TapGesture(options?: { count?: number, fingers?: number })
 
-- 参数
-  | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | count | number | 否 | 1 | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 | 
-  | fingers | number | 否 | 1 | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 | 
+**参数：**
 
+| 参数名称    | 参数类型   | 必填   | 默认值  | 参数描述                                     |
+| ------- | ------ | ---- | ---- | ---------------------------------------- |
+| count   | number | 否    | 1    | 识别的连续点击次数。如果设置小于1，会被转化为默认值。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如配置多击，上一次抬起和下一次按下的超时时间为300毫秒（ms）。 |
+| fingers | number | 否    | 1    | 触发点击的最少手指数，最小为1指，&nbsp;最大为10指。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;1.&nbsp;当配置多指时，第一根手指按下后300毫秒（ms）内未有足够的手指数按下，手势识别失败。<br/>>&nbsp;<br/>>&nbsp;2.&nbsp;实际点击手指数超过配置值，手势识别失败。 |
 
 ## 事件
 
 | 名称                                       | 功能描述         |
-| -------- | -------- | 
+| ---------------------------------------- | ------------ |
 | onAction((event?:&nbsp;[GestureEvent](ts-gesture-settings.md))&nbsp;=&gt;&nbsp;void) | Tap手势识别成功回调。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TapGestureExample {

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

 # CanvasRenderingContext2D对象
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -11,10 +12,11 @@
 
 CanvasRenderingContext2D(setting: RenderingContextSetting)
 
-- 参数
-  | 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-  | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-  | setting | [RenderingContextSettings](#renderingcontextsettings) | 是    | -    | 见[RenderingContextSettings](#renderingcontextsettings)。 |
+**参数：** 
+
+| 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
+| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| setting | [RenderingContextSettings](#renderingcontextsettings) | 是    | -    | 见[RenderingContextSettings](#renderingcontextsettings)。 |
 
 
 ### RenderingContextSettings
@@ -23,10 +25,10 @@ RenderingContextSettings(antialias?: bool)
 
 用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿。
 
-- 参数
-  | 参数名       | 参数类型 | 必填   | 默认值   | 参数描述             |
-  | --------- | ---- | ---- | ----- | ---------------- |
-  | antialias | bool | 否    | false | 表明canvas是否开启抗锯齿。 |
+**参数：** 
+| 参数名       | 参数类型 | 必填   | 默认值   | 参数描述             |
+| --------- | ---- | ---- | ----- | ---------------- |
+| antialias | bool | 否    | false | 表明canvas是否开启抗锯齿。 |
 
 
 ## 属性
@@ -40,7 +42,7 @@ RenderingContextSettings(antialias?: bool)
 | [lineJoin](#linejoin)                    | string                                   | 'miter'                                  | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
 | [miterLimit](#miterlimit)                | number                                   | 10                                       | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。             |
 | [font](#font)                            | string                                   | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',talic。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
-| [textAlign](#textalign)                  | string                                   | 'left'                                   | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
+| [textAlign](#textalign)                  | string                                   | 'left'                                   | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下'start'和'left'一致，rtl布局模式下'start'和'right'一致·。 |
 | [textBaseline](#textbaseline)            | string                                   | 'alphabetic'                             | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic基线不需要考虑下行字母。 |
 | [globalAlpha](#globalalpha)              | number                                   | -                                        | 设置透明度，0.0为完全透明，1.0为完全不透明。                |
 | [lineDashOffset](#linedashoffset)        | number                                   | 0.0                                      | 设置画布的虚线偏移量，精度为float。                     |
@@ -52,13 +54,15 @@ RenderingContextSettings(antialias?: bool)
 | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | true                                     | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。  |
 | imageSmoothingQuality                    | string                                   | 'low'                                    | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
 
 
 ### fillStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FillStyleExample {
@@ -87,7 +91,8 @@ struct FillStyleExample {
 
 ### lineWidth
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineWidthExample {
@@ -116,7 +121,8 @@ struct LineWidthExample {
 
 ### strokeStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StrokeStyleExample {
@@ -147,7 +153,8 @@ struct StrokeStyleExample {
 
 ### lineCap
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineCapExample {
@@ -180,7 +187,8 @@ struct LineCapExample {
 
 ### lineJoin
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineJoinExample {
@@ -214,7 +222,8 @@ struct LineJoinExample {
 
 ### miterLimit
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MiterLimit {
@@ -248,7 +257,8 @@ struct MiterLimit {
 
 ### font
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct Fonts {
@@ -277,7 +287,8 @@ struct Fonts {
 
 ### textAlign
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CanvasExample {
@@ -321,7 +332,8 @@ struct CanvasExample {
 
 ### textBaseline
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextBaseline {
@@ -365,7 +377,8 @@ struct TextBaseline {
 
 ### globalAlpha
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalAlpha {
@@ -397,7 +410,8 @@ struct GlobalAlpha {
 
 ### lineDashOffset
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineDashOffset {
@@ -441,7 +455,8 @@ struct LineDashOffset {
 | copy             | 显示新绘制内容而忽略现有绘制内容。        |
 | xor              | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalCompositeOperation {
@@ -478,7 +493,8 @@ struct GlobalCompositeOperation {
 
 ### shadowBlur
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowBlur {
@@ -509,7 +525,8 @@ struct ShadowBlur {
 
 ### shadowColor
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowColor {
@@ -540,7 +557,8 @@ struct ShadowColor {
 
 ### shadowOffsetX
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetX {
@@ -572,7 +590,8 @@ struct ShadowOffsetX {
 
 ### shadowOffsetY
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetY {
@@ -603,7 +622,8 @@ struct ShadowOffsetY {
 
 ### imageSmoothingEnabled
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageSmoothingEnabled {
@@ -640,15 +660,15 @@ fillRect(x: number, y: number, w: number, h: number): void
 
 填充一个矩形。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 说明            |
-  | ------ | ------ | ---- | ---- | ------------- |
-  | x      | number | 是    | 0    | 指定矩形左上角点的x坐标。 |
-  | y      | number | 是    | 0    | 指定矩形左上角点的y坐标。 |
-  | width  | number | 是    | 0    | 指定矩形的宽度。      |
-  | height | number | 是    | 0    | 指定矩形的高度。      |
+**参数：** 
+| 参数     | 类型     | 必填   | 默认值  | 说明            |
+| ------ | ------ | ---- | ---- | ------------- |
+| x      | number | 是    | 0    | 指定矩形左上角点的x坐标。 |
+| y      | number | 是    | 0    | 指定矩形左上角点的y坐标。 |
+| width  | number | 是    | 0    | 指定矩形的宽度。      |
+| height | number | 是    | 0    | 指定矩形的高度。      |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -681,15 +701,15 @@ strokeRect(x: number, y: number, w: number, h: number): void
 
 绘制具有边框的矩形，矩形内部不填充。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 说明           |
-  | ------ | ------ | ---- | ---- | ------------ |
-  | x      | number | 是    | 0    | 指定矩形的左上角x坐标。 |
-  | y      | number | 是    | 0    | 指定矩形的左上角y坐标。 |
-  | width  | number | 是    | 0    | 指定矩形的宽度。     |
-  | height | number | 是    | 0    | 指定矩形的高度。     |
+**参数：** 
+| 参数     | 类型     | 必填   | 默认值  | 说明           |
+| ------ | ------ | ---- | ---- | ------------ |
+| x      | number | 是    | 0    | 指定矩形的左上角x坐标。 |
+| y      | number | 是    | 0    | 指定矩形的左上角y坐标。 |
+| width  | number | 是    | 0    | 指定矩形的宽度。     |
+| height | number | 是    | 0    | 指定矩形的高度。     |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -721,15 +741,15 @@ clearRect(x: number, y: number, w: number, h: number): void
 
 删除指定区域内的绘制内容。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 描述            |
-  | ------ | ------ | ---- | ---- | ------------- |
-  | x      | number | 是    | 0    | 指定矩形上的左上角x坐标。 |
-  | y      | number | 是    | 0    | 指定矩形上的左上角y坐标。 |
-  | width  | number | 是    | 0    | 指定矩形的宽度。      |
-  | height | number | 是    | 0    | 指定矩形的高度。      |
+**参数：** 
+| 参数     | 类型     | 必填   | 默认值  | 描述            |
+| ------ | ------ | ---- | ---- | ------------- |
+| x      | number | 是    | 0    | 指定矩形上的左上角x坐标。 |
+| y      | number | 是    | 0    | 指定矩形上的左上角y坐标。 |
+| width  | number | 是    | 0    | 指定矩形的宽度。      |
+| height | number | 是    | 0    | 指定矩形的高度。      |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -763,14 +783,14 @@ fillText(text: string, x: number, y: number): void
 
 绘制填充类文本。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 说明              |
-  | ---- | ------ | ---- | ---- | --------------- |
-  | text | string | 是    | “”   | 需要绘制的文本内容。      |
-  | x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
-  | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 说明              |
+| ---- | ------ | ---- | ---- | --------------- |
+| text | string | 是    | “”   | 需要绘制的文本内容。      |
+| x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
+| y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -803,14 +823,14 @@ strokeText(text: string, x: number, y: number): void
 
 绘制描边类文本。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述              |
-  | ---- | ------ | ---- | ---- | --------------- |
-  | text | string | 是    | “”   | 需要绘制的文本内容。      |
-  | x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
-  | y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述              |
+| ---- | ------ | ---- | ---- | --------------- |
+| text | string | 是    | “”   | 需要绘制的文本内容。      |
+| x    | number | 是    | 0    | 需要绘制的文本的左下角x坐标。 |
+| y    | number | 是    | 0    | 需要绘制的文本的左下角y坐标。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -843,10 +863,10 @@ measureText(text: string): TextMetrics
 
 该方法返回一个文本测算的对象，通过该对象可以获取指定文本的宽度值。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 说明         |
-  | ---- | ------ | ---- | ---- | ---------- |
-  | text | string | 是    | ""   | 需要进行测量的文本。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 说明         |
+| ---- | ------ | ---- | ---- | ---------- |
+| text | string | 是    | ""   | 需要进行测量的文本。 |
 
 - 返回值
   | 类型          | 说明      |
@@ -858,7 +878,7 @@ measureText(text: string): TextMetrics
   | ----- | ------ | ------- |
   | width | number | 字符串的宽度。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -892,12 +912,12 @@ stroke(path?: Path2D): void
 
 进行边框绘制操作。
 
-- 参数
-  | 参数   | 类型                                       | 必填   | 默认值  | 描述           |
-  | ---- | ---------------------------------------- | ---- | ---- | ------------ |
-  | path | [Path2D](ts-components-canvas-path2d.md) | 否    | null | 需要绘制的Path2D。 |
+**参数：** 
+| 参数   | 类型                                       | 必填   | 默认值  | 描述           |
+| ---- | ---------------------------------------- | ---- | ---- | ------------ |
+| path | [Path2D](ts-components-canvas-path2d.md) | 否    | null | 需要绘制的Path2D。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -933,7 +953,7 @@ beginPath(): void
 
 创建一个新的绘制路径。
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -971,13 +991,13 @@ moveTo(x: number, y: number): void
 
 路径从当前点移动到指定点。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 说明        |
-  | ---- | ------ | ---- | ---- | --------- |
-  | x    | number | 是    | 0    | 指定位置的x坐标。 |
-  | y    | number | 是    | 0    | 指定位置的y坐标。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 说明        |
+| ---- | ------ | ---- | ---- | --------- |
+| x    | number | 是    | 0    | 指定位置的x坐标。 |
+| y    | number | 是    | 0    | 指定位置的y坐标。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1013,13 +1033,13 @@ lineTo(x: number, y: number): void
 
 从当前点到指定点进行路径连接。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述        |
-  | ---- | ------ | ---- | ---- | --------- |
-  | x    | number | 是    | 0    | 指定位置的x坐标。 |
-  | y    | number | 是    | 0    | 指定位置的y坐标。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述        |
+| ---- | ------ | ---- | ---- | --------- |
+| x    | number | 是    | 0    | 指定位置的x坐标。 |
+| y    | number | 是    | 0    | 指定位置的y坐标。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1055,7 +1075,7 @@ closePath(): void
 
 结束当前路径形成一个封闭路径。
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1093,13 +1113,13 @@ createPattern(image: ImageBitmap, repetition: string): void
 
 通过指定图像和重复方式创建图片填充的模板。
 
-- 参数
-  | 参数         | 类型                                       | 必填   | 默认值  | 描述                                       |
-  | ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-  | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是    | null | 图源对象，具体参考ImageBitmap对象。                  |
-  | repetition | string                                   | 是    | “”   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
+**参数：** 
+| 参数         | 类型                                       | 必填   | 默认值  | 描述                                       |
+| ---------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是    | null | 图源对象，具体参考ImageBitmap对象。                  |
+| repetition | string                                   | 是    | “”   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1135,17 +1155,17 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 创建三次贝赛尔曲线的路径。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述             |
-  | ---- | ------ | ---- | ---- | -------------- |
-  | cp1x | number | 是    | 0    | 第一个贝塞尔参数的x坐标值。 |
-  | cp1y | number | 是    | 0    | 第一个贝塞尔参数的y坐标值。 |
-  | cp2x | number | 是    | 0    | 第二个贝塞尔参数的x坐标值。 |
-  | cp2y | number | 是    | 0    | 第二个贝塞尔参数的y坐标值。 |
-  | x    | number | 是    | 0    | 路径结束时的x坐标值。    |
-  | y    | number | 是    | 0    | 路径结束时的y坐标值。    |
-
-- 示例
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述             |
+| ---- | ------ | ---- | ---- | -------------- |
+| cp1x | number | 是    | 0    | 第一个贝塞尔参数的x坐标值。 |
+| cp1y | number | 是    | 0    | 第一个贝塞尔参数的y坐标值。 |
+| cp2x | number | 是    | 0    | 第二个贝塞尔参数的x坐标值。 |
+| cp2y | number | 是    | 0    | 第二个贝塞尔参数的y坐标值。 |
+| x    | number | 是    | 0    | 路径结束时的x坐标值。    |
+| y    | number | 是    | 0    | 路径结束时的y坐标值。    |
+
+**示例：** 
   ```
   @Entry
   @Component
@@ -1181,15 +1201,15 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
 
 创建二次贝赛尔曲线的路径。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述          |
-  | ---- | ------ | ---- | ---- | ----------- |
-  | cpx  | number | 是    | 0    | 贝塞尔参数的x坐标值。 |
-  | cpy  | number | 是    | 0    | 贝塞尔参数的y坐标值。 |
-  | x    | number | 是    | 0    | 路径结束时的x坐标值。 |
-  | y    | number | 是    | 0    | 路径结束时的y坐标值。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述          |
+| ---- | ------ | ---- | ---- | ----------- |
+| cpx  | number | 是    | 0    | 贝塞尔参数的x坐标值。 |
+| cpy  | number | 是    | 0    | 贝塞尔参数的y坐标值。 |
+| x    | number | 是    | 0    | 路径结束时的x坐标值。 |
+| y    | number | 是    | 0    | 路径结束时的y坐标值。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1224,17 +1244,17 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
 
 绘制弧线路径。
 
-- 参数
-  | 参数            | 类型      | 必填   | 默认值   | 描述         |
-  | ------------- | ------- | ---- | ----- | ---------- |
-  | x             | number  | 是    | 0     | 弧线圆心的x坐标值。 |
-  | y             | number  | 是    | 0     | 弧线圆心的y坐标值。 |
-  | radius        | number  | 是    | 0     | 弧线的圆半径。    |
-  | startAngle    | number  | 是    | 0     | 弧线的起始弧度。   |
-  | endAngle      | number  | 是    | 0     | 弧线的终止弧度。   |
-  | anticlockwise | boolean | 否    | false | 是否逆时针绘制圆弧。 |
-
-- 示例
+**参数：** 
+| 参数            | 类型      | 必填   | 默认值   | 描述         |
+| ------------- | ------- | ---- | ----- | ---------- |
+| x             | number  | 是    | 0     | 弧线圆心的x坐标值。 |
+| y             | number  | 是    | 0     | 弧线圆心的y坐标值。 |
+| radius        | number  | 是    | 0     | 弧线的圆半径。    |
+| startAngle    | number  | 是    | 0     | 弧线的起始弧度。   |
+| endAngle      | number  | 是    | 0     | 弧线的终止弧度。   |
+| anticlockwise | boolean | 否    | false | 是否逆时针绘制圆弧。 |
+
+**示例：** 
   ```
   @Entry
   @Component
@@ -1269,16 +1289,16 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 依据圆弧经过的点和圆弧半径创建圆弧路径。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 描述              |
-  | ------ | ------ | ---- | ---- | --------------- |
-  | x1     | number | 是    | 0    | 圆弧经过的第一个点的x坐标值。 |
-  | y1     | number | 是    | 0    | 圆弧经过的第一个点的y坐标值。 |
-  | x2     | number | 是    | 0    | 圆弧经过的第二个点的x坐标值。 |
-  | y2     | number | 是    | 0    | 圆弧经过的第二个点的y坐标值。 |
-  | radius | number | 是    | 0    | 圆弧的圆半径值。        |
+**参数：** 
+| 参数     | 类型     | 必填   | 默认值  | 描述              |
+| ------ | ------ | ---- | ---- | --------------- |
+| x1     | number | 是    | 0    | 圆弧经过的第一个点的x坐标值。 |
+| y1     | number | 是    | 0    | 圆弧经过的第一个点的y坐标值。 |
+| x2     | number | 是    | 0    | 圆弧经过的第二个点的x坐标值。 |
+| y2     | number | 是    | 0    | 圆弧经过的第二个点的y坐标值。 |
+| radius | number | 是    | 0    | 圆弧的圆半径值。        |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1313,19 +1333,19 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 在规定的矩形区域绘制一个椭圆。
 
-- 参数
-  | 参数            | 类型      | 必填   | 默认值   | 说明                |
-  | ------------- | ------- | ---- | ----- | ----------------- |
-  | x             | number  | 是    | 0     | 椭圆圆心的x轴坐标。        |
-  | y             | number  | 是    | 0     | 椭圆圆心的y轴坐标。        |
-  | radiusX       | number  | 是    | 0     | 椭圆x轴的半径长度。        |
-  | radiusY       | number  | 是    | 0     | 椭圆y轴的半径长度。        |
-  | rotation      | number  | 是    | 0     | 椭圆的旋转角度，单位为弧度。    |
-  | startAngle    | number  | 是    | 0     | 椭圆绘制的起始点角度，以弧度表示。 |
-  | endAngle      | number  | 是    | 0     | 椭圆绘制的结束点角度，以弧度表示。 |
-  | anticlockwise | boolean | 否    | false | 是否以逆时针方向绘制椭圆。     |
+**参数：** 
+| 参数            | 类型      | 必填   | 默认值   | 说明                |
+| ------------- | ------- | ---- | ----- | ----------------- |
+| x             | number  | 是    | 0     | 椭圆圆心的x轴坐标。        |
+| y             | number  | 是    | 0     | 椭圆圆心的y轴坐标。        |
+| radiusX       | number  | 是    | 0     | 椭圆x轴的半径长度。        |
+| radiusY       | number  | 是    | 0     | 椭圆y轴的半径长度。        |
+| rotation      | number  | 是    | 0     | 椭圆的旋转角度，单位为弧度。    |
+| startAngle    | number  | 是    | 0     | 椭圆绘制的起始点角度，以弧度表示。 |
+| endAngle      | number  | 是    | 0     | 椭圆绘制的结束点角度，以弧度表示。 |
+| anticlockwise | boolean | 否    | false | 是否以逆时针方向绘制椭圆。     |
 
-- 示例
+**示例：** 
 
   ```
   @Entry
@@ -1361,15 +1381,15 @@ rect(x: number, y: number, width: number, height: number): void
 
 创建矩形路径。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 描述            |
-  | ------ | ------ | ---- | ---- | ------------- |
-  | x      | number | 是    | 0    | 指定矩形的左上角x坐标值。 |
-  | y      | number | 是    | 0    | 指定矩形的左上角y坐标值。 |
-  | width  | number | 是    | 0    | 指定矩形的宽度。      |
-  | height | number | 是    | 0    | 指定矩形的高度。      |
+**参数：** 
+| 参数     | 类型     | 必填   | 默认值  | 描述            |
+| ------ | ------ | ---- | ---- | ------------- |
+| x      | number | 是    | 0    | 指定矩形的左上角x坐标值。 |
+| y      | number | 是    | 0    | 指定矩形的左上角y坐标值。 |
+| width  | number | 是    | 0    | 指定矩形的宽度。      |
+| height | number | 是    | 0    | 指定矩形的高度。      |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1403,7 +1423,7 @@ fill(): void
 
 对封闭路径进行填充。
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1437,7 +1457,7 @@ clip(): void
 
 设置当前路径为剪切路径。
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1474,12 +1494,12 @@ rotate(rotate: number): void
 
 针对当前坐标轴进行顺时针旋转。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 描述                                       |
-  | ------ | ------ | ---- | ---- | ---------------------------------------- |
-  | rotate | number | 是    | 0    | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
+**参数：** 
+| 参数     | 类型     | 必填   | 默认值  | 描述                                       |
+| ------ | ------ | ---- | ---- | ---------------------------------------- |
+| rotate | number | 是    | 0    | 设置顺时针旋转的弧度值，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1513,13 +1533,13 @@ scale(x: number, y: number): void
 
 设置canvas画布的缩放变换属性，后续的绘制操作将按照缩放比例进行缩放。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述          |
-  | ---- | ------ | ---- | ---- | ----------- |
-  | x    | number | 是    | 0    | 设置水平方向的缩放值。 |
-  | y    | number | 是    | 0    | 设置垂直方向的缩放值。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述          |
+| ---- | ------ | ---- | ---- | ----------- |
+| x    | number | 是    | 0    | 设置水平方向的缩放值。 |
+| y    | number | 是    | 0    | 设置垂直方向的缩放值。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1554,24 +1574,24 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
 
 transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
 >
 >  - x' = scaleX \* x + skewY \* y + translateX
 >
 >  - y' = skewX \* x + scaleY \* y + translateY
 
-- 参数
-  | 参数         | 类型     | 必填   | 默认值  | 描述       |
-  | ---------- | ------ | ---- | ---- | -------- |
-  | scaleX     | number | 是    | 0    | 指定水平缩放值。 |
-  | skewX      | number | 是    | 0    | 指定水平倾斜值。 |
-  | skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
-  | scaleY     | number | 是    | 0    | 指定垂直缩放值。 |
-  | translateX | number | 是    | 0    | 指定水平移动值。 |
-  | translateY | number | 是    | 0    | 指定垂直移动值。 |
-
-- 示例
+**参数：** 
+| 参数         | 类型     | 必填   | 默认值  | 描述       |
+| ---------- | ------ | ---- | ---- | -------- |
+| scaleX     | number | 是    | 0    | 指定水平缩放值。 |
+| skewX      | number | 是    | 0    | 指定水平倾斜值。 |
+| skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
+| scaleY     | number | 是    | 0    | 指定垂直缩放值。 |
+| translateX | number | 是    | 0    | 指定水平移动值。 |
+| translateY | number | 是    | 0    | 指定垂直移动值。 |
+
+**示例：** 
   ```
   @Entry
   @Component
@@ -1611,17 +1631,17 @@ setTransform(scaleX: number, skewX: number, skewY: number, scale: number, transl
 
 setTransfrom方法使用的参数和transform()方法相同，但setTransform()方法会重置现有的变换矩阵并创建新的变换矩阵。
 
-- 参数
-  | 参数         | 类型     | 必填   | 默认值  | 描述       |
-  | ---------- | ------ | ---- | ---- | -------- |
-  | scaleX     | number | 是    | 0    | 指定水平缩放值。 |
-  | skewX      | number | 是    | 0    | 指定水平倾斜值。 |
-  | skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
-  | scaleY     | number | 是    | 0    | 指定垂直缩放值。 |
-  | translateX | number | 是    | 0    | 指定水平移动值。 |
-  | translateY | number | 是    | 0    | 指定垂直移动值。 |
-
-- 示例
+**参数：** 
+| 参数         | 类型     | 必填   | 默认值  | 描述       |
+| ---------- | ------ | ---- | ---- | -------- |
+| scaleX     | number | 是    | 0    | 指定水平缩放值。 |
+| skewX      | number | 是    | 0    | 指定水平倾斜值。 |
+| skewY      | number | 是    | 0    | 指定垂直倾斜值。 |
+| scaleY     | number | 是    | 0    | 指定垂直缩放值。 |
+| translateX | number | 是    | 0    | 指定水平移动值。 |
+| translateY | number | 是    | 0    | 指定垂直移动值。 |
+
+**示例：** 
   ```
   @Entry
   @Component
@@ -1658,13 +1678,13 @@ translate(x: number, y: number): void
 
 移动当前坐标系的原点。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述       |
-  | ---- | ------ | ---- | ---- | -------- |
-  | x    | number | 是    | 0    | 设置水平平移量。 |
-  | y    | number | 是    | 0    | 设置竖直平移量。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述       |
+| ---- | ------ | ---- | ---- | -------- |
+| x    | number | 是    | 0    | 设置水平平移量。 |
+| y    | number | 是    | 0    | 设置竖直平移量。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1703,21 +1723,21 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number,
 
 进行图像绘制。
 
-- 参数
-  | 参数      | 类型                                       | 必填   | 默认值  | 描述                                       |
-  | ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-  | image   | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是    | null | 图片资源，请参考ImageBitmap或PixelMap。            |
-  | sx      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的x坐标值。                     |
-  | sy      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的y坐标值。                     |
-  | sWidth  | number                                   | 否    | 0    | 裁切源图像时需要裁切的宽度。                           |
-  | sHeight | number                                   | 否    | 0    | 裁切源图像时需要裁切的高度。                           |
-  | dx      | number                                   | 是    | 0    | 绘制区域左上角在x轴的位置。                           |
-  | dy      | number                                   | 是    | 0    | 绘制区域左上角在y&nbsp;轴的位置。                     |
-  | dWidth  | number                                   | 否    | 0    | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
-  | dHeight | number                                   | 否    | 0    | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
-
-
-- 示例
+**参数：** 
+| 参数      | 类型                                       | 必填   | 默认值  | 描述                                       |
+| ------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| image   | [ImageBitmap](ts-components-canvas-imagebitmap.md)或[PixelMap](../apis/js-apis-image.md#pixelmap7) | 是    | null | 图片资源，请参考ImageBitmap或PixelMap。            |
+| sx      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的x坐标值。                     |
+| sy      | number                                   | 否    | 0    | 裁切源图像时距离源图像左上角的y坐标值。                     |
+| sWidth  | number                                   | 否    | 0    | 裁切源图像时需要裁切的宽度。                           |
+| sHeight | number                                   | 否    | 0    | 裁切源图像时需要裁切的高度。                           |
+| dx      | number                                   | 是    | 0    | 绘制区域左上角在x轴的位置。                           |
+| dy      | number                                   | 是    | 0    | 绘制区域左上角在y&nbsp;轴的位置。                     |
+| dWidth  | number                                   | 否    | 0    | 绘制区域的宽度。 当绘制区域的宽度和裁剪图像的宽度不一致时，将图像宽度拉伸或压缩为绘制区域的宽度。 |
+| dHeight | number                                   | 否    | 0    | 绘制区域的高度。 当绘制区域的高度和裁剪图像的高度不一致时，将图像高度拉伸或压缩为绘制区域的高度。 |
+
+
+**示例：** 
   ```
   @Entry
   @Component
@@ -1750,11 +1770,11 @@ createImageData(width: number, height: number): Object
 
 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认   | 描述            |
-  | ------ | ------ | ---- | ---- | ------------- |
-  | width  | number | 是    | 0    | ImageData的宽度。 |
-  | height | number | 是    | 0    | ImageData的高度。 |
+**参数：** 
+| 参数     | 类型     | 必填   | 默认   | 描述            |
+| ------ | ------ | ---- | ---- | ------------- |
+| width  | number | 是    | 0    | ImageData的宽度。 |
+| height | number | 是    | 0    | ImageData的高度。 |
 
 
 ### createImageData
@@ -1763,36 +1783,36 @@ createImageData(imageData: Object): Object
 
 创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
 
-- 参数
-  | 参数        | 类型     | 必填   | 默认   | 描述                |
-  | --------- | ------ | ---- | ---- | ----------------- |
-  | imagedata | Object | 是    | null | 复制现有的ImageData对象。 |
+**参数：** 
+| 参数        | 类型     | 必填   | 默认   | 描述                |
+| --------- | ------ | ---- | ---- | ----------------- |
+| imagedata | Object | 是    | null | 复制现有的ImageData对象。 |
 
 ### getPixelMap
 
 getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 
 以当前canvas指定区域内的像素创建[PixelMap](../apis/js-apis-image.md#pixelmap7)对象。
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述              |
-  | ---- | ------ | ---- | ---- | --------------- |
-  | sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
-  | sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
-  | sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
-  | sh   | number | 是    | 0    | 需要输出的区域的高度。     |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述              |
+| ---- | ------ | ---- | ---- | --------------- |
+| sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
+| sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
+| sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
+| sh   | number | 是    | 0    | 需要输出的区域的高度。     |
 
 ### getImageData
 
 getImageData(sx: number, sy: number, sw: number, sh: number): Object
 
 以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述              |
-  | ---- | ------ | ---- | ---- | --------------- |
-  | sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
-  | sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
-  | sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
-  | sh   | number | 是    | 0    | 需要输出的区域的高度。     |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述              |
+| ---- | ------ | ---- | ---- | --------------- |
+| sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
+| sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
+| sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
+| sh   | number | 是    | 0    | 需要输出的区域的高度。     |
 
 
 ### putImageData
@@ -1801,18 +1821,18 @@ putImageData(imageData: Object, dx: number, dy: number, dirtyX?: number, dirtyY?
 
 使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
 
-- 参数
-  | 参数          | 类型     | 必填   | 默认值          | 描述                            |
-  | ----------- | ------ | ---- | ------------ | ----------------------------- |
-  | imagedata   | Object | 是    | null         | 包含像素值的ImageData对象。            |
-  | dx          | number | 是    | 0            | 填充区域在x轴方向的偏移量。                |
-  | dy          | number | 是    | 0            | 填充区域在y轴方向的偏移量。                |
-  | dirtyX      | number | 否    | 0            | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
-  | dirtyY      | number | 否    | 0            | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
-  | dirtyWidth  | number | 否    | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。               |
-  | dirtyHeight | number | 否    | imagedata的高度 | 源图像数据矩形裁切范围的高度。               |
-
-- 示例
+**参数：** 
+| 参数          | 类型     | 必填   | 默认值          | 描述                            |
+| ----------- | ------ | ---- | ------------ | ----------------------------- |
+| imagedata   | Object | 是    | null         | 包含像素值的ImageData对象。            |
+| dx          | number | 是    | 0            | 填充区域在x轴方向的偏移量。                |
+| dy          | number | 是    | 0            | 填充区域在y轴方向的偏移量。                |
+| dirtyX      | number | 否    | 0            | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
+| dirtyY      | number | 否    | 0            | 源图像数据矩形裁切范围左上角距离源图像左上角的y轴偏移量。 |
+| dirtyWidth  | number | 否    | imagedata的宽度 | 源图像数据矩形裁切范围的宽度。               |
+| dirtyHeight | number | 否    | imagedata的高度 | 源图像数据矩形裁切范围的高度。               |
+
+**示例：** 
   ```
   @Entry
   @Component
@@ -1852,7 +1872,7 @@ restore(): void
 
 对保存的绘图上下文进行恢复。
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1883,7 +1903,7 @@ save(): void
 
 对当前的绘图上下文进行保存。
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1914,15 +1934,15 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
 
 创建一个线性渐变色。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述       |
-  | ---- | ------ | ---- | ---- | -------- |
-  | x0   | number | 是    | 0    | 起点的x轴坐标。 |
-  | y0   | number | 是    | 0    | 起点的y轴坐标。 |
-  | x1   | number | 是    | 0    | 终点的x轴坐标。 |
-  | y1   | number | 是    | 0    | 终点的y轴坐标。 |
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述       |
+| ---- | ------ | ---- | ---- | -------- |
+| x0   | number | 是    | 0    | 起点的x轴坐标。 |
+| y0   | number | 是    | 0    | 起点的y轴坐标。 |
+| x1   | number | 是    | 0    | 终点的x轴坐标。 |
+| y1   | number | 是    | 0    | 终点的y轴坐标。 |
 
-- 示例
+**示例：** 
   ```
   @Entry
   @Component
@@ -1960,17 +1980,17 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
 
 创建一个径向渐变色。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述                |
-  | ---- | ------ | ---- | ---- | ----------------- |
-  | x0   | number | 是    | 0    | 起始圆的x轴坐标。         |
-  | y0   | number | 是    | 0    | 起始圆的y轴坐标。         |
-  | r0   | number | 是    | 0    | 起始圆的半径。必须是非负且有限的。 |
-  | x1   | number | 是    | 0    | 终点圆的x轴坐标。         |
-  | y1   | number | 是    | 0    | 终点圆的y轴坐标。         |
-  | r1   | number | 是    | 0    | 终点圆的半径。必须为非负且有限的。 |
-
-- 示例
+**参数：** 
+| 参数   | 类型     | 必填   | 默认值  | 描述                |
+| ---- | ------ | ---- | ---- | ----------------- |
+| x0   | number | 是    | 0    | 起始圆的x轴坐标。         |
+| y0   | number | 是    | 0    | 起始圆的y轴坐标。         |
+| r0   | number | 是    | 0    | 起始圆的半径。必须是非负且有限的。 |
+| x1   | number | 是    | 0    | 终点圆的x轴坐标。         |
+| y1   | number | 是    | 0    | 终点圆的y轴坐标。         |
+| r1   | number | 是    | 0    | 终点圆的半径。必须为非负且有限的。 |
+
+**示例：** 
   ```
   @Entry
   @Component

zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md

 # 组合手势
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,30 +14,32 @@
 
 GestureGroup(mode: GestureMode, ...gesture: GestureType[])
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | mode | GestureMode                                                  | 是 | - | 设置组合手势识别模式。 |
-  | gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | 是 | - | 可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。 |
+**参数：**
 
-- GestureMode枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Sequence | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 |
-  | Parallel | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。 |
-  | Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。 |
+| 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                           |
+| ------- | ---------------------------------------- | ---- | ---- | ------------------------------ |
+| mode    | GestureMode                              | 是    | -    | 设置组合手势识别模式。                    |
+| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br/>\|&nbsp;[LongPressGesture](ts-basic-gestures-longpressgesture.md)<br/>\|&nbsp;[PanGesture](ts-basic-gestures-pangesture.md)<br/>\|&nbsp;[PinchGesture](ts-basic-gestures-pinchgesture.md)<br/>\|&nbsp;[RotationGesture](ts-basic-gestures-rotationgesture.md) | 是    | -    | 可变长参数，1个或者多个基础手势类型，这些手势会被组合识别。 |
 
+## GestureMode枚举说明
+
+| 名称        | 描述                                       |
+| --------- | ---------------------------------------- |
+| Sequence  | 顺序识别，按照手势的注册顺序识别手势，直到所有手势识别成功。当有一个手势识别失败时，所有手势识别失败。 |
+| Parallel  | 并发识别，注册的手势同时识别，直到所有手势识别结束，手势识别互相不影响。     |
+| Exclusive | 互斥识别，注册的手势同时识别，若有一个手势识别成功，则结束手势识别。       |
 
 ## 事件
 
 | 名称                                       | 功能描述                                 |
-| -------- | -------- |
+| ---------------------------------------- | ------------------------------------ |
 | onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 顺序组合手势（GestureMode.Sequence）取消后触发回调。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GestureGroupExample {

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md

 #  Canvas
 
-> ![img](public_sys-resources/icon-note.gif) **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：** 
+>
+> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 提供画布组件，用于自定义绘制图形。
 
@@ -16,11 +18,11 @@
 
 Canvas(context: CanvasRenderingContext2D)
 
-- 参数
+**参数：**
 
-  | 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                         |
-  | ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
-  | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是    | -    | 见CanvasRenderingContext2D对象。 |
+| 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                         |
+| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
+| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是    | -    | 见CanvasRenderingContext2D对象。 |
 
 ## 属性
 
@@ -36,7 +38,8 @@ Canvas(context: CanvasRenderingContext2D)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CanvasExample {

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

 # CanvasGradient对象
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,17 +14,19 @@ addColorStop(offset: number, color: string): void
 
 设置渐变断点值，包括偏移和颜色。
 
-- 参数
-  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | offset | number | 是 | 0 | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 | 
-  | color | string | 是 | 'ffffff' | 设置渐变的颜色。 | 
-
-- 示例
-  ```
-  @Entry
-  @Component
-  struct Page45 {
+**参数：**
+
+| 参数     | 类型     | 必填   | 默认值      | 描述                           |
+| ------ | ------ | ---- | -------- | ---------------------------- |
+| offset | number | 是    | 0        | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
+| color  | string | 是    | 'ffffff' | 设置渐变的颜色。                     |
+
+**示例：**
+
+```ts
+@Entry
+@Component
+struct Page45 {
   private settings: RenderingContextSettings = new RenderingContextSettings(true)
   private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
@@ -45,7 +48,7 @@ addColorStop(offset: number, color: string): void
     .width('100%')
     .height('100%')
   }
-  }
-  ```
+}
+```
 
-  ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
+![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md

 # ImageBitmap对象
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -10,7 +11,7 @@ CanvasImageData对象可以存储canvas渲染的像素数据。
 ## 属性
 
 | 属性     | 类型                        | 描述                           |
-| -------- | -------- | -------- |
+| ------ | ------------------------- | ---------------------------- |
 | width  | number                    | 矩形区域实际像素宽度。                  |
 | height | number                    | 矩形区域实际像素高度。                  |
 | data   | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md

 # ImageData对象
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -10,7 +11,7 @@ ImageData对象可以存储canvas渲染的像素数据。
 ## 属性
 
 | 属性     | 类型                        | 描述                           |
-| -------- | -------- | -------- |
+| ------ | ------------------------- | ---------------------------- |
 | width  | number                    | 矩形区域实际像素宽度。                  |
 | height | number                    | 矩形区域实际像素高度。                  |
 | data   | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md

 # Lottie
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -15,7 +16,7 @@
 import lottie from '@ohos/lottieETS'
 ```
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  在Terminal窗口使用 `npm install @ohos/lottieETS` 命令下载Lottie。
 
 

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md

 # Path2D对象
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -15,7 +16,7 @@ addPath(path: Object): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述             |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | -------------- |
   | path | Object | 是    | null | 需要添加到当前路径的路径对象 |
 
 - 示例
@@ -95,7 +96,7 @@ moveTo(x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述      |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ------- |
   | x    | number | 是    | 0    | 目标点X轴坐标 |
   | y    | number | 是    | 0    | 目标点Y轴坐标 |
 
@@ -139,7 +140,7 @@ lineTo(x: number, y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述      |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ------- |
   | x    | number | 是    | 0    | 目标点X轴坐标 |
   | y    | number | 是    | 0    | 目标点Y轴坐标 |
 
@@ -184,7 +185,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述             |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | -------------- |
   | cp1x | number | 是    | 0    | 第一个贝塞尔参数的x坐标值。 |
   | cp1y | number | 是    | 0    | 第一个贝塞尔参数的y坐标值。 |
   | cp2x | number | 是    | 0    | 第二个贝塞尔参数的x坐标值。 |
@@ -229,7 +230,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
 
 - 参数
   | 参数   | 类型     | 必填   | 默认值  | 描述          |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ---- | ------ | ---- | ---- | ----------- |
   | cpx  | number | 是    | 0    | 贝塞尔参数的x坐标值。 |
   | cpy  | number | 是    | 0    | 贝塞尔参数的y坐标值。 |
   | x    | number | 是    | 0    | 路径结束时的x坐标值。 |
@@ -273,7 +274,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
 
 - 参数
   | 参数            | 类型      | 必填   | 默认值   | 描述         |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------------- | ------- | ---- | ----- | ---------- |
   | x             | number  | 是    | 0     | 弧线圆心的x坐标值。 |
   | y             | number  | 是    | 0     | 弧线圆心的y坐标值。 |
   | radius        | number  | 是    | 0     | 弧线的圆半径。    |
@@ -317,7 +318,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 描述              |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | --------------- |
   | x1     | number | 是    | 0    | 圆弧经过的第一个点的x坐标值。 |
   | y1     | number | 是    | 0    | 圆弧经过的第一个点的y坐标值。 |
   | x2     | number | 是    | 0    | 圆弧经过的第二个点的x坐标值。 |
@@ -361,7 +362,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 - 参数
   | 参数            | 类型     | 必填   | 默认值  | 描述                                   |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------------- | ------ | ---- | ---- | ------------------------------------ |
   | x             | number | 是    | 0    | 椭圆圆心的x轴坐标。                           |
   | y             | number | 是    | 0    | 椭圆圆心的y轴坐标。                           |
   | radiusX       | number | 是    | 0    | 椭圆x轴的半径长度。                           |
@@ -408,7 +409,7 @@ rect(x: number, y: number, width: number, height: number): void
 
 - 参数
   | 参数     | 类型     | 必填   | 默认值  | 描述            |
-  | -------- | -------- | -------- | -------- | -------- |
+  | ------ | ------ | ---- | ---- | ------------- |
   | x      | number | 是    | 0    | 指定矩形的左上角x坐标值。 |
   | y      | number | 是    | 0    | 指定矩形的左上角y坐标值。 |
   | width  | number | 是    | 0    | 指定矩形的宽度。      |

zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md

 # AlphabetIndexer
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 字母索引条。
 
-
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## 权限列表
 
@@ -22,17 +20,17 @@
 
 AlphabetIndexer(value: {arrayValue : Array<string>, selected : number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | arrayValue | Array<string> | 是 | - | 字母索引字符串数组。 | 
-  | selected | number | 是 | - | 选中项编号。 | 
+**参数：**
 
+| 参数名        | 参数类型                | 必填   | 默认值  | 参数描述       |
+| ---------- | ------------------- | ---- | ---- | ---------- |
+| arrayValue | Array<string> | 是    | -    | 字母索引字符串数组。 |
+| selected   | number              | 是    | -    | 选中项编号。     |
 
 ## 属性
 
 | 名称                      | 参数类型                                     | 描述                                  |
-| -------- | -------- | -------- |
+| ----------------------- | ---------------------------------------- | ----------------------------------- |
 | selectedColor           | Color                                    | 选中文本文字颜色。                           |
 | popupColor              | Color                                    | 弹出提示文本字体颜色。                         |
 | selectedBackgroundColor | Color                                    | 选中文本背景颜色。                           |
@@ -44,18 +42,18 @@ AlphabetIndexer(value: {arrayValue : Array<string>, selected : number})
 | itemSize                | Length                                   | 字母索引条字母区域大小，字母区域为正方形，设置正方形边长。       |
 | alignStyle              | IndexerAlign                             | 字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。 |
 
-- IndexerAlign枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Left | 弹框显示在索引条右侧。 | 
-  | Right | 弹框显示在索引条左侧。 | 
+## IndexerAlign枚举说明
 
+| 名称    | 描述          |
+| ----- | ----------- |
+| Left  | 弹框显示在索引条右侧。 |
+| Right | 弹框显示在索引条左侧。 |
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
-| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </sup>| 索引条选中回调。 |
+| ---------------------------------------- | ---------------------------------------- |
+| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </sup> | 索引条选中回调。                                 |
 | onSelect(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>8+</sup> | 索引条选中回调。                                 |
 | onRequestPopupData(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;Array&lt;string&gt;)<sup>8+</sup> | 选中字母索引后，请求索引提示窗口显示内容回调。<br/>返回值：索引对应的字符串数组，此字符串数组在弹出窗口中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。 |
 | onPopupSelect(callback:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | 字母索引提示窗口选中回调。                            |
@@ -63,7 +61,8 @@ AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AlphabetIndexerSample {

zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md

 # Badge
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -21,44 +22,48 @@
 
 Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | count | number | 是 | - | 设置提醒消息数。 |
-  | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
-  | maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 |
-  | style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
+**参数：**
+
+| 参数名      | 参数类型          | 必填   | 默认值                    | 参数描述                              |
+| -------- | ------------- | ---- | ---------------------- | --------------------------------- |
+| count    | number        | 是    | -                      | 设置提醒消息数。                          |
+| position | BadgePosition | 否    | BadgePosition.RightTop | 设置提示点显示位置。                        |
+| maxCount | number        | 否    | 99                     | 最大消息数，超过最大消息时仅显示maxCount+。        |
+| style    | BadgeStyle    | 否    | -                      | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
 
 Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle})
 
 根据字符串创建提醒组件。
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | string | 是 | - | 提示内容的文本字符串。 |
-  | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 |
-  | style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
-
-- BadgeStyle对象说明
-  | 名称 | 类型 | 必填 | 默认值 | 描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | color | Color | 否 | Color.White | 文本颜色。 |
-  | fontSize | number \| string | 否 | 10 | 文本大小。 |
-  | badgeSize | number \| string | 是 | - | badge的大小。 |
-  | badgeColor | Color | 否 | Color.Red | badge的颜色。 |
-
-- BadgePosition枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Right | 圆点显示在右侧纵向居中。 | 
-  | RightTop | 圆点显示在右上角。 | 
-  | Left | 圆点显示在左侧纵向居中。 | 
+**参数：**
+
+| 参数名      | 参数类型          | 必填   | 默认值                    | 参数描述                              |
+| -------- | ------------- | ---- | ---------------------- | --------------------------------- |
+| value    | string        | 是    | -                      | 提示内容的文本字符串。                       |
+| position | BadgePosition | 否    | BadgePosition.RightTop | 设置提示点显示位置。                        |
+| style    | BadgeStyle    | 否    | -                      | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 |
+
+## BadgeStyle对象说明
 
+| 名称         | 类型                         | 必填   | 默认值         | 描述        |
+| ---------- | -------------------------- | ---- | ----------- | --------- |
+| color      | Color                      | 否    | Color.White | 文本颜色。     |
+| fontSize   | number \| string | 否    | 10          | 文本大小。     |
+| badgeSize  | number \| string | 是    | -           | badge的大小。 |
+| badgeColor | Color                      | 否    | Color.Red   | badge的颜色。 |
+
+## BadgePosition枚举说明
+
+| 名称       | 描述           |
+| -------- | ------------ |
+| Right    | 圆点显示在右侧纵向居中。 |
+| RightTop | 圆点显示在右上角。    |
+| Left     | 圆点显示在左侧纵向居中。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BadgeExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-column.md

 # Column
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 沿垂直方向布局的容器。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,32 +21,32 @@
 
 Column(value:{space?: Length})
 
+**参数：**
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | space | Length | 否 | 0 | 纵向布局元素间距。 | 
-
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述      |
+| ----- | ------ | ---- | ---- | --------- |
+| space | Length | 否    | 0    | 纵向布局元素间距。 |
 
 ## 属性
 
 | 名称               | 参数类型                              | 默认值                    | 描述                |
-| -------- | -------- | -------- | -------- |
+| ---------------- | --------------------------------- | ---------------------- | ----------------- |
 | alignItems       | HorizontalAlign                   | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 |
 | justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start        | 设置子组件在垂直方向上的对齐格式。 |
 
-- HorizontalAlign枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Start | 按照语言方向起始端对齐。 | 
-  | Center | 居中对齐，默认对齐方式。 | 
-  | End | 按照语言方向末端对齐。 |
+## HorizontalAlign枚举说明
 
+| 名称     | 描述           |
+| ------ | ------------ |
+| Start  | 按照语言方向起始端对齐。 |
+| Center | 居中对齐，默认对齐方式。 |
+| End    | 按照语言方向末端对齐。  |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColumnExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-columnsplit.md

 # ColumnSplit
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 将子组件纵向布局，并在每个子组件之间插入一根横向的分割线。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -25,16 +25,17 @@ ColumnSplit()
 ## 属性
 
 | 名称         | 参数类型    | 描述                 |
-| -------- | -------- | -------- |
+| ---------- | ------- | ------------------ |
 | resizeable | boolean | 分割线是否可拖拽，默认为false。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  与RowSplit相同，ColumnSplit的分割线最小能拖动到刚好包含子组件。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColumnSplitExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md

 # Counter
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -27,14 +28,15 @@ Counter()
 不支持通用事件和手势， 仅支持如下事件：
 
 | 名称                                       | 功能描述      |
-| -------- | -------- |
+| ---------------------------------------- | --------- |
 | onInc(event: () => void) | 监听数值增加事件。 |
 | onDec(event: () => void) | 监听数值减少事件。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CounterExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md

 # Flex
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 弹性布局组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -23,40 +23,43 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 
 标准Flex布局容器。
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | direction | FlexDirection                                       | 否 | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。 |
-  | wrap | FlexWrap | 否 | FlexWrap.NoWrap | Flex容器是单行/列还是多行/列排列。 |
-  | justifyContent | FlexAlign | 否 | FlexAlign.Start | 子组件在Flex容器主轴上的对齐格式。 |
-  | alignItems | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否 | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。 |
-  | alignContent | FlexAlign | 否 | FlexAlign.Start | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
-
-- FlexDirection枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Row | 主轴与行方向一致作为布局模式。 |
-  | RowReverse | 与Row方向相反方向进行布局。 |
-  | Column | 主轴与列方向一致作为布局模式。 |
-  | ColumnReverse | 与Column相反方向进行布局。 |
-
-- FlexWrap枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | NoWrap | Flex容器的元素单行/列布局，子项不允许超出容器。 |
-  | Wrap | Flex容器的元素多行/列排布，子项允许超出容器。 |
-  | WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
-
-- FlexAlign枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Start | 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
-  | Center | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。 |
-  | End | 元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。 |
-  | SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 |
-  | SpaceAround | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
-  | SpaceEvenly | Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
-
+**参数：**
+
+| 参数名            | 参数类型                                     | 必填   | 默认值               | 参数描述                                     |
+| -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
+| direction      | FlexDirection                            | 否    | FlexDirection.Row | 子组件在Flex容器上排列的方向，即主轴的方向。                 |
+| wrap           | FlexWrap                                 | 否    | FlexWrap.NoWrap   | Flex容器是单行/列还是多行/列排列。                     |
+| justifyContent | FlexAlign                                | 否    | FlexAlign.Start   | 子组件在Flex容器主轴上的对齐格式。                      |
+| alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign枚举说明) | 否    | ItemAlign.Stretch | 子组件在Flex容器交叉轴上的对齐格式。                     |
+| alignContent   | FlexAlign                                | 否    | FlexAlign.Start   | 交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效。 |
+
+## FlexDirection枚举说明
+
+| 名称            | 描述               |
+| ------------- | ---------------- |
+| Row           | 主轴与行方向一致作为布局模式。  |
+| RowReverse    | 与Row方向相反方向进行布局。  |
+| Column        | 主轴与列方向一致作为布局模式。  |
+| ColumnReverse | 与Column相反方向进行布局。 |
+
+## FlexWrap枚举说明
+
+| 名称          | 描述                          |
+| ----------- | --------------------------- |
+| NoWrap      | Flex容器的元素单行/列布局，子项不允许超出容器。  |
+| Wrap        | Flex容器的元素多行/列排布，子项允许超出容器。   |
+| WrapReverse | Flex容器的元素反向多行/列排布，子项允许超出容器。 |
+
+## FlexAlign枚举说明
+
+| 名称           | 描述                                       |
+| ------------ | ---------------------------------------- |
+| Start        | 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。 |
+| Center       | 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。   |
+| End          | 元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。 |
+| SpaceBetween | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。 |
+| SpaceAround  | Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 |
+| SpaceEvenly  | Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。 |
 
 ## 示例
 

zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md

 # Grid
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
 
-
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ## 权限列表
@@ -46,7 +45,8 @@ Grid()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-gridcontainer.md

 # GridContainer
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -21,23 +21,24 @@
 
 GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})
 
-- 参数
-  | 参数名 | 类型 | 必填 | 默认值 | 说明 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | columns | number \| 'auto' | 否 | 'auto' | 设置当前布局总列数。 |
-  | sizeType | SizeType | 否 | SizeType.Auto | 选用设备宽度类型。 |
-  | gutter | Length | 否 | - | 栅格布局列间距。 |
-  | margin | Length | 否 | - | 栅格布局两侧间距。 |
+**参数：**
 
-- SizeType枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | XS | 最小宽度类型设备。 | 
-  | SM | 小宽度类型设备。 | 
-  | MD | 中等宽度类型设备。 | 
-  | LG | 大宽度类型设备。 | 
-  | Auto | 根据设备类型进行选择。 | 
+| 参数名      | 类型                         | 必填   | 默认值           | 说明         |
+| -------- | -------------------------- | ---- | ------------- | ---------- |
+| columns  | number \| 'auto' | 否    | 'auto'        | 设置当前布局总列数。 |
+| sizeType | SizeType                   | 否    | SizeType.Auto | 选用设备宽度类型。  |
+| gutter   | Length                     | 否    | -             | 栅格布局列间距。   |
+| margin   | Length                     | 否    | -             | 栅格布局两侧间距。  |
 
+## SizeType枚举说明
+
+| 名称   | 描述          |
+| ---- | ----------- |
+| XS   | 最小宽度类型设备。   |
+| SM   | 小宽度类型设备。    |
+| MD   | 中等宽度类型设备。   |
+| LG   | 大宽度类型设备。    |
+| Auto | 根据设备类型进行选择。 |
 
 ## 属性
 
@@ -51,7 +52,8 @@ GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridContainerExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md

 # GridItem
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 网格容器中单项内容容器。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -25,25 +25,26 @@ GridItem()
 ## 属性
 
 | 名称                      | 参数类型    | 默认值   | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ----------------------- | ------- | ----- | ---------------------------------------- |
 | rowStart                | number  | -     | 用于指定当前元素起始行号。                            |
 | rowEnd                  | number  | -     | 用于指定当前元素终点行号。                            |
 | columnStart             | number  | -     | 用于指定当前元素起始列号。                            |
 | columnEnd               | number  | -     | 用于指定当前元素终点列号。                            |
 | forceRebuild            | boolean | false | 用于设置在触发组件build时是否重新创建此节点。                |
-| selectable<sup>8+</sup> | boolean | true | 当前GridItem元素是否可以被鼠标框选。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;外层Grid容器的鼠标框选开启时，GridItem的框选才生效。 |
+| selectable<sup>8+</sup> | boolean | true  | 当前GridItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;外层Grid容器的鼠标框选开启时，GridItem的框选才生效。 |
 
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected：进入鼠标框选范围即被选中返回true，&nbsp;移出鼠标框选范围即未被选中返回false。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridItemExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-list.md

 # List
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,17 +21,17 @@
 
 List(value:{space?: number, initialIndex?: number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | space | number | 否 | 0 | 列表项间距。 | 
-  | initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。 | 
+**参数：**
 
+| 参数名          | 参数类型   | 必填   | 默认值  | 参数描述                                     |
+| ------------ | ------ | ---- | ---- | ---------------------------------------- |
+| space        | number | 否    | 0    | 列表项间距。                                   |
+| initialIndex | number | 否    | 0    | 设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。 |
 
 ## 属性
 
 | 名称                           | 参数类型                                     | 默认值               | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ---------------------------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
 | listDirection                | [Axis](ts-appendix-enums.md#axis枚举说明)    | Vertical          | 设置List组件排列方向参照Axis枚举说明。                  |
 | divider                      | {<br/>strokeWidth:&nbsp;Length,<br/>color?:Color,<br/>startMargin?:&nbsp;Length,<br/>endMargin?:&nbsp;Length<br/>} | -                 | 用于设置ListItem分割线样式，默认无分割线。<br/>strokeWidth:&nbsp;分割线的线宽。<br/>color:&nbsp;分割线的颜色。<br/>startMargin：&nbsp;分割线距离列表侧边起始端的距离。<br/>endMargin:&nbsp;分割线距离列表侧边结束端的距离。 |
 | editMode                     | boolean                                  | false             | 声明当前List组件是否处于可编辑模式。                     |
@@ -40,21 +40,22 @@ List(value:{space?: number, initialIndex?: number})
 | multiSelectable<sup>8+</sup> | boolean                                  | false             | 是否开启鼠标框选。<br/>-&nbsp;false：关闭框选。<br/>-&nbsp;true：开启框选。 |
 | restoreId<sup>8+</sup>       | number                                   | -                 | 组件迁移标识符，标识后的组件在应用迁移时，组件状态会被迁移到被拉起方的同标识组件。<br/>列表组件状态，包括起始位置显示的item序号。 |
 
-- EdgeEffect枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 | 
-  | None | 滑动到边缘后无效果。 | 
+## EdgeEffect枚举说明
 
+| 名称     | 描述                                       |
+| ------ | ---------------------------------------- |
+| Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 |
+| None   | 滑动到边缘后无效果。                               |
 
 ## 事件
 
 | 名称                                       | 功能描述                     |
-| -------- | -------- |
+| ---------------------------------------- | ------------------------ |
 | onItemDelete(index:&nbsp;number)&nbsp;=&gt;&nbsp;boolean | 列表项删除时触发。                |
 | onScrollIndex(firstIndex:&nbsp;number,&nbsp;lastIndex:&nbsp;number)&nbsp;=&gt;&nbsp;void | 当前列表显示的起始位置和终止位置发生变化时触发。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件：
 >
 >  - editMode属性设置为true。
@@ -72,7 +73,8 @@ List(value:{space?: number, initialIndex?: number})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ListExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md

 # ListItem
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 用来展示列表具体item，宽度默认充满List组件，必须配合List来使用。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -25,28 +25,29 @@ ListItem()
 ## 属性
 
 | 名称                      | 参数类型    | 默认值         | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ----------------------- | ------- | ----------- | ---------------------------------------- |
 | sticky                  | Sticky  | Sticky.None | 设置ListItem吸顶效果，参见Sticky枚举描述。             |
 | editable                | boolean | false       | 当前ListItem元素是否可编辑，进入编辑模式后可删除。            |
-| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;外层List容器的鼠标框选开启时，ListItem的框选才生效。 |
+| selectable<sup>8+</sup> | boolean | true        | 当前ListItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;外层List容器的鼠标框选开启时，ListItem的框选才生效。 |
 
-- Sticky枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | None | 无吸顶效果。 | 
-  | Normal | 当前item吸顶。 | 
+## Sticky枚举说明
 
+| 名称     | 描述        |
+| ------ | --------- |
+| None   | 无吸顶效果。    |
+| Normal | 当前item吸顶。 |
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;any)<sup>8+</sup> | ListItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected：进入鼠标框选范围即被选中返回true，&nbsp;移出鼠标框选范围即未被选中返回false。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ListItemExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-navigator.md

 # Navigator
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 路由容器组件，提供路由跳转能力。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -23,24 +23,25 @@ Navigator(value?: {target: string, type?: NavigationType})
 
 创建路由组件。
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | target | string | 是 | - | 指定跳转目标页面的路径。 |
-  | type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
+**参数：**
+
+| 参数名    | 参数类型           | 必填   | 默认值                 | 参数描述         |
+| ------ | -------------- | ---- | ------------------- | ------------ |
+| target | string         | 是    | -                   | 指定跳转目标页面的路径。 |
+| type   | NavigationType | 否    | NavigationType.Push | 指定路由方式。      |
 
-- NavigationType枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Push | 跳转到应用内的指定页面。 | 
-  | Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 | 
-  | Back | 返回上一页面或指定的页面。 | 
+## NavigationType枚举说明
 
+| 名称      | 描述                         |
+| ------- | -------------------------- |
+| Push    | 跳转到应用内的指定页面。               |
+| Replace | 用应用内的某个页面替换当前页面，并销毁被替换的页面。 |
+| Back    | 返回上一页面或指定的页面。              |
 
 ## 属性
 
 | 名称     | 参数      | 默认值       | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ------ | ------- | --------- | ---------------------------------------- |
 | active | boolean | -         | 当前路由组件是否处于激活状态，处于激活状态时，会生效相应的路由操作。       |
 | params | Object  | undefined | 跳转时要同时传递到目标页面的数据，可在目标页面使用router.getParams()获得。 |
 

zh-cn/application-dev/reference/arkui-ts/ts-container-panel.md

 # Panel
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 可滑动面板。提供一种轻量的内容展示的窗口，可方便的在不同尺寸中切换，属于弹出式组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,16 +21,16 @@
 
 Panel(value:{show：boolean})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | show | boolean | 是 | - | 控制Panel显示或隐藏。 | 
+**参数：**
 
+| 参数名  | 参数类型    | 必填   | 默认值  | 参数描述          |
+| ---- | ------- | ---- | ---- | ------------- |
+| show | boolean | 是    | -    | 控制Panel显示或隐藏。 |
 
 ## 属性
 
 | 名称         | 参数类型      | 默认值                | 描述                                 |
-| -------- | -------- | -------- | -------- |
+| ---------- | --------- | ------------------ | ---------------------------------- |
 | type       | PanelType | PanelType.Foldable | 设置可滑动面板的类型。                        |
 | mode       | PanelMode | -                  | 设置可滑动面板的初始状态。                      |
 | dragBar    | boolean   | true               | 设置是否存在dragbar，true表示存在，false表示不存在。 |
@@ -38,31 +38,33 @@ Panel(value:{show：boolean})
 | halfHeight | Length    | -                  | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 |
 | miniHeight | Length    | -                  | 指定PanelMode.Mini状态下的高度。            |
 
-- PanelType枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Minibar | 提供minibar和类全屏展示切换效果。 | 
-  | Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 | 
-  | Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 | 
+## PanelType枚举说明
+
+| 名称        | 描述                                   |
+| --------- | ------------------------------------ |
+| Minibar   | 提供minibar和类全屏展示切换效果。                 |
+| Foldable  | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 |
+| Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。   |
 
-- PanelMode枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Mini | 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 | 
-  | Half | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 | 
-  | Full | 类全屏状态。 | 
+## PanelMode枚举说明
 
+| 名称   | 描述                                       |
+| ---- | ---------------------------------------- |
+| Mini | 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 |
+| Half | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 |
+| Full | 类全屏状态。                                   |
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
+| ---------------------------------------- | ---------------------------------------- |
 | onChange(callback: (width: number, height: number, mode: PanelMode) => void) | 当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PanelExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-refresh.md

 # Refresh
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 下拉刷新容器。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 ## 权限列表
 
 无
@@ -17,38 +18,37 @@
 
 Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number | string\}\)
 
-- 参数
-
-  | 参数 | 参数名 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | refreshing | boolean | 是 | - | 当前组件是否正在刷新。 |
-  | offset | Length | 否 | 16 | 刷新组件静止时距离父组件顶部的距离。|
-  | friction | number&nbsp;\|&nbsp;string | 否 | 62 | 下拉摩擦系数，取值范围为0到100。<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 |
+**参数：**
 
+| 参数         | 参数名                        | 必填   | 默认值  | 参数描述                                     |
+| ---------- | -------------------------- | ---- | ---- | ---------------------------------------- |
+| refreshing | boolean                    | 是    | -    | 当前组件是否正在刷新。                              |
+| offset     | Length                     | 否    | 16   | 刷新组件静止时距离父组件顶部的距离。                       |
+| friction   | number&nbsp;\|&nbsp;string | 否    | 62   | 下拉摩擦系数，取值范围为0到100。<br/>-&nbsp;0表示下拉刷新容器不跟随手势下拉而下拉。<br/>-&nbsp;100表示下拉刷新容器紧紧跟随手势下拉而下拉。<br/>-&nbsp;数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 |
 
 
 ## 事件
 
 
 | 名称                                       | 描述                              |
-| -------- | -------- |
-| onStateChange(callback: (state: RefreshStatus) => void)| 当前刷新状态变更时，触发回调。<br/>state：刷新状态。 |
-| onRefreshing(callback: () => void)| 进入刷新状态时触发回调。 |
-
-- RefreshStatus枚举说明
+| ---------------------------------------- | ------------------------------- |
+| onStateChange(callback: (state: RefreshStatus) => void) | 当前刷新状态变更时，触发回调。<br/>state：刷新状态。 |
+| onRefreshing(callback: () => void)       | 进入刷新状态时触发回调。                    |
 
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Inactive | 默认未下拉状态。 |
-  | Drag | 下拉中，下拉距离小于刷新距离。 |
-  | OverDrag | 下拉中，下拉距离超过刷新距离。 |
-  | Refresh | 下拉结束，回弹至刷新距离，进入刷新状态。 |
-  | Done | 刷新结束，返回初始状态（顶部）。 |
+## RefreshStatus枚举说明
 
+| 名称       | 描述                   |
+| -------- | -------------------- |
+| Inactive | 默认未下拉状态。             |
+| Drag     | 下拉中，下拉距离小于刷新距离。      |
+| OverDrag | 下拉中，下拉距离超过刷新距离。      |
+| Refresh  | 下拉结束，回弹至刷新距离，进入刷新状态。 |
+| Done     | 刷新结束，返回初始状态（顶部）。     |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RefreshExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-row.md

 # Row
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 沿水平方向布局容器。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,30 +21,31 @@
 
 Row(value:{space?: Length})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | space | Length | 否 | 0 | 横向布局元素间距。 | 
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述      |
+| ----- | ------ | ---- | ---- | --------- |
+| space | Length | 否    | 0    | 横向布局元素间距。 |
 
 ## 属性
 
 | 名称               | 参数类型                              | 默认值                  | 描述                |
-| -------- | -------- | -------- | -------- |
+| ---------------- | --------------------------------- | -------------------- | ----------------- |
 | alignItems       | VerticalAlign                     | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。   |
 | justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start      | 设置子组件在水平方向上的对齐格式。 |
 
-- VerticalAlign枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Top | 顶部对齐。 | 
-  | Center | 居中对齐，默认对齐方式。 | 
-  | Bottom | 底部对齐。 |
+## VerticalAlign枚举说明
 
+| 名称     | 描述           |
+| ------ | ------------ |
+| Top    | 顶部对齐。        |
+| Center | 居中对齐，默认对齐方式。 |
+| Bottom | 底部对齐。        |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RowExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-rowsplit.md

 # RowSplit
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 将子组件横向布局，并在每个子组件之间插入一根纵向的分割线。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -25,16 +25,17 @@ RowSplit()
 ## 属性
 
 | 名称         | 参数类型    | 描述                 |
-| -------- | -------- | -------- |
+| ---------- | ------- | ------------------ |
 | resizeable | boolean | 分割线是否可拖拽，默认为false。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  RowSplit的分割线最小能拖动到刚好包含子组件。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RowSplitExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md

 # Scroll
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 可滚动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滚动。
 
+>  **说明：**
+>
+>  该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -31,12 +31,13 @@ Scroll(scroller?: Scroller)
 | scrollBarColor | Color                                    | -                        | 设置滚动条的颜色。 |
 | scrollBarWidth | Length                                   | -                        | 设置滚动条的宽度。 |
 
-- ScrollDirection枚举说明
-  | 名称         | 描述         |
-  | ---------- | ---------- |
-  | Horizontal | 仅支持水平方向滚动。 |
-  | Vertical   | 仅支持竖直方向滚动。 |
-  | None       | 不可滚动。      |
+## ScrollDirection枚举说明
+
+| 名称         | 描述         |
+| ---------- | ---------- |
+| Horizontal | 仅支持水平方向滚动。 |
+| Vertical   | 仅支持竖直方向滚动。 |
+| None       | 不可滚动。      |
 
 ## 事件
 
@@ -65,14 +66,13 @@ scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?
 
 滑动到指定位置。
 
+**参数：**
 
-- 参数
-  | 参数名       | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
-  | --------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
-  | xOffset   | Length                                   | 是    | -    | 水平滑动偏移。                                  |
-  | yOffset   | Length                                   | 是    | -    | 竖直滑动偏移。                                  |
-  | animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;\|<br/>CubicBezier&nbsp;\|<br/>SpringCurve<br/>} | 否    |      | 动画配置：<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。 |
-
+| 参数名       | 参数类型                                     | 必填   | 默认值  | 参数描述                                     |
+| --------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| xOffset   | Length                                   | 是    | -    | 水平滑动偏移。                                  |
+| yOffset   | Length                                   | 是    | -    | 竖直滑动偏移。                                  |
+| animation | {<br/>duration:&nbsp;number,<br/>curve:&nbsp;[Curve](ts-animatorproperty.md)&nbsp;\|<br/>CubicBezier&nbsp;\|<br/>SpringCurve<br/>} | 否    |      | 动画配置：<br/>-&nbsp;duration:&nbsp;滚动时长设置。<br/>-&nbsp;curve:&nbsp;滚动曲线设置。 |
 
 ### scrollEdge
 
@@ -81,12 +81,11 @@ scrollEdge(value: Edge): void
 
 滚动到容器边缘。
 
+**参数：**
 
-- 参数
-  | 参数名   | 参数类型 | 必填   | 默认值  | 参数描述      |
-  | ----- | ---- | ---- | ---- | --------- |
-  | value | Edge | 是    | -    | 滚动到的边缘位置。 |
-
+| 参数名   | 参数类型 | 必填   | 默认值  | 参数描述      |
+| ----- | ---- | ---- | ---- | --------- |
+| value | Edge | 是    | -    | 滚动到的边缘位置。 |
 
 ### scrollPage
 
@@ -94,12 +93,12 @@ scrollPage(value: { next: boolean, direction?: Axis }): void
 
 滚动到下一页或者上一页。
 
-- 参数
-  | 参数名       | 参数类型    | 必填   | 默认值  | 参数描述                           |
-  | --------- | ------- | ---- | ---- | ------------------------------ |
-  | next      | boolean | 是    | -    | 是否向下翻页。true表示向下翻页，false表示向上翻页。 |
-  | direction | Axis    | 否    | -    | 设置滚动方向为水平或竖直方向。                |
+**参数：**
 
+| 参数名       | 参数类型    | 必填   | 默认值  | 参数描述                           |
+| --------- | ------- | ---- | ---- | ------------------------------ |
+| next      | boolean | 是    | -    | 是否向下翻页。true表示向下翻页，false表示向上翻页。 |
+| direction | Axis    | 否    | -    | 设置滚动方向为水平或竖直方向。                |
 
 ### currentOffset
 
@@ -108,12 +107,11 @@ scroller.currentOffset(): Object
 
 返回当前的滚动偏移量。
 
+**返回值：**
 
-- 返回值
-  | 类型                                       | 描述                                       |
-  | ---------------------------------------- | ---------------------------------------- |
-  | {<br/>xOffset:&nbsp;number,<br/>yOffset:&nbsp;number<br/>} | xOffset:&nbsp;水平滑动偏移;<br/>yOffset:&nbsp;竖直滑动偏移。 |
-
+| 类型                                       | 描述                                       |
+| ---------------------------------------- | ---------------------------------------- |
+| {<br/>xOffset:&nbsp;number,<br/>yOffset:&nbsp;number<br/>} | xOffset:&nbsp;水平滑动偏移;<br/>yOffset:&nbsp;竖直滑动偏移。 |
 
 ### scrollToIndex
 
@@ -123,19 +121,19 @@ scroller.scrollToIndex(value: number): void
 滑动到指定Index。
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  仅支持list组件。
 
+**参数：**
 
-- 参数
-  | 参数名   | 参数类型   | 必填   | 默认值  | 参数描述              |
-  | ----- | ------ | ---- | ---- | ----------------- |
-  | value | number | 是    | -    | 要滑动到的列表项在列表中的索引值。 |
-
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述              |
+| ----- | ------ | ---- | ---- | ----------------- |
+| value | number | 是    | -    | 要滑动到的列表项在列表中的索引值。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ScrollExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md

 # SideBarContainer
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。
 
+>  **说明：**
+>
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,21 +21,23 @@
 
 SideBarContainer( type?: SideBarContainerType )
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | type | SideBarContainerType | 否 | SideBarContainerType.Embed | 设置侧边栏的显示类型。 | 
+**参数:**
+
+| 参数名  | 参数类型                 | 必填   | 默认值                        | 参数描述        |
+| ---- | -------------------- | ---- | -------------------------- | ----------- |
+| type | SideBarContainerType | 否    | SideBarContainerType.Embed | 设置侧边栏的显示类型。 |
 
-- SideBarContainerType枚举说明
-  | 名称 | 描述 |
-  | -------- | -------- |
-  | Embed | 侧边栏嵌入到组件内，侧边栏和内容区并列显示。 |
-  | Overlay | 侧边栏浮在内容区上面。 |
+## SideBarContainerType枚举说明
+
+| 名称      | 描述                     |
+| ------- | ---------------------- |
+| Embed   | 侧边栏嵌入到组件内，侧边栏和内容区并列显示。 |
+| Overlay | 侧边栏浮在内容区上面。            |
 
 ## 属性
 
 | 名称                | 参数类型        | 默认值  | 描述            |
-| -------- | -------- | -------- | -------- |
+| ----------------- | ----------- | ---- | ------------- |
 | showSideBar       | boolean     | true | 设置是否显示侧边栏。    |
 | controlButton     | ButtonStyle | -    | 设置侧边栏控制按钮的属性。 |
 | showControlButton | boolean     | true | 设置是否显示控制按钮。   |
@@ -43,28 +45,29 @@ SideBarContainer( type?: SideBarContainerType )
 | minSideBarWidth   | number      | 200  | 设置侧边栏最小宽度。    |
 | maxSideBarWidth   | number      | 280  | 设置侧边栏最大宽度。    |
 
-- ButtonStyle对象说明
-  | 名称 | 参数类型 | 必填 | 默认值 | 描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | left | number | 否 | 16 | 设置侧边栏控制按钮距离容器左界限的间距。 |
-  | top | number | 否 | 48 | 设置侧边栏控制按钮距离容器上界限的间距。 |
-  | width | number | 否 | 32 | 设置侧边栏控制按钮的宽度。 |
-  | height | number | 否 | 32 | 设置侧边栏控制按钮的高度。 |
-  | icons | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) <br/>} | 否 | - | 设置侧边栏控制按钮的图标：<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 | 
+## ButtonStyle对象说明
 
+| 名称     | 参数类型                                     | 必填   | 默认值  | 描述                                       |
+| ------ | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| left   | number                                   | 否    | 16   | 设置侧边栏控制按钮距离容器左界限的间距。                     |
+| top    | number                                   | 否    | 48   | 设置侧边栏控制按钮距离容器上界限的间距。                     |
+| width  | number                                   | 否    | 32   | 设置侧边栏控制按钮的宽度。                            |
+| height | number                                   | 否    | 32   | 设置侧边栏控制按钮的高度。                            |
+| icons  | {<br/>shown:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>hidden:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) ,<br/>switching?:&nbsp;string \| PixelMap \| [Resource](../../ui/ts-types.md) <br/>} | 否    | -    | 设置侧边栏控制按钮的图标：<br/> </p> - shown: 设置侧边栏显示时控制按钮的图标。<br>- hidden: 设置侧边栏隐藏时控制按钮的图标。<br>- switching:设置侧边栏显示和隐藏状态切换时控制按钮的图标。 |
 
 
 
 ## 事件
 
 | 名称                                       | 功能描述                                     |
-| -------- | -------- |
-| onChange(callback: (value: boolen) =&gt; void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> value的true表示显示，false表示隐藏。|  
+| ---------------------------------------- | ---------------------------------------- |
+| onChange(callback: (value: boolen) =&gt; void) | 当侧边栏的状态在显示和隐藏之间切换时触发回调。<p> value的true表示显示，false表示隐藏。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SideBarContainerExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-stack.md

 # Stack
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,15 +21,16 @@
 
 Stack(value:{alignContent?: Alignment})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | alignContent | [Alignment](ts-appendix-enums.md#alignment枚举说明) | 否 | Center | 设置子组件在容器内的对齐方式。 |
+**参数：**
 
+| 参数名          | 参数类型                                     | 必填   | 默认值    | 参数描述            |
+| ------------ | ---------------------------------------- | ---- | ------ | --------------- |
+| alignContent | [Alignment](ts-appendix-enums.md#alignment枚举说明) | 否    | Center | 设置子组件在容器内的对齐方式。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StackExample {

zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md

@@ -20,11 +20,11 @@
 
 Swiper(value:{controller?: SwiperController})
 
-- 参数
-  | 参数名        | 参数类型                                  | 必填   | 默认值  | 参数描述                 |
-  | ---------- | ------------------------------------- | ---- | ---- | -------------------- |
-  | controller | [SwiperController](#swipercontroller) | 否    | null | 给组件绑定一个控制器，用来控制组件翻页。 |
+**参数：**
 
+| 参数名        | 参数类型                                  | 必填   | 默认值  | 参数描述                 |
+| ---------- | ------------------------------------- | ---- | ---- | -------------------- |
+| controller | [SwiperController](#swipercontroller) | 否    | null | 给组件绑定一个控制器，用来控制组件翻页。 |
 
 ## 属性
 

zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md

 # TabContent
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 仅在Tabs中使用，对应一个切换页签的内容视图。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -28,9 +28,9 @@ TabContent()
 
 | 名称     | 参数类型                                     | 默认值  | 描述                                       |
 | ------ | ---------------------------------------- | ---- | ---------------------------------------- |
-| tabBar | string&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string,<br/>text?:&nbsp;string<br/>}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -    | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
+| tabBar | string&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string,<br/>text?:&nbsp;string<br/>}<br/>\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -    | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
 >
 >  - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
@@ -38,7 +38,8 @@ TabContent()
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TabContentExample  {

zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md

 # Tabs
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 一种可以通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,26 +21,27 @@
 
 Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsController](#tabscontroller)})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | barPosition | BarPosition | 否 | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 |
-  | index | number | 否 | 0 | 指定初次初始页签索引。 |
-  | controller | [TabsController](#tabscontroller) | 否 | - | 设置Tabs控制器。 |
+**参数：**
+
+| 参数名         | 参数类型                              | 必填   | 默认值               | 参数描述               |
+| ----------- | --------------------------------- | ---- | ----------------- | ------------------ |
+| barPosition | BarPosition                       | 否    | BarPosition.Start | 指定页签位置来创建Tabs容器组件。 |
+| index       | number                            | 否    | 0                 | 指定初次初始页签索引。        |
+| controller  | [TabsController](#tabscontroller) | 否    | -                 | 设置Tabs控制器。         |
 
-- BarPosition枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Start | vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。 | 
-  | End | vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。 | 
+## BarPosition枚举说明
 
+| 名称    | 描述                                       |
+| ----- | ---------------------------------------- |
+| Start | vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。 |
+| End   | vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。 |
 
 ## 属性
 
 不支持触摸热区设置。
 
 | 名称                | 参数类型    | 默认值                         | 描述                              |
-| -------- | -------- | -------- | -------- |
+| ----------------- | ------- | --------------------------- | ------------------------------- |
 | vertical          | boolean | 是否为纵向Tab，默认为false。          | 是否为纵向Tab，默认为false。              |
 | scrollable        | boolean | 是否可以通过左右滑动进行页面切换，默认为true。   | 是否可以通过左右滑动进行页面切换，默认为true。       |
 | barMode           | BarMode | TabBar布局模式。                 | TabBar布局模式。                     |
@@ -48,17 +49,17 @@ Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsContro
 | barHeight         | number  | TabBar的高度值，不设置时使用系统主题中的默认值。 | TabBar的高度值，不设置时使用系统主题中的默认值**。** |
 | animationDuration | number  | 200                         | TabContent滑动动画时长。               |
 
-- BarMode枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Scrollable | TabBar使用实际布局宽度, 超过总长度后可滑动。 | 
-  | Fixed | 所有TabBar平均分配宽度。 | 
+## BarMode枚举说明
 
+| 名称         | 描述                              |
+| ---------- | ------------------------------- |
+| Scrollable | TabBar使用实际布局宽度, 超过总长度后可滑动。 |
+| Fixed      | 所有TabBar平均分配宽度。                 |
 
 ## 事件
 
 | 名称                                       | 功能描述           |
-| -------- | -------- |
+| ---------------------------------------- | -------------- |
 | onChange(callback: (index: number) => void) | Tab页签切换后触发的事件。 |
 
 ## TabsController
@@ -78,15 +79,16 @@ changeIndex(value: number): void
 
 控制Tabs切换到指定页签。
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | number | 是 | - | 页签在Tabs里的索引值，索引值从0开始。 |
+**参数：**
 
+| 参数名   | 参数类型   | 必填   | 默认值  | 参数描述                  |
+| ----- | ------ | ---- | ---- | --------------------- |
+| value | number | 是    | -    | 页签在Tabs里的索引值，索引值从0开始。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TabsExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md

 # Circle
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 圆形绘制组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,29 +21,25 @@
 
 Circle(options?: {width: Length, height: Length})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | options | Object | 否 | - | 见options参数说明。 |
-
-- options参数说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | Length | 是 | - | 宽度。 | 
-  | height | Length | 是 | - | 高度。 | 
+**options参数：**
 
+| 参数名    | 参数类型   | 必填   | 默认值  | 参数描述 |
+| ------ | ------ | ---- | ---- | ---- |
+| width  | Length | 是    | -    | 宽度。  |
+| height | Length | 是    | -    | 高度。  |
 
 ## 属性
 
 | 参数名称   | 参数类型   | 默认值  | 必填   | 参数描述      |
-| -------- | -------- | -------- | -------- | -------- |
+| ------ | ------ | ---- | ---- | --------- |
 | width  | Length | 0    | 否    | 圆所在矩形的宽度。 |
 | height | Length | 0    | 否    | 圆所在矩形的高度。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CircleExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md

 # Ellipse
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -21,29 +22,25 @@
 
 ellipse(options?: {width: Length, height: Length})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | options | Object | 否 | - | 见options参数说明。 |
-
-- options参数说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | Length | 是 | - | 宽度。 | 
-  | height | Length | 是 | - | 高度。 | 
+**options参数说明：**
 
+| 参数名    | 参数类型   | 必填   | 默认值  | 参数描述 |
+| ------ | ------ | ---- | ---- | ---- |
+| width  | Length | 是    | -    | 宽度。  |
+| height | Length | 是    | -    | 高度。  |
 
 ## 属性
 
 | 参数名称   | 参数类型   | 默认值  | 必填   | 参数描述       |
-| -------- | -------- | -------- | -------- | -------- |
+| ------ | ------ | ---- | ---- | ---------- |
 | width  | Length | 0    | 否    | 椭圆所在矩形的宽度。 |
 | height | Length | 0    | 否    | 椭圆所在矩形的高度。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct EllipseExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md

 # Line
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 直线绘制组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,22 +21,17 @@
 
 Line(options?: {width: Length, height: Length})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | options | Object | 否 | - | 见options参数说明。 |
-
-- options参数说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | Length | 是 | - | 宽度。 | 
-  | height | Length | 是 | - | 高度。 | 
+**options参数说明：**
 
+| 参数名    | 参数类型   | 必填   | 默认值  | 参数描述 |
+| ------ | ------ | ---- | ---- | ---- |
+| width  | Length | 是    | -    | 宽度。  |
+| height | Length | 是    | -    | 高度。  |
 
 ## 属性
 
 | 参数名称       | 参数类型   | 默认值         | 必填   | 参数描述          |
-| -------- | -------- | -------- | -------- | -------- |
+| ---------- | ------ | ----------- | ---- | ------------- |
 | width      | Length | 0           | 否    | 直线所在矩形的宽度。    |
 | height     | Length | 0           | 否    | 直线所在矩形的高度。    |
 | startPoint | Point  | [0, 0] | 是    | 直线起点坐标(相对坐标)。 |
@@ -45,7 +40,8 @@ Line(options?: {width: Length, height: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md

@@ -16,14 +16,13 @@
 
 Path(value?: { width?: number | string, height?: number | string, commands?: string })
 
-- 参数
-
-  | 参数名      | 参数类型             | 必填   | 默认值  | 参数描述        |
-  | -------- | ---------------- | ---- | ---- | ----------- |
-  | width    | number \| string | 否    | 0    | 路径所在矩形的宽度。  |
-  | height   | number \| string | 否    | 0    | 路径所在矩形的高度。  |
-  | commands | string           | 否    | ''   | 路径绘制的命令字符串。 |
+**参数：**
 
+| 参数名      | 参数类型             | 必填   | 默认值  | 参数描述        |
+| -------- | ---------------- | ---- | ---- | ----------- |
+| width    | number \| string | 否    | 0    | 路径所在矩形的宽度。  |
+| height   | number \| string | 否    | 0    | 路径所在矩形的高度。  |
+| commands | string           | 否    | ''   | 路径绘制的命令字符串。 |
 
 ## 属性
 
@@ -63,7 +62,8 @@ Path(value?: { width?: number | string, height?: number | string, commands?: str
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PathExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md

 # Polygon
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 多边形绘制组件。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -21,22 +21,17 @@
 
 Polygon(value:{options?: {width: Length, height: Length}})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | options | Object | 否 | - | 见见options参数说明。 |
-
-- options参数说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | Length | 是 | - | 宽度。 | 
-  | height | Length | 是 | - | 高度。 | 
+**options参数说明：**
 
+| 参数名    | 参数类型   | 必填   | 默认值  | 参数描述 |
+| ------ | ------ | ---- | ---- | ---- |
+| width  | Length | 是    | -    | 宽度。  |
+| height | Length | 是    | -    | 高度。  |
 
 ## 属性
 
 | 参数名称   | 参数类型               | 默认值  | 必填   | 参数描述        |
-| -------- | -------- | -------- | -------- | -------- |
+| ------ | ------------------ | ---- | ---- | ----------- |
 | width  | Length             | 0    | 否    | 多边形所在矩形的宽度。 |
 | height | Length             | 0    | 否    | 多边形所在矩形的高度。 |
 | points | Array<Point> | -    | 是    | 多边形的顶点坐标列表。 |
@@ -44,7 +39,8 @@ Polygon(value:{options?: {width: Length, height: Length}})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PolygonExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md

 # Polyline
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -21,22 +22,17 @@
 
 Polyline(options?: {width: Length, height: Length})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | options | Object | 否 | - | 见options参数说明。 |
-
-- options参数说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | Length | 是 | - | 宽度。 | 
-  | height | Length | 是 | - | 高度。 | 
+**options参数说明：**
 
+| 参数名    | 参数类型   | 必填   | 默认值  | 参数描述 |
+| ------ | ------ | ---- | ---- | ---- |
+| width  | Length | 是    | -    | 宽度。  |
+| height | Length | 是    | -    | 高度。  |
 
 ## 属性
 
 | 参数名称   | 参数类型               | 默认值  | 必填   | 参数描述       |
-| -------- | -------- | -------- | -------- | -------- |
+| ------ | ------------------ | ---- | ---- | ---------- |
 | width  | Length             | 0    | 否    | 折线所在矩形的宽度。 |
 | height | Length             | 0    | 否    | 折线所在矩形的高度。 |
 | points | Array<Point> | -    | 是    | 折线经过坐标点列表。 |
@@ -44,7 +40,8 @@ Polyline(options?: {width: Length, height: Length})
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PolylineExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md

 # Rect
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -21,25 +22,20 @@
 
 Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<Length>} | {width: Length,height: Length,radiusWidth?: Length,radiusHeight?: Length}})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | options | Object | 否 | - | 见options参数说明。 |
-
-- options参数说明
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | Length | 是 | - | 宽度。 | 
-  | height | Length | 是 | - | 高度。 | 
-  | radius | Length \| Array<Length> | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 | 
-  | radiusWidth | Length | 否 | 0 | 圆角宽度。 | 
-  | radiusHeight | Length | 否 | 0 | 圆角高度。 | 
+**options参数说明：**
 
+| 参数名          | 参数类型                                    | 必填   | 默认值  | 参数描述                 |
+| ------------ | --------------------------------------- | ---- | ---- | -------------------- |
+| width        | Length                                  | 是    | -    | 宽度。                  |
+| height       | Length                                  | 是    | -    | 高度。                  |
+| radius       | Length \| Array<Length> | 否    | 0    | 圆角半径，支持分别设置四个角的圆角度数。 |
+| radiusWidth  | Length                                  | 否    | 0    | 圆角宽度。                |
+| radiusHeight | Length                                  | 否    | 0    | 圆角高度。                |
 
 ## 属性
 
 | 参数名称         | 参数类型                                    | 默认值  | 必填   | 参数描述             |
-| -------- | -------- | -------- | -------- | -------- |
+| ------------ | --------------------------------------- | ---- | ---- | ---------------- |
 | width        | Length                                  | 0    | 否    | 宽度。              |
 | height       | Length                                  | 0    | 否    | 高度。              |
 | radiusWidth  | Length                                  | 0    | 否    | 圆角的宽度，仅设置宽时宽高一致。 |
@@ -49,7 +45,8 @@ Rect(value:{options?: {width: Length,height: Length,radius?: Length | Array<L
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct RectExample {

zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md

 # Shape
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。
 
-
 1、绘制组件使用Shape作为父组件，实现类似SVG的效果。
 
-
 2、绘制组件单独使用，用于在页面上绘制指定的图形。
 
+>  **说明：**
+>
+>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -27,16 +25,16 @@
 
 Shape(value:{target?: PixelMap})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | target | PixelMap | 否 | null | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | 
+**参数：**
 
+| 参数名    | 参数类型     | 必填   | 默认值  | 参数描述                                     |
+| ------ | -------- | ---- | ---- | ---------------------------------------- |
+| target | PixelMap | 否    | null | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
 
 ## 属性
 
 | 参数名称             | 参数类型                                     | 默认值                 | 必填   | 参数描述         |
-| -------- | -------- | -------- | -------- | -------- |
+| ---------------- | ---------------------------------------- | ------------------- | ---- | ------------ |
 | viewPort         | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length,<br/>width:&nbsp;Length,<br/>height:&nbsp;Length<br/>} | -                   | 是    | 形状的视口。       |
 | fill             | Color                                    | Black               | 否    | 填充颜色。        |
 | stroke           | Color                                    | -                   | 否    | 边框颜色。        |
@@ -49,17 +47,18 @@ Shape(value:{target?: PixelMap})
 | strokeWidth      | Length                                   | 1                   | 否    | 设置边框的宽度。     |
 | antiAlias        | boolean                                  | true                | 否    | 是否开启抗锯齿。     |
 
-- LineJoinStyle枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Bevel | 使用斜角连接路径段。 | 
-  | Miter | 使用尖角连接路径段。 | 
-  | Round | 使用圆角连接路径段。 | 
+## LineJoinStyle枚举说明
 
+| 名称    | 描述         |
+| ----- | ---------- |
+| Bevel | 使用斜角连接路径段。 |
+| Miter | 使用尖角连接路径段。 |
+| Round | 使用圆角连接路径段。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShapeExample {

zh-cn/application-dev/reference/arkui-ts/ts-explicit-animation.md

 # 显式动画
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 | 接口名称                                     | 功能描述                                     |
-| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| ---------------------------------------- | ---------------------------------------- |
 | animateTo(value:&nbsp;[AnimationOptions](#animationoptions对象说明),&nbsp;event:&nbsp;()=&gt;&nbsp;void)&nbsp;:&nbsp;void | 提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。<br/>event指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。 |
 
 
 ## AnimationOptions对象说明
 
-- 属性
-  | 属性名称 | 属性类型 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- |
-  | duration | number | 1000 | 动画持续时间，单位为毫秒。 | 
-  | tempo | number | 1.0 | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。 | 
-  | curve | Curve&nbsp;\|&nbsp;Curves | Linear | 动画曲线。 | 
-  | delay | number | 0 | 单位为ms(毫秒)，默认不延时播放。 | 
-  | iterations | number | 1 | 默认播放一次，设置为-1时表示无限次播放。 | 
-  | playMode | PlayMode | Normal | 设置动画播放模式，默认播放完成后重头开始播放。 | 
+### 属性
 
+| 属性名称       | 属性类型                      | 默认值    | 描述                                  |
+| ---------- | ------------------------- | ------ | ----------------------------------- |
+| duration   | number                    | 1000   | 动画持续时间，单位为毫秒。                       |
+| tempo      | number                    | 1.0    | 动画的播放速度，值越大动画播放越快，值越小播放越慢，为0时无动画效果。 |
+| curve      | Curve&nbsp;\|&nbsp;Curves | Linear | 动画曲线。                               |
+| delay      | number                    | 0      | 单位为ms(毫秒)，默认不延时播放。                  |
+| iterations | number                    | 1      | 默认播放一次，设置为-1时表示无限次播放。               |
+| playMode   | PlayMode                  | Normal | 设置动画播放模式，默认播放完成后重头开始播放。             |
 
-- 接口
-  | 名称 | 功能描述 | 
-  | -------- | -------- |
-  | onFinish()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 | 
+### 接口
 
+| 名称                              | 功能描述      |
+| ------------------------------- | --------- |
+| onFinish()&nbsp;=&gt;&nbsp;void | 动效播放完成回调。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AnimateToExample {

zh-cn/application-dev/reference/arkui-ts/ts-interpolation-calculation.md

 # 插值计算
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 

zh-cn/application-dev/reference/arkui-ts/ts-matrix-transformation.md

 # 矩阵变换
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 

zh-cn/application-dev/reference/arkui-ts/ts-media-components-video.md

 # Video
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 视频播放组件。
@@ -33,7 +33,7 @@ Video(value: VideoOptions)
   | 参数名                 | 参数类型                                     | 必填   | 默认值                                      | 参数描述                                     |
   | ------------------- | ---------------------------------------- | ---- | ---------------------------------------- | ---------------------------------------- |
   | src                 | string \| [Resource](../../ui/ts-types.md) | 否    | -                                        | 视频播放源的路径，支持本地视频路径和网络路径。<br>支持在resources下面的video或rawfile文件夹里放置媒体资源。<br>支持dataability://的路径前缀，用于访问通过Data Ability提供的视频路径，具体路径信息详见[Data Ability说明](../../ability/fa-dataability.md)。 |
-  | currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否    | 1.0&nbsp;\|&nbsp;PlaybackSpeed.<br>Speed_Forward_1_00_X | 视频播放倍速。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/> |
+  | currentProgressRate | number&nbsp;\|&nbsp;PlaybackSpeed<sup>8+</sup> | 否    | 1.0&nbsp;\|&nbsp;PlaybackSpeed.<br>Speed_Forward_1_00_X | 视频播放倍速。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;number取值仅支持：0.75，1.0，1.25，1.75，2.0。<br/> |
   | previewUri          | string&nbsp;\|&nbsp;PixelMap<sup>8+</sup>&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | 否    | -                                        | 预览图片的路径。                                 |
   | controller          | [VideoController](#videocontroller)      | 否    | -                                        | 控制器。                                     |
 
@@ -155,7 +155,8 @@ setCurrentTime(value: number, seekMode: SeekMode)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct VideoCreateComponent {

zh-cn/application-dev/reference/arkui-ts/ts-methods-action-sheet.md

 # 列表选择弹窗
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -42,7 +42,8 @@ show(options: { paramObject1})
 ## 示例
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ActionSheetExapmle {

zh-cn/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md

 # 警告弹窗
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -41,7 +41,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AlertDialogExample {

zh-cn/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md

 # 自定义弹窗
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 

zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md

 # 日期滑动选择器弹窗
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 根据指定范围的Date创建可以选择日期的滑动选择器，展示在弹窗上。
@@ -29,7 +29,8 @@ show(options?: DatePickerDialogOptions)
 ## 示例
 
 ### 日期滑动选择器（显示农历）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerDialogExample01 {
@@ -62,7 +63,8 @@ struct DatePickerDialogExample01 {
 }
 ```
 ### 日期滑动选择器（不显示农历）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct DatePickerDialogExample02 {

zh-cn/application-dev/reference/arkui-ts/ts-methods-menu.md

 # 菜单
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## ContextMenu.close
@@ -9,11 +10,12 @@ close(): void
 
 可以通过该方法在页面范围内关闭通过[bindContextMenu](./ts-universal-attributes-menu.md#属性)给组件绑定的菜单。
 
-- 示例
-  ```
-  @Entry
-  @Component
-  struct Index {
+**示例：**
+
+```
+@Entry
+@Component
+struct Index {
   @Builder MenuBuilder(){
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Text('close')
@@ -35,5 +37,5 @@ close(): void
     .width('100%')
     .height('100%')
   }
-  }
-  ```
+}
+```
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md

 # 文本滑动选择器弹窗
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 根据指定的选择范围创建文本选择器，展示在弹窗上。
@@ -33,7 +33,8 @@ show(options: TextPickerDialogOptions)
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextPickerDialogExample {

zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md

 # 时间滑动选择器弹窗
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。
@@ -27,7 +27,8 @@ show(options?: TimePickerDialogOptions)
 ## 示例
 
 ### 时间滑动选择器（24小时制）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample01 {
@@ -55,7 +56,8 @@ struct TimePickerDialogExample01 {
 }
 ```
 ### 时间滑动选择器（12小时制）示例
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TimePickerDialogExample02 {

zh-cn/application-dev/reference/arkui-ts/ts-motion-path-animation.md

 # 路径动画
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -11,12 +11,13 @@
 
 | 名称 | 参数类型 | 默认值 | 描述 | 
 | -------- | -------- | -------- | -------- |
-| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;path中支持通过start和end进行起点和终点的替代，如：<br/>>&nbsp;<br/>>&nbsp;'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'。 | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | 设置组件的运动路径，入参说明如下：<br/>-&nbsp;path：位移动画的运动路径，使用svg路径字符串。<br/>-&nbsp;from：运动路径的起点，默认为0.0。<br/>-&nbsp;to：运动路径的终点，默认为1.0。<br/>-&nbsp;rotatable：是否跟随路径进行旋转。 | 
+| motionPath | {<br/>path:&nbsp;string,<br/>from?:&nbsp;number,<br/>to?:&nbsp;number,<br/>rotatable?:&nbsp;boolean<br/>}<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;path中支持通过start和end进行起点和终点的替代，如：<br/>>&nbsp;<br/>>&nbsp;'Mstart.x&nbsp;start.y&nbsp;L50&nbsp;50&nbsp;Lend.x&nbsp;end.y&nbsp;Z'。 | {<br/>"",<br/>0.0,<br/>1.0,<br/>false<br/>} | 设置组件的运动路径，入参说明如下：<br/>-&nbsp;path：位移动画的运动路径，使用svg路径字符串。<br/>-&nbsp;from：运动路径的起点，默认为0.0。<br/>-&nbsp;to：运动路径的终点，默认为1.0。<br/>-&nbsp;rotatable：是否跟随路径进行旋转。 | 
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MotionPathExample {

zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

 # OffscreenCanvasRenderingContext2D对象
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -30,7 +30,7 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
 | [lineJoin](#linejoin)                    | string                                   | 'miter'                                  | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。 |
 | [miterLimit](#miterlimit)                | number                                   | 10                                       | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。             |
 | [font](#font)                            | string                                   | 'normal&nbsp;normal&nbsp;14px&nbsp;sans-serif' | 设置文本绘制中的字体样式。<br/>语法：ctx.font='font-size&nbsp;font-family'<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列。<br/>语法：ctx.font='font-style&nbsp;font-weight&nbsp;font-size&nbsp;font-family'<br/>-&nbsp;font-style(可选)，用于指定字体样式，支持如下几种样式：'normal',&nbsp;'italic'。<br/>-&nbsp;font-weight(可选)，用于指定字体的粗细，支持如下几种类型：'normal',&nbsp;'bold',&nbsp;'bolder',&nbsp;'lighter',&nbsp;100,&nbsp;200,&nbsp;300,&nbsp;400,&nbsp;500,&nbsp;600,&nbsp;700,&nbsp;800,&nbsp;900。<br/>-&nbsp;font-size(可选)，指定字号和行高，单位只支持px。<br/>-&nbsp;font-family(可选)，指定字体系列，支持如下几种类型：'sans-serif',&nbsp;'serif',&nbsp;'monospace'。 |
-| [textAlign](#textalign)                  | string                                   | 'left'                                   | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
+| [textAlign](#textalign)                  | string                                   | 'left'                                   | 设置文本绘制中的文本对齐方式，可选值为：<br/>-&nbsp;'left'：文本左对齐。<br/>-&nbsp;'right'：文本右对齐。<br/>-&nbsp;'center'：文本居中对齐。<br/>-&nbsp;'start'：文本对齐界线开始的地方。<br/>-&nbsp;'end'：文本对齐界线结束的地方。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;ltr布局模式下start和left一致，rtl布局模式下start和right一致·。 |
 | [textBaseline](#textbaseline)            | string                                   | 'alphabetic'                             | 设置文本绘制中的水平对齐方式，可选值为：<br/>-&nbsp;'alphabetic'：文本基线是标准的字母基线。<br/>-&nbsp;'top'：文本基线在文本块的顶部。<br/>-&nbsp;'hanging'：文本基线是悬挂基线。<br/>-&nbsp;'middle'：文本基线在文本块的中间。<br/>-&nbsp;'ideographic'：文字基线是表意字基线；如果字符本身超出了alphabetic基线，那么ideograhpic基线位置在字符本身的底部。<br/>-&nbsp;'bottom'：文本基线在文本块的底部。&nbsp;与ideographic基线的区别在于ideographic&nbsp;基线不需要考虑下行字母。 |
 | [globalAlpha](#globalalpha)              | number                                   | -                                        | 设置透明度，0.0为完全透明，1.0为完全不透明。                |
 | [lineDashOffset](#linedashoffset)        | number                                   | 0.0                                      | 设置画布的虚线偏移量，精度为float。                     |
@@ -42,13 +42,14 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, setting: Render
 | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean                                  | true                                     | 用于设置绘制图片时是否进行图像平滑度调整，true为启用，false为不启用。  |
 | imageSmoothingQuality                    | string                                   | 'low'                                    | 用于设置图像平滑度，支持如下三种类型：'low',&nbsp;'medium',&nbsp;'high'。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > &lt;color&gt;类型格式为 'rgb(255, 255, 255)'，'rgba(255, 255, 255, 1.0)'，'\#FFFFFF'。
 
 
 ### fillStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FillStyleExample {
@@ -80,7 +81,8 @@ struct FillStyleExample {
 
 ### lineWidth
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineWidthExample {
@@ -112,7 +114,8 @@ struct LineWidthExample {
 
 ### strokeStyle
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StrokeStyleExample {
@@ -146,7 +149,8 @@ struct StrokeStyleExample {
 
 ### lineCap
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineCapExample {
@@ -182,7 +186,8 @@ struct LineCapExample {
 
 ### lineJoin
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineJoinExample {
@@ -219,7 +224,8 @@ struct LineJoinExample {
 
 ### miterLimit
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MiterLimit {
@@ -256,7 +262,8 @@ struct MiterLimit {
 
 ### font
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct Fonts {
@@ -288,7 +295,8 @@ struct Fonts {
 
 ### textAlign
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct CanvasExample {
@@ -335,7 +343,8 @@ struct CanvasExample {
 
 ### textBaseline
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextBaseline {
@@ -382,7 +391,8 @@ struct TextBaseline {
 
 ### globalAlpha
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalAlpha {
@@ -417,7 +427,8 @@ struct GlobalAlpha {
 
 ### lineDashOffset
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct LineDashOffset {
@@ -464,7 +475,8 @@ struct LineDashOffset {
 | copy             | 显示新绘制内容而忽略现有绘制内容。        |
 | xor              | 使用异或操作对新绘制内容与现有绘制内容进行融合。 |
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GlobalCompositeOperation {
@@ -504,7 +516,8 @@ struct GlobalCompositeOperation {
 
 ### shadowBlur
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowBlur {
@@ -538,7 +551,8 @@ struct ShadowBlur {
 
 ### shadowColor
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowColor {
@@ -573,7 +587,8 @@ struct ShadowColor {
 
 ### shadowOffsetX
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetX {
@@ -608,7 +623,8 @@ struct ShadowOffsetX {
 
 ### shadowOffsetY
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ShadowOffsetY {
@@ -643,7 +659,8 @@ struct ShadowOffsetY {
 
 ### imageSmoothingEnabled
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageSmoothingEnabled {
@@ -1648,7 +1665,7 @@ transform(scaleX: number, skewX: number, skewY: number, scaleY: number, translat
 
 transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 变换后的坐标计算方式（x和y为变换前坐标，x'和y'为变换后坐标）：
 >
 > - x' = scaleX \* x + skewY \* y + translateX

zh-cn/application-dev/reference/arkui-ts/ts-page-transition-animation.md

 # 页面间转场
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 

zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-component.md

 # 组件内转场
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -16,7 +16,7 @@
 - transition入参说明
   | 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
   | -------- | -------- | -------- | -------- | -------- |
-  | type | TransitionType                                               | TransitionType.All | 否 | 默认包括组件新增和删除。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;不指定Type时说明插入删除使用同一种效果。 |
+  | type | TransitionType                                               | TransitionType.All | 否 | 默认包括组件新增和删除。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;不指定Type时说明插入删除使用同一种效果。 |
   | opacity | number | 1 | 否 | 设置组件转场时的透明度效果，为插入时起点和删除时终点的值。 |
   | translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置组件转场时的平移效果，为插入时起点和删除时终点的值。 |
   | scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置组件转场时的缩放效果，为插入时起点和删除时终点的值。 |
@@ -34,7 +34,8 @@
 
 示例功能通过一个Button控制第二个Button的出现和消失，并通过transition配置第二个Button出现和消失的过场动画。
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TransitionExample {

zh-cn/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md

 # 共享元素转场
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -25,7 +25,8 @@
 
 示例功能为两个页面，共享元素转场页面图片点击后转场至页面B的图片。
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SharedTransitionExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-background.md

 # 背景设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -33,7 +33,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BackgroundExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border.md

 # 边框设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -34,7 +34,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct BorderExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-click.md

 # 点击控制
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -19,7 +19,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TouchAbleExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-enable.md

 # 禁用控制
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -19,7 +19,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct EnabledExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md

 # Flex布局
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 > 
 > - 仅当父组件是Flex组件时生效。
@@ -24,7 +24,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md

 # 焦点控制
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -15,13 +15,14 @@
 | -------- | -------- | -------- | -------- |
 | focusable | boolean | false | 设置当前组件是否可以获焦。 | 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 支持焦点控制的组件：Button、Text、Image、List、Grid。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FocusableExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md

 # 颜色渐变
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -37,7 +37,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColorGradientExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md

 # 栅格设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 > 
 > - 栅格布局的列宽、列间距由距离最近的GridContainer父组件决定。使用栅格属性的组件树上至少需要有1个GridContainer容器组件。
@@ -17,13 +17,14 @@
 | 名称 | 参数类型 | 默认值 | 描述 | 
 | -------- | -------- | -------- | -------- |
 | useSizeType | {<br/>xs?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>sm?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>md?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;},<br/>lg?:&nbsp;number&nbsp;\|&nbsp;{&nbsp;span:&nbsp;number,&nbsp;offset:&nbsp;number&nbsp;}<br/>} | - | 设置在特定设备宽度类型下的占用列数和偏移列数，span:&nbsp;占用列数;&nbsp;offset:&nbsp;偏移列数。<br/>当值为number类型时，仅设置列数，&nbsp;当格式如{"span":&nbsp;1,&nbsp;"offset":&nbsp;0}时，指同时设置占用列数与偏移列数。<br/>-&nbsp;xs:&nbsp;指设备宽度类型为SizeType.XS时的占用列数和偏移列数。<br/>-&nbsp;sm:&nbsp;指设备宽度类型为SizeType.SM时的占用列数和偏移列数。<br/>-&nbsp;md:&nbsp;指设备宽度类型为SizeType.MD时的占用列数和偏移列数。<br/>-&nbsp;lg:&nbsp;指设备宽度类型为SizeType.LG时的占用列数和偏移列数。 | 
-| gridSpan | number | 1 | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;设置了栅格span属性，组件的宽度由栅格布局决定。 | 
-| gridOffset | number | 0 | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>>&nbsp;-偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>>&nbsp;-设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。 | 
+| gridSpan | number | 1 | 默认占用列数，指useSizeType属性没有设置对应尺寸的列数（span)时，占用的栅格列数。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;设置了栅格span属性，组件的宽度由栅格布局决定。 | 
+| gridOffset | number | 0 | 默认偏移列数，指useSizeType属性没有设置对应尺寸的偏移(offset)时，&nbsp;当前组件沿着父组件Start方向，偏移的列数，也就是当前组件位于第n列。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-配置该属性后，当前组件在父组件水平方向的布局不再跟随父组件原有的布局方式，而是沿着父组件的Start方向偏移一定位移。<br/>>&nbsp;-偏移位移&nbsp;=&nbsp;（列宽&nbsp;+&nbsp;间距）\*&nbsp;列数。<br/>>&nbsp;-设置了偏移(gridOffset)的组件之后的兄弟组件会根据该组件进行相对布局，类似相对布局。 | 
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct GridContainerExample1 {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-hover-effect.md

 # 悬浮态效果
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -26,7 +26,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct HoverExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md

 # 图像效果
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -29,7 +29,8 @@
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ImageEffectsExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md

 # 布局约束
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -15,12 +15,13 @@
 | 名称 | 参数说明 | 默认值 | 描述 | 
 | -------- | -------- | -------- | -------- |
 | aspectRatio | number | - | 指定当前组件的宽高比。 | 
-| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex(单行)容器组件中生效。 | 
+| displayPriority | number | - | 设置当前组件在布局容器中显示的优先级，当父容器空间不足时，低优先级的组件会被隐藏。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex(单行)容器组件中生效。 | 
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AspectRatioExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-location.md

 # 位置设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,25 +14,25 @@
 
 
 | 名称         | 参数类型                                     | 默认值                                  | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ---------- | ---------------------------------------- | ------------------------------------ | ---------------------------------------- |
 | align      | [Alignment](ts-appendix-enums.md#alignment枚举说明) | Center                               | 设置元素内容的对齐方式，只有当设置的width和height大小超过元素本身内容大小时生效。 |
 | direction  | Direction                                | Auto                                 | 设置元素水平方向的布局，可选值参照Direction枚举说明。          |
 | position   | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | -                                    | 使用绝对定位，设置元素锚点相对于父容器顶部起点偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。 |
 | markAnchor | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 设置元素在位置定位时的锚点，以元素顶部起点作为基准点进行偏移。          |
 | offset     | {<br/>x:&nbsp;Length,<br/>y:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0<br/>} | 相对布局完成位置坐标偏移量，设置该属性，不影响父容器布局，仅在绘制时进行位置调整。 |
 
+## Direction枚举说明
 
-- Direction枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Ltr | 元素从左到右布局。 | 
-  | Rtl | 元素从右到左布局。 | 
-  | Auto | 使用系统默认布局方向。 | 
-
+| 名称   | 描述          |
+| ---- | ----------- |
+| Ltr  | 元素从左到右布局。   |
+| Rtl  | 元素从右到左布局。   |
+| Auto | 使用系统默认布局方向。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PositionExample {
@@ -64,7 +65,8 @@ struct PositionExample {
 
 ![zh-cn_image_0000001174264368](figures/zh-cn_image_0000001174264368.gif)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PositionExample2 {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md

 # Menu控制
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,28 +14,30 @@
 
 
 | 名称                           | 参数类型                                     | 默认值  | 描述                                 |
-| -------- | -------- | -------- | -------- |
+| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------- |
 | bindMenu                     | Array<MenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | -    | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
 | bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](../../ui/ts-types.md)<br>responseType:&nbsp;ResponseType | -    | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。  |
 
+## MenuItem
 
-- MenuItem
-  | 名称 | 类型 | 描述 |
-  | -------- | -------- | -------- |
-  | value | string | 菜单项文本。 |
-  | action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
+| 名称     | 类型                      | 描述          |
+| ------ | ----------------------- | ----------- |
+| value  | string                  | 菜单项文本。      |
+| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
 
-- ResponseType<sup>8+</sup>
-  | 参数值 | 描述 |
-  | -------- | -------- |
-  | LongPress | 通过长按触发菜单弹出。    |
-  | RightClick | 通过鼠标右键触发菜单弹出。 |
+## ResponseType<sup>8+</sup>
+
+| 参数值        | 描述            |
+| ---------- | ------------- |
+| LongPress  | 通过长按触发菜单弹出。   |
+| RightClick | 通过鼠标右键触发菜单弹出。 |
 
 ## 示例
 
 #### 普通菜单
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct MenuExample {
@@ -116,7 +119,8 @@ struct MenuExample {
 
 #### 菜单(右键触发显示)
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ContextMenuExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md

 # 透明度设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
-> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
-
 设置组件的透明度。
 
+>  **说明：**
+>
+>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
 
 ## 权限列表
 
@@ -16,13 +16,14 @@
 
 
 | 名称      | 参数类型   | 默认值  | 描述                                 |
-| -------- | -------- | -------- | -------- |
+| ------- | ------ | ---- | ---------------------------------- |
 | opacity | number | 1    | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct OpacityExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md

 # 浮层
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,13 +14,14 @@
 
 
 | 名称      | 参数类型                                     | 默认值                                      | 描述                       |
-| -------- | -------- | -------- | -------- |
+| ------- | ---------------------------------------- | ---------------------------------------- | ------------------------ |
 | overlay | title:&nbsp;string,<br/>options:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment枚举说明),<br/>offset?:&nbsp;{x:&nbsp;number,&nbsp;y:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上，增加遮罩文本，布局与当前组件相同。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct OverlayExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-polymorphic-style.md

 # 多态样式
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -15,20 +15,21 @@
 ## 属性
 
 | 名称          | 参数类型        | 默认值  | 描述           |
-| -------- | -------- | -------- | -------- |
+| ----------- | ----------- | ---- | ------------ |
 | stateStyles | StateStyles | -    | 设置组件不同状态的样式。 |
 
-- StateStyles接口说明
-  | 名称 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | normal | ()=>void | 否 | - | 组件无状态时的样式。 | 
-  | pressed | ()=>void | 否 | - | 组件按下状态的样式。 | 
-  | disabled | ()=>void | 否 | - | 组件禁用状态的样式。 | 
+## StateStyles接口说明
 
+| 名称       | 类型          | 必填   | 默认值  | 描述         |
+| -------- | ----------- | ---- | ---- | ---------- |
+| normal   | ()=>void | 否    | -    | 组件无状态时的样式。 |
+| pressed  | ()=>void | 否    | -    | 组件按下状态的样式。 |
+| disabled | ()=>void | 否    | -    | 组件禁用状态的样式。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct StyleExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md

 # Popup控制
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,46 +14,48 @@
 
 
 | 名称        | 参数类型                                     | 默认值  | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| --------- | ---------------------------------------- | ---- | ---------------------------------------- |
 | bindPopup | show:&nbsp;boolean,<br/>popup:&nbsp;PopupOptions\|&nbsp;CustomPopupOptions | -    | 给组件绑定Popup，点击弹出弹窗。<br/>show:&nbsp;创建页面弹窗提示是否默认显示，默认值为false。<br/>popup:&nbsp;配置当前弹窗提示的参数。 |
 
-
-- PopupOptions类型接口说明
-  | 名称 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | message | string | 是 | - | 弹窗信息内容。 | 
-  | placementOnTop | boolean | 否 | false | 是否在组件上方显示，默认值为false。 | 
-  | primaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 | 
-  | secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否 | - | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 | 
-  | onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。 | 
-
-- CustomPopupOptions<sup>8+</sup>类型接口说明
-  | 名称 | 类型 | 必填 | 默认值 | 描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | builder | ()&nbsp;=&gt;&nbsp;any | 是 | - | 提示气泡内容的构造器。 |
-  | placement | Placement | 否 | Placement.Bottom | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。 |
-  | maskColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡遮障层的颜色。 |
-  | popupColor | [Color](../../ui/ts-types.md#颜色类型) | 否 | - | 提示气泡的颜色。 |
-  | enableArrow | boolean | 否 | true | 是否显示箭头，只有上、下方向的气泡会显示箭头。 |
-  | autoCancel | boolean | 否 | true | 页面有操作时，是否自动关闭气泡 |
-  | onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否 | - | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。 |
-
-- Placement<sup>8+</sup>枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Left | 气泡提示位于组件左侧。 | 
-  | Right | 气泡提示位于组件右侧。 | 
-  | Top | 气泡提示位于组件上侧。 | 
-  | Bottom | 气泡提示位于组件下侧。 | 
-  | TopLeft | 气泡提示位于组件左上角。 | 
-  | TopRight | 气泡提示位于组件右上角。 | 
-  | BottomLeft | 气泡提示位于组件左下角。 | 
-  | BottomRight | 气泡提示位于组件右下角。 | 
-
+## PopupOptions类型接口说明
+
+| 名称              | 类型                                       | 必填   | 默认值   | 描述                                       |
+| --------------- | ---------------------------------------- | ---- | ----- | ---------------------------------------- |
+| message         | string                                   | 是    | -     | 弹窗信息内容。                                  |
+| placementOnTop  | boolean                                  | 否    | false | 是否在组件上方显示，默认值为false。                     |
+| primaryButton   | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否    | -     | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
+| secondaryButton | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否    | -     | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
+| onStateChange   | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否    | -     | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。        |
+
+## CustomPopupOptions<sup>8+</sup>类型接口说明
+
+| 名称            | 类型                                       | 必填   | 默认值              | 描述                             |
+| ------------- | ---------------------------------------- | ---- | ---------------- | ------------------------------ |
+| builder       | ()&nbsp;=&gt;&nbsp;any                   | 是    | -                | 提示气泡内容的构造器。                    |
+| placement     | Placement                                | 否    | Placement.Bottom | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。 |
+| maskColor     | [Color](../../ui/ts-types.md#颜色类型)       | 否    | -                | 提示气泡遮障层的颜色。                    |
+| popupColor    | [Color](../../ui/ts-types.md#颜色类型)       | 否    | -                | 提示气泡的颜色。                       |
+| enableArrow   | boolean                                  | 否    | true             | 是否显示箭头，只有上、下方向的气泡会显示箭头。        |
+| autoCancel    | boolean                                  | 否    | true             | 页面有操作时，是否自动关闭气泡                |
+| onStateChange | (isVisible:&nbsp;boolean)&nbsp;=&gt;&nbsp;void | 否    | -                | 弹窗状态变化事件回调，参数为弹窗当前的显示状态。       |
+
+## Placement<sup>8+</sup>枚举说明
+
+| 名称          | 描述           |
+| ----------- | ------------ |
+| Left        | 气泡提示位于组件左侧。  |
+| Right       | 气泡提示位于组件右侧。  |
+| Top         | 气泡提示位于组件上侧。  |
+| Bottom      | 气泡提示位于组件下侧。  |
+| TopLeft     | 气泡提示位于组件左上角。 |
+| TopRight    | 气泡提示位于组件右上角。 |
+| BottomLeft  | 气泡提示位于组件左下角。 |
+| BottomRight | 气泡提示位于组件右下角。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct PopupExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-size.md

 # 尺寸设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,19 +14,20 @@
 
 
 | 名称             | 参数说明                                     | 默认值                                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | width          | Length                                   | -                                        | 设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。              |
 | height         | Length                                   | -                                        | 设置组件自身的高度，缺省时使用元素自身内容需要的高度。              |
 | size           | {<br/>width?:&nbsp;Length,<br/>height?:&nbsp;Length<br/>} | -                                        | 设置高宽尺寸。                                  |
 | padding        | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}&nbsp;\|&nbsp;Length | 0                                        | 设置内边距属性。<br/>参数为Length类型时，四个方向内边距同时生效。   |
 | margin         | {<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>left?:&nbsp;Length<br/>}<br/>\|&nbsp;Length | 0                                        | 设置外边距属性。<br/>参数为Length类型时，四个方向外边距同时生效。   |
 | constraintSize | {<br/>minWidth?:&nbsp;Length,<br/>maxWidth?:&nbsp;Length,<br/>minHeight?:&nbsp;Length,<br/>maxHeight?:&nbsp;Length<br/>} | {<br/>minWidth:&nbsp;0,<br/>maxWidth:&nbsp;Infinity,<br/>minHeight:&nbsp;0,<br/>maxHeight:&nbsp;Infinity<br/>} | 设置约束尺寸，组件布局时，进行尺寸范围限制。                   |
-| layoutWeight | number | 0 | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
+| layoutWeight   | number                                   | 0                                        | 容器尺寸确定时，元素与兄弟节点主轴布局尺寸按照权重进行分配，忽略本身尺寸设置。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;仅在Row/Column/Flex布局中生效。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct SizeExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md

 # 文本样式设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -16,35 +17,35 @@
 
 
 | 名称         | 参数类型                     | 默认值                         | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| ---------- | ------------------------ | --------------------------- | ---------------------------------------- |
 | fontColor  | Color                    | -                           | 设置文本颜色。                                  |
 | fontSize   | Length                   | -                           | 设置文本尺寸，Length为number类型时，使用fp单位。          |
 | fontStyle  | FontStyle                | FontStyle.Normal            | 设置文本的字体样式。                               |
 | fontWeight | number&nbsp;\|FontWeight | FontWeight.FontWeightNormal | 设置文本的字体粗细，number类型取值[100,&nbsp;900]，取值间隔为100，默认为400，取值越大，字体越粗。<br/>提供常用枚举值，参考：FontWeight枚举说明。 |
 | fontFamily | string                   | -                           | 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial,&nbsp;sans-serif'。 |
 
+## FontStyle枚举说明
 
-- FontStyle枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Normal | 标准的字体样式。 | 
-  | Italic | 斜体的字体样式。 | 
+| 名称     | 描述       |
+| ------ | -------- |
+| Normal | 标准的字体样式。 |
+| Italic | 斜体的字体样式。 |
 
+## FontWeight枚举说明
 
-- FontWeight枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Lighter | 字体较细。 | 
-  | Normal | 字体粗细正常。 | 
-  | Regular | 字体粗细正常。 | 
-  | Medium | 字体粗细适中。 | 
-  | Bold | 字体较粗。 | 
-  | Bolder | 字体非常粗。 | 
-
+| 名称      | 描述      |
+| ------- | ------- |
+| Lighter | 字体较细。   |
+| Normal  | 字体粗细正常。 |
+| Regular | 字体粗细正常。 |
+| Medium  | 字体粗细适中。 |
+| Bold    | 字体较粗。   |
+| Bolder  | 字体非常粗。  |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TextStyleExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-touch-target.md

 # 触摸热区设置
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -16,25 +17,27 @@
 
 
 | 名称             | 参数类型                                     | 默认值                                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
-| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | {<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} | 设置一个或多个触摸热区，包括位置和大小。<br/>>&nbsp;![icon-note.gif](public_sys-resources/icon-note.gif)&nbsp;**说明：**<br/>>&nbsp;-百分比是相对于组件本身来度量的。<br/>>&nbsp;-x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。<br/>>&nbsp;-width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 |
+| -------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
+| responseRegion | Array&lt;Rectangle&gt;&nbsp;\|&nbsp;Rectangle | {<br/>x：0,<br/>y：0,<br/>width：'100%',<br/>height：'100%'<br/>} | 设置一个或多个触摸热区，包括位置和大小。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;-百分比是相对于组件本身来度量的。<br/>>&nbsp;-x和y可以设置正负值百分比。当x设置为'100%'时表示热区往右偏移组件本身宽度大小，当x设置为'-100%'时表示热区往左偏移组件本身宽度大小。当y设置为'100%'时表示热区往下偏移组件本身高度大小，当y设置为'-100%'时表示热区往上偏移组件本身高度大小。<br/>>&nbsp;-width和height只能设置正值百分比。width：'100%'表示热区宽度设置为该组件本身的宽度。比如组件本身宽度是100vp，那么'100%'表示热区宽度也为100vp。height：'100%'表示热区高度设置为该组件本身的高度。 |
 
 
 ### Rectangle对象说明
-  | 名称 | 类型 | 必填 | 默认值 | 描述 | 
-  | -------- | -------- | -------- | -------- | -------- |
-  | x | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的X坐标。 | 
-  | y | Length | 否 | 0vp | 触摸点相对于组件本身左边沿的Y坐标。 | 
-  | width | Length | 否 | 100% | 触摸热区范围的宽度。 | 
-  | height | Length | 否 | 100% | 触摸热区范围的高度。 | 
-
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+| 名称     | 类型     | 必填   | 默认值  | 描述                 |
+| ------ | ------ | ---- | ---- | ------------------ |
+| x      | Length | 否    | 0vp  | 触摸点相对于组件本身左边沿的X坐标。 |
+| y      | Length | 否    | 0vp  | 触摸点相对于组件本身左边沿的Y坐标。 |
+| width  | Length | 否    | 100% | 触摸热区范围的宽度。         |
+| height | Length | 否    | 100% | 触摸热区范围的高度。         |
+
+  >  **说明：**
+  >
   >  当x和y都设置为正值时，表示组件的触摸热区的范围整体往组件本身右下角偏移，偏移的大小可通过数值来设置。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ResponseRegionExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md

 # 图形变换
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,7 +14,7 @@
 
 
 | 名称        | 参数类型                                     | 默认值                                      | 描述                                       |
-| -------- | -------- | -------- | -------- |
+| --------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | rotate    | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>angle?:&nbsp;Angle,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0,<br/>angle:&nbsp;0,<br/>centerX:&nbsp;'50%',<br/>centerY:&nbsp;'50%'<br/>} | (x,&nbsp;y,&nbsp;z)指定一个矢量，表示旋转轴，正角度为顺时针转动，负角度为逆时针转动，默认值为0，同时可以通过centerX和centerY设置旋转的中心点。 |
 | translate | {<br/>x?:&nbsp;Length,<br/>y?:&nbsp;Length,<br/>z?&nbsp;:&nbsp;Length<br/>} | {<br/>x:&nbsp;0,<br/>y:&nbsp;0,<br/>z:&nbsp;0<br/>} | 可以分别设置X轴、Y轴、Z轴的平移距离，距离的正负控制平移的方向，默认值为0。  |
 | scale     | {<br/>x?:&nbsp;number,<br/>y?:&nbsp;number,<br/>z?:&nbsp;number,<br/>centerX?:&nbsp;Length,<br/>centerY?:&nbsp;Length<br/>} | {<br/>x:&nbsp;1,<br/>y:&nbsp;1,<br/>z:&nbsp;1,<br/>centerX:'50%',<br/>centerY:'50%'<br/>} | 可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。 |

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md

 # 显隐控制
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,21 +14,21 @@
 
 
 | 名称         | 参数类型       | 默认值                | 描述           |
-| -------- | -------- | -------- | -------- |
+| ---------- | ---------- | ------------------ | ------------ |
 | visibility | Visibility | Visibility.Visible | 控制当前组件显示或隐藏。 |
 
+## Visibility枚举说明
 
-- Visibility枚举说明
-  | 名称 | 描述 | 
-  | -------- | -------- |
-  | Hidden | 隐藏，但参与布局进行占位。 | 
-  | Visible | 显示。 | 
-  | None | 隐藏，但不参与布局，不进行占位。 | 
-
+| 名称      | 描述               |
+| ------- | ---------------- |
+| Hidden  | 隐藏，但参与布局进行占位。    |
+| Visible | 显示。              |
+| None    | 隐藏，但不参与布局，不进行占位。 |
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct VisibilityExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md

 # Z序控制
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -13,13 +14,14 @@
 
 
 | 名称     | 参数类型   | 默认值  | 描述                           |
-| -------- | -------- | -------- | -------- |
+| ------ | ------ | ---- | ---------------------------- |
 | zIndex | number | 0    | 同一容器中兄弟组件显示层级关系，z值越大，显示层级越高。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ZIndexExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md

 # 组件区域变化事件
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -12,13 +13,14 @@
 ## 事件
 
 | 名称                                       | 支持冒泡 | 功能描述                                     |
-| -------- | -------- | -------- |
+| ---------------------------------------- | ---- | ---------------------------------------- |
 | onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否    | 组件区域变化时触发该回调，Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 |
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct AreaExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-click.md

 # 点击事件
 
 >  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -27,7 +28,7 @@
 
 ## EventTarget<sup>8+</sup>对象说明
 | 名称   | 参数类型               | 描述         |
-| ---- | ----------------- | ---------- |
+| ---- | ------------------ | ---------- |
 | area | [Area](#area8对象说明) | 目标元素的区域信息。 |
 
 ## Area<sup>8+</sup>对象说明

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md

 # 拖拽事件
 
 >  **说明：**
+>
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 ## 事件

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md

@@ -3,6 +3,7 @@
 按键事件指组件与键盘、遥控器等按键设备交互时触发的事件。
 
 >  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -20,22 +21,23 @@
 
 ## KeyEvent对象说明
 
-- 属性
-  | 属性名称                                  | 类型                          | 描述                         |
-  | ------------------------------------- | --------------------------- | -------------------------- |
-  | type                                  | [KeyType](#keytype枚举说明)     | 按键的类型。                     |
-  | [keyCode](../apis/js-apis-keycode.md) | number                      | 按键的键码。                     |
-  | keyText                               | string                      | 按键的键值。                     |
-  | keySource                             | [KeySource](#keysource枚举说明) | 触发当前按键的输入设备类型。             |
-  | deviceId                              | number                      | 触发当前按键的输入设备ID。             |
-  | metaKey                               | number                      | 按键发生时元键的状态，1表示按压态，0表示未按压态。 |
-  | timestamp                             | number                      | 按键发生时的时间戳。                 |
-
-
-- 接口
-  | 接口名称                         | 功能描述      |
-  | ---------------------------- | --------- |
-  | stopPropagation(): void | 阻塞事件冒泡传递。 |
+### 属性
+
+| 属性名称                                  | 类型                          | 描述                         |
+| ------------------------------------- | --------------------------- | -------------------------- |
+| type                                  | [KeyType](#keytype枚举说明)     | 按键的类型。                     |
+| [keyCode](../apis/js-apis-keycode.md) | number                      | 按键的键码。                     |
+| keyText                               | string                      | 按键的键值。                     |
+| keySource                             | [KeySource](#keysource枚举说明) | 触发当前按键的输入设备类型。             |
+| deviceId                              | number                      | 触发当前按键的输入设备ID。             |
+| metaKey                               | number                      | 按键发生时元键的状态，1表示按压态，0表示未按压态。 |
+| timestamp                             | number                      | 按键发生时的时间戳。                 |
+
+### 接口
+
+| 接口名称                         | 功能描述      |
+| ---------------------------- | --------- |
+| stopPropagation(): void | 阻塞事件冒泡传递。 |
 
 ## KeyType枚举说明
 | 名称   | 描述    |

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md

 # 挂载卸载事件
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -12,7 +13,7 @@
 ## 事件
 
 | 名称                                       | 支持冒泡 | 功能描述          |
-| -------- | -------- | -------- | 
+| ---------------------------------------- | ---- | ------------- |
 | onAppear(callback: () => void) | 否    | 组件挂载显示时触发此回调。 |
 | onDisappear(callback: () => void) | 否    | 组件卸载消失时触发此回调。 |
 

zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md

 # 触摸事件
 
 > **说明：**
+>
 > 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -18,21 +19,21 @@
 
 ## TouchEvent对象说明
 
-- 属性
-  | 属性名称                | 类型                                       | 描述           |
-  | ------------------- | ---------------------------------------- | ------------ |
-  | type                | TouchType                                | 触摸事件的类型。     |
-  | touches             | Array<[TouchObject](#touchobject对象说明)> | 全部手指信息。      |
-  | changedTouches      | Array<[TouchObject](#touchobject对象说明)> | 当前发生变化的手指信息。 |
-  | timestamp           | number                                   | 事件时间戳。       |
-  | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 被触摸元素对象。     |
-
-
-- 接口
-  | 接口名称                   | 功能描述    |
-  | ---------------------- | ------- |
-  | stopPropagation()：void | 阻塞事件冒泡。 |
+### 属性
 
+| 属性名称                | 类型                                       | 描述           |
+| ------------------- | ---------------------------------------- | ------------ |
+| type                | TouchType                                | 触摸事件的类型。     |
+| touches             | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 全部手指信息。      |
+| changedTouches      | Array&lt;[TouchObject](#touchobject对象说明)&gt; | 当前发生变化的手指信息。 |
+| timestamp           | number                                   | 事件时间戳。       |
+| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8对象说明) | 被触摸元素对象。     |
+
+### 接口
+
+| 接口名称                   | 功能描述    |
+| ---------------------- | ------- |
+| stopPropagation()：void | 阻塞事件冒泡。 |
 
 ## TouchObject对象说明
 | 属性名称    | 类型                          | 描述                  |

zh-cn/application-dev/reference/arkui-ts/ts-universal-focus-event.md

 # 焦点事件
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
+>
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
@@ -12,17 +13,18 @@
 ## 事件
 
 | **名称**                                   | **支持冒泡** | **功能描述**        |
-| -------- | -------- | -------- |
+| ---------------------------------------- | -------- | --------------- |
 | onFocus(callback: () => void) | 否        | 当前组件获取焦点时触发的回调。 |
 | onBlur(callback:() => void) | 否        | 当前组件失去焦点时触发的回调。 |
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+>  **说明：**
 >  支持焦点事件的组件：Button、Text、Image、List、Grid。
 
 
 ## 示例
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FocusEventExample {

zh-cn/application-dev/reference/arkui-ts/ts-universal-mouse-key.md

 # 鼠标事件
 
 >  **说明：**
+>
 >  从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。