update docs

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

en/application-dev/reference/arkui-js/js-components-media-video.md

 # video
 
 
->  **NOTE**<br>
+>  **NOTE**
 >
 > - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
 >
@@ -15,7 +15,7 @@
 > ]
 > ```
 
-The **\<Video>** component provides a video player.
+The **\<video>** component provides a video player.
 
 
 ## Child Components
@@ -76,7 +76,8 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
 | pause | - | Pauses a video.|
 | setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | Sets the video playback position, in seconds.|
 
->  **NOTE**<br>
+> **NOTE**
+>
 > The methods in the above table can be called after the **attached** callback is invoked.
 
 ## Example
@@ -89,7 +90,7 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
          onpaues='pauesCallback' onfinish='finishCallback' onerror='errorCallback'
          onseeking='seekingCallback' onseeked='seekedCallback' 
          ontimeupdate='timeupdateCallback'
-         style="object-fit:fit; width:80%; height:400px;"
+         style="object-fit:fill; width:80%; height:400px;"
          onclick="change_start_pause">
    </video>
 </div>

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

 # Progress
 
 
-> **NOTE**<br>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **&lt;Progress&gt;** component is used to provide a progress bar that displays the progress of content loading or an operation.
+The **\<Progress>** component is used to provide a progress bar that displays the progress of content loading or an operation.
 
 
 ## Required Permissions
@@ -15,12 +16,12 @@ None
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
-Progress(value: { value: number, total?: number, type?: ProgressType})
+Progress(value: {value: number, total?: number, type?: ProgressType})
 
 Creates a progress bar.
 
@@ -54,7 +55,8 @@ Creates a progress bar.
 ## Example
 
 
-```
+```ts
+// xxx.ets
 @Entry
 @Component
 struct ProgressExample {
@@ -88,8 +90,8 @@ struct ProgressExample {
 
       Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
       Row({ space: 40 }) {
-        Progress({ value: 10, type: ProgressType.Capsule }).width(100)
-        Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100)
+        Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
+        Progress({ value: 20, total: 150, type: ProgressType.Capsule }).color(Color.Grey).value(50).width(100).height(50)
       }
     }.width('100%').margin({ top: 30 })
   }

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

 # TextArea
 
 
-> **NOTE**<br>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -15,12 +16,12 @@ None
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
 
-TextArea(value?:{placeholder?: string controller?: TextAreaController})
+TextArea(value?:{placeholder?: string, controller?: TextAreaController})
 
 - Parameters
     | Name                    | Type                                     | Mandatory | Default Value | Description                            |
@@ -93,10 +94,11 @@ Sets the position of the caret.
 @Entry
 @Component
 struct TextAreaExample1 {
+  controller: TextAreaController = new TextAreaController()
   @State text: string = ''
   build() {
     Column() {
-      TextArea({ placeholder: 'input your word'})
+      TextArea({ placeholder: 'input your word', controller: this.controller})
         .placeholderColor("rgb(0,0,225)")
         .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
         .textAlign(TextAlign.Center)
@@ -112,6 +114,7 @@ struct TextAreaExample1 {
         })
         .onChange((value: string) => {
           this.text = value
+          this.controller.caretPosition(-1)
         })
       Text(this.text).width('90%')
     }

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

 # TextInput
 
-> **NOTE**<br/>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
@@ -14,7 +15,7 @@ None
 
 ## Child Components
 
-None
+Not supported
 
 
 ## APIs
@@ -39,7 +40,7 @@ In addition to universal attributes, the following attributes are supported.
 | placeholderFont | {<br/>size?: Length,<br/>weight?: number\|[FontWeight](ts-universal-attributes-text-style.md),<br/>family?: string,<br/>style?: [FontStyle](ts-universal-attributes-text-style.md)<br/>} | - | Placeholder text style.<br/>- **size**: font size. If the value is of the number type, the unit fp is used.<br/>- **weight**: font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.<br/>- **family**: font family. Use commas (,) to separate multiple fonts, for example, **'Arial, sans-serif'**. The priority of the fonts is the sequence in which they are placed.<br/>- **style**: font style. |
 | enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
 | caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
-| maxLength<sup>8+</sup> | number | - | Maximum number of characters in the text input. |
+| maxLength | number | - | Maximum number of characters in the text input. |
 | inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: regular expression to set.<br/>- **error**: error message containing the ignored content returned when regular expression matching fails. |
 | copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. |
 
@@ -75,10 +76,10 @@ In addition to universal attributes, the following attributes are supported.
 
 ### TextInputController<sup>8+</sup>
 
-Implements the controller of the **&lt;TextInput&gt;** component.
+Implements the controller of the **\<TextInput>** component.
 
 
-### Objects to Import
+#### Objects to Import
 
 
 ```
@@ -86,7 +87,7 @@ controller: TextInputController = new TextInputController()
 ```
 
 
-### caretPosition
+#### caretPosition
 
 caretPosition(value: number): void
 
@@ -113,10 +114,9 @@ struct TextInputExample1 {
 
   build() {
     Column() {
-      TextArea({ placeholder: 'input your word' })
+      TextInput({ placeholder: 'input your word' })
         .placeholderColor("rgb(0,0,225)")
         .placeholderFont({ size: 30, weight: 100, family: 'cursive', style: FontStyle.Italic })
-        .textAlign(TextAlign.Center)
         .caretColor(Color.Blue)
         .height(50)
         .fontSize(30)

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

 # Navigator
 
 
-> **NOTE**<br>
+> **NOTE**
+>
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-The **Navigator** component provides redirection to the target page.
+The **\<Navigator>** component provides redirection to the target page.
 
 
 ## Required Permissions
@@ -42,25 +43,26 @@ Creates a navigator.
 
 | Name | Parameters | Default Value | Description |
 | -------- | -------- | -------- | -------- |
-| active | boolean | - | Whether the **Navigator** component is activated. If the component is activated, the corresponding navigation takes effect. | 
+| active | boolean | - | Whether the **\<Navigator>** component is activated. If the component is activated, the corresponding navigation takes effect. |
 | params | Object | undefined | Data that needs to be passed to the target page during redirection. You can use **router.getParams()** to obtain the data on the target page. |
 
 
 ## Example
 
 
-```
-// Navigator Page
+```ts
+// Navigator.ets
 @Entry
 @Component
 struct NavigatorExample {
   @State active: boolean = false
-  @State Text: string = 'news'
+  @State Text: object = {name: 'news'}
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
       Navigator({ target: 'pages/container/navigator/Detail', type: NavigationType.Push }) {
-        Text('Go to ' + this.Text + ' page').width('100%').textAlign(TextAlign.Center)
+        Text('Go to ' + this.Text['name'] + ' page')
+            .width('100%').textAlign(TextAlign.Center)
       }.params({ text: this.Text })
 
       Navigator() {
@@ -75,14 +77,14 @@ struct NavigatorExample {
 ```
 
 
-```
-// Detail Page
+```ts
+// Detail.ets
 import router from '@system.router'
 
 @Entry
 @Component
 struct DetailExample {
-  @State text: string = router.getParams().text
+  @State text: any = router.getParams().text
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
@@ -90,7 +92,8 @@ struct DetailExample {
         Text('Go to back page').width('100%').height(20)
       }
 
-      Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center)
+      Text('This is ' + this.text['name'] + ' page')
+          .width('100%').textAlign(TextAlign.Center)
     }
     .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
   }
@@ -98,9 +101,8 @@ struct DetailExample {
 
 ```
 
-  
-```
-// Back Page
+```ts
+// Back.ets
 @Entry
 @Component
 struct BackExample {