diff --git a/en/application-dev/reference/apis/js-apis-timer.md b/en/application-dev/reference/apis/js-apis-timer.md
index d144a95db8f59ca0605fd228b351380afe6feac8..f9e174b5147370f465e140d03aeba6b3802380a0 100644
--- a/en/application-dev/reference/apis/js-apis-timer.md
+++ b/en/application-dev/reference/apis/js-apis-timer.md
@@ -3,13 +3,6 @@
 
 ## setTimeout
 
-## Modules to Import
-
-
-```
-import Time from '@ohos.Time';
-```
-
 setTimeout(handler[,delay[,…args]]): number
 
 Sets a timer for the system to call a function after the timer goes off.
diff --git a/en/application-dev/reference/arkui-js/js-components-common-animation.md b/en/application-dev/reference/arkui-js/js-components-common-animation.md
index daa287ac149995c87c1a5477d24a0823f46a840b..24676a73232a85ae609e6ea07b403bdd78961bb4 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-animation.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-animation.md
@@ -2,14 +2,16 @@
 
 Components support dynamic rotation, translation, and scaling effects. These effects can be set in the **style** attribute or CSS files.
 
-
+> **NOTE**
+>
+> The initial APIs of this component  are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
 | Name                      | Type                                                         | Default Value                         | Description                                                  |
 | ------------------------- | ------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------ |
 | transform-origin          | string<sup>6+</sup> \| \<percentage> \| \<length> string<sup>6+</sup> \| \<percentage> \| \<length> | center center                         | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center |
-| transform                 | string                                                       | -                                     | Translation, rotation, and scaling attributes.<br/>For details, see [Table 1](js-components-common-animation.md). |
+| transform                 | string                                                       | -                                     | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
 | animation<sup>6+</sup>               | string                                                       | 0s ease 0s 1 normal none running none | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed. |
-| animation-name            | string                                                       | -                                     | @keyframes rule. For details, see [Table 2](js-components-common-animation.md). |
+| animation-name            | string                                                       | -                                     | @keyframes rule. For details, see **@keyframes**. |
 | animation-delay           | \<time>                                                      | 0                                     | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. |
 | animation-duration        | \<time>                                                      | 0                                     | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>NOTE:<br/>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played. |
 | animation-iteration-count | number \| infinite                                           | 1                                     | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely. |
@@ -17,40 +19,36 @@ Components support dynamic rotation, translation, and scaling effects. These eff
 | animation-direction<sup>6+</sup>     | string                                                       | normal                                | Mode of playing the animation.   <br>- **normal**: Plays the animation in forward loop mode.  <br>- **reverse**: Plays the animation in reverse loop mode.  <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.  <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction. |
 | animation-fill-mode       | string                                                       | none                                  | Start and end styles of the animation   <br>- **none**: No style is applied to the target before or after the animation is executed.  <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.  <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used..  <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. |
 | animation-play-state<sup>6+</sup>    | string                                                       | running                               | Current state of the animation.  <br>- **paused**: paused  <br>- **running**: playing |
-| transition<sup>6+</sup>              | string                                                       | all 0 ease 0                          | Transition effect when the component status is switched. The following four attributes can be set through the   <br>- **transition** attribute: **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.  <br>- **transition-duration**: duration required for completing the transition effect, in seconds.  <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported.  <br>- **transition-delay**: delay for starting the transition effect, in seconds. |
-
-**Table 1** Methods of the **transform** attribute
-
+| transition<sup>6+</sup>              | string                                                       | all 0 ease 0                          | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.  <br>- **transition-duration**: duration required for completing the transition effect, in seconds.  <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported.  <br>- **transition-delay**: delay for starting the transition effect, in seconds. |
 
+**Table 1** transform
 
 | Name          | Type                                   | Description                                                  |
 | ------------- | -------------------------------------- | ------------------------------------------------------------ |
