diff --git a/en/application-dev/reference/apis/js-apis-data-ability.md b/en/application-dev/reference/apis/js-apis-data-ability.md
index 5d393653ce602b60438df2b6f9e54f6ba9cb9fe6..779d30c40263eecd1a8ecf70209a95008aa228dd 100644
--- a/en/application-dev/reference/apis/js-apis-data-ability.md
+++ b/en/application-dev/reference/apis/js-apis-data-ability.md
@@ -726,7 +726,7 @@ Sets a **DataAbilityPredicates** object to specify the index column.
 
 in(field: string, value: Array<ValueType>): DataAbilityPredicates
 
-Sets a **DataAbilityPredicates** object to match the field with data type Array<ValueType> and value within the specified range.
+Sets a **DataAbilityPredicates** object to match the field with data type Array\<ValueType> and value within the specified range.
 
 **System capability**: SystemCapability.DistributedDataManager.DataShare.Core
 
@@ -754,7 +754,7 @@ Sets a **DataAbilityPredicates** object to match the field with data type Array<
 
 notIn(field: string, value: Array&lt;ValueType&gt;): DataAbilityPredicates
 
-Sets a **DataAbilityPredicates** object to match the field with data type Array<ValueType> and value out of the specified range.
+Sets a **DataAbilityPredicates** object to match the field with data type Array\<ValueType> and value out of the specified range.
 
 **System capability**: SystemCapability.DistributedDataManager.DataShare.Core
 
