diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md
index 3abd925eb795d9efc2b9ea941d290d089cfd8a3a..4fe02e2b418d6654b5da5f40e479f3d12c4a9ae9 100644
--- a/en/application-dev/quick-start/start-overview.md
+++ b/en/application-dev/quick-start/start-overview.md
@@ -16,12 +16,12 @@ Before you begin, there are some basic concepts that will help you better unders
 
 OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities.
 
-ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
+ArkUI comes with two development paradigms: eTS-based declarative development paradigm (declarative development paradigm for short) and JavaScript-compatible web-like development paradigm (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
 
 | **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** |
 | -------- | -------- | -------- | -------- | -------- |
+| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven        | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
 | Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers |
-| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
 
 For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.
 
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-input.md b/en/application-dev/reference/arkui-js/js-components-basic-input.md
index 1f10982593566d8ad21467a9613d260ab6e6a3ec..9ea5ccdb276cfabdf03a071a5fc5e92778e2b6a8 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-input.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-input.md
@@ -20,23 +20,23 @@ Not supported
 
 In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
-| Name                            | Type                   | Default Value   | Mandatory| Description                                                        |
-| -------------------------------- | ----------------------- | --------- | ---- | ------------------------------------------------------------ |
-| type                             | string                  | text<br>| No  | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified.  <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
-| checked                          | boolean                 | false     | No  | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**.             |
-| name                             | string                  | -         | No  | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**.            |
-| value                            | string                  | -         | No  | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
-| placeholder                      | string                  | -         | No  | Content of the hint text. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
-| maxlength                        | number                  | -         | No  | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.|
-| enterkeytype                     | string                  | default   | No  | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
-| headericon                       | string                  | -         | No  | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
-| showcounter<sup>5+</sup>         | boolean                 | false     | No  | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set.     |
-| menuoptions<sup>5+</sup>         | Array&lt;MeunOption&gt; | -         | No  | Menu options displayed after users click the **More** button.              |
-| autofocus<sup>6+</sup>           | boolean                 | false     | No  | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
-| selectedstart<sup>6+</sup>       | number                  | -1        | No  | Start position for text selection.                                |
-| selectedend<sup>6+</sup>         | number                  | -1        | No  | End position for text selection.                                |
-| softkeyboardenabled<sup>6+</sup> | boolean                 | true      | No  | Whether to display the soft keyboard during editing.                                  |
-| showpasswordicon<sup>6+</sup>    | boolean                 | true      | No  | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**.        |
+| Name                              | Type                     | Default Value      | Mandatory  | Description                                      |
+| -------------------------------- | ----------------------- | --------- | ---- | ---------------------------------------- |
+| type                             | string                  | text<br>| No   | Type of the input component. Available values include **text**, **email**, **date**, **time**, **number**, **password**, **button**, **checkbox**, and **radio**.<br>The **text**, **email**, **date**, **time**, **number**, and **password** types can be dynamically switched and modified.<br>The **button**, **checkbox**, and **radio** types cannot be dynamically modified.  <br>- **button**: a button that can be clicked.<br>- **checkbox**: a check box.<br>- **radio**: a radio button that allows users to select one from multiple others with the same name.<br>- **text**: a single-line text field.<br>- **email**: a field used for an email address.<br>- **date**: date component, including the year, month, and day, but excluding time.<br>- **time**: time component, without the time zone.<br>- **number**: field for entering digits.<br>- **password**: password field, in which characters will be shielded.|
+| checked                          | boolean                 | false     | No   | Whether the **\<input>** component is selected. This attribute is valid only when **type** is set to **checkbox** or **radio**.        |
+| name                             | string                  | -         | No   | Name of the **\<input>** component.<br>This attribute is mandatory when **type** is set to **radio**.     |
+| value                            | string                  | -         | No   | Value of the **\<input>** component. When **type** is **radio**, this attribute is mandatory and the value must be unique for radio buttons with the same name.|
+| placeholder                      | string                  | -         | No   | Content of the hint text. This attribute is available only when the component type is set to **text** \|email\|date\|time\|number\|**password**.|
+| maxlength                        | number                  | -         | No   | Maximum number of characters that can be entered in the input box. The empty value indicates no limit.          |
+| enterkeytype                     | string                  | default   | No   | Type of the **Enter** key on the soft keyboard. The value cannot be dynamically updated.<br>Available values include:<br>- default<br>- next<br>- go<br>- done<br>- send<br>- search<br>Except for the **next** type, clicking the Enter key hides the soft keyboard.|
+| headericon                       | string                  | -         | No   | Icon resource path before text input. This icon does not support click events and is unavailable for **button**, **checkbox**, and **radio** types. The supported icon image formats are JPG, PNG, and SVG.|
+| showcounter<sup>5+</sup>         | boolean                 | false     | No   | Whether to display the character counter for an input box. This attribute takes effect only when **maxlength** is set.        |
+| menuoptions<sup>5+</sup>         | Array&lt;MenuOption&gt; | -         | No   | Menu options displayed after users click the **More** button.                 |
+| autofocus<sup>6+</sup>           | boolean                 | false     | No   | Whether to automatically obtain focus.<br>This attribute setting does not take effect on the application home page. You can enable a text box on the home page to automatically obtain focus, by delaying the **focus** method call (for about 100–500 ms) in **onActive**.|
+| selectedstart<sup>6+</sup>       | number                  | -1        | No   | Start position for text selection.                          |
+| selectedend<sup>6+</sup>         | number                  | -1        | No   | End position for text selection.                          |
+| softkeyboardenabled<sup>6+</sup> | boolean                 | true      | No   | Whether to display the soft keyboard during editing.                           |
+| showpasswordicon<sup>6+</sup>    | boolean                 | true      | No   | Whether to display the icon at the end of the password text box. This attribute is available only when **type** is set to **password**.        |
 
 **Table 1** MenuOption<sup>5+</sup>
 
@@ -50,14 +50,14 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
 
 In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
-| Name                    | Type                      | Default Value    | Mandatory| Description                                                        |
-| ------------------------ | -------------------------- | ---------- | ---- | ------------------------------------------------------------ |
-| color                    | &lt;color&gt;              | \#e6000000 | No  | Font color of the single-line text box or button.                              |
-| font-size                | &lt;length&gt;             | 16px       | No  | Font size of the single-line text box or button.                              |
-| allow-scale              | boolean                    | true       | No  | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
-| placeholder-color        | &lt;color&gt;              | \#99000000 | No  | Color of the hint text in the single-line text box. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
-| font-weight              | number&nbsp;\|&nbsp;string | normal     | No  | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>** component](../arkui-js/js-components-basic-text.md).|
-| caret-color<sup>6+</sup> | &lt;color&gt;              | -          | No  | Color of the input cursor.                                        |
+| Name                      | Type                        | Default Value       | Mandatory  | Description                                      |
+| ------------------------ | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| color                    | &lt;color&gt;              | \#e6000000 | No   | Font color of the single-line text box or button.                         |
+| font-size                | &lt;length&gt;             | 16px       | No   | Font size of the single-line text box or button.                         |
+| allow-scale              | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
+| placeholder-color        | &lt;color&gt;              | \#99000000 | No   | Color of the hint text in the single-line text box. This attribute is available only when the component type is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
+| font-weight              | number \| string | normal     | No   | Font weight of the single-line text box or button. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md) component. |
+| caret-color<sup>6+</sup> | &lt;color&gt;              | -          | No   | Color of the caret.                              |
 
 
 ## Events
@@ -65,30 +65,32 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
 In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
 - When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the following events are supported.
+
   | Name                       | Parameter                                      | Description                                      |
   | ------------------------- | ---------------------------------------- | ---------------------------------------- |