-| none<sup>6+</sup>        | -                                      | No conversion is performed.                                  |
-| matrix<sup>6+</sup>      | \<number>                              | A matrix of six values, which represent scaleX, skewY, skewX, scaleY, translateX, translateY. |
-| matrix3d<sup>6+</sup>    | \<number>                              | A 4x4 matrix of 16 values.                                   |
-| translate     | \<length>\| \<percent>                 | Moves an element along the x-axis and y-axis.                |
-| translate3d<sup>6+</sup> | \<length>\| \<percent>                 | Three input parameters, indicating the translation distance of the x-axis, y-axis, and z-axis, respectively. |
-| translateX    | \<length>\| \<percent>                 | Moves an element along the x-axis.                           |
-| translateY    | \<length>\| \<percent>                 | Moves an element along the y-axis.                           |
-| translateZ<sup>6+</sup>  | \<length>\| \<percent>                 | Translation distance of the z-axis                           |
-| scale         | \<number>                              | Changes the size of an element. You need to set the target width and height on the x-axis and y-axis. |
-| scale3d<sup>6+</sup>     | \<number>                              | Three input parameters, indicating the scale ratio of the x-axis, y-axis, and z-axis, respectively. |
-| scaleX        | \<number>                              | Changes the element width.                                   |
-| scaleY        | \<number>                              | Changes the element height.                                  |
-| scaleZ<sup>6+</sup>      | \<number>                              | Scale ratio of the z-axis.                                   |
-| rotate        | \<deg> \| \<rad> \| \<grad><sup>6+</sup> \| \<turn><sup>6+</sup> | Rotates an element. You can set the element to rotate around its x-axis or y-axis. |
-| rotate3d<sup>6+</sup>    | \<deg> \| \<rad> \| \<grad> \| \<turn> | Four input parameters: The first three parameters are the rotation vectors of the x-axis, y-axis, and z-axis, and the fourth parameter is the rotation angle. |
+| none<sup>6+</sup>        | -                                      | Does not perform any transformation. |
+| matrix<sup>6+</sup>      | \<number>                              | Defines a matrix of six values, which represent scaleX, skewY, skewX, scaleY, translateX, translateY. |
+| matrix3d<sup>6+</sup>    | \<number>                              | Defines a 4x4 matrix of 16 values.                          |
+| translate     | \<length> \| \<percent>                | Moves an element in 2D space.      |
+| translate3d<sup>6+</sup> | \<length> \| \<percent>                | Moves an element in 3D space. There are three input parameters, indicating the translation distance of the x-axis, y-axis, and z-axis, respectively. |
+| translateX    | \<length> \| \<percent>                | Moves an element along the x-axis.                           |
+| translateY    | \<length> \| \<percent>                | Moves an element along the y-axis.                           |
+| translateZ<sup>6+</sup>  | \<length> \| \<percent>                | Moves an element along the z-axis. |
+| scale         | \<number>                              | Resizes an element in 2D space. You need to set the target width and height on the x-axis and y-axis. |
+| scale3d<sup>6+</sup>     | \<number>                              | Resizes an element in 3D space. There are three input parameters, indicating the scale ratio of the x-axis, y-axis, and z-axis, respectively. |
+| scaleX        | \<number>                              | Resizes an element along the x-axis. |
+| scaleY        | \<number>                              | Resizes an element along the y-axis. |
+| scaleZ<sup>6+</sup>      | \<number>                              | Resizes an element along the z-axis. |
+| rotate        | \<deg> \| \<rad> \| \<grad><sup>6+</sup> \| \<turn><sup>6+</sup> | Rotates an element in 2D space. You can set the element to rotate around its x-axis or y-axis. |
+| rotate3d<sup>6+</sup>    | \<deg> \| \<rad> \| \<grad> \| \<turn> | Rotates an element in 3D space. There are four input parameters: The first three parameters are the rotation vectors of the x-axis, y-axis, and z-axis, and the fourth parameter is the rotation angle. |
 | rotateX       | \<deg> \| \<rad> \| \<grad><sup>6+</sup> \| \<turn><sup>6+</sup> | Rotates an element around the x-axis.                        |
 | rotateY       | \<deg> \| \<rad> \| \<grad><sup>6+</sup> \| \<turn><sup>6+</sup> | Rotates an element around the y-axis.                        |
