update docs

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

en/application-dev/reference/arkui-ts/ts-container-ability-component.md

 # AbilityComponent
 
+**\<AbilityComponent>** is a container for independently displaying an ability.
+
 >  **NOTE**
 >
 >  This component is supported since API version 9.
@@ -7,8 +9,6 @@
 >  The APIs of this module are system APIs and cannot be called by third-party applications.
 
 
-**\<AbilityComponent>** is a container for independently displaying an ability.
-
 ## Constraints
 
 Using **\<AbilityComponent>** requires a signature and related permissions.
@@ -41,34 +41,20 @@ Not supported
 
 ## APIs
 
-AbilityComponent(value: {want : Want, controller? : AbilityController})
+AbilityComponent(value: {want : Want})
 
 - Parameters
   | Name| Type| Mandatory| Default Value| Description|
   | -------- | -------- | -------- | -------- | -------- |
   | want | [Want](../../reference/apis/js-apis-application-Want.md) | Yes| - | Description of the default ability to load.|
-  | controller | [AbilityController](#abilityController) | No| - | Ability controller.|
 
 
 ## Events
 
 | Name| Description|
 | -------- | -------- |
-| onReady()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**.|
-| onDestroy()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is destroyed.|
-| onAbilityCreated(name:&nbsp;string)&nbsp;=&gt;&nbsp;void | Called when the specified ability is loaded.|
-| onAbilityMoveToFont()&nbsp;=&gt;&nbsp;void               | Called when this ability is moved to the foreground.|
-| onAbilityWillRemove()&nbsp;=&gt;&nbsp;void | Called when this ability is about to be removed.|
-
-## AbilityController
-
-Implements an ability controller, which provides the control APIs for **\<AbilityComponent>**.
-
-| Name                                   | Description                                                    |
-| --------------------------------------- | ------------------------------------------------------------ |
-| startAbility()&nbsp;=&gt;&nbsp;want     | Loads an ability inside the **\<AbilityComponent>**.<br>**want**: description of the ability to be loaded.|
-| preformBackPress()&nbsp;=&gt;&nbsp;void | Performs a return operation inside the **\<AbilityComponent>**.                        |
-| getStackCount()&nbsp;=&gt;&nbsp;void    | Obtains the number of tasks in the internal task stack of the **\<AbilityComponent>**.                |
+| onConnect()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**.|
+| onDisconnect()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is destroyed.|
 
 
 ## Example
@@ -78,7 +64,6 @@ Implements an ability controller, which provides the control APIs for **\<Abilit
 @Entry
 @Component
 struct MyComponent {
- @State controller: AbilityController = new AbilityController()
 
   build() {
       Column() {
@@ -87,26 +72,12 @@ struct MyComponent {
                   bundleName: '',
                   abilityName: ''
               },
-              controller: this.controller
-          })
-          .onReady(() => {
-              console.log('AbilityComponent ready');
-          })
-          .onDestory(() => {
-              console.log('AbilityComponent destory');
           })
-          Button("Start New")
-          .onClick(() => {
-              this.controller.startAbility({
-                  bundleName: '',
-                  abilityName: ''
-              });
+          .onConnect(() => {
+              console.log('AbilityComponent connect');
           })
-          Button("Back")
-          .onClick(() => {
-              if (this.controller.getStacjCount() > 1) {
-                  this.controller.preformBackPress();
-              }
+          .onDisconnect(() => {
+              console.log('AbilityComponent disconnect');
           })
       }
   }

en/application-dev/reference/arkui-ts/ts-container-column.md

 # Column
 
 
-> **NOTE**<br>
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
+The **\<Column>** component lays out child components vertically.
 
-The **&lt;Column&gt;** component lays out child components vertically.
+> **NOTE**
+>
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
 ## Required Permissions
@@ -47,7 +47,8 @@ Column(value:{space?: Length})
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ColumnExample {
@@ -76,6 +77,7 @@ struct ColumnExample {
           Column().width('30%').height(30).backgroundColor(0xAFEEEE)
           Column().width('30%').height(30).backgroundColor(0x00FFFF)
         }.height('15%').border({ width: 1 }).justifyContent(FlexAlign.Center)
+
         Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
         Column() {
           Column().width('30%').height(30).backgroundColor(0xAFEEEE)

en/application-dev/reference/arkui-ts/ts-container-flex.md

 # Flex
 
-
-> **NOTE**<br/>
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
 The **\<Flex>** component allows for elastic layout of child components.
 
+> **NOTE**
+> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> - The **\<Flex>** component adapts the layout of flex items to comply with the **flexShrink** and **flexGrow** settings. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
+
 
 ## Required Permissions
 
@@ -25,44 +24,44 @@ Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: F
 Creates a standard **\<Flex>** component.
 
 - Parameters
-  | Name | Type | Mandatory | Default Value | Description |
-  | -------- | -------- | -------- | -------- | -------- |
-  | direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
-  | wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
-  | justifyContent | 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-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
-  | alignContent | 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**. |
+  | Name           | Type                                    | Mandatory  | Default Value              | Description                                    |
+  | -------------- | ---------------------------------------- | ---- | ----------------- | ---------------------------------------- |
+  | direction      | FlexDirection                            | No   | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis.                |
+  | wrap           | FlexWrap                                 | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
+  | justifyContent | 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-enums)| No   | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
+  | alignContent   | 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**.|
 
 - FlexDirection enums
-  | Name | Description |
-  | -------- | -------- |
-  | Row | The child components are arranged in the same direction as the main axis runs along the rows. |
-  | RowReverse | The child components are arranged opposite to the **Row** direction. |
-  | Column | The child components are arranged in the same direction as the main axis runs down the columns. |
-  | ColumnReverse | The child components are arranged opposite to the **Column** direction. |
+  | Name           | Description              |
+  | ------------- | ---------------- |
+  | Row           | The child components are arranged in the same direction as the main axis runs along the rows. |
+  | RowReverse    | The child components are arranged opposite to the **Row** direction. |
+  | Column        | The child components are arranged in the same direction as the main axis runs down the columns. |
+  | ColumnReverse | The child components are arranged opposite to the **Column** direction.|
 
 - FlexWrap enums
-  | Name | Description |
-  | -------- | -------- |
-  | NoWrap | The child components in the **&lt;Flex&gt;** component are arranged in a single line, and they may overflow. |
-  | Wrap | The child components in the **&lt;Flex&gt;** component are arranged in multiple lines, and they may overflow. |
-  | WrapReverse | The child components in the **&lt;Flex&gt;** component are reversely arranged in multiple lines, and they may overflow. |
+  | Name       | Description                                             |
+  | ----------- | ------------------------------------------------- |
+  | NoWrap      | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow.  |
+  | Wrap        | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow.    |
+  | WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
 
 - FlexAlign enums
-  | Name | Description |
-  | -------- | -------- |
-  | Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
-  | Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
-  | End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
-  | SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
-  | SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
-  | SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
+  | Name        | Description                                                        |
+  | ------------ | ------------------------------------------------------------ |
+  | Start        | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
+  | Center       | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
+  | End          | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
+  | SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
+  | SpaceAround  | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
+  | SpaceEvenly  | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
 
 
 ## Example
 
-```
-// Example 01
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample1 {
@@ -124,9 +123,8 @@ struct FlexExample1 {
 
 ![en-us_image_0000001256978365](figures/en-us_image_0000001256978365.gif)
 
-
-```
-// Example 02
+```ts
+// xxx.ets
 @Entry
 @Component
 struct FlexExample2 {
@@ -171,9 +169,8 @@ struct FlexExample2 {
 
 ![en-us_image_0000001211898500](figures/en-us_image_0000001211898500.png)
 
-
-```
-// Example 03
+```ts
+// xxx.ets
 @Component
 struct JustifyContentFlex {
   @Prop justifyContent : number
@@ -221,9 +218,8 @@ struct FlexExample3 {
 
 ![en-us_image_0000001212218462](figures/en-us_image_0000001212218462.gif)
 
-
-```
-// Example 04
+```ts
+// xxx.ets
 @Component
 struct AlignItemsFlex {
   @Prop alignItems : number
@@ -273,9 +269,8 @@ struct FlexExample4 {
 
 ![en-us_image_0000001212378426](figures/en-us_image_0000001212378426.gif)
 
-
-```
-// Example 05
+```ts
+// xxx.ets
 @Component
 struct AlignContentFlex {
   @Prop alignContent: number

en/application-dev/reference/arkui-ts/ts-container-tabs.md

 # Tabs
 
 
-> **NOTE**<br>
-> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-
-
 The **<Tabs\>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
 
+> **NOTE**
+>
+> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
 
 ## Required Permissions
 
@@ -87,7 +87,8 @@ Switches to the specified tab.
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct TabsExample {