-  | change                    | {<br>&nbsp;value: inputValue<br>&nbsp;}  | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
-  | enterkeyclick             | {<br>&nbsp;value: enterKey<br>&nbsp;}    | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
-  | translate<sup>5+</sup>    | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
-  | share<sup>5+</sup>        | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
-  | search<sup>5+</sup>       | {<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
-  | optionselect<sup>5+</sup> | {<br>&nbsp;index: optionIndex,<br>&nbsp;value:&nbsp;selectedText<br>&nbsp;} | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
-  | selectchange<sup>6+</sup> | {<br>start:&nbsp;number,<br>end:&nbsp;number<br>&nbsp;} | Triggered when the text selection changes.                            |
+  | change                    | {<br> value: inputValue<br> }  | Triggered when the content entered in the input box changes. The most recent content entered by the user is returned.<br>If you change the **value** attribute directly, this event will not be triggered.|
+  | enterkeyclick             | {<br> value: enterKey<br> }    | Triggered when the **Enter** key on the soft keyboard is clicked. The type of the **Enter** key is returned, which is of the number type. Available values are as follows:<br>- **2**: returned if **enterkeytype** is **go**.<br>- **3**: returned if **enterkeytype** is **search**.<br>- **4**: returned if **enterkeytype** is **send**.<br>- **5**: returned if **enterkeytype** is **next**.<br>- **6**: returned if **enterkeytype** is **default**, **done**, or is not set.|
+  | translate<sup>5+</sup>    | {<br> value: selectedText<br> } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
+  | share<sup>5+</sup>        | {<br> value: selectedText<br> } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
+  | search<sup>5+</sup>       | {<br> value: selectedText<br> } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
+  | optionselect<sup>5+</sup> | {<br> index: optionIndex,<br> value: selectedText<br> } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
+  | selectchange<sup>6+</sup> | {<br>start: number,<br>end: number<br> } | Triggered when the text selection changes.                            |
 
 - When **type** is set to **checkbox** or **radio**, the following events are supported.
+
   | Name    | Parameter                                      | Description                                      |
   | ------ | ---------------------------------------- | ---------------------------------------- |
-  | change | {<br>&nbsp;checked:true&nbsp;\|&nbsp;false&nbsp;<br>} | Triggered when the checked status of the **checkbox** or **radio** button changes.|
+  | change | {<br> checked:true \| false <br>} | Triggered when the checked status of the **checkbox** or **radio** button changes.|
 
 ## Methods
 
 In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
 
-| Name               | Parameter                                                        | Description                                                        |
-| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| focus               | {<br>&nbsp;focus:&nbsp;true\|false<br>&nbsp;}:<br>If **focus** is not passed, the default value **true** is used.| Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or password, the input method can be displayed or hidden.|
-| showError           | {<br>&nbsp;error:&nbsp;string&nbsp;<br>}                     | Displays the error message. This attribute is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**.|
-| delete<sup>6+</sup> | -                                                            | Deletes the text content based on the current cursor position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the cursor if the current input component does not have a cursor.|
+| Name                 | Parameter                                      | Description                                      |
+| ------------------- | ---------------------------------------- | ---------------------------------------- |
+| focus               | {<br> focus: true\|false<br> }:<br>If **focus** is not passed, the default value **true** is used. | Obtains or loses focus. When **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**, the input method can be displayed or collapsed. |
+| showError           | {<br> error: string <br>}                | Displays the error message. This method is available when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**. |
+| delete<sup>6+</sup> | -                                        | Deletes text based on the current caret position when **type** is set to **text**, **email**, **date**, **time**, **number**, or **password**; deletes the last character and displays the caret if the current input component does not have a caret. |
 
 ## Example
 
@@ -100,26 +102,28 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
        headericon="/common/search.svg" placeholder="Please input text" onchange="change"
        onenterkeyclick="enterkeyClick">
      </input>
-     <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
+     <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input>
    </div>
    ```
 
    ```css
    /* xxx.css */
    .content {
-     width: 60%;
+     width: 100%;
      flex-direction: column;
      align-items: center;
    }
    .input {
+     width: 60%;
      placeholder-color: gray;
    }
    .button {
+     width: 60%;
      background-color: gray;
      margin-top: 20px;
-   }
+    }
    ```
-
+   
    ```js
    // xxx.js
    import prompt from '@system.prompt'
@@ -141,11 +145,11 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
          error: 'error text'
        });
      },
-   }
+    }
    ```
 
    ![1-2](figures/1-2.png)
-
+   
 2. Common button
    ```html
    <!-- xxx.hml -->
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-label.md b/en/application-dev/reference/arkui-js/js-components-basic-label.md
index eef2bce9d40bc947896fd8a1ed40377e14666484..9a45521ecb6ed4d614ab43abafdcd6317c31530a 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-label.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-label.md
@@ -1,61 +1,67 @@
 # label
 
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<label>** component defines labels for the **\<input>**, **\<button>**, and **\<textarea>** components. When a label is clicked, the click effect of the component associated with the label will be triggered.
 
 ## Required Permissions
 
 None
 
-## Child Component
+
+## Child Components
 
 Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name    | Type    | Default Value | Mandatory  | Description         |
+| ------ | ------ | ---- | ---- | ----------- |
+| target | string | -    | No   | Attribute ID of the target component.|
 
-| Name   | Type   | Default Value | Mandatory | Description                           |
-| ------ | ------ | ------------- | --------- | ------------------------------------- |
-| target | string | -             | No        | Attribute ID of the target component. |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
-
-
-
-| Name              | Type             | Default Value | Mandatory | Description                                                  |
-| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
-| color             | \<color>          | #e5000000     | No        | Text color.                                                  |
-| font-size         | \<length>         | 30px          | No        | Font size (px).                                              |
-| allow-scale       | boolean          | true          | No        | Whether the text size changes with the system's font size settings.NOTE:For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file. |
-| letter-spacing    | \<length>         | 0px           | No        | Character spacing (px).                                      |
-| font-style        | string           | normal        | No        | Font style. Available values are as follows:<br>-**normal**: standard font style<br>-**italic**: italic font style<br/> |
-| font-weight       | number \| string | normal        | No        | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width.NOTE:The value must be an integer multiple of 100.The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**. |
-| text-decoration   | string           | none          | No        | Text decoration. Available values are as follows:<br/>-**underline**: An underline is used.<br/>-**line-through**: A strikethrough is used.<br/>-**none**: The standard text is used.<br/> |
-| text-align        | string           | start         | No        | Text alignment mode. Available values are as follows:<br/>-**left**: The text is left-aligned.<br/>-**center**: The text is center-aligned.<br/>-**right**: The text is right-aligned.<br/>-**start**: The text is aligned with the direction in which the text is written.<br/>-**end**: The text is aligned with the opposite direction in which the text is written.NOTE:If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container. |
-| line-height       | \<length>         | 0px           | No        | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. |
-| text-overflow     | string           | clip          | No        | Takes effect when the maximum number of lines is specified. Available values are as follows:<br/>-**clip**: The text is clipped and displayed based on the size of the parent container.<br/>-**ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**. |
-| font-family       | string           | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. |
-| max-lines         | number           | -             | No        | Maximum number of lines in the text.                         |
-| min-font-size     | \<length>         | -             | No        | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. |
-| max-font-size     | \<length>         | -             | No        | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect. |
-| font-size-step    | \<length>         | 1px           | No        | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. |
-| prefer-font-sizes | \<array>          | -             | No        | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.Example values: **12px,14px,16px** |
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
+
+| Name               | Type                        | Default Value       | Mandatory  | Description                                      |
+| ----------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| color             | &lt;color&gt;              | #e5000000  | No   | Font color.                                |
+| font-size         | &lt;length&gt;             | 30px       | No   | Font size.                                |
+| allow-scale       | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
+| letter-spacing    | &lt;length&gt;             | 0px        | No   | Character spacing (px).                              |
+| font-style        | string                     | normal     | No   | Font style. Available values are as follows:<br>- **normal**: standard font style.<br>- **italic**: italic font style.|
+| font-weight       | number \| string | normal     | No   | Font weight. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a heavier font weight.<br>The value of the number type must be an integer multiple of 100.<br>The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.|
+| text-decoration   | string                     | none       | No   | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
+| text-align        | string                     | start<br>| No   | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.|
+| line-height       | &lt;length&gt;             | 0px        | No   | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive.      |
+| text-overflow     | string                     | clip       | No   | Takes effect when the maximum number of lines is specified. Available values are as follows:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**.|
+| font-family       | string                     | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
+| max-lines         | number                     | -          | No   | Maximum number of lines in the text.                              |
+| min-font-size     | &lt;length&gt;             | -          | No   | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
+| max-font-size     | &lt;length&gt;             | -          | No   | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.|
+| font-size-step    | &lt;length&gt;             | 1px        | No   | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set.           |
+| prefer-font-sizes | &lt;array&gt;              | -          | No   | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.<br>Example: prefer-font-sizes: 12px,14px,16px|
+
 
 ## Events
 
 Not supported
 
+
 ## Methods
 
 Not supported
 
-## Example Code
 