-| rotateZ<sup>6+</sup>     | \<deg> \| \<rad> \| \<grad> \| \<turn> | Rotation angle in the z-axis direction.                      |
-| skew<sup>6+</sup>        | \<deg> \| \<rad> \| \<grad> \| \<turn> | Two input parameters, indicating the 2D skew angle of the x-axis and y-axis, respectively. |
-| skewX<sup>6+</sup>       | \<deg> \| \<rad> \| \<grad> \| \<turn> | 2D skew angle of the x-axis.                                 |
-| skewY<sup>6+</sup>       | \<deg> \| \<rad> \| \<grad> \| \<turn> | 2D skew angle of the y-axis.                                 |
-| perspective<sup>6+</sup> | \<number>                              | Distance from the lens to the element's surface in the 3D perspective scenario. |
-
-**Table 2** Attributes available for the @keyframes rule
-
+| rotateZ<sup>6+</sup>     | \<deg> \| \<rad> \| \<grad> \| \<turn> | Rotates an element around the z-axis. |
+| skew<sup>6+</sup>        | \<deg> \| \<rad> \| \<grad> \| \<turn> | Skews an element in 2D space. There are two input parameters, indicating the 2D skew angle of the x-axis and y-axis, respectively. |
+| skewX<sup>6+</sup>       | \<deg> \| \<rad> \| \<grad> \| \<turn> | Skews an element along the x-axis in 2D space. |
+| skewY<sup>6+</sup>       | \<deg> \| \<rad> \| \<grad> \| \<turn> | Skews an element along the y-axis in 2D space. |
+| perspective<sup>6+</sup> | \<number>                              | Sets the distance from the lens to the element's surface in the 3D perspective scenario. |
 
+**Table 2** @keyframes
 
 | Name                  | Type                                                         | Default Value | Description                                                  |
 | --------------------- | ------------------------------------------------------------ | ------------- | ------------------------------------------------------------ |
@@ -58,20 +56,26 @@ Components support dynamic rotation, translation, and scaling effects. These eff
 | opacity               | number                                                       | 1             | Opacity value applied to the component after the animation is played. The value ranges from **0** to **1**. The default value is **1**. |
 | width                 | \<length>                                                    | -             | Width value applied to the component after the animation is played. |
 | height                | \<length>                                                    | -             | Height value applied to the component after the animation is played. |
