update quick-start docs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/quick-start/start-with-ets-low-code.md

@@ -15,7 +15,7 @@ You can develop applications or services in the low-code approach using either o
 
 - Create a project that supports low-code development. This method is used as an example in this topic.
 
-- In an existing project, create a .visual file for development.
+- In an existing project, create a .visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
 
 
 ## Creating a Project That Supports Low-Code Development
@@ -52,7 +52,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
    
    Open the **index.visual** file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
 
-![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif)
+   ![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif)
 
 2. Add a **Column** component and set its styles and attributes.<a name="add_container"></a>
 
@@ -70,7 +70,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
 
    Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001277728577](figures/en-us_image_0000001277728577.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277809337](figures/en-us_image_0000001277809337.png)**Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations.
 
-![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)
+   ![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)
 
 5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 
 
@@ -85,7 +85,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
    
    In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
 
-![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png)
+   ![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png)
 
 2. [Delete the existing template components from the canvas.](#delete_origin_content)
 

en/application-dev/quick-start/start-with-js-low-code.md

@@ -13,7 +13,7 @@ You can develop applications or services in the low-code approach using either o
 
 - Create a project that supports low-code development. This method is used as an example in this topic.
 
-- In an existing project, create a Visual file for development.
+- In an existing project, create a Visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
 
 
 ## Creating a Project That Supports Low-Code Development
@@ -53,15 +53,15 @@ Add **Div**, **Text**, and **Button** components to the first page.
 1. Delete the existing template components from the canvas.<a name= delete_origin_content></a>
    
 
-Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
+   Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
 
-![en-us_image_0000001216600980](figures/en-us_image_0000001216600980.gif)
+   ![en-us_image_0000001216600980](figures/en-us_image_0000001216600980.gif)
 
 2. Add a **Div** component and set its styles and attributes.<a name = add_container></a>
 
    Drag the **Div** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001260226691](figures/en-us_image_0000001260226691.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001215226858](figures/en-us_image_0000001215226858.png)**Flex**, set **FlexDirection** to **column** so that the main axis of the component is vertical, and set both **JustifyContent** and **AlignItems** to **center** so that the child components of the **Div** component are centered along the main axis and cross axis. Below is an illustration of the operations.
 
-![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif)
+   ![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif)
 
 3. Add a **Text** component.
 
@@ -88,7 +88,7 @@ Open the index.visual file, right-click the existing template components on the
    
    In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
 
-![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png)
+   ![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png)
 
 2. [Delete the existing template components from the canvas.](#delete_origin_content)
 

en/application-dev/reference/apis/js-apis-system-time.md

 # Setting the System Time
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
->
+This module is used to set and obtain the current system date, time, and time zone.
+> **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
 
 ## Modules to Import
@@ -189,7 +189,7 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
 **Example**
 
   ```js
-  systemTime.getCurrentTime().then((data) => {
+  systemTime.getRealActiveTime().then((data) => {
       console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data));
   }).catch((error) => {
       console.error(`failed to systemTime.getRealActiveTime because ` + JSON.stringify(error));

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

 # ImageAnimator
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**<br>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **&lt;ImageAnimator&gt;** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
+The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
 
 
 ## Required Permissions
@@ -15,7 +15,7 @@ None
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
@@ -37,29 +37,29 @@ ImageAnimator()
 | iterations | number | 1 | No | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
 
 - AnimationStatus enums
-    | Name | Description | 
+  | Name | Description |
   | -------- | -------- |
-  | Initial | The animation is in the initial state. | 
-  | Running | The animation is being played. | 
-  | Paused | The animation is paused. | 
-  | Stopped | The animation is stopped. | 
+  | Initial | The animation is in the initial state. |
+  | Running | The animation is being played. |
+  | Paused | The animation is paused. |
+  | Stopped | The animation is stopped. |
 
 - FillMode enums
-    | Name | Description | 
+  | Name | Description |
   | -------- | -------- |
-  | None | After the playback is complete, the animation restores to the initial state. | 
-  | Forwards | After the playback is complete, the animation remains in the end state. | 
+  | None | After the playback is complete, the animation restores to the initial state. |
+  | Forwards | After the playback is complete, the animation remains in the end state. |
 
 
 ## Events
 
-  | Name | Description | 
+| Name | Description |
 | -------- | -------- | -------- |
-| onStart() =&gt; void | Triggered when the animation starts to play. | 
-| onPause() =&gt; void | Triggered when the animation playback is paused. | 
-| onRepeat() =&gt; void | Triggered when the animation playback is repeated. | 
-| onCancel() =&gt; void | Triggered when the animation playback is canceled. | 
-| onFinish() =&gt; void | Triggered when the animation playback is complete. | 
+| onStart() =&gt; void | Triggered when the animation starts to play. |
+| onPause() =&gt; void | Triggered when the animation playback is paused. |
+| onRepeat() =&gt; void | Triggered when the animation playback is repeated. |
+| onCancel() =&gt; void | Triggered when the animation playback is canceled. |
+| onFinish() =&gt; void | Triggered when the animation playback is complete. |
 
 
 ## Example
@@ -78,6 +78,7 @@ struct ImageAnimatorExample {
       ImageAnimator()
         .images([
           {
+            // The comment folder is at the same level as the pages folder.
             src: '/comment/bg1.jpg',
             duration: 500,
             width: 325,

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

 # Marquee
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**<br>
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -15,7 +15,7 @@ None
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
@@ -23,22 +23,22 @@ None
 Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
 
 - Parameters
-    | Name| Type| Mandatory| Default Value| Description| 
+    | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
-  | start | boolean | Yes| - | Whether to start scrolling.| 
-  | step | number | No| 6 | Scrolling step.| 
-  | loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.| 
-  | fromStart | boolean | No| true | Whether the text scrolls from the start.| 
-  | src | string | Yes| - | Text to scroll.| 
+  | start | boolean | Yes| - | Whether to start scrolling.|
+  | step | number | No| 6 | Scrolling step.|
+  | loop | number | No| -1 | Number of times the marquee will scroll. If the value is less than or equal to **0**, the marquee will scroll continuously.|
+  | fromStart | boolean | No| true | Whether the text scrolls from the start.|
+  | src | string | Yes| - | Text to scroll.|
 
 
 ## Events
 
-  | Name| Description| 
+| Name| Description|
 | -------- | -------- |
-| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling.| 
-| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end.| 
-| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.| 
+| onStart(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee starts scrolling.|
+| onBounce(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has reached the end.|
+| onFinish(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the marquee has finished scrolling.|
 
 
 ## Example