-```
+## Example
+
+```html
 <!--xxx.hml -->
 <div class="container">
   <div class="row">
@@ -71,10 +77,13 @@ Not supported
     <input class="input" id="checkboxId" type="checkbox"></input>
   </div>
 </div>
+```
+
+```css
 /*xxx.css */
 .container {
   flex-direction: column;
-  align-items: center;
+  margin-left: 20px;
 }
 .row {
   flex-direction: row;
@@ -89,4 +98,4 @@ Not supported
 }
 ```
 
-![img](figures/en-us_image_0000001152834002.png)
\ No newline at end of file
+![en-us_image_0000001152834002](figures/en-us_image_0000001152834002.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-piece.md b/en/application-dev/reference/arkui-js/js-components-basic-piece.md
index 11666b49f84e4ed29cb4ca9c9f325d8efe2348ea..4503782492802ed5be1a757a0acaa50eb81d791f 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-piece.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-piece.md
@@ -1,51 +1,60 @@
 # piece
 
-An entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<piece>** component provides an entrance piece that can contain images and text. It is usually used to display receivers, for example, email recipients or message recipients.
 
 ## Child Components
 
-None
+Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name    | Type   | Mandatory| Description                                                        |
+| -------- | ------- | ---- | ------------------------------------------------------------ |
+| content  | string  | Yes  | Text content of the operational piece.                                            |
+| closable | boolean | No  | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event.<br>Default value: **false**|
+| icon     | string  | No  | URL of the delete icon for the operational piece. The value can be a local path.                         |
 
-| Name     | Type    | Default Value | Mandatory | Description                                                  |
-| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
-| content  | string  | -             | Yes       | Text content of the operational piece.                       |
-| closable | boolean | false         | No        | Whether to display the delete icon for the operational piece. When users click the delete icon, it triggers the close event. |
-| icon     | string  | -             | No        | URL of the delete icon for the operational piece. The value can be a local path. |
 
 ## Styles
 
-Styles in [Universal Styles](js-components-common-styles.md) are supported.
+The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
 
-> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** By default, text and images are placed in the middle of the **\<piece>** component.
+>  **NOTE**
+>
+>  By default, text and images are placed in the middle of the **\<piece>** component.
 
-## Events
 
-In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
+## Events
 
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
+| Name   | Parameter  | Description                                 |
+| ----- | ---- | ----------------------------------- |
+| close | -    | Triggered when users click the delete icon of the operational piece. You can delete this component by using the **if** directive.|
 
-| Name  | Parameter | Description                                                  |
-| ----- | --------- | ------------------------------------------------------------ |
-| close | -         | Triggered when users click the delete icon of the operational piece. You can delete this component by using the **if** directive. |
+## Methods
 
-## Method
+The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
 
-Methods in [Universal Methods](js-components-common-methods.md) are supported.
 
 ## Example
 
-```
+```html
 <!-- xxx.hml-->
 <div class="container" >
   <piece if="{{first}}" content="example"></piece>
   <piece if="{{second}}" content="example" closable="true" onclose="closeSecond"></piece>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   width: 100%;
@@ -53,6 +62,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
   align-items: center;
   justify-content: center;
 }
+```
+
+```js
 // xxx.js
 export default {
   data: {
@@ -65,4 +77,4 @@ export default {
 }
 ```
 
-![img](figures/11-5.gif)
\ No newline at end of file
+![11-5](figures/11-5.gif)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
index 850efc33599916f6a90a6acf001e25b7c1c0dc57..47f29192238da70fc9526f013deb0b360fa3f94e 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-qrcode.md
@@ -1,53 +1,60 @@
 # qrcode
 
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<qrcode>** component is used to generate and display a QR code.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
 Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name   | Type    | Default Value | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| value | string | -    | Yes   | Content used to generate the QR code.                             |
+| type  | string | rect | No   | QR code type. Available values are as follows:<br>- **rect**: rectangular QR code.<br>- **circle**: round QR code.|
 
-| Name  | Type   | Default Value | Mandatory | Description                                                  |
-| ----- | ------ | ------------- | --------- | ------------------------------------------------------------ |
-| value | string | -             | Yes       | Content used to generate the QR code                         |
-| type  | string | rect          | No        | QR code type. Available values are as follows:<br/>-**rect**: rectangular QR code<br/>-**circle**: round QR code<br/> |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
+| Name              | Type           | Default Value     | Mandatory  | Description      |
+| ---------------- | ------------- | -------- | ---- | -------- |
+| color            | &lt;color&gt; | \#000000 | No   | Color of the QR code.  |
+| background-color | &lt;color&gt; | \#ffffff | No   | Background color of the QR code.|
 
-
-| Name             | Type    | Default Value | Mandatory | Description              |
-| ---------------- | ------- | ------------- | --------- | ------------------------ |
-| color            | \<color> | #000000       | No        | QR code color            |
-| background-color | \<color> | #ffffff       | No        | QR code background color |
-
-> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
+>  **NOTE**
+>  - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is centered.
+>
+>
+>  - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length 200 px is used.
 >
-> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
-> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length is 200 px.
+
 
 ## Events
 
-Events in [Universal Events](js-components-common-events.md) are supported.
+The [universal events](../arkui-js/js-components-common-events.md) are supported.
 
 ## Methods
 
-Methods in [Universal Methods](js-components-common-methods.md) are supported.
+The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
+
 
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <qrcode value="{{qr_value}}" type="{{qr_type}}"
@@ -63,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
     <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
   </select>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   width: 100%;
@@ -79,6 +89,9 @@ select{
   margin-top: 40px;
   margin-bottom: 40px;
 }