-| transform             | string                                                       | -             | Transformation type applied to a component. For details, see [Table 1](js-components-common-animation.md#table28802443315). |
-| background-position<sup>6+</sup> | string \| \<percentage> \| \<length> string \| \<percentage> \| \<length> | 50% 50%       | Set the background image for a window. The unit can be percentage or px. The first value indicates the horizontal position, and the second value indicates the vertical position. If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br>- background-position: 200px 30%<br>- background-position: 100px top<br>- background-position: center center |
+| transform             | string                                                       | -             | Transformation type applied to the component. For details, see **transform**. |
+| background-position<sup>6+</sup> | string \| \<percentage> \| \<length> string \| \<percentage> \| \<length> | 50% 50%       | Position of the background image. The unit can be percentage or px. The first value indicates the horizontal position, and the second value indicates the vertical position. If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br>- background-position: 200px 30%<br>- background-position: 100px top<br>- background-position: center center |
 
 If there is no default value for when an animation will start or end, use **from** and **to** to specify the start and end of the display. You can use a percentage value to specify an intermediate state of the animation.<sup>6+</sup> The following is an example:
 
-```
+```html
+<!-- xxx.hml -->
 <div class="container">
   <div class="rect">
   </div>
 </div>
+```
+
+```css
+/* xxx.css */
 .container {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 150px;
 }
 .rect{
   width: 200px;
@@ -97,14 +101,17 @@ If there is no default value for when an animation will start or end, use **from
 }
 ```
 
-![img](figures/en-us_image_0000001173324797.gif)
+![en-us_image_0000001173324797](figures/en-us_image_0000001173324797.gif)
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="simpleAnimation simpleSize" style="animation-play-state: {{playState}}"></div>
   <text onclick="toggleState">animation-play-state: {{playState}}</text>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -123,6 +130,9 @@ If there is no default value for when an animation will start or end, use **from
   from { transform: translateX(0px); }
   to { transform: translateX(100px); }
 }
+```
+
+```js
 // xxx.js
 export default {
   data: {
@@ -139,11 +149,14 @@ export default {
 }
 ```
 
-![img](figures/en-us_image_0000001127285034.gif)
+![en-us_image_0000001127285034](figures/en-us_image_0000001127285034.gif)
 
-```
+```html
 <!-- xxx.hml -->
 <div id='img' class="img"></div>
+```
+
+```css
 /* xxx.css */
 .img {
   width: 294px;
@@ -164,10 +177,16 @@ export default {
   from { background-position: 0% 0%;}
   to { background-position: 100% 0%;}
 }
+```
+
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="content"></div>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
     flex-direction: column;
@@ -188,6 +207,12 @@ export default {
 }
 ```
 
-![img](figures/en-us_image_0000001152833768.gif)
+![en-us_image_0000001152833768](figures/en-us_image_0000001152833768.gif)
 
-> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** The @keyframes rule with **from** and **to** defined cannot be dynamically bound to an element. The following figure shows the meanings of end and start in the steps function. ![img](figures/en-us_image_0000001127125220.png)
\ No newline at end of file
+> **NOTE**
+>
+> The @keyframes rule with **from** and **to** defined cannot be dynamically bound to an element.
+>
+> The following figure shows the meanings of **end** and **start** in the **steps** function.
+>
+> ![en-us_image_0000001127125220](figures/en-us_image_0000001127125220.png)
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
index e0468dfe5e7d39816efc9e8a6c10a08a3412321c..8fe71bfe50f7c85128ee538c02ff8e63d2a6fda9 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-sharp-clipping.md
@@ -1,7 +1,8 @@
 # Shape Clipping
 
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> **NOTE**
+>
 > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -13,16 +14,17 @@ None
 ## Attributes
 
 
-  | Name | Type | Default Value | Description | 
+| Name | Type | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| clip | Shape \| boolean | false | Specifies a clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline. | 
-| mask | Shape | - | Adds a mask of the specified shape to the current component. | 
+| clip | Shape \| boolean | false | Clip mode. The value **Shape** indicates that the current component is cropped based on the specified shape. The value **boolean** specifies whether to clip the component based on the edge outline. |
+| mask | Shape | - | Mask of the specified shape for the current component. |
 
 
 ## Example
 
-  
-```
+
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ClipAndMaskExample {
@@ -30,24 +32,24 @@ struct ClipAndMaskExample {
     Column({ space: 5 }) {
       Text('clip').fontSize(9).width('90%').fontColor(0xCCCCCC)
       // Clip the image by using a circle with a diameter of 280px.
-      Image('/comment/bg.jpg')
+      Image($r('app.media.example'))
         .clip(new Circle({ width: 80, height: 80 }))
         .width('500px').height('280px')
 
       Row() {
-        Image('/comment/bg.jpg').width('500px').height('280px')
+        Image($r('app.media.example')).width('500px').height('280px')
       }
       .clip(true)
       .borderRadius(20)
 
       Text('mask').fontSize(9).width('90%').fontColor(0xCCCCCC)
       // Add a 500 px x 280 px mask to the image.
-      Image('/comment/bg.jpg')
+      Image($r('app.media.example'))
         .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Gray))
         .width('500px').height('280px')
 
       // Add a 280 px x 280 px circle mask to the image.
-      Image('/comment/bg.jpg')
+      Image($r('app.media.example'))
         .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Gray))
         .width('500px').height('281px')
     }
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642001.gif b/en/application-dev/ui/figures/en-us_image_0000001118642001.gif
new file mode 100644
index 0000000000000000000000000000000000000000..03a0350651c4e4e1fa70593befa45455b662acd1
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642001.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642002.gif b/en/application-dev/ui/figures/en-us_image_0000001118642002.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f07cd18d127944605658f4424ad3b41a39b553c3
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642002.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642003.png b/en/application-dev/ui/figures/en-us_image_0000001118642003.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c514af73d06209da17532eb6e3c9657f7a97060
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642003.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642004.gif b/en/application-dev/ui/figures/en-us_image_0000001118642004.gif
new file mode 100644
index 0000000000000000000000000000000000000000..eaee7ddb8a27352887aa17b30e906408bd236e9e
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642004.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642005.gif b/en/application-dev/ui/figures/en-us_image_0000001118642005.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7d12fd80ac4f5ceec08b463b24eb48935227f621
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642005.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642006.png b/en/application-dev/ui/figures/en-us_image_0000001118642006.png
new file mode 100644
index 0000000000000000000000000000000000000000..90a3e2af63bcc5c18114bfd8d112ca58f2c69e1b
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642006.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642007.gif b/en/application-dev/ui/figures/en-us_image_0000001118642007.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9325cd75369ef2a2b1d7784ce5aeef97ae1ec71c
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642007.gif differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642008.png b/en/application-dev/ui/figures/en-us_image_0000001118642008.png
new file mode 100644
index 0000000000000000000000000000000000000000..4e3f22225a2e1a04c19b9c2d948d8b8351c73056
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642008.png differ
diff --git a/en/application-dev/ui/figures/en-us_image_0000001118642009.gif b/en/application-dev/ui/figures/en-us_image_0000001118642009.gif
new file mode 100644
index 0000000000000000000000000000000000000000..057e146194b5e63ebeb5b07b0556e3495a4ce2ca
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001118642009.gif differ
diff --git a/en/application-dev/ui/js-framework-syntax-hml.md b/en/application-dev/ui/js-framework-syntax-hml.md
index d83c9eb81d8acf91d2ac5a67a266f1728d624874..1dce9c7c963bfbc5255ee19d7ae6e4add5c73102 100644
--- a/en/application-dev/ui/js-framework-syntax-hml.md
+++ b/en/application-dev/ui/js-framework-syntax-hml.md
@@ -27,8 +27,12 @@ The OpenHarmony Markup Language (HML) is an HTML-like language that allows you t
   <text> {{content[1]}} </text>
 </div>
 ```
-
-
+```
+/*xxx.css*/
+.container{
+    margin: 200px;
+}
+```
 ```
 // xxx.js
 export default {
@@ -41,11 +45,13 @@ export default {
 }
 ```
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> **NOTE**
+>
 > - To make the array data modification take effect, use the splice method to change array items.
 >
 > - ECMAScript 6 (ES6) syntax is not supported in HML.
 
+![en-us_image_0000001118642003](figures/en-us_image_0000001118642003.png)
 
 ## Common Event Binding
 
@@ -127,17 +133,19 @@ Events can be written in the following formats:
   }
   ```
 
+![en-us_image_0000001118642002](figures/en-us_image_0000001118642002.gif)
 
 ## Bubbling Event Binding<sup>5+</sup>
 
 Bubbling event binding covers the following:
 
-- Bind an event callback for event bubbling: on:{event}.bubble. on:{event} is equivalent to on:{event}.bubble.
-
-- Bind an event callback, but stop the event from bubbling upwards: grab:{event}.bubble. grab:{event} is equivalent to grab:{event}.bubble.
-  > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-  > For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md)
+- Bind an event callback for event bubbling: **on:{event}.bubble**. **on:{event}** is equivalent to **on:{event}.bubble**.
 
+- Bind an event callback, but stop the event from bubbling upwards: **grab:{event}.bubble**. **grab:{event}** is equivalent to **grab:{event}.bubble**.
+  > **NOTE**
+  >
+> For details about bubbling events, see [Universal Events](../reference/arkui-js/js-components-common-events.md).
+  
 - Example
 
   ```
@@ -146,7 +154,7 @@ Bubbling event binding covers the following:
      <!-- Bind an event callback for event bubbling.5+ -->
       <div on:touchstart.bubble="touchstartfunc"></div>
       <div on:touchstart="touchstartfunc"></div>
-      <!-- Bind an event callback, but stop the event from bubbling upwards. 5+ -->
+      <!-- Bind an event callback, but stop the event from bubbling upwards.5+ -->
       <div grab:touchstart.bubble="touchstartfunc"></div>
       <div grab:touchstart="touchstartfunc"></div>
       <!-- Bind an event callback for event bubbling.6+ -->
@@ -171,7 +179,8 @@ Bubbling event binding covers the following:
   }
   ```
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> **NOTE**
+>
 > Events bound using a traditional statement (such as onclick) will bubble only when the API version in use is 6 or later.
 
 ## Capturing Event Binding<sup>5+</sup>
@@ -180,9 +189,9 @@ Touch events can be captured. In the capture phase, which precedes the bubbling
 
 Event capturing binding includes:
 
-- Bind an event callback for event capturing: on:{event}.capture.
+- Bind an event callback for event capturing: **on:{event}.capture**.
 
-- Bind an event callback, but stop the event from being captured during downward transfer: grab:{event}.capture.
+- Bind an event callback, but stop the event from being captured during downward transfer: **grab:{event}.capture**.
 
 - Example
 
@@ -248,9 +257,9 @@ export default {
 }
 ```
 