diff --git a/en/application-dev/reference/apis/js-apis-inputmonitor.md b/en/application-dev/reference/apis/js-apis-inputmonitor.md
index 07084623fbe78c307fdc787b1715b398e3d97675..9fdcb88e96a336e19a87efab9c9856af746df558 100644
--- a/en/application-dev/reference/apis/js-apis-inputmonitor.md
+++ b/en/application-dev/reference/apis/js-apis-inputmonitor.md
@@ -101,7 +101,7 @@ This is a system API.
 inputMonitor.off("touch");
 ```
 
-off(type: "mouse", receiver?:Callback<MouseEvent>):void
+off(type: "mouse", receiver?:Callback\<MouseEvent>):void
 
 Stops listening for global mouse events.
 
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 1da8aecf571047a77500b531dc66bd7c13b3a050..e0993ff5f3a86e228b6768595ac30816424142ba 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
@@ -40,7 +40,7 @@ Only the following styles are supported.
 | 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 **string** values are as follows:<br>  - **contain**: Expands 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>- The two **length** 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>- The two **\<percentage>** 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 the x-axis and y-axis at the same time.<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>- 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. For the upper left corner, the value is **0 0**. 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>**.|
+| 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>- 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. For the upper left corner, the value is **0 0**. 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. 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 element 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.|
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md b/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md
index 7c86ea23346f2427d9f7a67d58c60ab5fafd1a76..e514d6d1e24a2f0432a557a48466c5538591ae9a 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md
@@ -18,7 +18,7 @@ Only the **\<toolbar-item>** component is supported.
 
 >  **NOTE**
 >
->  A maximum of five **\<toolbar-item>** child components can be displayed in a **\<toolbar>** component. If there are six or more toolbar items, the first four are displayed, and the rest items are added to the **More** list of the toolbar. Users can click **More** to view the items. The list is displayed in the default style instead of the custom style set for the <toolbar-item> components.
+>  A maximum of five **\<toolbar-item>** child components can be displayed in a **\<toolbar>** component. If there are six or more toolbar items, the first four are displayed, and the rest items are added to the **More** list of the toolbar. Users can click **More** to view the items. The list is displayed in the default style instead of the custom style set for the \<toolbar-item> components.
 
 
 ## Attributes
diff --git a/en/application-dev/reference/arkui-js/js-components-common-styles.md b/en/application-dev/reference/arkui-js/js-components-common-styles.md
index 4a3a7f2973f4dca4b3e4b6b5267f35fd71eb3241..2c61ed94f1317ccbd3e429b6bc2a3516db28f337 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-styles.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-styles.md
@@ -34,7 +34,7 @@ You can set universal styles for components in the **style** attribute or **.css
 | background                               | &lt;linear-gradient&gt;                  | -            | 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;                            | -            | Background color.                                 |
 | background-image                         | string                                   | -            | Background image. Both online and local image resources are supported. Currently, this attribute is not compatible with **background-color** or **background**.<br>Example:<br>- background-image: url("/common/background.png")<br>The SVG format is not supported.|
-| background-size                          | - string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | auto         | Background image size.<br>- The **string** values are as follows:<br>  - **contain**: Expands 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>- The two **<length>** values are as follows:<br>  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:<br>  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-size                          | - string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | auto         | Background image size.<br>- The **string** values are as follows:<br>  - **contain**: Expands 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>- The two **\<length>** values are as follows:<br>  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:<br>  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       | 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 the x-axis and y-axis at the same time.<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 | - 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. For the upper left corner, the value is **0 0**. 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>**. |
 | box-shadow<sup>5+</sup>                  | string                                   | 0            | Syntax: **box-shadow: h-shadow v-shadow blur spread color**<br>Shadow style of the current component. The value includes the horizontal position (mandatory), vertical position (mandatory), fuzzy radius (optional, default value: **0**), extension distance (optional, default value: **0**), and color (optional, default value: **black**) of the shadow.<br>Example:<br>- box-shadow :10px 20px 5px 10px \#888888<br>- box-shadow :100px 100px 30px red<br>- box-shadow :-100px -100px 0px 40px |
@@ -54,7 +54,7 @@ You can set universal styles for components in the **style** attribute or **.css
 | [start \| end]<sup>6+</sup>    | &lt;length&gt; \| &lt;percentage&gt; | -            | **start &#x7C; end** must be used together with **position** to determine the offset of an element.<br/>- The **start** attribute specifies the start edge position of the element. This attribute defines the offset between the start edge of a positioned element and that of a block included in the element.<br/>- The **end** attribute specifies the end edge position of the element. This attribute defines the offset between the end edge of a positioned element and that of a block included in the element. |
 | z-index<sup>6+</sup>                     | number                                   | -            | Rendering sequence of child nodes under the same parent node. A child node with a larger value will be rendered later.<br>z-index does not support auto, and other styles such as opacity do not affect the rendering sequence of z-index.|
 | image-fill<sup>6+</sup>                  | &lt;color&gt;                            | -            | Fill color for SVG images. The following components are supported: **button** (icon attribute), **piece** (icon attribute), **search** (icon attribute), **input** (headericon attribute), **textarea** (headericon attribute), **image** (src attribute), and **toolbar-item** (icon attribute)<br>The **fill** color value in the SVG image file is replaced with the value of **image-fill** during rendering, and is valid only for the fill attribute that is declared in the SVG image.|
-| clip-path<sup>6+</sup>                   | [ &lt;geometry-box&gt; \| &lt;basic-shape&gt; ] \| none | -            | Clip area of a component. Only the content within this area is displayed.<br>**<geometry-box>**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:<br>- **margin-box**: The width and height includes the margin.<br>- **border-box**: The width and height includes the border.<br>- **padding-box**: The width and height includes the padding.<br>- **content-box**: The width and height does not include any margin, border, or padding.<br>**<basic-shape>**: shape of the clip area. Available values include:<br>- **inset**, in the format of inset( \<percentage>{1,4} [ round \<'border-radius'> ]? ).<br>- **circle**, in the format of circle( [ \<percentage> ]? [ at &lt;percentage&gt; &lt;percentage&gt; ]? ).<br>- **ellipse**, in the format of ellipse( [ \<percentage>{2} ]? [ at &lt;percentage&gt; &lt;percentage&gt; ]? ).<br>- **polygon**, in the format of polygon( [ \<percentage> \<percentage> ]\# ).<br>- **path**, in the format of path( \<string> ).|
+| clip-path<sup>6+</sup>                   | [ &lt;geometry-box&gt; \| &lt;basic-shape&gt; ] \| none | -            | Clip area of a component. Only the content within this area is displayed.<br>**\<geometry-box>**: applicable scope of the clip area's width and height. The default value is **border-box**. Available values are as follows:<br>- **margin-box**: The width and height includes the margin.<br>- **border-box**: The width and height includes the border.<br>- **padding-box**: The width and height includes the padding.<br>- **content-box**: The width and height does not include any margin, border, or padding.<br>**\<basic-shape>**: shape of the clip area. Available values include:<br>- **inset**, in the format of inset( \<percentage>{1,4} [ round \<'border-radius'> ]? ).<br>- **circle**, in the format of circle( [ \<percentage> ]? [ at &lt;percentage&gt; &lt;percentage&gt; ]? ).<br>- **ellipse**, in the format of ellipse( [ \<percentage>{2} ]? [ at &lt;percentage&gt; &lt;percentage&gt; ]? ).<br>- **polygon**, in the format of polygon( [ \<percentage> \<percentage> ]\# ).<br>- **path**, in the format of path( \<string> ).|
 | mask-image<sup>6+</sup>                  | - &lt;linear-gradient&gt;<br>- string | -            | Image used for the mask of a component:<br>Gradient color mask, for example:<br>linear-gradient(to left, black, white)<br>Solid color mask, for example:<br>linear-gradient(to right, grey , grey)<br>Mask filled by a local SVG image, for example, **url(common/mask.svg)**|
 | mask-size<sup>6+</sup>                   | - string<br>- &lt;length&gt;&lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | auto         | Display size of the mask image. The setting is valid only when **mask-image** is set to an image source.<br>The **string** values are as follows:<br>- **contain**: Expands the image to the maximum size so that its height and width are fully applicable to the content area.<br>- **cover**: Extends the 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>The two **\<length>** values are as follows: 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 indicate the image size in relative to the original image size. 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. |
 | mask-position<sup>6+</sup>               | - string string<br>- &lt;length&gt; &lt;length&gt;<br>- &lt;percentage&gt; &lt;percentage&gt; | 0px 0px | Display position of the mask image. The setting is valid only when **mask-image** is set to an image source. 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>The **string** values are as follows:<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. For the upper left corner, the value is **0 0**. 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>**. |
diff --git a/en/application-dev/reference/arkui-js/js-components-container-badge.md b/en/application-dev/reference/arkui-js/js-components-container-badge.md
index d9322ba2777470e7396354768fe31c3ee7b9b213..c0855efd572677c06214c3bd4900fbfff05a9684 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-badge.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-badge.md
@@ -50,7 +50,7 @@ The [universal styles](../arkui-js/js-components-common-styles.md) are supported
 
 >  **NOTE**
 >
->  The total size of child components must be smaller than or equal to that of the **<badge>** component. Otherwise, the child components cannot be displayed.
+>  The total size of child components must be smaller than or equal to that of the **\<badge>** component. Otherwise, the child components cannot be displayed.
 
 
 ## Events
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 3ac87caa897942f38b8863aca8a21b538337aa84..640c6c420ce81d299b7d12a1b67cca42b543ea1b 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
@@ -45,8 +45,8 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
 
 | Name                           | Type                                      | Default Value        | Mandatory  | Description                                      |
 | ----------------------------- | ---------------------------------------- | ----------- | ---- | ---------------------------------------- |
-| divider-color<sup>5+</sup>    | &lt;color&gt;                            | transparent | No   | Item divider color. This style is valid only when the **divider** attribute of **<list>** is set to **true**.     |
-| divider-height<sup>5+</sup>   | &lt;length&gt;                           | 1           | No   | Item divider height. This style is valid only when the **divider** attribute of **<list>** is set to **true**.     |
+| divider-color<sup>5+</sup>    | &lt;color&gt;                            | transparent | No   | Item divider color. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.     |
+| divider-height<sup>5+</sup>   | &lt;length&gt;                           | 1           | No   | Item divider height. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.     |
 | divider-length<sup>5+</sup>   | &lt;length&gt;                           | Main axis width       | No   | Item divider length. If this style is not set, the maximum length is the width of the main axis, and the actual length depends on the **divider-origin** parameter. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
 | divider-origin<sup>5+</sup>   | &lt;length&gt;                           | 0           | No   | Item divider offset relative to the start point of the main axis. This style is valid only when the **divider** attribute of **\<list>** is set to **true**.|
 | flex-direction                | string                                   | column      | No   | Main axis direction of the flex container. It specifies how items are placed in the flex container.<br>- **column**: The y-axis is the main axis.<br>- **row**: The x-axis is the main axis.<br>For the **\<list>** component, the default value is **column**. For other components, the default value is **row**.|
diff --git a/en/application-dev/reference/arkui-js/js-components-container-stepper.md b/en/application-dev/reference/arkui-js/js-components-container-stepper.md
index f957e14aed43aaef9edb1b15bc543eb0994d2f96..6a666a454cd424e1b3daf67fcae1c4a4e08f67a6 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-stepper.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-stepper.md
@@ -27,7 +27,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
 
 | Name   | Type    | Default Value | Description                            |
 | ----- | ------ | ---- | ------------------------------ |
-| index | number | -    | Index of the **<stepper-item>** child component that is currently displayed.|
+| index | number | -    | Index of the **\<stepper-item>** child component that is currently displayed.|
 
 
 ## Styles
@@ -48,8 +48,8 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
 | finish | -                                       | Triggered when the last step on the navigator is complete.                   |
 | skip   | -                                       | Triggered when users click the skip button, which works only if you have called **setNextButtonStatus** method to allow users to skip all steps.|
 | change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.|
-| next   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the next step to go.|
-| back   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the previous step.|
+| next   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\<stepper-item>** child component as the next step to go.|
+| back   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **\<stepper-item>** child component as the previous step.|
 
 
 ## Methods
diff --git a/en/application-dev/reference/arkui-js/js-components-svg.md b/en/application-dev/reference/arkui-js/js-components-svg.md
index 1ac5d3f287246d41e586a71069c892774e3533a3..5211d35eb04004f778dfeb151b70f1fe17fefe04 100644
--- a/en/application-dev/reference/arkui-js/js-components-svg.md
+++ b/en/application-dev/reference/arkui-js/js-components-svg.md
@@ -6,7 +6,7 @@ The **\<svg>** component is a basic container. It can be used as the root node o
 >  **NOTE**
 > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 > 
-> - The width and height must be defined for the **<svg>** parent component or **<svg>** component. Otherwise, the component is not drawn.
+> - The width and height must be defined for the **\<svg>** parent component or **\<svg>** component. Otherwise, the component is not drawn.
 
 ## Required Permissions
 
diff --git a/en/application-dev/reference/arkui-ts/ts-container-badge.md b/en/application-dev/reference/arkui-ts/ts-container-badge.md
index 912f89de44f63e6e3bb896efb5fa64025f4bd115..7d51379bea19538c5e1c5498d2165373331ed924 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-badge.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-badge.md
@@ -29,7 +29,7 @@ Create a badge.
 | count | number | Yes| - | Number of notifications.|
 | position | BadgePosition | No| BadgePosition.RightTop | Position to display the badge relative to the parent component.|
 | maxCount | number | No| 99 | Maximum number of notifications. When the maximum number is reached, only **maxCount+** is displayed.|
-| style | BadgeStyle | Yes| - | Style of the **<Badge>** component, including the text color, text size, badge color, and badge size.|
+| style | BadgeStyle | Yes| - | Style of the **\<Badge>** component, including the text color, text size, badge color, and badge size.|
 
 Method 2: Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle})
 
diff --git a/en/application-dev/reference/arkui-ts/ts-container-flex.md b/en/application-dev/reference/arkui-ts/ts-container-flex.md
index 2eca2a40d14dbe2ef9b91acb7e2ea21b599a4b42..7d6c24e671419edc603a17cdea023878ebc6239d 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-flex.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-flex.md
@@ -30,7 +30,7 @@ Creates a standard **\<Flex>** component.
   | wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)  | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
   | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
   | alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | No   | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
-  | alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
+  | alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
 
 
 ## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
index 9befeb19bfc2ceb801ad82b29d1ce22c9b1db5f1..a2f9888f7fb5f6fc460a838e3db04ddc5b67a7d8 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md
@@ -40,7 +40,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | displayMode                 | SwiperDisplayMode                        | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
 | cachedCount<sup>8+</sup>    | number                                   | Number of child components to be cached.<br>Default value: **1**                             |
 | disableSwipe<sup>8+</sup>   | boolean                                  | Whether to disable the swipe feature.<br>Default value: **false**                             |
-| curve<sup>8+</sup>          | [Curve](ts-appendix-enums.md#curve)  \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
+| curve<sup>8+</sup>          | [Curve](ts-appendix-enums.md#curve)  \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
 | indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md#resourcecolor),<br>selectedColor?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style of the navigation dots indicator.<br>\- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation dots indicator.<br>\- **mask**: whether to enable the mask for the navigation dots indicator.<br>\- **color**: color of the navigation dots indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
 | displayCount<sup>8+</sup>   | number\|string                                               | Number of elements to display.<br>Default value: **1**                                          |
 | effectMode<sup>8+</sup>     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)  | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
@@ -62,7 +62,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 ## SwiperController
 
-Controller of the **\<Swiper>** component. You can bind this object to the **<Swiper>** component and use it to control page switching.
+Controller of the **\<Swiper>** component. You can bind this object to the **\<Swiper>** component and use it to control page switching.
 
 ### showNext
 
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
index 23da0093a624bcae6f17aa2c6c177ed4c283a44f..81a10d89262340b851a66a47c02735c2dd10c006 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -29,7 +29,7 @@ Use the following attributes to bind gesture recognition to a component. When a
   | Name| Description|
   | -------- | -------- |
   | Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence.|
-  | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br>However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered.|
+  | IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.<br>However, the built-in gestures of the child components are not masked. For example, when the child component is a **\<List>** component, the built-in sliding gestures can still be triggered.|
 
 
 - GestureType
diff --git a/en/application-dev/ui/ui-js-components-stepper.md b/en/application-dev/ui/ui-js-components-stepper.md
index 4c89c10be105073f38fde856d01aeb0c09da550f..ec4eb30bbef9c4ea5cbcd5e234cb86864de42196 100644
--- a/en/application-dev/ui/ui-js-components-stepper.md
+++ b/en/application-dev/ui/ui-js-components-stepper.md
@@ -1,6 +1,6 @@
 # \<stepper> Development
 
-When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
+When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
 
 
 > **NOTE**