+```
+
+```js
 /* index.js */
 export default {
   data: {
@@ -96,9 +109,6 @@ export default {
       this.qr_type = 'circle'
     }
   },
-  setvalue(e) {
-    this.qr_value = e.newValue
-  },
   setcol(e) {
     this.qr_col = e.newValue
   },
@@ -108,4 +118,4 @@ export default {
 }
 ```
 
-![img](figures/12.gif)
\ No newline at end of file
+![12](figures/12.gif)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-span.md b/en/application-dev/reference/arkui-js/js-components-basic-span.md
index de34e6d85ae7de460e53da457aff469509894350..bf1c86a78118769e956e06c8290f2229856b3290 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-span.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-span.md
@@ -1,54 +1,67 @@
 # span
 
-The **\<span>** child component of **\<[text](js-components-basic-text.md)>** is used as a text modifier.
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+As a child component of **[\<text>](../arkui-js/js-components-basic-text.md)**, the **\<span>** component is used as a text modifier.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
-The **\<span>** child component is supported.
+Not supported
+
 
 ## Attributes
 
-Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
+The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
 
-> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** The **focusable** and **disabled** attributes are not supported.
+>  **NOTE**
+>
+>  The **focusable** and **disabled** attributes are not supported.
 
-## Styles
 
-Only the following style attributes are supported.
+## Styles
 
+Only the following styles are supported.
 
+| Name             | Type                        | Default Value       | Mandatory  | Description                                      |
+| --------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| color           | &lt;color&gt;              | -          | No   | Font color of the modified text.                            |
+| font-size       | &lt;length&gt;             | 30px       | No   | Font size of the modified text.                            |
+| allow-scale     | boolean                    | true       | No   | Whether the font size of the modified text changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
+| font-style      | string                     | normal     | No   | Font style of the modified text. For details, see **font-style** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| font-weight     | number \| string | normal     | No   | Font weight of the modified text. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| text-decoration | string                     | none       | No   | Text decoration of the modified text. For details, see **text-decoration** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| font-family     | string                     | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
 
-| Name            | Type             | Default Value | Mandatory | Description                                                  |
-| --------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
-| color           | \<color>          | -             | No        | Font color of the modified text.                             |
-| font-size       | \<length>         | 30px          | No        | Font size of the modified text.                              |
-| allow-scale     | boolean          | true          | No        | Whether the font size of the modified text changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
-| font-style      | string           | normal        | No        | Font style of the modified text. For details, see [font-style](js-components-basic-text.md) of the **text** component. |
-| font-weight     | number \| string | normal        | No        | Font weight of the modified text. For details, see [font-weight](js-components-basic-text.md) of the **text** component. |
-| text-decoration | string           | none          | No        | Text decoration of the modified text. For details, see [text-decoration](js-components-basic-text.md) of the **text** component. |
-| font-family     | string           | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
 
 ## Events
 
-Only the click event in [Universal Events](js-components-common-events.md) is supported.
+Only the click event in [Universal Events](../arkui-js/js-components-common-events.md) is supported.
 
-## Method
+
+## Methods
 
 Not supported
 
-## Example Code
 
-```
+## Example
+
+```html
 <!-- xxx.hml -->
 <div class="container">
   <text class="title">
     <span class="spanTxt">span</span>
   </text>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   display: flex;
@@ -67,4 +80,4 @@ Not supported
 }
 ```
 
-![img](figures/en-us_image_0000001152588626.png)
\ No newline at end of file
+![en-us_image_0000001152588626](figures/en-us_image_0000001152588626.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-toggle.md b/en/application-dev/reference/arkui-js/js-components-basic-toggle.md
index e2f4767d3ad061cd265d8799443ea288e50a764d..0ec0ac5c5c664324ec70add75d7d657011a21fcb 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-toggle.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-toggle.md
@@ -1,58 +1,63 @@
 # toggle
 
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<toggle>** component allows your user to select from a group of options and may display the selection result in real time. Generally, the option group consists of many toggles.
 
+
 ## Required Permissions
 
 None
 
-## Child Component
+
+## Child Components
 
 Not supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name     | Type     | Default Value  | Mandatory  | Description        |
+| ------- | ------- | ----- | ---- | ---------- |
+| value   | string  | -     | Yes   | Text value of the toggle. |
+| checked | boolean | false | No   | Whether the toggle is selected.|
 
-| Name    | Type    | Default Value | Mandatory | Description                     |
-| ------- | ------- | ------------- | --------- | ------------------------------- |
-| value   | string  | -             | Yes       | Text value of the toggle.       |
-| checked | boolean | false         | No        | Whether the toggle is selected. |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
-
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
+| Name         | Type                        | Default Value       | Mandatory  | Description                                      |
+| ----------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
+| text-color  | &lt;color&gt;              | \#E5000000 | No   | Text color of the toggle.                              |
+| font-size   | &lt;length&gt;             | 16px       | No   | Font size of the toggle.                              |
+| allow-scale | boolean                    | true       | No   | Whether the font size changes with the system's font size settings.<br>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.|
+| font-style  | string                     | normal     | No   | Font style of the toggle.                              |
+| font-weight | number \| string | normal     | No   | Font weight of the toggle. For details, see **font-weight** of the [**\<text>**](../arkui-js/js-components-basic-text.md#styles) component.|
+| font-family | &lt;string&gt;             | sans-serif | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
 
-| Name        | Type             | Default Value | Mandatory | Description                                                  |
-| ----------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
-| text-color  | \<color>          | #E5000000     | No        | Text color of the toggle.                                    |
-| font-size   | \<length>         | 16px          | No        | Font size of the toggle.                                     |
-| allow-scale | boolean          | true          | No        | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. |
-| font-style  | string           | normal        | No        | Font style of the toggle.                                    |
-| font-weight | number \| string | normal        | No        | Font weight of the toggle. For details, see **font-weight** of the [text](js-components-basic-text.md) component. |
-| font-family | \<string>         | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
 
 ## Events
 
-In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
-
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
+| Name    | Parameter                             | Description            |
+| ------ | ------------------------------- | -------------- |
+| change | { checked: isChecked } | Triggered when the toggle is selected or unselected.|
 
-| Name   | Parameter              | Description                                          |
-| ------ | ---------------------- | ---------------------------------------------------- |
-| change | { checked: isChecked } | Triggered when the toggle is selected or unselected. |
 
 ## Methods
 
-Methods in [Universal Methods](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/en/application-dev/reference/arkui-js/js-components-common-methods.md) are supported.
+The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
+
 
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div style="flex-direction: column;">
   <text class="margin">1. Multiple choice example</text>
@@ -65,41 +70,64 @@ Methods in [Universal Methods](https://gitee.com/openharmony/docs/blob/OpenHarmo
       value="{{$item.name}}" @change="allchange" @click="allclick({{$item.id}})"></toggle>
   </div>
 </div>
+```
+
+```css
 /* xxx.css */
 .margin {
   margin: 7px;
 }
+```
+
+```js
 // xxx.js
 export default {
-  data: {
-    toggle_list: [
-      { "id":"1001", "name":"Living room", "checked":true },
-      { "id":"1002", "name":"Bedroom", "checked":false },
-      { "id":"1003", "name":"Second bedroom", "checked":false },
-      { "id":"1004", "name":"Kitchen", "checked":false },
-      { "id":"1005", "name":"Study", "checked":false },
-      { "id":"1006", "name":"Garden", "checked":false },
-      { "id":"1007", "name":"Bathroom", "checked":false },
-      { "id":"1008", "name":"Balcony", "checked":false },
-    ],
-    toggles: ["Living room","Bedroom","Kitchen","Study"],
-    idx: ""
-  },
-  allclick(arg) {
-    this.idx = arg
-  },
-  allchange(e) {
-    if (e.checked === true) {
-      for (var i = 0; i < this.toggle_list.length; i++) {
-        if (this.toggle_list[i].id === this.idx) {
-          this.toggle_list[i].checked = true
-        } else {
-          this.toggle_list[i].checked = false
+    data: {
+        toggle_list: [
+            {
+                "id": "1001", "name": "Living room", "checked": true
+            },
+            {
+                "id": "1002", "name": "Bedroom", "checked": false
+            },
+            {
+                "id": "1003", "name": "Second bedroom", "checked": false
+            },
+            {
+                "id": "1004", "name": "Kitchen", "checked": false
+            },
+            {
+                "id": "1005", "name": "Study", "checked": false
+            },
+            {
+                "id": "1006", "name": "Garden", "checked": false
+            },
+            {
+                "id": "1007", "name": "Bathroom", "checked": false
+            },
+            {
+                "id": "1008", "name": "Balcony", "checked": false
+            },
+        ],
+        toggles: ["Living room", "Bedroom", "Kitchen", "Study"],
+        idx: ""
+    },
+    allclick(arg) {
+        this.idx = arg;
+    },
+    allchange(e) {
+        if (e.checked != true) {
+            return;
+        }
+        for (var i = 0; i < this.toggle_list.length; i++) {
+            if (this.toggle_list[i].id === this.idx) {
+                this.toggle_list[i].checked = true;
+            } else {
+                this.toggle_list[i].checked = false;
+            }
         }
-      }
     }
-  }
 }
 ```
 
-![img](figures/screenshot.png)
\ No newline at end of file
+![screenshot](figures/screenshot.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md b/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
index fa0c77c83d8affe11a97391bde0f6eeb26c9e706..b83de204fe37060105d63fc6ba95870a731989f3 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-toolbar-item.md
@@ -1,67 +1,73 @@
 # toolbar-item
 
-The **\<toolbar-item>** component is the child component of **\<toolbar>** to display an operation option on the toolbar.
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
 
-## Child Component
+As a child component of **[\<toolbar>](js-components-basic-toolbar.md)**, the **\<toolbar-item>** component is used to display an operation option on the toolbar.
 
-None
 
-## Attributes
+## Child Components
+
+Not supported
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
+## Attributes
+
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name   | Type    | Default Value | Mandatory  | Description                                      |
+| ----- | ------ | ---- | ---- | ---------------------------------------- |
+| value | string | -    | Yes   | Text content of the operation option.                               |
+| icon  | string | -    | Yes   | Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.|
 
-| Name  | Type   | Default Value | Mandatory | Description                                                  |
-| ----- | ------ | ------------- | --------- | ------------------------------------------------------------ |
-| value | string | -             | Yes       | Text content of the operation option.                        |
-| icon  | string | -             | Yes       | Icon image path, which is displayed on the option text. The value is a local path. Supported image formats are PNG, JPG, and SVG. |
 
 ## Styles
 
-Only the following style attributes are supported.
-
-
-
-| Name                | Type                                                         | Default Value | Mandatory | Description                                                  |
-| ------------------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ |
-| color               | \<color>                                                     | #e6000000     | No        | Text color.                                                  |
-| font-size           | \<length>                                                    | 16px          | No        | Text size.                                                   |
-| allow-scale         | boolean                                                      | true          | No        | Whether the text size changes with the system's font size settings. |
-| font-style          | string                                                       | normal        | No        | Text font style. Available values are as follows:<br/>-**normal**: standard font style<br/>-**italic**: italic font style |
-| font-weight         | number\|string                                               | normal        | No        | Text font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**. |
-| text-decoration     | string                                                       | none          | No        | Text decoration. Available values are as follows:<br/>-**underline**: An underline is used.<br/>-**line-through**: A strikethrough is used.<br/>-**none**: The standard text is used. |
-| font-family         | string                                                       | sans-serif    | No        | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) is used for the text. |
-| background          | \<linear-gradient>                                           | -             | No        | This attribute supports [Gradient Styles](js-components-common-gradient.md) only but is not compatible with **background-color** or **background-image**. |
-| background-color    | \<color>                                                     | -             | No        | Background color.                                            |
-| background-image    | string                                                       | -             | No        | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Both online and local image resources are supported. |
-| background-size     | <br/>-string<br/>-\<length> \<length><br/>-\<percentage> \<percentage> | auto          | No        | Background image size.<br/>-The **string** values are as follows:<br/>  -**contain**: Expands the image to the maximum size so that the height and width of the image are applicable to the content area.<br/>  -**cover**: Extends the background image to a large enough size so that the background image completely covers the background area. Some parts of the image may not be displayed in the background area.<br/>  -**auto**: The original image width-height ratio is retained.<br/>-The two **\<length>** values are as follows:Width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br/>-The two **\<percentage>** values are as follows:Width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
-| background-repeat   | string                                                       | repeat        | No        | Repeating attribute of a background image. By default, a background image is repeated both horizontally and vertically.<br/>-**repeat**: Repeatedly draws images along the x-axis and y-axis at the same time.<br/>-**repeat-x**: Repeatedly draws images along the x-axis.<br/>-**repeat-y**: Repeatedly draws images along the y-axis.<br/>-**no-repeat**: The image is not drawn repeatedly. |
-| background-position | string string\<length> \<length>\<percentage> \<percentage>  | 0px 0px       | No        | <br/>-Using keywords: If only one keyword is specified, the other value is **center** by default. The two values define the horizontal position and vertical position, respectively.<br/>  -**left**: leftmost in the horizontal direction<br/>  -**right**: rightmost in the horizontal direction<br/>  -**top**: top in the vertical direction<br/>  -**bottom**: bottom in the vertical direction<br/>  -**center**: center position<br/>-Using **\<length>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0 0** indicates the upper left corner. The unit is pixel. If only one value is specified, the other one is **50%**.<br/>-Using **\<percentage>**: The first value indicates the horizontal position, and the second value indicates the vertical position. **0% 0%** indicates the upper left corner. **100% 100%** indicates the lower right corner. If only one value is specified, the other one is **50%**.<br/>-Using both **\<percentage>** and **\<length>**. |
-| opacity             | number                                                       | 1             | No        | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent. |
-| display             | string                                                       | flex          | No        | Type of the box containing an element. Available values are as follows:<br/>-**flex**: flexible layout<br/>-**none**: The box is disabled. |
-| visibility          | string                                                       | visible       | No        | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br/>-**visible**: The box is visible.<br/>-**hidden**: The box is hidden but still takes up space.<br/>NOTE:<br/>If both **visibility** and **display** are set, only **display** takes effect. |
+Only the following styles are supported.
+
+| Name                 | Type                                      | Default Value         | Mandatory  | Description                                      |
+| ------------------- | ---------------------------------------- | ------------ | ---- | ---------------------------------------- |
+| color               | &lt;color&gt;                            | \#e6000000   | No   | Font color.                                   |
+| font-size           | &lt;length&gt;                           | 16px         | No   | Font size.                                   |
+| allow-scale         | boolean                                  | true         | No   | Whether the font size changes with the system's font size settings.               |
+| font-style          | string                                   | normal       | No   | Font style. Available values are as follows:<br> - **normal**: standard font style<br>- **italic**: italic font style|
+| font-weight         | number\|string                           | normal       | No   | Font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are **lighter**, **normal**, **bold**, or **bolder**. |
+| text-decoration     | string                                   | none         | No   | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
+| font-family         | string                                   | sans-serif   | No   | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
+| background          | &lt;linear-gradient&gt;                  | -            | No   | Background. This attribute supports [gradient styles](../arkui-js/js-components-common-gradient.md) only and is not compatible with **background-color** or **background-image**.|
+| background-color    | &lt;color&gt;                            | -            | No   | Background color.                                 |
+| background-image    | string                                   | -            | No   | Background image. Currently, this attribute is not compatible with **background-color** or **background**. Both online and local image resources are supported.|
+| background-size     | - string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | auto         | No   | Background image size.<br>- The available values of the **string** type are as follows:<br>  - **contain**: extends the image to the maximum size so that its height and width are fully applicable to the content area.<br>  - **cover**: extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area.<br>  - **auto**: retains the original aspect ratio of the image.<br>- Values of the **\<length>** type: The two values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default.<br>- Values of the **\<percentage>** type: The two values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to **auto** by default. |
+| background-repeat   | string                                   | repeat       | No   | How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically.<br>- **repeat**: The image is repeated along both the x-axis and y-axis.<br>- **repeat-x**: The image is repeated along the x-axis.<br>- **repeat-y**: The image is repeated along the y-axis.<br>- **no-repeat**: The image is not repeated.|
+| background-position | - string string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | 0px 0px | No   | Position of the background image.<br>- Values of the **string** type: If you set only one value, the other value is set to **center** by default. The two values define the horizontal position and vertical position, respectively.<br>  - **left**: leftmost in the horizontal direction.<br>  - **right**: rightmost in the horizontal direction.<br>  - **top**: top in the vertical direction.<br>  - **bottom**: bottom in the vertical direction.<br>  - **center**: center in the horizontal or vertical direction.<br>- Values of the **\<length>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0 0 in px (**0px 0px**). If you only set one value, the other value is set to **50%**.<br>- Values of the **\<percentage>** type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is **0% 0%**. For the lower right corner, the value is **100% 100%**. If you only set one value, the other value is set to **50%**.<br>- Values of the **\<percentage>** type and **\<length>** type can be used together.|
+| opacity             | number                                   | 1            | No   | Opacity of an element. The value ranges from **0** to **1**. The value **1** means opaque, and **0** means completely transparent.       |
+| display             | string                                   | flex         | No   | Type of the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered|
+| visibility          | string                                   | visible      | No   | Whether to display the box containing an element. A hidden box still occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:<br>- **visible**: The box is visible.<br>- **hidden**: The box is hidden but still takes up space.<br>If both **visibility** and **display** are set, only **display** takes effect.|
+
 
 ## Events
 
-Events in [Universal Events](js-components-common-events.md) are supported.
+The [universal events](../arkui-js/js-components-common-events.md) are supported.
+
 
-## Method
+## Methods
 
 Not supported
 
+
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
-<toolbar style="position: fixed; bottom: 0px; ">    
-   <toolbar-item icon='common/Icon/location.png' value='Option 1' >   </toolbar-item>
-   <toolbar-item icon='common/Icon/heart.png' value='Option 2'>   </toolbar-item>    
-   <toolbar-item icon='common/Icon/diamond.png' value='Option 3'  >   </toolbar-item>    
-   <toolbar-item icon='common/Icon/heart.png' value='Option 4' >   </toolbar-item>    
-   <toolbar-item icon='common/Icon/heart.png' value='Option 5' >   </toolbar-item>
-   <toolbar-item icon='common/Icon/heart.png' value='Option 6'>   </toolbar-item> 
+<toolbar style="position : fixed; bottom : 0px;">
+    <toolbar-item icon='common/Icon/location.png' value='Option 1'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 2'></toolbar-item>
+    <toolbar-item icon='common/Icon/diamond.png' value='Option 3'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 4'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 5'></toolbar-item>
+    <toolbar-item icon='common/Icon/heart.png' value='Option 6'></toolbar-item>
 </toolbar>
 ```
 
-![img](figures/progress-7.jpg)
\ No newline at end of file
+![progress-7](figures/progress-7.jpg)
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
index 40c06a2458ae6f8075e1e4913c9f59d39ba5b6c7..ca3a9125a0dba2956d12d15fe7c82322730f40bb 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvas.md
@@ -1,93 +1,96 @@
 # canvas
 
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
 The **\<canvas>** component is used for customizing drawings.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
 Not supported
 
+
 ## Attributes
 
-Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
+The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
+
 
 ## Styles
 
-Styles in [Universal Styles](js-components-common-styles.md) are supported.
+The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
+
 
 ## Events
 
-Events in [Universal Events](js-components-common-events.md) are supported.
+The [universal events](../arkui-js/js-components-common-events.md) are supported.
+
 
 ## Methods
 
-In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
+In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
+
 
 ### getContext
 
-getContext(type: '2d', options?: ContextAttrOptions): CanvasRendering2dContext
+getContext(type: '2d', options?:  ContextAttrOptions): CanvasRenderingContext2D
 
 Obtains the canvas drawing context. This API cannot be called in **onInit** or **onReady**.
 
-- Parameters
-
-  
+**Parameters**
 
-  | Name      | Type                                                 | Mandatory | Description                                                  |
-  | --------- | ---------------------------------------------------- | --------- | ------------------------------------------------------------ |
-  | type      | string                                               | Yes       | The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component. |
-  | options6+ | [ContextAttrOptions](js-components-canvas-canvas.md) | No        | Whether to enable anti-aliasing. By default, anti-aliasing is disabled. |
+| Name                 | Type              | Mandatory  | Description                                      |
+| -------------------- | ------------------ | ---- | ---------------------------------------- |
+| type                 | string             | Yes   | Object type. The value is set to **'2d'**, indicating that a 2D drawing object is returned. This object can be used to draw rectangles, texts, and images on the canvas component.|
+| options<sup>6+</sup> | ContextAttrOptions | No   | Whether to enable anti-aliasing. By default, anti-aliasing is disabled.                 |
 
   **Table 1** ContextAttrOptions
 
-  
+| Name      | Type     | Description                 |
+| --------- | ------- | ------------------- |
+| antialias | boolean | Whether to enable anti-aliasing. The default value is **false**.|
 
-  | Name      | Type    | Description                                                  |
-  | --------- | ------- | ------------------------------------------------------------ |
-  | antialias | boolean | Whether to enable anti-aliasing. The default value is **false**. |
+**Return value**
 
-- Return values
+| Type                                      | Description                  |
+| ---------------------------------------- | -------------------- |
+| [CanvasRenderingContext2D](../arkui-js/js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component.|
 
-  
-
-  | Type                                                         | Description                                                  |
-  | ------------------------------------------------------------ | ------------------------------------------------------------ |
-  | [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md) | 2D drawing object, which can be used to draw rectangles, images, and texts on the canvas component. |
-
-### toDataURL6+
+### toDataURL<sup>6+</sup>
 
 toDataURL(type?: string, quality?: number): string
 
 Generates a URL containing image display information.
 
-- Parameters
-
-  
-
-  | Name    | Type   | Mandatory | Description                                                  |
-  | ------- | ------ | --------- | ------------------------------------------------------------ |
-  | type    | string | No        | Image format. The default value is **image/png**.            |
-  | quality | number | No        | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used. |
+**Parameters**
 
-- Return values
+| Name    | Type  | Mandatory  | Description                                      |
+| ------- | ------ | ---- | ---------------------------------------- |
+| type    | string | No   | Image format. The default value is **image/png**.           |
+| quality | number | No   | Image quality, which ranges from 0 to 1, when the image format is **image/jpeg** or **image/webp**. If the set value is beyond the value range, the default value **0.92** is used.|
 
-  
+**Return value**
 
-  | Type   | Description |
-  | ------ | ----------- |
-  | string | Image URL.  |
+| Type    | Description       |
+| ------ | --------- |
+| string | Image URL.|
 
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div>
   <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
   <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
 </div>
+```
+
+```js
 // xxx.js
 export default {
   handleClick() {
@@ -97,4 +100,4 @@ export default {
     // "data:image/png;base64,xxxxxxxx..."
   }
 }
-```
\ No newline at end of file
+```
diff --git a/en/application-dev/reference/arkui-js/js-components-common-transition.md b/en/application-dev/reference/arkui-js/js-components-common-transition.md
index 19e54ce8bb7cbbf8f417fb3623a0fbe6635f8f67..d75160229929e2cb565ec65604164c89539e8182 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-transition.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-transition.md
@@ -11,14 +11,14 @@
 
 | Name     | Type    | Default Value | Description                                      |
 | ------- | ------ | ---- | ---------------------------------------- |
-| shareid | string | -   | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements. |
+| shareid | string | -   | Used for the transition of shared elements, which takes effect only when this attribute is set. **\<list-item>**, **\<image>**, **\<text>**, **\<button>**, and **\<label>** components are supported for the transition of shared elements.|
 
 
 ### Styles
 
 | Name                               | Type    | Default Value     | Description                                      |
 | --------------------------------- | ------ | -------- | ---------------------------------------- |
-| shared-transition-effect          | string | exchange | Entry style of a shared element during transition.<br>-&nbsp;**exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>-&nbsp;**static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
+| shared-transition-effect          | string | exchange | Entry style of a shared element during transition.<br>- **exchange** (default): The source page element is moved to the position of the target page element and is zoomed in or out properly.<br>- **static**: The position of the target page element remains unchanged. You can configure the opacity animation. Currently, only the static effect configured on the target page takes effect.|
 | shared-transition-name            | string | -        | During the transition, the style configured on the target page takes effect preferentially. This style is used to configure the animation effect of shared elements. The animation effect is an animation sequence defined by **@keyframes** supporting transform and opacity animations. If the effect of shared elements conflicts with the custom animation, the latter is used.|
 | shared-transition-timing-function | string | friction | During the transition, the style configured on the target page takes effect preferentially. This style defines the difference curve during the transition of shared elements. If it is not configured, the friction curve is used.|
 
@@ -52,7 +52,7 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
       <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
     </list-item>
     <list-item>
-      <text onclick="jump">Click on picture to Jump to the details</text>
+      <text onclick="jump">Click on picture to jump to the details</text>
     </list-item>
   </list>
 </div>
@@ -60,12 +60,12 @@ In the example below, where **PageA** jumps to **PageB**, the shared element is
 
 ```js
 // xxx.js
-import router from '@system.router';
+import router from '@ohos.router';
 export default {
   jump() {
     router.push({
       // The path must be the same as that in the config.json file.
-      uri: 'pages/detailpage',
+      url: 'pages/detailpage',
     });
   },
 }
@@ -93,7 +93,7 @@ export default {
 
 ```js
 // xxx.js
-import router from '@system.router';
+import router from '@ohos.router';
 export default {
   jumpBack() {
     router.back();
@@ -117,7 +117,6 @@ export default {
 ## Widget Transition
 
 >  **NOTE**
->
 >  Widget transitions are not available when other transitions (including shared element transitions and custom transitions) are used.
 
 
@@ -125,7 +124,7 @@ export default {
 
 | Name               | Type    | Default Value | Description                                      |
 | ----------------- | ------ | ---- | ---------------------------------------- |
-| transition-effect | string | -    | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>-&nbsp;**unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>-&nbsp;**none**: No transition effect is displayed. |
+| transition-effect | string | -    | Whether a component on the current page displays the transition effect during a widget transition. Available values are as follows:<br>- **unfold**: The component will move upwards by one widget height if the component is located above the widget tapped by the user, or move downwards by one widget height if the component is located below the widget.<br>- **none**: No transition effect is displayed.|
 
 
 ### Example
@@ -140,7 +139,7 @@ The **source_page** has a title area on the top and a widget list. Users can tap
     <text style="font-size: 23px; margin-bottom: 20px" >MAIN TITLE</text>
   </div>
   <list style="width:340px;height:600px;flex-direction:column;justify-content:center;align-items:center">
-    <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.uri}})">
+    <list-item type="listItem" class="item" card="true" for="list" id="{{$item.id}}" onclick="jumpPage({{$item.id}}, {{$item.url}})">
       <text style="margin-left: 10px; font-size: 23px;">{{$item.title}}</text>
     </list-item>
   </list>
@@ -149,19 +148,19 @@ The **source_page** has a title area on the top and a widget list. Users can tap
 
 ```js
 // xxx.js
-import router from '@system.router'
+import router from '@ohos.router'
 export default {
   data: { list: [] },
   onInit() {
     for(var i = 0; i < 10; i++) {
-      var item = { uri: "pages/card_transition/target_page/index", 
+      var item = { url: "pages/card_transition/target_page/index", 
                    title: "this is title" + i, id: "item_" + i }
       this.list.push(item);
     }
   },
-  jumpPage(id, uri) {
+  jumpPage(id, url) {
     var cardId = this.$element(id).ref;
-    router.push({ uri: uri, params : { ref : cardId } });
+    router.push({ url: url, params : { ref : cardId } });
   }
 }
 ```
@@ -169,6 +168,8 @@ export default {
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   align-items: center;
   background-color: #ABDAFF;
@@ -199,6 +200,8 @@ export default {
 ```css
 /* xxx.css */
 .container {
+  width: 100%;
+  height: 100%; 
   flex-direction: column;
   align-items: center;
   background-color: #EBFFD7;
@@ -223,7 +226,7 @@ export default {
 | -------------------------- | ------ | ------------- | ---------------------------------------- |
 | transition-enter           | string | -             | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
 | transition-exit            | string | -             | Works with **@keyframes** and supports transform and opacity animations. For details, see [Attributes available for the @keyframes rule](../arkui-js/js-components-common-animation.md).|
-| transition-duration        | string | Follows the default page transition time of the device | The unit can be s or ms. The default unit is ms. If no value is specified, the default value is used. |
+| transition-duration        | string | Follows the default page transition time of the device| The unit can be s|or ms. The default unit is ms. If no value is specified, the default value is used.|
 | transition-timing-function | string | friction      | Speed curve of the transition animation, which makes the animation more fluent. For details, see the description of **animation-timing-function **in [Animation Styles](../arkui-js/js-components-common-animation.md).|
 
 
@@ -255,16 +258,16 @@ export default {
    </div>
    ```
 
-   ```css
+   ```js
    // xxx.js
-   import router from '@system.router';
+   import router from '@ohos.router';
    export default {
        data: {
-
+   
        },
        jump() {
            router.push({
-               uri:'pages/transition2/transition2'
+               url:'pages/transition2/transition2'
            })
        }
    }
@@ -288,13 +291,13 @@ export default {
        transition-duration: 5s;
        transition-timing-function: friction;
    }
-
+   
    @keyframes go_page {
        from {
            opacity: 0;
            transform: translate(0px) rotate(60deg) scale(1.0);
        }
-
+   
        to {
            opacity: 1;
            transform: translate(100px) rotate(360deg) scale(1.0);
@@ -305,7 +308,7 @@ export default {
            opacity: 1;
            transform: translate(200px) rotate(60deg) scale(2);
        }
-
+   
        to {
            opacity: 0;
            transform: translate(200px) rotate(360deg) scale(2);
@@ -321,15 +324,15 @@ export default {
    <div class="container">
        <text>transition</text>
        <div class="move_page" onclick="jumpBack"></div>
-   </div
+   </div>
    ```
 
    ```js
    // xxx.js
-   import router from '@system.router';
+   import router from '@ohos.router';
    export default {
        data: {
-
+   
        },
        jumpBack() {
            router.back()
@@ -346,7 +349,7 @@ export default {
        width: 100%;
        height: 100%;
    }
-
+   
    .move_page {
        width: 100px;
        height: 100px;
@@ -356,7 +359,7 @@ export default {
        transition-duration: 5s;
        transition-timing-function: ease;
    }
-
+   
    @keyframes go_page {
        from {
            opacity: 0;
@@ -367,7 +370,7 @@ export default {
            transform:translate(100px) rotate(180deg) scale(2.0);
        }
    }
-
+   
    @keyframes exit_page {
        from {
            opacity: 1;
diff --git a/en/application-dev/reference/arkui-js/js-components-container-list.md b/en/application-dev/reference/arkui-js/js-components-container-list.md
index 0b562e20e6f09f295414b103b3f4660cc6044d19..35c3aac633c08bf984cb6c1fe5169a8a9d3bf4b8 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-list.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-list.md
@@ -153,4 +153,5 @@ export default {
 ```
 
 
+
 ![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png)
diff --git a/en/application-dev/reference/arkui-js/js-components-container-swiper.md b/en/application-dev/reference/arkui-js/js-components-container-swiper.md
index b4099998dad7595b82bd5f93ed7bc296dbed944b..f607139653a52a1e1edbca359ca60d7224ebcc30 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-swiper.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-swiper.md
@@ -1,77 +1,78 @@
 # swiper
 
-The **\<swiper>** component provides a container that allows users to switch among child components by swiping operations.
+>  **NOTE**
+>
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **\<swiper>** component provides a container that allows users to switch among child components using swipe gestures.
 
 ## Required Permissions
 
 None
 
+
 ## Child Components
 
-All child components except **\<list>** are supported.
+Supported
 
-## Attributes
 
-In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
+## Attributes
 
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
+| Name                            | Type     | Default Value   | Mandatory  | Description                                      |
+| ------------------------------ | ------- | ------ | ---- | ---------------------------------------- |
+| index                          | number  | 0      | No   | Index of the child component currently displayed in the container.                       |
+| autoplay                       | boolean | false  | No   | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. |
+| interval                       | number  | 3000   | No   | Autoplay interval, in milliseconds, when autoplay is enabled.                   |
+| indicator                      | boolean | true   | No   | Whether to enable the indicator. The default value is **true**.                      |
+| digital<sup>5+</sup>           | boolean | false  | No   | Whether to enable the digital indicator. The default value is **false**.<br>The digital indicator takes effect only when **indicator** is set to **true**.|
+| indicatordisabled<sup>5+</sup> | boolean | false  | No   | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations.  |
+| loop                           | boolean | true   | No   | Whether to enable looping.                               |
+| duration                       | number  | -      | No   | Duration of the autoplay for child component switching.                             |
+| vertical                       | boolean | false  | No   | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator.                  |
+| cachedsize<sup>7+</sup>        | number  | -1     | No   | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached.         |
+| scrolleffect<sup>7+</sup>      | string  | spring | No   | Scroll effect. The options are as follows:<br>- **spring**: Similar to the physical dynamic effect of a spring. When the scrollbar reaches the edge, it can continue to scroll for a distance based on the initial speed or a touch event. It rebounds after being released.<br>- **fade**: Similar to the physical dynamic effect of fade. When the scrollbar reaches the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.<br>- **none**: No effect when the scrollbar reaches the edge.<br>This attribute is valid only when **loop** is set to **false**.|
 
-| Name                | Type    | Default Value | Mandatory | Description                                                  |
-| ------------------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
-| index               | number  | 0             | No        | Index of a child component currently displayed in the container. |
-| autoplay            | boolean | false         | No        | Whether to enable autoplay for child component switching. If this attribute is **true**, the indicator does not take effect<sup>5+</sup>. |
-| interval            | number  | 3000          | No        | Autoplay interval, in milliseconds, when autoplay is enabled. |
-| indicator           | boolean | true          | No        | Whether to enable the indicator. The default value is **true**. |
-| digital<sup>5+</sup>           | boolean | false         | No        | Whether to enable the digital indicator. The default value is **false**.<br>NOTE:<br>The digital indicator takes effect only when **indicator** is set to **true**. |
-| indicatordisabled<sup>5+</sup> | boolean | false         | No        | Whether gesture operations are disabled on the indicator. If this attribute is set to **true**, the indicator does not respond to clicking or dragging operations. |
-| loop                | boolean | true          | No        | Whether to enable looping.                                   |
-| duration            | number  | -             | No        | Duration of the autoplay for child component switching.      |
-| vertical            | boolean | false         | No        | Whether the swipe gesture is performed vertically. A vertical swipe uses the vertical indicator. |
-| cachedsize<sup>7+</sup>        | number  | -1            | No        | Minimum number of cached items during delayed loading of the **\<swiper>** component. The value **-1** indicates that all content is cached. |
-| scrolleffect<sup>7+</sup>      | string  | spring        | No        | Scroll effect. The options are as follows:   <br>- **spring**: Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded.  <br>- **fade**: Similar to the physical dynamic effect of fade. When you scroll to the edge, a wave shape fades. The fade changes according to the speed and scrolling distance.  <br>- **none**: No effect after the scroll bar is moved to the edge.NOTE:This attribute is valid only when **loop** is set to **false**. |
 
 ## Styles
 
-In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
+In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
+| Name                                | Type                                      | Default Value       | Mandatory  | Description                  |
+| ---------------------------------- | ---------------------------------------- | ---------- | ---- | -------------------- |
+| indicator-color                    | &lt;color&gt;                            | -          | No   | Fill color of the indicator.        |
+| indicator-selected-color           | &lt;color&gt;                            | \#ff007dff | No   | Color of the currently selected indicator.        |
+| indicator-size                     | &lt;length&gt;                           | 4px        | No   | Diameter of the indicator.        |
+| indicator-top\|left\|right\|bottom | &lt;length&gt; \| &lt;percentage&gt; | -          | No   | Relative position of the indicator in the swiper.|
+| next-margin<sup>7+</sup>           | &lt;length&gt; \| &lt;percentage&gt; | -          | No   | Next margin, used to reveal a small part of the next item.   |
+| previous-margin<sup>7+</sup>       | &lt;length&gt; \| &lt;percentage&gt; | -          | No   | Previous margin, used to reveal a small part of the previous item.   |
 
 
-| Name                               | Type                       | Default Value | Mandatory | Description                                                  |
-| ---------------------------------- | -------------------------- | ------------- | --------- | ------------------------------------------------------------ |
-| indicator-color                    | \<color>                   | -             | No        | Fill color of the navigation point indicator.                |
-| indicator-selected-color           | \<color>                   | #ff007dff     | No        | Color of the currently selected navigation point indicator.  |
-| indicator-size                     | \<length>                  | 4px           | No        | Diameter of the navigation point indicator.                  |
-| indicator-top\|left\|right\|bottom | \<length> \| \<percentage> | -             | No        | Relative position of the indicator in the swiper.            |
-| next-margin<sup>7+</sup>           | \<length> \| \<percentage> | -             | No        | Next margin, used to reveal a small part of the next item.   |
-| previous-margin<sup>7+</sup>       | \<length> \| \<percentage> | -             | No        | Previous margin, used to reveal a small part of the previous item. |
-
 ## Events
 
-In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
-
-
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
-| Name              | Parameter                | Description                                                  |
-| ----------------- | ------------------------ | ------------------------------------------------------------ |
-| change            | { index: currentIndex }  | Triggered when the index of the currently displayed component changes. |
-| rotation          | { value: rotationValue } | Triggered when the crown of the wearable rotates.            |
-| animationfinish<sup>7+</sup> | -                        | Triggered when the animation is finished.                    |
+| Name                          | Parameter                                     | Description                |
+| ---------------------------- | --------------------------------------- | ------------------ |
+| change                       | { index: currentIndex }  | Triggered when the index of the currently displayed component changes.|
+| rotation                     | { value: rotationValue } | Triggered when the crown of the wearable rotates. |
+| animationfinish<sup>7+</sup> | -                                       | Triggered when the animation is finished.       |
 
 ## Methods
 
-In addition to the methods in [Universal Methods](js-components-common-methods.md), the following events are supported.
+In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
 
+| Name          | Parameter                                    | Description             |
+| ------------ | -------------------------------------- | --------------- |
+| swipeTo      | { index: number(specificLocation) } | Scrolls the child component to the position at the specified index.|
+| showNext     | -                                     | Shows the next child component.      |
+| showPrevious | -                                     | Shows the previous child component.      |
 
 
-| Name         | Parameter                             | Description                                                  |
-| ------------ | ------------------------------------- | ------------------------------------------------------------ |
-| swipeTo      | { index: number(specified position) } | Scrolls the child component to the position at the specified index. |
-| showNext     | None                                  | Shows the next child component.                              |
-| showPrevious | None                                  | Shows the previous child component.                          |
-
 ## Example
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <swiper class="swiper" id="swiper" index="0" indicator="true" loop="true" digital="false" cachedsize="-1"
@@ -90,6 +91,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
   <input class="button" type="button" value="showNext" onclick="showNext"></input>
   <input class="button" type="button" value="showPrevious" onclick="showPrevious"></input>
 </div>
+```
+
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -134,6 +138,9 @@ In addition to the methods in [Universal Methods](js-components-common-methods.m
 .text {
   font-size: 40px;
 }
+```
+
+```js
 // xxx.js
 export default {
   swipeTo() {
@@ -148,4 +155,4 @@ export default {
 }
 ```
 
-![img](figures/4-0.gif)
\ No newline at end of file
+![4-0](figures/4-0.gif)
diff --git a/en/application-dev/reference/arkui-js/js-components-media-video.md b/en/application-dev/reference/arkui-js/js-components-media-video.md
index 18c3fbef3bff790dfea6359d7a5d7c5516d0ecd5..0141e4818d35042cdef8f77362a95bb3d641b4d8 100644
--- a/en/application-dev/reference/arkui-js/js-components-media-video.md
+++ b/en/application-dev/reference/arkui-js/js-components-media-video.md
@@ -3,17 +3,7 @@
 
 >  **NOTE**
 >
-> - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
->
-> - Set **configChanges** under **abilities** in the **config.json** file to **orientation**.
-> ```
-> "abilities": [
-> {
-> "configChanges": ["orientation"],
-> ...
-> }
-> ]
-> ```
+>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
 
 The **\<video>** component provides a video player.
 
@@ -27,26 +17,26 @@ Not supported
 
 In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
 
-| Name| Type| Default Value| Mandatory| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| muted | boolean | false | No| Whether the video is muted.|
-| src | string | - | No| Path of the video content to play.|
-| autoplay | boolean | false | No| Whether the video is played automatically after being rendered.|
-| controls | boolean | true | No| Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
+| Name      | Type     | Default Value  | Mandatory  | Description                                      |
+| -------- | ------- | ----- | ---- | ---------------------------------------- |
+| muted    | boolean | false | No   | Whether the video is muted.                               |
+| src      | string  | -     | No   | Path of the video content to play.                              |
+| autoplay | boolean | false | No   | Whether the video is played automatically after being rendered.                               |
+| controls | boolean | true  | No   | Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
 
 
 ## Styles
 
 In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
 
-| Name| Type| Default Value| Mandatory| Description|
-| -------- | -------- | -------- | -------- | -------- |
-| object-fit | string | contain | No| Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
+| Name        | Type    | Default Value    | Mandatory  | Description                                      |
+| ---------- | ------ | ------- | ---- | ---------------------------------------- |
+| object-fit | string | contain | No   | Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
 
 **Table 1** object-fit enums
 
-| Type| Description|
-| -------- | -------- |
+| Type  | Description                       |
+| ---- | ------------------------- |
 | fill | The image is resized to fill the display area, and its aspect ratio is not retained.|
 
 
@@ -54,31 +44,31 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
 
 In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
 
-| Name| Parameter| Description|
-| -------- | -------- | -------- |
-| prepared | {&nbsp;duration:&nbsp;value&nbsp;}<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
-| start | - | Triggered when the video is played.|
-| pause | - | Triggered when the video playback is paused.|
-| finish | - | Triggered when the video playback is finished.|
-| error | - | Triggered when the video playback fails.|
-| seeking | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the time (in seconds) when the progress bar is being dragged.|
-| seeked | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
-| timeupdate | {&nbsp;currenttime:&nbsp;value&nbsp;} | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
+| Name        | Parameter                                      | Description                                   |
+| ---------- | ---------------------------------------- | ------------------------------------- |
+| prepared   | { duration: value }<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
+| start      | -                                        | Triggered when the video is played.                            |
+| pause      | -                                        | Triggered when the video playback is paused.                            |
+| finish     | -                                        | Triggered when the video playback is finished.                          |
+| error      | -                                        | Triggered when the video playback fails.                          |
+| seeking    | { currenttime: value }    | Triggered to report the time (in seconds) when the progress bar is being dragged.                 |
+| seeked     | { currenttime: value }    | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.              |
+| timeupdate | { currenttime: value }    | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.      |
 
 
 ## Methods
 
 In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
 
-| Name| Parameter| Description|
-| -------- | -------- | -------- |
-| start | - | Starts playing a video.|
-| pause | - | Pauses a video.|
-| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds.|
+| Name            | Parameter                                   | Description               |
+| -------------- | ------------------------------------- | ----------------- |
+| start          | -                                     | Starts playing a video.          |
+| pause          | -                                     | Pauses a video.        |
+| setCurrentTime | { currenttime: value } | Sets the video playback position, in seconds.|
 
-> **NOTE**
+>  **NOTE**
 >
-> The methods in the above table can be called after the **attached** callback is invoked.
+>  The methods in the above table can be called after the **attached** callback is invoked.
 
 ## Example
 
@@ -87,7 +77,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
 <div class="container">
   <video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
          controls='true' onprepared='preparedCallback' onstart='startCallback'
-         onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback'
+         onpause='pauseCallback' onfinish='finishCallback' onerror='errorCallback'
          onseeking='seekingCallback' onseeked='seekedCallback' 
          ontimeupdate='timeupdateCallback'
          style="object-fit:fill; width:80%; height:400px;"