-The tid attribute accelerates the for loop and improves the re-rendering efficiency when data in a loop changes.
+The **tid** attribute accelerates the for loop and improves the re-rendering efficiency when data in a loop changes.
 
-The tid attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, tid="id" indicates that the id attribute of each element is its unique ID.
+The **tid** attribute specifies the unique ID of each element in the array. If it is not specified, the index of each element in the array is used as the ID. For example, **tid="id"** indicates that the **id** attribute of each element is its unique ID.
 
 The for loop supports the following statements:
 
@@ -260,17 +269,18 @@ The for loop supports the following statements:
 
 - for="(i, v) in array": i indicates the element index, and v indicates the element variable. All elements of the array object will be looped through.
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
+> **NOTE**
+>
 > - Each element in the array must have the data attribute specified by tid. Otherwise, an exception may occur.
 >
 > - The attribute specified by tid in the array must be unique. Otherwise, performance loss occurs. In the above example, only id and name can be used as tid because they are unique fields.
 >
 > - The tid field does not support expressions.
 
-
+![en-us_image_0000001118642001](figures/en-us_image_0000001118642001.gif)
 ## Conditional Rendering
 
-There are two ways to implement conditional rendering: if-elif-else or show. In if-elif-else, when the if statement evaluates to false, the component is not built in the VDOM and is not rendered. For show, when show is false, the component is not rendered but is built in the VDOM. In addition, the if-elif-else statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
+There are two ways to implement conditional rendering: **if-elif-else** or **show**. In **if-elif-else**, when the if statement evaluates to **false**, the component is not built in the VDOM and is not rendered. For show, when **show** is **false**, the component is not rendered but is built in the VDOM. In addition, the **if-elif-else** statements must be used in sibling nodes. Otherwise, the compilation fails. The following example uses both ways to implement conditional rendering:
 
 
 ```
@@ -278,8 +288,8 @@ There are two ways to implement conditional rendering: if-elif-else or show. In
 <div class="container">
   <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
   <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
-  <text if="{{visible}}"> Hello-World1 </text>
-  <text elif="{{display}}"> Hello-World2 </text>
+  <text if="{{visible}}"> Hello-world1 </text>
+  <text elif="{{display}}"> Hello-world2 </text>
   <text else> Hello-World </text>
 </div>
 ```
@@ -315,8 +325,9 @@ export default {
 }
 ```
 
-In the optimized rendering (show), if show is true, the node is rendered properly; if it is false, the display style will be none.
+![en-us_image_0000001118642004](figures/en-us_image_0000001118642004.gif)
 
+In the optimized rendering (**show**), if **show** is **true**, the node is rendered properly; if it is false, the display style will be none.
 
 ```
 <!-- xxx.hml -->
@@ -353,13 +364,15 @@ export default {
 }
 ```
 
-> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
-> Do not use for and if attributes at the same time in an element.
+> **NOTE**
+>
+> Do not use **for** and **if** attributes at the same time in an element.
+
+![en-us_image_0000001118642005](figures/en-us_image_0000001118642005.gif)
 
 ## Logic Control Block
 
-\<block> makes loop rendering and conditional rendering more flexible. A \<block> will not be compiled as a real component. **NOTE** that the \<block> tag supports only the for and if attributes.
-
+**\<block>** makes loop rendering and conditional rendering more flexible. A \<block> will not be compiled as a real component. Note that the **\<block>** tag supports only the for and if attributes.
 
 ```
 <!-- xxx.hml -->
@@ -390,10 +403,11 @@ export default {
 }
 ```
 
-## Template Reference
+![en-us_image_0000001118642006](figures/en-us_image_0000001118642006.png)
 
-HML supports using elements to reference template files. For details, see Custom Components.
+## Template Reference
 
+HML supports using `element` to reference template files. For details, see [Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md).
 
 ```
 <!-- template.hml -->
diff --git a/en/application-dev/ui/js-framework-syntax-js.md b/en/application-dev/ui/js-framework-syntax-js.md
index 6651a84e33a77efe6020a087a830150b3d71f783..9ccbf53af7a184561797a580cc27b02c5f0d90a7 100644
--- a/en/application-dev/ui/js-framework-syntax-js.md
+++ b/en/application-dev/ui/js-framework-syntax-js.md
@@ -9,17 +9,18 @@ You can use a .js file in the ECMAScript compliant JavaScript language to define
 The ES6 syntax is supported.
 
 - Module declaration
+  
   Import functionality modules.
 
-  
   ```
   import router from '@system.router';
   ```
 
 - Code reference
+  
   Import JavaScript code.
 
-  
+
   ```
   import utils from '../../common/utils.js';
   ```
@@ -27,22 +28,22 @@ The ES6 syntax is supported.
 
 ## Objects
 
-- Application Object
-    | Attribute | Type | Description | 
+- Application objects
+    | Name | Type | Description |
   | -------- | -------- | -------- |
-  | $def | Object | Object that is exposed in the app.js file and obtained by this.$app.$def.<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:<br/>> Application objects do not support data binding. Data update should be triggered on the UI. | 
+  | $def | Object | Object that is exposed in the app.js file and obtained by `this.$app.$def`.<br/>> **NOTE**<br/>> Application objects do not support data binding. Data update should be triggered on the UI. |
 
-  Example Code
+  Example
 
   
   ```
   // app.js
   export default {
     onCreate() {
-      console.info('AceApplication onCreate');
+      console.info('Application onCreate');
     },
     onDestroy() {
-      console.info('AceApplication onDestroy');
+      console.info('Application onDestroy');
     },
     globalData: {
       appData: 'appData',
@@ -77,24 +78,24 @@ The ES6 syntax is supported.
   ```
 
 - Page objects
-    | Attribute | Type | Description |
+  | Attribute | Type | Description |
   | -------- | -------- | -------- |
   | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid).<br/>Do not use this attribute and private or public at the same time. |
   | $refs | Object | DOM elements or child component instances that have registered the ref attribute. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element). |
   | private | Object | Data model of the page. Private data attribute can be modified only on the current page. |
   | public | Object | Data model of the page. Behaviors of public data attributes are the same as those of the data attribute. |
-  | props | Array/Object | Used for communication between components. This attribute can be transferred to components via &lt;tag xxxx='value'&gt;. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
-  | computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md). |
+  | props | Array/Object | Used for communication between components. This attribute can be transferred to components via &lt;tag xxxx='value'&gt;. A props name must be in lowercase and cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (for, if, show, and tid). Currently, props does not support functions. For details, see [props](../reference/arkui-js/js-components-custom-props.md). |
+  | computed | Object | Used for pre-processing an object for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words. For details, see [props](../reference/arkui-js/js-components-custom-props.md). |
 
-## Functions
+## Methods
 
-- Data functions
-    | Function | Parameter | Description | 
+- Data methods
+  | Name | Parameter | Description |
   | -------- | -------- | -------- |
-  | $set | key: string, value: any | Adds an attribute or modifies an existing attribute.<br/>Usage:<br/>this.$set('_key_',_value_): Add an attribute. | 
-  | $delete | key: string | Deletes an attribute.<br/>Usage:<br/>this.$delete('_key_'): Delete an attribute. | 
+  | $set | key: string, value: any | Adds an attribute or modifies an existing attribute.<br/>Usage:<br/>this.$set('_key_',_value_): Add an attribute. |
+  | $delete | key: string | Deletes an attribute.<br/>Usage:<br/>this.$delete('key'): Delete an attribute. |
 
-  Example Code
+  Example
 
   
   ```
@@ -116,47 +117,47 @@ The ES6 syntax is supported.
   }
   ```
 
-- Public functions
-    | Function | Parameter | Description |
+- Public methods
+  | Name | Parameter | Description |
   | -------- | -------- | -------- |
   | $element | id: string | Obtains the component with a specified ID. If no ID is specified, the root component is returned. For example code, see [Obtaining a DOM element](#obtaining-a-dom-element).<br/>Usage:<br/>```<div id='_xxx_'></div>```<br/>- this.$element('_xxx_'): Obtain the component whose ID is _xxx_.<br/>- this.$element(): Obtain the root component. |
   | $rootElement | None | Obtains the root element.<br/>Usage: this.$rootElement().scrollTo({ duration: 500, position: 300 }), which scrolls the page by 300 px within 500 ms. |
   | $root | N/A | Obtains the root ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
   | $parent | N/A | Obtains the parent ViewModel instance. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel). |
-  | $child | id: string | Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel).<br/>Usage:<br/>this.$child('_xxx_'): Obtain the ViewModel instance of a custom child component whose ID is _xxx_. |
+  | $child | id: string | Obtains the ViewModel instance of a custom child component with a specified ID. For example code, see [Obtaining the ViewModel](#obtaining-the-viewmodel).<br/>Usage:<br/>this.$child('xxx'): Obtain the ViewModel instance of a custom child component whose ID is _xxx_. |
 
-- Event function
-    | Function | Parameter | Description |
+- Event methods
+  | Name | Parameter | Description |
   | -------- | -------- | -------- |
-  | $watch | data: string, callback: string \| Function | Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see [Custom Component](../reference/arkui-js/js-components-custom-props.md)<br/>Usage:<br/>this.$watch('_key_',_callback_) |
+  | $watch | data: string, callback: string \| Function | Listens for attribute changes. If the value of the data attribute changes, the bound event is triggered. For details, see [props](../reference/arkui-js/js-components-custom-props.md)<br/>Usage:<br/>this.$watch('key', callback) |
 
-- Page function
-    | Function | Parameter | Description |
+- Page methods
+  | Name | Parameter | Description |
   | -------- | -------- | -------- |
   | scrollTo<sup>6+</sup> | scrollPageParam:  ScrollPageParam | Scrolls the page to the target position. You can specify the position using the ID selector or scrolling distance. |
 
-    Table1 ScrollPageParam<sup>6+</sup>
+  **Table 1** ScrollPageParam<sup>6+</sup>
   
   | Name | Type | Default Value | Description |
   | -------- | -------- | -------- | -------- |
   | position | number | - | Position to scroll to. |
   | id | string | - | ID of the element to be scrolled to. |
   | duration | number | 300 | Scrolling duration, in milliseconds. |
-  | timingFunction | string | ease | Animation curve for scrolling. Available option:<br/>[Animation Styles](../reference/arkui-js/js-components-common-animation.md) |
+  | timingFunction | string | ease | Animation curve for scrolling. Available options:<br/>[Animation Styles](../reference/arkui-js/js-components-common-animation.md) |
   | complete | () => void | - | Callback to be invoked when the scrolling is complete. |
 
-  Example:
+  Example
 
   
   ```
-  this.$rootElement.scrollTo({position: 0})
-  this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
+  this.$rootElement().scrollTo({position: 0})
+  this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
   ```
 
 
 ## Obtaining a DOM Element
 
-1. Use $refs to obtain a DOM element.
+1. Use `$refs` to obtain a DOM element.
   
    ```
    <!-- index.hml -->
@@ -190,11 +191,11 @@ The ES6 syntax is supported.
    };
    ```
 
-2. Call $element to obtain a DOM element.
+2. Call `$element` to obtain a DOM element.
   
    ```
    <!-- index.hml -->
-   <div class="container">
+   <div class="container" style="width:500px;height: 700px; margin: 100px;">
      <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    ```
@@ -224,11 +225,12 @@ The ES6 syntax is supported.
    };
    ```
 
+![en-us_image_0000001118642007](figures/en-us_image_0000001118642007.gif)
+
 ## Obtaining the ViewModel
 
 The following shows files of the root page:
 
-
 ```
 <!-- root.hml -->
 <element name='parentComp' src='../../common/component/parent/parent.hml'></element>
@@ -250,8 +252,9 @@ export default {
 }
 ```
 
-Customize the parent component.
+![en-us_image_0000001118642008](figures/en-us_image_0000001118642008.png)
 
+Customize the parent component.
 
 ```
 <!-- parent.hml -->
@@ -288,7 +291,7 @@ Customize the child component.
 <!-- child.hml -->
 <div class="item" onclick="textClicked">
   <text class="text-style" onclick="childClicked">Child component clicked</text>
-  <text class="text-style" if="{{show}}">Hello child component</text>
+  <text class="text-style" if="{{isShow}}">Hello child component</text>
 </div>
 ```
 
@@ -297,11 +300,11 @@ Customize the child component.
 // child.js
 export default {
   data: {
-    show: false,
+    isShow: false,
     text: 'I am the child component!',
   },
   childClicked () {
-    this.show = !this.show;
+    this.isShow = !this.isShow;
     console.info('child component get parent text');
     console.info('${this.$parent().text}');
     console.info('child component get root text');
@@ -309,3 +312,5 @@ export default {
   },
 }
 ```
+
+![en-us_image_0000001118642009](figures/en-us_image_0000001118642009.gif)
\ No newline at end of file