diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
index a6031d9440bc49619853cc154bd01b5d5e13852f..16884200f16f3521dcd875a035f242050afb282a 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
@@ -64,7 +64,7 @@ struct GaugeExample {
       
       // 参数设置当前值为75，属性设置值为25，属性设置优先级高
       Gauge({ value: 75 })
-        .value(25) //属性和参数都设置时以参数为准
+        .value(25) // 属性和参数都设置时以参数为准
         .width(200).height(200)
         .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
       
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
index 228d46c53f5a7dbc6625e39978edd3f271a26c62..e8e04417715a97e95f834d5f3002f9b06c0642dc 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-image.md
@@ -353,17 +353,17 @@ struct ImageExample3 {
 ###  渲染沙箱路径图片
 
 ```
-import fileio from '@ohos.fileio';
-import image from '@ohos.multimedia.image';
+import fileio from '@ohos.fileio'
+import image from '@ohos.multimedia.image'
 
-const EMPTY_PATH = 'file://';
+const EMPTY_PATH = 'file://'
 
 @Entry
 @Component
 struct LoadImageExample {
-  @State fileContent: string = '';
-  @State path: string = EMPTY_PATH;
-  @State accountInfoHeadPic: any = '';
+  @State fileContent: string = ''
+  @State path: string = EMPTY_PATH
+  @State accountInfoHeadPic: any = ''
 
   build() {
     Column() {
@@ -371,22 +371,22 @@ struct LoadImageExample {
         .margin({ bottom: 10 })
         .onClick(() => {
           try {
-            this.path = EMPTY_PATH;
-            let context = getContext(this);
-            let path = context.getApplicationContext().filesDir + '/icon.png';
-            console.log(`读取沙箱图片=========>${path}`);
-            let fd = fileio.openSync(path, 0o100, 0o666);
-            console.log(`create file========>${fd}`);
-            let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png';
-            fileio.copyFileSync(srcPath, path);
-            console.log(`error:=============>${e.message}`);
+            this.path = EMPTY_PATH
+            let context = getContext(this)
+            let path = context.getApplicationContext().filesDir + '/icon.png'
+            console.log(`读取沙箱图片=========>${path}`)
+            let fd = fileio.openSync(path, 0o100, 0o666)
+            console.log(`create file========>${fd}`)
+            let srcPath = context.bundleCodeDir + '/entry/resource/base/media/icon.png'
+            fileio.copyFileSync(srcPath, path)
+            console.log(`error:=============>${e.message}`)
           }
         })
       Button('读取资源图片')
         .margin({ bottom: 10 })
         .onClick(() => {
           this.path = EMPTY_PATH;
-          this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png');
+          this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png')
         })
       Text(`图片路径:${this.path}`)
         .fontSize(20)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
index 7edd6d11691ffaa297f809d16372f6ebe4bb6662..13653c27a6f350091794ea36af4c6847209fe355 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
@@ -66,9 +66,9 @@ reset(): void
 @Entry
 @Component
 struct PatternLockExample {
-  @State passwords: Number[] = [];
-  @State message: string = 'please input password!';
-  private patternLockController: PatternLockController = new PatternLockController();
+  @State passwords: Number[] = []
+  @State message: string = 'please input password!'
+  private patternLockController: PatternLockController = new PatternLockController()
 
   build() {
     Column() {
@@ -85,29 +85,29 @@ struct PatternLockExample {
         .onPatternComplete((input: Array<number>) => {
           // 输入的密码长度小于5时，提示重新输入
           if (input === null || input === undefined || input.length < 5) {
-            this.message = 'The password length needs to be greater than 5, please enter again.';
-            return;
+            this.message = 'The password length needs to be greater than 5, please enter again.'
+            return
           }
           // 判断密码长度是否大于0
           if (this.passwords.length > 0) {
             // 判断两次输入的密码是否相同，相同则提示密码设置成功，否则提示重新输入
             if (this.passwords.toString() === input.toString()) {
-              this.passwords = input;
-              this.message = 'Set password successfully: ' + this.passwords.toString();
+              this.passwords = input
+              this.message = 'Set password successfully: ' + this.passwords.toString()
             } else {
-              this.message = 'Inconsistent passwords, please enter again.';
+              this.message = 'Inconsistent passwords, please enter again.'
             }
           } else {
             // 提示第二次输入密码
-            this.passwords = input;
-            this.message = "Please enter again.";
+            this.passwords = input
+            this.message = "Please enter again."
           }
         })
       Button('Reset PatternLock').margin(30).onClick(() => {
         // 重置密码锁
-        this.patternLockController.reset();
-        this.passwords = [];
-        this.message = 'Please input password';
+        this.patternLockController.reset()
+        this.passwords = []
+        this.message = 'Please input password'
       })
     }.width('100%').height('100%')
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
index 77e5cd47836947ba9efe003504a41147cf1508c2..a336251138f20d8f02d64fefbe30e18b423d0dbb 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-search.md
@@ -75,9 +75,9 @@ caretPosition(value: number): void
 @Entry
 @Component
 struct SearchExample {
-  @State changeValue: string = '';
-  @State submitValue: string = '';
-  controller: SearchController = new SearchController();
+  @State changeValue: string = ''
+  @State submitValue: string = ''
+  controller: SearchController = new SearchController()
 
   build() {
     Column() {
@@ -92,16 +92,16 @@ struct SearchExample {
         .placeholderFont({ size: 14, weight: 400 })
         .textFont({ size: 14, weight: 400 })
         .onSubmit((value: string) => {
-          this.submitValue = value;
+          this.submitValue = value
         })
         .onChange((value: string) => {
-          this.changeValue = value;
+          this.changeValue = value
         })
         .margin(20)
       Button('Set caretPosition 1')
         .onClick(() => {
           // 设置光标位置到输入的第一个字符后
-          this.controller.caretPosition(1);
+          this.controller.caretPosition(1)
         })
     }.width('100%')
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
index 80ff26bdd482cdd46e2ac803bd0b896274f4e336..4ee4b62624d053f2198c44f1cfa14d60d83d6d87 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-slider.md
@@ -75,14 +75,14 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
 @Entry
 @Component
 struct SliderExample {
-  @State outSetValueOne: number = 40;
-  @State inSetValueOne: number = 40;
-  @State outSetValueTwo: number = 40;
-  @State inSetValueTwo: number = 40;
-  @State vOutSetValueOne: number = 40;
-  @State vInSetValueOne: number = 40;
-  @State vOutSetValueTwo: number = 40;
-  @State vInSetValueTwo: number = 40;
+  @State outSetValueOne: number = 40
+  @State inSetValueOne: number = 40
+  @State outSetValueTwo: number = 40
+  @State inSetValueTwo: number = 40
+  @State vOutSetValueOne: number = 40
+  @State vInSetValueOne: number = 40
+  @State vOutSetValueTwo: number = 40
+  @State vInSetValueTwo: number = 40
 
   build() {
     Column({ space: 8 }) {
@@ -96,8 +96,8 @@ struct SliderExample {
         })
           .showTips(true)
           .onChange((value: number, mode: SliderChangeMode) => {
-            this.outSetValueOne = value;
-            console.info('value:' + value + 'mode:' + mode.toString());
+            this.outSetValueOne = value
+            console.info('value:' + value + 'mode:' + mode.toString())
           })
         // toFixed(0)将滑动条返回值处理为整数精度
         Text(this.outSetValueOne.toFixed(0)).fontSize(12)
@@ -111,8 +111,8 @@ struct SliderExample {
         })
           .showSteps(true)
           .onChange((value: number, mode: SliderChangeMode) => {
-            this.outSetValueTwo = value;
-            console.info('value:' + value + 'mode:' + mode.toString());
+            this.outSetValueTwo = value
+            console.info('value:' + value + 'mode:' + mode.toString())
           })
         Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
       }
@@ -131,8 +131,8 @@ struct SliderExample {
           .selectedColor('#4169E1')
           .showTips(true)
           .onChange((value: number, mode: SliderChangeMode) => {
-            this.inSetValueOne = value;
-            console.info('value:' + value + 'mode:' + mode.toString());
+            this.inSetValueOne = value
+            console.info('value:' + value + 'mode:' + mode.toString())
           })
         Text(this.inSetValueOne.toFixed(0)).fontSize(12)
       }
@@ -148,8 +148,8 @@ struct SliderExample {
           .selectedColor('#4169E1')
           .showSteps(true)
           .onChange((value: number, mode: SliderChangeMode) => {
-            this.inSetValueTwo = value;
-            console.info('value:' + value + 'mode:' + mode.toString());
+            this.inSetValueTwo = value
+            console.info('value:' + value + 'mode:' + mode.toString())
           })
         Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
       }
@@ -169,8 +169,8 @@ struct SliderExample {
               .selectedColor('#4169E1')
               .showTips(true)
               .onChange((value: number, mode: SliderChangeMode) => {
-                this.vOutSetValueOne = value;
-                console.info('value:' + value + 'mode:' + mode.toString());
+                this.vOutSetValueOne = value
+                console.info('value:' + value + 'mode:' + mode.toString())
               })
             Slider({
               value: this.vOutSetValueTwo,
@@ -183,8 +183,8 @@ struct SliderExample {
               .selectedColor('#4169E1')
               .showSteps(true)
               .onChange((value: number, mode: SliderChangeMode) => {
-                this.vOutSetValueTwo = value;
-                console.info('value:' + value + 'mode:' + mode.toString());
+                this.vOutSetValueTwo = value
+                console.info('value:' + value + 'mode:' + mode.toString())
               })
           }
         }.width('50%').height(300)
@@ -200,8 +200,8 @@ struct SliderExample {
             })
               .showTips(true)
               .onChange((value: number, mode: SliderChangeMode) => {
-                this.vInSetValueOne = value;
-                console.info('value:' + value + 'mode:' + mode.toString());
+                this.vInSetValueOne = value
+                console.info('value:' + value + 'mode:' + mode.toString())
               })
             Slider({
               value: this.vInSetValueTwo,
@@ -212,8 +212,8 @@ struct SliderExample {
             })
               .showSteps(true)
               .onChange((value: number, mode: SliderChangeMode) => {
-                this.vInSetValueTwo = value;
-                console.info('value:' + value + 'mode:' + mode.toString());
+                this.vInSetValueTwo = value
+                console.info('value:' + value + 'mode:' + mode.toString())
               })
           }
         }.width('50%').height(300)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
index 12b32146b34e2ac75dd03e2e887037c7a6a0e016..d289dd65cb227bd32f908925cd2947812e73411d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-stepper.md
@@ -48,10 +48,10 @@ Stepper(value?: { index?: number })
 @Entry
 @Component
 struct StepperExample {
-  @State currentIndex: number = 0;
-  @State firstState: ItemState = ItemState.Normal;
-  @State secondState: ItemState = ItemState.Normal;
-  @State thirdState: ItemState = ItemState.Normal;
+  @State currentIndex: number = 0
+  @State firstState: ItemState = ItemState.Normal
+  @State secondState: ItemState = ItemState.Normal
+  @State thirdState: ItemState = ItemState.Normal
 
   build() {
     Stepper({
@@ -67,7 +67,7 @@ struct StepperExample {
             .margin({ top: 250, bottom: 50 })
           Button('change status:' + this.firstState)
             .onClick(() => {
-              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip;
+              this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
             })
         }.width('100%')
       }
@@ -83,7 +83,7 @@ struct StepperExample {
             .margin({ top: 250, bottom: 50 })
           Button('change status:' + this.secondState)
             .onClick(() => {
-              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled;
+              this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled
             })
         }.width('100%')
       }
@@ -100,7 +100,7 @@ struct StepperExample {
             .margin({ top: 250, bottom: 50 })
           Button('change status:' + this.thirdState)
             .onClick(() => {
-              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting;
+              this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
             })
         }.width('100%')
       }
@@ -119,14 +119,14 @@ struct StepperExample {
     }
     .onFinish(() => {
       // 此处可处理点击最后一页的Finish时的逻辑，例如路由跳转等
-      console.info('onFinish');
+      console.info('onFinish')
     })
     .onSkip(() => {
       // 此处可处理点击跳过时的逻辑，例如动态修改Stepper的index值使其跳转到某一步骤页等
-      console.info('onSkip');
+      console.info('onSkip')
     })
     .onChange((prevIndex: number, index: number) => {
-      this.currentIndex = index;
+      this.currentIndex = index
     })
   }
 }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
index 4cd68d8e5c0c24323c3f43f8023cfb750debe580..a36b7afae827d0421190ad5d788fcf06ce0a2080 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
@@ -85,7 +85,7 @@ struct TextAreaExample {
 
   build() {
     Column() {
-      TextArea({ placeholder: 'input your word', controller: this.controller })
+      TextArea({ placeholder: 'The text area can hold an unlimited amount of text. input your word', controller: this.controller })
         .placeholderFont({ size: 14, weight: 400 })
         .width(400)
         .height(50)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
index cc71f7e53cf4147ce72488e148a7659bce8c4662..8853f258c7bb80d731dcaf6d78319d005cd94d43 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
@@ -112,8 +112,8 @@ caretPosition(value:&nbsp;number): void
 @Entry
 @Component
 struct TextInputExample {
-  @State text: string = '';
-  controller: TextInputController = new TextInputController();
+  @State text: string = ''
+  controller: TextInputController = new TextInputController()
 
   build() {
     Column() {
@@ -127,14 +127,14 @@ struct TextInputExample {
         .fontSize(14)
         .fontColor(Color.Black)
         .onChange((value: string) => {
-          this.text = value;
+          this.text = value
         })
       Text(this.text)
       Button('Set caretPosition 1')
         .margin(15)
         .onClick(() => {
           // 将光标移动至第一个字符后
-          this.controller.caretPosition(1);
+          this.controller.caretPosition(1)
         })
       // 密码输入框
       TextInput({ placeholder: 'input your password...' })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
index 6a53c8b54acf74ecb26f23dbd4e38b1f397cb5b3..c98b994e927e91c33a8f7d559536941e92bfdc92 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md
@@ -37,7 +37,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController})
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -52,7 +52,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController})
   @Entry
   @Component
   struct WebComponent {
-    controller: web_webview.WebviewController = new web_webview.WebviewController();
+    controller: web_webview.WebviewController = new web_webview.WebviewController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -67,7 +67,7 @@ Web(options: { src: ResourceStr, controller: WebController | WebviewController})
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: $rawfile("index.html"), controller: this.controller })
@@ -109,7 +109,7 @@ domStorageAccess(domStorageAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -138,7 +138,7 @@ fileAccess(fileAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -167,7 +167,7 @@ fileFromUrlAccess(fileFromUrlAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -195,7 +195,7 @@ imageAccess(imageAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -228,16 +228,16 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     testObj = {
       test: (data1, data2, data3) => {
-        console.log("data1:" + data1);
-        console.log("data2:" + data2);
-        console.log("data3:" + data3);
-        return "AceString";
+        console.log("data1:" + data1)
+        console.log("data2:" + data2)
+        console.log("data3:" + data3)
+        return "AceString"
       },
       toString: () => {
-        console.log('toString' + "interface instead.");
+        console.log('toString' + "interface instead.")
       }
     }
     build() {
@@ -261,16 +261,16 @@ javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Arr
   @Entry
   @Component
   struct WebComponent {
-    controller: web_webview.WebviewController = new web_webview.WebviewController();
+    controller: web_webview.WebviewController = new web_webview.WebviewController()
     testObj = {
       test: (data1, data2, data3) => {
-        console.log("data1:" + data1);
-        console.log("data2:" + data2);
-        console.log("data3:" + data3);
-        return "AceString";
+        console.log("data1:" + data1)
+        console.log("data2:" + data2)
+        console.log("data3:" + data3)
+        return "AceString"
       },
       toString: () => {
-        console.log('toString' + "interface instead.");
+        console.log('toString' + "interface instead.")
       }
     }
     build() {
@@ -307,7 +307,7 @@ javaScriptAccess(javaScriptAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -336,8 +336,8 @@ mixedMode(mixedMode: MixedMode)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State mode: MixedMode = MixedMode.All;
+    controller: WebController = new WebController()
+    @State mode: MixedMode = MixedMode.All
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -366,7 +366,7 @@ onlineImageAccess(onlineImageAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -395,7 +395,7 @@ zoomAccess(zoomAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -424,7 +424,7 @@ overviewModeAccess(overviewModeAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -453,7 +453,7 @@ databaseAccess(databaseAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -482,7 +482,7 @@ geolocationAccess(geolocationAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -511,8 +511,8 @@ mediaPlayGestureAccess(access: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State access: boolean = true;
+    controller: WebController = new WebController()
+    @State access: boolean = true
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -541,7 +541,7 @@ multiWindowAccess(multiWindow: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -570,8 +570,8 @@ cacheMode(cacheMode: CacheMode)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State mode: CacheMode = CacheMode.None;
+    controller: WebController = new WebController()
+    @State mode: CacheMode = CacheMode.None
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -600,8 +600,8 @@ textZoomRatio(textZoomRatio: number)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State atio: number = 150;
+    controller: WebController = new WebController()
+    @State atio: number = 150
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -630,8 +630,8 @@ userAgent(userAgent: string)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36';
+    controller: WebController = new WebController()
+    @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -660,8 +660,8 @@ webDebuggingAccess(webDebuggingAccess: boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State webDebuggingAccess: boolean = true;
+    controller: WebController = new WebController()
+    @State webDebuggingAccess: boolean = true
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -706,7 +706,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -730,7 +730,7 @@ onAlert(callback: (event?: { url: string; message: string; result: JsResult }) =
                 event.result.handleCancel()
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -764,14 +764,14 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onBeforeUnload((event) => {
-            console.log("event.url:" + event.url);
-            console.log("event.message:" + event.message);
+            console.log("event.url:" + event.url)
+            console.log("event.message:" + event.message)
             AlertDialog.show({
               title: 'onBeforeUnload',
               message: 'text',
@@ -791,7 +791,7 @@ onBeforeUnload(callback: (event?: { url: string; message: string; result: JsResu
                 event.result.handleCancel()
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -825,15 +825,15 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onConfirm((event) => {
-            console.log("event.url:" + event.url);
-            console.log("event.message:" + event.message);
-            console.log("event.result:" + event.result);
+            console.log("event.url:" + event.url)
+            console.log("event.message:" + event.message)
+            console.log("event.result:" + event.result)
             AlertDialog.show({
               title: 'onConfirm',
               message: 'text',
@@ -853,7 +853,7 @@ onConfirm(callback: (event?: { url: string; message: string; result: JsResult })
                 event.result.handleCancel()
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -885,15 +885,15 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onPrompt((event) => {
-            console.log("url:" + event.url);
-            console.log("message:" + event.message);
-            console.log("value:" + event.value);
+            console.log("url:" + event.url)
+            console.log("message:" + event.message)
+            console.log("value:" + event.value)
             AlertDialog.show({
               title: 'onPrompt',
               message: 'text',
@@ -913,7 +913,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
                 event.result.handleCancel()
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -945,17 +945,17 @@ onConsole(callback: (event?: { message: ConsoleMessage }) => boolean)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onConsole((event) => {
-            console.log('getMessage:' + event.message.getMessage());
-            console.log('getSourceId:' + event.message.getSourceId());
-            console.log('getLineNumber:' + event.message.getLineNumber());
-            console.log('getMessageLevel:' + event.message.getMessageLevel());
-            return false;
+            console.log('getMessage:' + event.message.getMessage())
+            console.log('getSourceId:' + event.message.getSourceId())
+            console.log('getLineNumber:' + event.message.getLineNumber())
+            console.log('getMessageLevel:' + event.message.getMessageLevel())
+            return false
           })
       }
     }
@@ -982,17 +982,17 @@ onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisp
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onDownloadStart((event) => {
-            console.log('url:' + event.url);
-            console.log('userAgent:' + event.userAgent);
-            console.log('contentDisposition:' + event.contentDisposition);
-            console.log('contentLength:' + event.contentLength);
-            console.log('mimetype:' + event.mimetype);
+            console.log('url:' + event.url)
+            console.log('userAgent:' + event.userAgent)
+            console.log('contentDisposition:' + event.contentDisposition)
+            console.log('contentLength:' + event.contentLength)
+            console.log('mimetype:' + event.mimetype)
           })
       }
     }
@@ -1019,23 +1019,23 @@ onErrorReceive(callback: (event?: { request: WebResourceRequest, error: WebResou
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onErrorReceive((event) => {
-            console.log('getErrorInfo:' + event.error.getErrorInfo());
-            console.log('getErrorCode:' + event.error.getErrorCode());
-            console.log('url:' + event.request.getRequestUrl());
-            console.log('isMainFrame:' + event.request.isMainFrame());
-            console.log('isRedirect:' + event.request.isRedirect());
-            console.log('isRequestGesture:' + event.request.isRequestGesture());
-            console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString());
-            let result = event.request.getRequestHeader();
-            console.log('The request header result size is ' + result.length);
+            console.log('getErrorInfo:' + event.error.getErrorInfo())
+            console.log('getErrorCode:' + event.error.getErrorCode())
+            console.log('url:' + event.request.getRequestUrl())
+            console.log('isMainFrame:' + event.request.isMainFrame())
+            console.log('isRedirect:' + event.request.isRedirect())
+            console.log('isRequestGesture:' + event.request.isRequestGesture())
+            console.log('getRequestHeader_headerKey:' + event.request.getRequestHeader().toString())
+            let result = event.request.getRequestHeader()
+            console.log('The request header result size is ' + result.length)
             for (let i of result) {
-              console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue);
+              console.log('The request header key is : ' + i.headerKey + ', value is : ' + i.headerValue)
             }
           })
       }
@@ -1063,30 +1063,30 @@ onHttpErrorReceive(callback: (event?: { request: WebResourceRequest, response: W
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onHttpErrorReceive((event) => {
-            console.log('url:' + event.request.getRequestUrl());
-            console.log('isMainFrame:' + event.request.isMainFrame());
-            console.log('isRedirect:' + event.request.isRedirect());
-            console.log('isRequestGesture:' + event.request.isRequestGesture());
-            console.log('getResponseData:' + event.response.getResponseData());
-            console.log('getResponseEncoding:' + event.response.getResponseEncoding());
-            console.log('getResponseMimeType:' + event.response.getResponseMimeType());
-            console.log('getResponseCode:' + event.response.getResponseCode());
-            console.log('getReasonMessage:' + event.response.getReasonMessage());
-            let result = event.request.getRequestHeader();
-            console.log('The request header result size is ' + result.length);
+            console.log('url:' + event.request.getRequestUrl())
+            console.log('isMainFrame:' + event.request.isMainFrame())
+            console.log('isRedirect:' + event.request.isRedirect())
+            console.log('isRequestGesture:' + event.request.isRequestGesture())
+            console.log('getResponseData:' + event.response.getResponseData())
+            console.log('getResponseEncoding:' + event.response.getResponseEncoding())
+            console.log('getResponseMimeType:' + event.response.getResponseMimeType())
+            console.log('getResponseCode:' + event.response.getResponseCode())
+            console.log('getReasonMessage:' + event.response.getReasonMessage())
+            let result = event.request.getRequestHeader()
+            console.log('The request header result size is ' + result.length)
             for (let i of result) {
-              console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue);
+              console.log('The request header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
             }
-            let resph = event.response.getResponseHeader();
-            console.log('The response header result size is ' + resph.length);
+            let resph = event.response.getResponseHeader()
+            console.log('The response header result size is ' + resph.length)
             for (let i of resph) {
-              console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue);
+              console.log('The response header key is : ' + i.headerKey + ' , value is : ' + i.headerValue)
             }
           })
       }
@@ -1114,13 +1114,13 @@ onPageBegin(callback: (event?: { url: string }) => void)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onPageBegin((event) => {
-            console.log('url:' + event.url);
+            console.log('url:' + event.url)
           })
       }
     }
@@ -1147,13 +1147,13 @@ onPageEnd(callback: (event?: { url: string }) => void)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onPageEnd((event) => {
-            console.log('url:' + event.url);
+            console.log('url:' + event.url)
           })
       }
     }
@@ -1179,7 +1179,7 @@ onProgressChange(callback: (event?: { newProgress: number }) => void)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
@@ -1211,7 +1211,7 @@ onTitleReceive(callback: (event?: { title: string }) => void)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
@@ -1244,13 +1244,13 @@ onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onRefreshAccessedHistory((event) => {
-            console.log('url:' + event.url + ' isReload:' + event.isRefreshed);
+            console.log('url:' + event.url + ' isReload:' + event.isRefreshed)
           })
       }
     }
@@ -1276,13 +1276,13 @@ onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => voi
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'chrome://crash/', controller: this.controller })
           .onRenderExited((event) => {
-            console.log('reason:' + event.renderExitReason);
+            console.log('reason:' + event.renderExitReason)
           })
       }
     }
@@ -1315,7 +1315,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
 
     build() {
       Column() {
@@ -1338,7 +1338,7 @@ onShowFileSelector(callback: (event?: { result: FileSelectorResult, fileSelector
                 event.result.handleFileList(fileList)
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -1370,14 +1370,14 @@ onUrlLoadIntercept(callback: (event?: { data:string | WebResourceRequest }) => b
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onUrlLoadIntercept((event) => {
             console.log('onUrlLoadIntercept ' + event.data.toString())
-            return true;
+            return true
           })
       }
     }
@@ -1409,9 +1409,9 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    responseweb: WebResourceResponse = new WebResourceResponse();
-    heads:Header[] = new Array();
+    controller: WebController = new WebController()
+    responseweb: WebResourceResponse = new WebResourceResponse()
+    heads:Header[] = new Array()
     @State webdata: string = "<!DOCTYPE html>\n" +
     "<html>\n"+
     "<head>\n"+
@@ -1425,7 +1425,7 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onInterceptRequest((event) => {
-            console.log('url:' + event.request.getRequestUrl());
+            console.log('url:' + event.request.getRequestUrl())
             var head1:Header = {
               headerKey:"Connection",
               headerValue:"keep-alive"
@@ -1434,15 +1434,15 @@ onInterceptRequest(callback: (event?: { request: WebResourceRequest}) => WebReso
               headerKey:"Cache-Control",
               headerValue:"no-cache"
             }
-            var length = this.heads.push(head1);
-            length = this.heads.push(head2);
-            this.responseweb.setResponseHeader(this.heads);
-            this.responseweb.setResponseData(this.webdata);
-            this.responseweb.setResponseEncoding('utf-8');
-            this.responseweb.setResponseMimeType('text/html');
-            this.responseweb.setResponseCode(200);
-            this.responseweb.setReasonMessage('OK');
-            return this.responseweb;
+            var length = this.heads.push(head1)
+            length = this.heads.push(head2)
+            this.responseweb.setResponseHeader(this.heads)
+            this.responseweb.setResponseData(this.webdata)
+            this.responseweb.setResponseEncoding('utf-8')
+            this.responseweb.setResponseMimeType('text/html')
+            this.responseweb.setResponseCode(200)
+            this.responseweb.setReasonMessage('OK')
+            return this.responseweb
           })
       }
     }
@@ -1477,8 +1477,8 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    httpAuth: boolean = false;
+    controller: WebController = new WebController()
+    httpAuth: boolean = false
   
     build() {
       Column() {
@@ -1490,13 +1490,13 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
               primaryButton: {
                 value: 'cancel',
                 action: () => {
-                  event.handler.cancel();
+                  event.handler.cancel()
                 }
               },
               secondaryButton: {
                 value: 'ok',
                 action: () => {
-                  this.httpAuth = event.handler.isHttpAuthInfoSaved();
+                  this.httpAuth = event.handler.isHttpAuthInfoSaved()
                   if (this.httpAuth == false) {
                     web_webview.WebDataBase.saveHttpAuthCredentials(
                       event.host,
@@ -1504,15 +1504,15 @@ onHttpAuthRequest(callback: (event?: { handler: HttpAuthHandler, host: string, r
                       "2222",
                       "2222"
                     )
-                    event.handler.cancel();
+                    event.handler.cancel()
                   }
                 }
               },
               cancel: () => {
-                event.handler.cancel();
+                event.handler.cancel()
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -1539,7 +1539,7 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
@@ -1551,20 +1551,20 @@ onSslErrorEventReceive(callback: (event: { handler: SslErrorHandler, error: SslE
               primaryButton: {
                 value: 'confirm',
                 action: () => {
-                  event.handler.handleConfirm();
+                  event.handler.handleConfirm()
                 }
               },
               secondaryButton: {
                 value: 'cancel',
                 action: () => {
-                  event.handler.handleCancel();
+                  event.handler.handleCancel()
                 }
               },
               cancel: () => {
-                event.handler.handleCancel();
+                event.handler.handleCancel()
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -1594,7 +1594,7 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
 
     build() {
       Column() {
@@ -1606,20 +1606,20 @@ onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationH
               primaryButton: {
                 value: 'confirm',
                 action: () => {
-                  event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem");
+                  event.handler.confirm("/system/etc/user.pk8", "/system/etc/chain-user.pem")
                 }
               },
               secondaryButton: {
                 value: 'cancel',
                 action: () => {
-                  event.handler.cancel();
+                  event.handler.cancel()
                 }
               },
               cancel: () => {
-                event.handler.ignore();
+                event.handler.ignore()
               }
             })
-            return true;
+            return true
           })
       }
     }
@@ -1645,7 +1645,7 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
@@ -1656,17 +1656,17 @@ onPermissionRequest(callback: (event?: { request: PermissionRequest }) => void)
               primaryButton: {
                 value: 'deny',
                 action: () => {
-                  event.request.deny();
+                  event.request.deny()
                 }
               },
               secondaryButton: {
                 value: 'onConfirm',
                 action: () => {
-                  event.request.grant(event.request.getAccessibleResource());
+                  event.request.grant(event.request.getAccessibleResource())
                 }
               },
               cancel: () => {
-                event.request.deny();
+                event.request.deny()
               }
             })
           })
@@ -1701,14 +1701,14 @@ onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebCo
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
           .onContextMenuShow((event) => {
-            console.info("x coord = " + event.param.x());
-            console.info("link url = " + event.param.getLinkUrl());
-            return true;
+            console.info("x coord = " + event.param.x())
+            console.info("link url = " + event.param.getLinkUrl())
+            return true
         })
       }
     }
@@ -1735,13 +1735,13 @@ onScroll(callback: (event: {xOffset: number, yOffset: number}) => void)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
         .onScroll((event) => {
-            console.info("x = " + event.xOffset);
-            console.info("y = " + event.yOffset);
+            console.info("x = " + event.xOffset)
+            console.info("y = " + event.yOffset)
         })
       }
     }
@@ -1768,7 +1768,7 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller:WebController = new WebController()
     build() {
       Column() {
         Web({ src:'www.example.com', controller:this.controller })
@@ -1780,11 +1780,11 @@ onGeolocationShow(callback: (event?: { origin: string, geolocation: JsGeolocatio
             confirm: {
               value: 'onConfirm',
               action: () => {
-                event.geolocation.invoke(event.origin, true, true);
+                event.geolocation.invoke(event.origin, true, true)
               }
             },
             cancel: () => {
-              event.geolocation.invoke(event.origin, false, true);
+              event.geolocation.invoke(event.origin, false, true)
             }
           })
         })
@@ -1812,14 +1812,14 @@ onFullScreenEnter(callback: (event: { handler: FullScreenExitHandler }) => void)
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
-    handler: FullScreenExitHandler = null;
+    controller:WebController = new WebController()
+    handler: FullScreenExitHandler = null
     build() {
       Column() {
         Web({ src:'www.example.com', controller:this.controller })
         .onFullScreenEnter((event) => {
-          console.log("onFullScreenEnter...");
-          this.handler = event.handler;
+          console.log("onFullScreenEnter...")
+          this.handler = event.handler
         })
       }
     }
@@ -1845,17 +1845,17 @@ onFullScreenExit(callback: () => void)
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
-    handler: FullScreenExitHandler = null;
+    controller:WebController = new WebController()
+    handler: FullScreenExitHandler = null
     build() {
       Column() {
         Web({ src:'www.example.com', controller:this.controller })
         .onFullScreenExit(() => {
-          console.log("onFullScreenExit...");
-          this.handler.exitFullScreen();
+          console.log("onFullScreenExit...")
+          this.handler.exitFullScreen()
         })
         .onFullScreenEnter((event) => {
-          this.handler = event.handler;
+          this.handler = event.handler
         })
       }
     }
@@ -1884,15 +1884,15 @@ onWindowNew(callback: (event: {isAlert: boolean, isUserTrigger: boolean, targetU
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller:WebController = new WebController()
     build() {
       Column() {
         Web({ src:'www.example.com', controller: this.controller })
         .multiWindowAccess(true)
         .onWindowNew((event) => {
-          console.log("onWindowNew...");
-          var popController: WebController = new WebController();
-          event.handler.setWebController(popController);
+          console.log("onWindowNew...")
+          var popController: WebController = new WebController()
+          event.handler.setWebController(popController)
         })
       }
     }
@@ -1918,12 +1918,12 @@ onWindowExit(callback: () => void)
   @Entry
   @Component
   struct WebComponent {
-    controller:WebController = new WebController();
+    controller:WebController = new WebController()
     build() {
       Column() {
         Web({ src:'www.example.com', controller: this.controller })
         .onWindowExit((event) => {
-          console.log("onWindowExit...");
+          console.log("onWindowExit...")
         })
       }
     }
@@ -2619,13 +2619,13 @@ requestFocus()
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('requestFocus')
           .onClick(() => {
-            this.controller.requestFocus();
+            this.controller.requestFocus()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2652,14 +2652,14 @@ accessBackward(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('accessBackward')
           .onClick(() => {
-            let result = this.controller.accessBackward();
-            console.log('result:' + result);
+            let result = this.controller.accessBackward()
+            console.log('result:' + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2686,14 +2686,14 @@ accessForward(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('accessForward')
           .onClick(() => {
-            let result = this.controller.accessForward();
-            console.log('result:' + result);
+            let result = this.controller.accessForward()
+            console.log('result:' + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2726,15 +2726,15 @@ accessStep(step: number): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State steps: number = 2;
+    controller: WebController = new WebController()
+    @State steps: number = 2
   
     build() {
       Column() {
         Button('accessStep')
           .onClick(() => {
-            let result = this.controller.accessStep(this.steps);
-            console.log('result:' + result);
+            let result = this.controller.accessStep(this.steps)
+            console.log('result:' + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2755,13 +2755,13 @@ backward(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('backward')
           .onClick(() => {
-            this.controller.backward();
+            this.controller.backward()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2782,13 +2782,13 @@ forward(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('forward')
           .onClick(() => {
-            this.controller.forward();
+            this.controller.forward()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2815,14 +2815,14 @@ backOrForward(step: number): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State step: number = -2;
+    controller: WebController = new WebController()
+    @State step: number = -2
   
     build() {
       Column() {
         Button('backOrForward')
           .onClick(() => {
-            this.controller.backOrForward(this.step);
+            this.controller.backOrForward(this.step)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2849,14 +2849,14 @@ deleteJavaScriptRegister(name: string)
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State name: string = 'Object';
+    controller: WebController = new WebController()
+    @State name: string = 'Object'
   
     build() {
       Column() {
         Button('deleteJavaScriptRegister')
           .onClick(() => {
-            this.controller.deleteJavaScriptRegister(this.name);
+            this.controller.deleteJavaScriptRegister(this.name)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2883,14 +2883,14 @@ getHitTest(): HitTestType
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getHitTest')
           .onClick(() => {
-            let hitType = this.controller.getHitTest();
-            console.log("hitType: " + hitType);
+            let hitType = this.controller.getHitTest()
+            console.log("hitType: " + hitType)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2916,15 +2916,15 @@ getHitTestValue(): HitTestValue
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getHitTestValue')
           .onClick(() => {
-            let hitValue = this.controller.getHitTestValue();
-            console.log("hitType: " + hitValue.getType());
-            console.log("extra: " + hitValue.getExtra());
+            let hitValue = this.controller.getHitTestValue()
+            console.log("hitType: " + hitValue.getType())
+            console.log("extra: " + hitValue.getExtra())
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2950,14 +2950,14 @@ getWebId(): number
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getWebId')
           .onClick(() => {
-            let id = this.controller.getWebId();
-            console.log("id: " + id);
+            let id = this.controller.getWebId()
+            console.log("id: " + id)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -2983,14 +2983,14 @@ getTitle(): string
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getTitle')
           .onClick(() => {
-            let title = this.controller.getTitle();
-            console.log("title: " + title);
+            let title = this.controller.getTitle()
+            console.log("title: " + title)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3016,14 +3016,14 @@ getPageHeight(): number
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getPageHeight')
           .onClick(() => {
-            let pageHeight = this.controller.getPageHeight();
-            console.log("pageHeight: " + pageHeight);
+            let pageHeight = this.controller.getPageHeight()
+            console.log("pageHeight: " + pageHeight)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3049,14 +3049,14 @@ getDefaultUserAgent(): string
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getDefaultUserAgent')
           .onClick(() => {
-            let userAgent = this.controller.getDefaultUserAgent();
-            console.log("userAgent: " + userAgent);
+            let userAgent = this.controller.getDefaultUserAgent()
+            console.log("userAgent: " + userAgent)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3091,7 +3091,7 @@ baseUrl为空时，通过”data“协议加载指定的一段字符串。
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
@@ -3101,7 +3101,7 @@ baseUrl为空时，通过”data“协议加载指定的一段字符串。
               data: "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>",
               mimeType: "text/html",
               encoding: "UTF-8"
-            });
+            })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3133,13 +3133,13 @@ loadUrl(options: { url: string | Resource, headers?: Array\<Header\> })
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('loadUrl')
           .onClick(() => {
-            this.controller.loadUrl({ url: 'www.example.com' });
+            this.controller.loadUrl({ url: 'www.example.com' })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3160,13 +3160,13 @@ onActive(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('onActive')
           .onClick(() => {
-            this.controller.onActive();
+            this.controller.onActive()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3187,13 +3187,13 @@ onInactive(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('onInactive')
           .onClick(() => {
-            this.controller.onInactive();
+            this.controller.onInactive()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3219,14 +3219,14 @@ zoom(factor: number): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State factor: number = 1;
+    controller: WebController = new WebController()
+    @State factor: number = 1
   
     build() {
       Column() {
         Button('zoom')
           .onClick(() => {
-            this.controller.zoom(this.factor);
+            this.controller.zoom(this.factor)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3252,14 +3252,14 @@ zoomIn(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('zoomIn')
           .onClick(() => {
-            let result = this.controller.zoomIn();
-            console.log("result: " + result);
+            let result = this.controller.zoomIn()
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3285,14 +3285,14 @@ zoomOut(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('zoomOut')
           .onClick(() => {
-            let result = this.controller.zoomOut();
-            console.log("result: " + result);
+            let result = this.controller.zoomOut()
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3313,13 +3313,13 @@ refresh()
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('refresh')
           .onClick(() => {
-            this.controller.refresh();
+            this.controller.refresh()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3351,10 +3351,10 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
     controller: WebController = new WebController()
     testObj = {
       test: (data) => {
-        return "ArkUI Web Component";
+        return "ArkUI Web Component"
       },
       toString: () => {
-        console.log('Web Component toString');
+        console.log('Web Component toString')
       }
     }
     build() {
@@ -3365,7 +3365,7 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
               object: this.testObj,
               name: "objName",
               methodList: ["test", "toString"],
-            });
+            })
           })
         }
         Web({ src: $rawfile('index.html'), controller: this.controller })
@@ -3385,8 +3385,8 @@ registerJavaScriptProxy(options: { object: object, name: string, methodList: Arr
       </body>
       <script type="text/javascript">
       function htmlTest() {
-          str = objName.test("test function");
-          console.log('objName.test result:'+ str);
+          str = objName.test("test function")
+          console.log('objName.test result:'+ str)
       }
   </script>
   </html>
@@ -3413,7 +3413,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     @State webResult: string = ''
     build() {
       Column() {
@@ -3426,8 +3426,8 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
             callback: (result: string)=> {
               this.webResult = result
               console.info(`The test() return value is: ${result}`)
-            }});
-          console.info('url: ', e.url);
+            }})
+          console.info('url: ', e.url)
         })
       }
     }
@@ -3444,7 +3444,7 @@ runJavaScript(options: { script: string, callback?: (result: string) => void })
     </body>
     <script type="text/javascript">
     function test() {
-        console.log('Ark WebComponent');
+        console.log('Ark WebComponent')
         return "This value is from index.html"
     }
     </script>
@@ -3465,13 +3465,13 @@ stop()
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('stop')
           .onClick(() => {
-            this.controller.stop();
+            this.controller.stop()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3492,13 +3492,13 @@ clearHistory(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('clearHistory')
           .onClick(() => {
-            this.controller.clearHistory();
+            this.controller.clearHistory()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3519,13 +3519,13 @@ clearSslCache(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
 
     build() {
       Column() {
         Button('clearSslCache')
           .onClick(() => {
-            this.controller.clearSslCache();
+            this.controller.clearSslCache()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3546,13 +3546,13 @@ clearClientAuthenticationCache(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
 
     build() {
       Column() {
         Button('clearClientAuthenticationCache')
           .onClick(() => {
-            this.controller.clearClientAuthenticationCache();
+            this.controller.clearClientAuthenticationCache()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3579,13 +3579,13 @@ getCookieManager(): WebCookie
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getCookieManager')
           .onClick(() => {
-            let cookieManager = this.controller.getCookieManager();
+            let cookieManager = this.controller.getCookieManager()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3613,13 +3613,13 @@ createWebMessagePorts(): Array\<WebMessagePort\>
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    ports: WebMessagePort[] = null;
+    controller: WebController = new WebController()
+    ports: WebMessagePort[] = null
     build() {
       Column() {
         Button('createWebMessagePorts')
           .onClick(() => {
-            this.ports = this.controller.createWebMessagePorts();
+            this.ports = this.controller.createWebMessagePorts()
             console.log("createWebMessagePorts size:" + this.ports.length)
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -3648,10 +3648,10 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    ports: WebMessagePort[] = null;
-    @State sendFromEts: string = 'Send this message from ets to HTML';
-    @State receivedFromHtml: string = 'Display received message send from HTML';
+    controller: WebController = new WebController()
+    ports: WebMessagePort[] = null
+    @State sendFromEts: string = 'Send this message from ets to HTML'
+    @State receivedFromHtml: string = 'Display received message send from HTML'
 
     build() {
       Column() {
@@ -3660,41 +3660,41 @@ postMessage(options: { message: WebMessageEvent, uri: string}): void
         // 输入框的内容发送到HTML
         TextInput({placeholder: 'Send this message from ets to HTML'})
         .onChange((value: string) => {
-          this.sendFromEts = value;
+          this.sendFromEts = value
         })
 
         // 1、创建两个消息端口
         Button('1.CreateWebMessagePorts')
           .onClick(() => {
-            this.ports = this.controller.createWebMessagePorts();
+            this.ports = this.controller.createWebMessagePorts()
             console.log("createWebMessagePorts size:" + this.ports.length)
           })
 
         // 2、将其中一个消息端口发送到HTML侧，由HTML侧保存并使用。
         Button('2.PostMessagePort')
           .onClick(() => {
-            var sendPortArray = new Array(this.ports[1]);
-            var msgEvent = new WebMessageEvent();
-            msgEvent.setData("__init_port__");
-            msgEvent.setPorts(sendPortArray);
-            this.controller.postMessage({message: msgEvent, uri: "*"});
+            var sendPortArray = new Array(this.ports[1])
+            var msgEvent = new WebMessageEvent()
+            msgEvent.setData("__init_port__")
+            msgEvent.setPorts(sendPortArray)
+            this.controller.postMessage({message: msgEvent, uri: "*"})
           })
 
         // 3、另一个消息端口在应用侧注册回调事件。
         Button('3.RegisterCallback')
           .onClick(() => {
               this.ports[0].onMessageEvent((result: string) => {
-                var msg = 'Got msg from HTML: ' + result;
-                this.receivedFromHtml = msg;
+                var msg = 'Got msg from HTML: ' + result
+                this.receivedFromHtml = msg
               })
           })
 
         // 4、使用应用侧的端口给另一个已经发送到HTML的消息端口发送消息。
         Button('4.SendDataToHtml5')
           .onClick(() => {
-            var msg = new WebMessageEvent();
-            msg.setData(this.sendFromEts);
-            this.ports[0].postMessageEvent(msg);
+            var msg = new WebMessageEvent()
+            msg.setData(this.sendFromEts)
+            this.ports[0].postMessageEvent(msg)
           })
         Web({ src: $rawfile("index.html"), controller: this.controller })
           .javaScriptAccess(true)
@@ -3758,12 +3758,12 @@ getUrl(): string
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Button('getUrl')
           .onClick(() => {
-            console.log("url: " + this.controller.getUrl());
+            console.log("url: " + this.controller.getUrl())
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3826,14 +3826,14 @@ setCookie(url: string, value: string): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('setCookie')
           .onClick(() => {
-            let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b");
-            console.log("result: " + result);
+            let result = this.controller.getCookieManager().setCookie("www.example.com", "a=b")
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3859,14 +3859,14 @@ saveCookieSync(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('saveCookieSync')
           .onClick(() => {
-            let result = this.controller.getCookieManager().saveCookieSync();
-            console.log("result: " + result);
+            let result = this.controller.getCookieManager().saveCookieSync()
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3899,14 +3899,14 @@ getCookie(url: string): string
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('getCookie')
           .onClick(() => {
-            let value = webview.WebCookieManager.getCookie('www.example.com');
-            console.log("value: " + value);
+            let value = webview.WebCookieManager.getCookie('www.example.com')
+            console.log("value: " + value)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3940,14 +3940,14 @@ setCookie(url: string, value: string): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('setCookie')
           .onClick(() => {
-            let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b');
-            console.log("result: " + result);
+            let result = web_webview.WebCookieManager.setCookie('www.example.com', 'a=b')
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -3974,14 +3974,14 @@ saveCookieSync(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('saveCookieSync')
           .onClick(() => {
-            let result = web_webview.WebCookieManager.saveCookieSync();
-            console.log("result: " + result);
+            let result = web_webview.WebCookieManager.saveCookieSync()
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4008,7 +4008,7 @@ saveCookieAsync(): Promise\<boolean>
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
@@ -4016,11 +4016,11 @@ saveCookieAsync(): Promise\<boolean>
           .onClick(() => {
             web_webview.WebCookieManager.saveCookieAsync()
               .then (function(result) {
-                console.log("result: " + result);
+                console.log("result: " + result)
               })
               .catch(function(error) {
-                console.error("error: " + error);
-              });
+                console.error("error: " + error)
+              })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4047,15 +4047,15 @@ saveCookieAsync(callback: AsyncCallback\<boolean>): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('saveCookieAsync')
           .onClick(() => {
             web_webview.WebCookieManager.saveCookieAsync(function(result) {
-              console.log("result: " + result);
-            });
+              console.log("result: " + result)
+            })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4082,14 +4082,14 @@ isCookieAllowed(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('isCookieAllowed')
           .onClick(() => {
-            let result = web_webview.WebCookieManager.isCookieAllowed();
-            console.log("result: " + result);
+            let result = web_webview.WebCookieManager.isCookieAllowed()
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4116,13 +4116,13 @@ putAcceptCookieEnabled(accept: boolean): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('putAcceptCookieEnabled')
           .onClick(() => {
-            web_webview.WebCookieManager.putAcceptCookieEnabled(false);
+            web_webview.WebCookieManager.putAcceptCookieEnabled(false)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4149,14 +4149,14 @@ isThirdCookieAllowed(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('isThirdPartyCookieAllowed')
           .onClick(() => {
-            let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed();
-            console.log("result: " + result);
+            let result = web_webview.WebCookieManager.isThirdPartyCookieAllowed()
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4183,13 +4183,13 @@ putAcceptThirdPartyCookieEnabled(accept: boolean): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('putAcceptThirdPartyCookieEnabled')
           .onClick(() => {
-            web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false);
+            web_webview.WebCookieManager.putAcceptThirdPartyCookieEnabled(false)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4216,14 +4216,14 @@ existCookie(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('existCookie')
           .onClick(() => {
-            let result = web_webview.WebCookieManager.existCookie();
-            console.log("result: " + result);
+            let result = web_webview.WebCookieManager.existCookie()
+            console.log("result: " + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4244,13 +4244,13 @@ deleteEntireCookie(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('deleteEntireCookie')
           .onClick(() => {
-            web_webview.WebCookieManager.deleteEntireCookie();
+            web_webview.WebCookieManager.deleteEntireCookie()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4271,13 +4271,13 @@ deleteSessionCookie(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('deleteSessionCookie')
           .onClick(() => {
-            webview.WebCookieManager.deleteSessionCookie();
+            webview.WebCookieManager.deleteSessionCookie()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4308,14 +4308,14 @@ static existHttpAuthCredentials(): boolean
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('existHttpAuthCredentials')
           .onClick(() => {
-            let result = web_webview.WebDataBase.existHttpAuthCredentials();
-            console.log('result: ' + result);
+            let result = web_webview.WebDataBase.existHttpAuthCredentials()
+            console.log('result: ' + result)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4337,13 +4337,13 @@ static deleteHttpAuthCredentials(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
   
     build() {
       Column() {
         Button('deleteHttpAuthCredentials')
           .onClick(() => {
-            web_webview.WebDataBase.deleteHttpAuthCredentials();
+            web_webview.WebDataBase.deleteHttpAuthCredentials()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4378,18 +4378,18 @@ static getHttpAuthCredentials(host: string, realm: string): Array\<string\>
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    host: string = "www.spincast.org";
-    realm: string = "protected example";
-    username_password: string[];
+    controller: WebController = new WebController()
+    host: string = "www.spincast.org"
+    realm: string = "protected example"
+    username_password: string[]
     build() {
       Column() {
         Button('getHttpAuthCredentials')
           .onClick(() => {
-            this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm);
-            console.log('num: ' + this.username_password.length);
+            this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm)
+            console.log('num: ' + this.username_password.length)
             ForEach(this.username_password, (item) => {
-              console.log('username_password: ' + item);
+              console.log('username_password: ' + item)
             }, item => item)
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -4421,14 +4421,14 @@ static saveHttpAuthCredentials(host: string, realm: string, username: string, pa
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    host: string = "www.spincast.org";
-    realm: string = "protected example";
+    controller: WebController = new WebController()
+    host: string = "www.spincast.org"
+    realm: string = "protected example"
     build() {
       Column() {
         Button('saveHttpAuthCredentials')
           .onClick(() => {
-            web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche");
+            web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche")
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4456,17 +4456,17 @@ static allowGeolocation(origin: string): void
 
   ```ts
   // xxx.ets
-  import web_webview from '@ohos.web.webview';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "file:///";
+    controller: WebController = new WebController()
+    origin: string = "file:///"
     build() {
       Column() {
         Button('allowGeolocation')
           .onClick(() => {
-            web_webview.GeolocationPermissions.allowGeolocation(this.origin);
+            web_webview.GeolocationPermissions.allowGeolocation(this.origin)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4490,17 +4490,17 @@ static deleteGeolocation(origin: string): void
 
   ```ts
   // xxx.ets
-  import web_webview from '@ohos.web.webview';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "file:///";
+    controller: WebController = new WebController()
+    origin: string = "file:///"
     build() {
       Column() {
         Button('deleteGeolocation')
           .onClick(() => {
-            web_webview.GeolocationPermissions.deleteGeolocation(this.origin);
+            web_webview.GeolocationPermissions.deleteGeolocation(this.origin)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4518,16 +4518,16 @@ static deleteAllGeolocation(): void
 
   ```ts
   // xxx.ets
-  import web_webview from '@ohos.web.webview';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Button('deleteAllGeolocation')
           .onClick(() => {
-            web_webview.GeolocationPermissions.deleteAllGeolocation();
+            web_webview.GeolocationPermissions.deleteAllGeolocation()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4552,23 +4552,23 @@ static getAccessibleGeolocation(origin: string, callback: AsyncCallback\<boolean
 
   ```ts
   // xxx.ets
-  import web_webview from '@ohos.web.webview';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "file:///";
+    controller: WebController = new WebController()
+    origin: string = "file:///"
     build() {
       Column() {
         Button('getAccessibleGeolocationAsync')
           .onClick(() => {
             web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
               if (error) {
-                console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error));
-                return;
+                console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error))
+                return
               }
-              console.log('getAccessibleGeolocationAsync result: ' + result);
-            });
+              console.log('getAccessibleGeolocationAsync result: ' + result)
+            })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4598,21 +4598,21 @@ static getAccessibleGeolocation(origin: string): Promise\<boolean\>
 
   ```ts
   // xxx.ets
-  import web_webview from '@ohos.web.webview';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "file:///";
+    controller: WebController = new WebController()
+    origin: string = "file:///"
     build() {
       Column() {
         Button('getAccessibleGeolocationPromise')
           .onClick(() => {
             web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin).then(result => {
-              console.log('getAccessibleGeolocationPromise result: ' + result);
+              console.log('getAccessibleGeolocationPromise result: ' + result)
             }).catch(error => {
-              console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error));
-            });
+              console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error))
+            })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4636,23 +4636,23 @@ static getStoredGeolocation(callback: AsyncCallback\<Array\<string\>\>): void
 
   ```ts
   // xxx.ets
-  import web_webview from '@ohos.web.webview';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Button('getStoredGeolocationAsync')
           .onClick(() => {
             web_webview.GeolocationPermissions.getStoredGeolocation((error, origins) => {
               if (error) {
-                console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error));
-                return;
+                console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error))
+                return
               }
-              let origins_str: string = origins.join();
-              console.log('getStoredGeolocationAsync origins: ' + origins_str);
-            });
+              let origins_str: string = origins.join()
+              console.log('getStoredGeolocationAsync origins: ' + origins_str)
+            })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4682,21 +4682,21 @@ static getStoredGeolocation(): Promise\<Array\<string\>\>
 
   ```ts
   // xxx.ets
-  import web_webview from '@ohos.web.webview';
+  import web_webview from '@ohos.web.webview'
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Button('getStoredGeolocationPromise')
           .onClick(() => {
             web_webview.GeolocationPermissions.getStoredGeolocation().then(origins => {
-              let origins_str: string = origins.join();
-              console.log('getStoredGeolocationPromise origins: ' + origins_str);
+              let origins_str: string = origins.join()
+              console.log('getStoredGeolocationPromise origins: ' + origins_str)
             }).catch(error => {
-                console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error));
-            });
+                console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error))
+            })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -4719,12 +4719,12 @@ static deleteAllData(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Button('deleteAllData')
           .onClick(() => {
-            web_webview.WebStorage.deleteAllData();
+            web_webview.WebStorage.deleteAllData()
           })
         Web({ src: 'www.example.com', controller: this.controller })
         .databaseAccess(true)
@@ -4752,13 +4752,13 @@ static deleteOrigin(origin : string): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "origin";
+    controller: WebController = new WebController()
+    origin: string = "origin"
     build() {
       Column() {
         Button('getHttpAuthCredentials')
           .onClick(() => {
-            web_webview.WebStorage.deleteOrigin(this.origin);
+            web_webview.WebStorage.deleteOrigin(this.origin)
           })
         Web({ src: 'www.example.com', controller: this.controller })
         .databaseAccess(true)
@@ -4786,21 +4786,21 @@ static getOrigins(callback: AsyncCallback\<Array\<WebStorageOrigin>>) : void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "origin";
+    controller: WebController = new WebController()
+    origin: string = "origin"
     build() {
       Column() {
         Button('getOrigins')
           .onClick(() => {
             web_webview.WebStorage.getOrigins((error, origins) => {
               if (error) {
-                console.log('error: ' + error);
-                return;
+                console.log('error: ' + error)
+                return
               }
               for (let i = 0; i < origins.length; i++) {
-                console.log('origin: ' + origins[i].origin);
-                console.log('usage: ' + origins[i].usage);
-                console.log('quota: ' + origins[i].quota);
+                console.log('origin: ' + origins[i].origin)
+                console.log('usage: ' + origins[i].usage)
+                console.log('quota: ' + origins[i].quota)
               }
             })
           })
@@ -4830,8 +4830,8 @@ static getOrigins() : Promise\<Array\<WebStorageOrigin>>
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "origin";
+    controller: WebController = new WebController()
+    origin: string = "origin"
     build() {
       Column() {
         Button('getOrigins')
@@ -4839,13 +4839,13 @@ static getOrigins() : Promise\<Array\<WebStorageOrigin>>
             web_webview.WebStorage.getOrigins()
               .then(origins => {
                 for (let i = 0; i < origins.length; i++) {
-                  console.log('origin: ' + origins[i].origin);
-                  console.log('usage: ' + origins[i].usage);
-                  console.log('quota: ' + origins[i].quota);
+                  console.log('origin: ' + origins[i].origin)
+                  console.log('usage: ' + origins[i].usage)
+                  console.log('quota: ' + origins[i].quota)
                 }
               })
               .catch(error => {
-                console.log('error: ' + error);
+                console.log('error: ' + error)
               })
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -4875,18 +4875,18 @@ static getOriginQuota(origin : string, callback : AsyncCallback\<number>) : void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    origin: string = "origin";
+    controller: WebController = new WebController()
+    origin: string = "origin"
     build() {
       Column() {
         Button('getOriginQuota')
           .onClick(() => {
             web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
               if (error) {
-                console.log('error: ' + error);
-                return;
+                console.log('error: ' + error)
+                return
               }
-              console.log('quota: ' + quota);
+              console.log('quota: ' + quota)
             })
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -4922,17 +4922,17 @@ static getOriginQuota(origin : string) : Promise\<number>
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-    origin: string = "origin";
+    origin: string = "origin"
     build() {
       Column() {
         Button('getOriginQuota')
           .onClick(() => {
             web_webview.WebStorage.getOriginQuota(this.origin)
               .then(quota => {
-                console.log('quota: ' + quota);
+                console.log('quota: ' + quota)
               })
               .catch(error => {
-                console.log('error: ' + error);
+                console.log('error: ' + error)
               })
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -4963,17 +4963,17 @@ static getOriginUsage(origin : string, callback : AsyncCallback\<number>) : void
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-    origin: string = "origin";
+    origin: string = "origin"
     build() {
       Column() {
         Button('getOriginUsage')
           .onClick(() => {
             web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
               if (error) {
-                console.log('error: ' + error);
-                return;
+                console.log('error: ' + error)
+                return
               }
-              console.log('usage: ' + usage);
+              console.log('usage: ' + usage)
             })
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -5009,17 +5009,17 @@ static getOriginUsage(origin : string) : Promise\<number>
   @Component
   struct WebComponent {
     controller: WebController = new WebController();
-    origin: string = "origin";
+    origin: string = "origin"
     build() {
       Column() {
         Button('getOriginQuota')
           .onClick(() => {
             web_webview.WebStorage.getOriginUsage(this.origin)
               .then(usage => {
-                console.log('usage: ' + usage);
+                console.log('usage: ' + usage)
               })
               .catch(error => {
-                console.log('error: ' + error);
+                console.log('error: ' + error)
               })
           })
         Web({ src: 'www.example.com', controller: this.controller })
@@ -5047,27 +5047,27 @@ searchAllAsync(searchString: string): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    @State searchString: string = "xxx";
+    controller: WebController = new WebController()
+    @State searchString: string = "xxx"
 
     build() {
       Column() {
         Button('searchString')
           .onClick(() => {
-            this.controller.searchAllAsync(this.searchString);
+            this.controller.searchAllAsync(this.searchString)
           })
         Button('clearMatches')
           .onClick(() => {
-            this.controller.clearMatches();
+            this.controller.clearMatches()
           })
         Button('searchNext')
           .onClick(() => {
-            this.controller.searchNext(true);
+            this.controller.searchNext(true)
           })
         Web({ src: 'www.example.com', controller: this.controller })
      	  .onSearchResultReceive(ret => {
             console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
-              "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting);
+              "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
           })
       }
     }
@@ -5087,13 +5087,13 @@ clearMatches(): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
 
     build() {
       Column() {
         Button('clearMatches')
           .onClick(() => {
-            this.controller.clearMatches();
+            this.controller.clearMatches()
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -5121,13 +5121,13 @@ searchNext(forward: boolean): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
 
     build() {
       Column() {
         Button('searchNext')
           .onClick(() => {
-            this.controller.searchNext(true);
+            this.controller.searchNext(true)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -5156,14 +5156,14 @@ onSearchResultReceive(callback: (event?: {activeMatchOrdinal: number, numberOfMa
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
 
     build() {
       Column() {
         Web({ src: 'www.example.com', controller: this.controller })
      	  .onSearchResultReceive(ret => {
             console.log("on search result receive:" + "[cur]" + ret.activeMatchOrdinal +
-              "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting);
+              "[total]" + ret.numberOfMatches + "[isDone]"+ ret.isDoneCounting)
           })
       }
     }
@@ -5290,17 +5290,17 @@ storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback<str
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
+    controller: WebController = new WebController()
     build() {
       Column() {
         Button('saveWebArchive')
           .onClick(() => {
-            let webAsyncController = new web_webview.WebAsyncController(this.controller);
+            let webAsyncController = new web_webview.WebAsyncController(this.controller)
             webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => {
               if (filename != null) {
                 console.info(`save web archive success: ${filename}`)
               }
-            });
+            })
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -5381,16 +5381,16 @@ postMessageEvent(message: WebMessageEvent): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    ports: WebMessagePort[] = null;
+    controller: WebController = new WebController()
+    ports: WebMessagePort[] = null
 
     build() {
       Column() {
         Button('postMessageEvent')
           .onClick(() => {
-            var msg = new WebMessageEvent();
-            msg.setData("post message from ets to html5");
-            this.ports[0].postMessageEvent(msg);
+            var msg = new WebMessageEvent()
+            msg.setData("post message from ets to html5")
+            this.ports[0].postMessageEvent(msg)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -5416,8 +5416,8 @@ onMessageEvent(callback: (result: string) => void): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    ports: WebMessagePort[] = null;
+    controller: WebController = new WebController()
+    ports: WebMessagePort[] = null
 
     build() {
       Column() {
@@ -5461,9 +5461,9 @@ getData(): string
         Button('getPorts')
           .onClick(() => {
             var msgEvent = new WebMessageEvent();
-            msgEvent.setData("message event data");
-            var messageData = msgEvent.getData();
-            console.log("message is:" + messageData);
+            msgEvent.setData("message event data")
+            var messageData = msgEvent.getData()
+            console.log("message is:" + messageData)
           })
       }
     }
@@ -5488,16 +5488,16 @@ setData(data: string): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    ports: WebMessagePort[] = null;
+    controller: WebController = new WebController()
+    ports: WebMessagePort[] = null
 
     build() {
       Column() {
         Button('setData')
           .onClick(() => {
-            var msg = new WebMessageEvent();
-            msg.setData("post message from ets to HTML5");
-            this.ports[0].postMessageEvent(msg);
+            var msg = new WebMessageEvent()
+            msg.setData("post message from ets to HTML5")
+            this.ports[0].postMessageEvent(msg)
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
@@ -5522,16 +5522,16 @@ getPorts(): Array\<WebMessagePort\>
   @Entry
   @Component
   struct WebComponent {
-    ports: WebMessagePort[] = null;
+    ports: WebMessagePort[] = null
     build() {
       Column() {
         Button('getPorts')
           .onClick(() => {
-            var sendPortArray = new Array(this.ports[0]);
-            var msgEvent = new WebMessageEvent();
-            msgEvent.setPorts(sendPortArray);
-            var getPorts = msgEvent.getPorts();
-            console.log("Ports is:" + getPorts);
+            var sendPortArray = new Array(this.ports[0])
+            var msgEvent = new WebMessageEvent()
+            msgEvent.setPorts(sendPortArray)
+            var getPorts = msgEvent.getPorts()
+            console.log("Ports is:" + getPorts)
           })
       }
     }
@@ -5556,18 +5556,18 @@ setPorts(ports: Array\<WebMessagePort\>): void
   @Entry
   @Component
   struct WebComponent {
-    controller: WebController = new WebController();
-    ports: WebMessagePort[] = null;
+    controller: WebController = new WebController()
+    ports: WebMessagePort[] = null
   
     build() {
       Column() {
         Button('setPorts')
           .onClick(() => {
-            var sendPortArray = new Array(this.ports[1]);
-            var msgEvent = new WebMessageEvent();
-            msgEvent.setData("__init_ports__");
-            msgEvent.setPorts(sendPortArray);
-            this.controller.postMessage({message: msgEvent, uri: "*"});
+            var sendPortArray = new Array(this.ports[1])
+            var msgEvent = new WebMessageEvent()
+            msgEvent.setData("__init_ports__")
+            msgEvent.setPorts(sendPortArray)
+            this.controller.postMessage({message: msgEvent, uri: "*"})
           })
         Web({ src: 'www.example.com', controller: this.controller })
       }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
index a46b23d875209a0e3d4c1102829b4db44c3a542e..e047ed2da951bb898627b9830bdb12737d6ad4c5 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
@@ -107,7 +107,7 @@ getXComponentContext()
 
 ```ts
 // xxx.ets
-import camera from '@ohos.multimedia.camera';
+import camera from '@ohos.multimedia.camera'
 @Entry
 @Component
 struct PreviewArea {
@@ -122,9 +122,9 @@ struct PreviewArea {
       })
         .onLoad(() => {
           this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
-          this.surfaceId = this.xcomponentController.getXComponentSurfaceId();
+          this.surfaceId = this.xcomponentController.getXComponentSurfaceId()
           camera.createPreviewOutput(this.surfaceId).then((previewOutput) => {
-            console.log('Promise returned with the PreviewOutput instance');
+            console.log('Promise returned with the PreviewOutput instance')
           })
         })
         .width('640px')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
index 3afc63f5d272ee02dd2d8fbea1b9e45144bd4d2e..1073d8738dbf000826b4a9ab70ef4dcda1079bf5 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-longpressgesture.md
@@ -36,7 +36,7 @@ LongPressGesture(value?: { fingers?: number, repeat?: boolean, duration?: number
 @Entry
 @Component
 struct LongPressGestureExample {
-  @State count: number = 0;
+  @State count: number = 0
 
   build() {
     Column() {
@@ -47,12 +47,12 @@ struct LongPressGestureExample {
           // 由于repeat设置为true，长按动作存在时会连续触发，触发间隔为duration（默认值500ms）
           .onAction((event: GestureEvent) => {
             if (event.repeat) {
-              this.count++;
+              this.count++
             }
           })
             // 长按动作一结束触发
           .onActionEnd(() => {
-            this.count = 0;
+            this.count = 0
           })
         )
     }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
index 0ed73fb6fbf0ea42b8d0343791b18f374f94b88e..d52be4b42cf43deaf76502b419e26a36fa63694e 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
@@ -75,11 +75,11 @@ PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance
 @Entry
 @Component
 struct PanGestureExample {
-  @State offsetX: number = 0;
-  @State offsetY: number = 0;
-  @State positionX: number = 0;
-  @State positionY: number = 0;
-  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right });
+  @State offsetX: number = 0
+  @State offsetY: number = 0
+  @State positionX: number = 0
+  @State positionY: number = 0
+  private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right })
 
   build() {
     Column() {
@@ -96,24 +96,24 @@ struct PanGestureExample {
       .gesture(
       PanGesture(this.panOption)
         .onActionStart((event: GestureEvent) => {
-          console.info('Pan start');
+          console.info('Pan start')
         })
         .onActionUpdate((event: GestureEvent) => {
-          this.offsetX = this.positionX + event.offsetX;
-          this.offsetY = this.positionY + event.offsetY;
+          this.offsetX = this.positionX + event.offsetX
+          this.offsetY = this.positionY + event.offsetY
         })
         .onActionEnd(() => {
-          this.positionX = this.offsetX;
-          this.positionY = this.offsetY;
-          console.info('Pan end');
+          this.positionX = this.offsetX
+          this.positionY = this.offsetY
+          console.info('Pan end')
         })
       )
 
       Button('修改PanGesture触发条件')
         .onClick(() => {
           // 将PanGesture手势事件触发条件改为双指以任意方向拖动
-          this.panOption.setDirection(PanDirection.All);
-          this.panOption.setFingers(2);
+          this.panOption.setDirection(PanDirection.All)
+          this.panOption.setFingers(2)
         })
     }
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
index 4de9579ea246c83950967a078c48cb10e223bfcf..59a11311a2beb9e089a1a1f8e7d491f810c3f84f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
@@ -36,10 +36,10 @@ PinchGesture(value?: { fingers?: number, distance?: number })
 @Entry
 @Component
 struct PinchGestureExample {
-  @State scaleValue: number = 1;
-  @State pinchValue: number = 1;
-  @State pinchX: number = 0;
-  @State pinchY: number = 0;
+  @State scaleValue: number = 1
+  @State pinchValue: number = 1
+  @State pinchX: number = 0
+  @State pinchY: number = 0
 
   build() {
     Column() {
@@ -57,16 +57,16 @@ struct PinchGestureExample {
       .gesture(
       PinchGesture({ fingers: 3 })
         .onActionStart((event: GestureEvent) => {
-          console.info('Pinch start');
+          console.info('Pinch start')
         })
         .onActionUpdate((event: GestureEvent) => {
-          this.scaleValue = this.pinchValue * event.scale;
-          this.pinchX = event.pinchCenterX;
-          this.pinchY = event.pinchCenterY;
+          this.scaleValue = this.pinchValue * event.scale
+          this.pinchX = event.pinchCenterX
+          this.pinchY = event.pinchCenterY
         })
         .onActionEnd(() => {
-          this.pinchValue = this.scaleValue;
-          console.info('Pinch end');
+          this.pinchValue = this.scaleValue
+          console.info('Pinch end')
         })
       )
     }.width('100%')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
index 35d0bf0f5dac4a4c7cfd34adffa646be1c995ea2..3c4a56b76cf7c8d7866566b80a38af8be0587f0f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-rotationgesture.md
@@ -36,8 +36,8 @@ RotationGesture(value?: { fingers?: number, angle?: number })
 @Entry
 @Component
 struct RotationGestureExample {
-  @State angle: number = 0;
-  @State rotateValue: number = 0;
+  @State angle: number = 0
+  @State rotateValue: number = 0
 
   build() {
     Column() {
@@ -54,14 +54,14 @@ struct RotationGestureExample {
       .gesture(
       RotationGesture()
         .onActionStart((event: GestureEvent) => {
-          console.info('Rotation start');
+          console.info('Rotation start')
         })
         .onActionUpdate((event: GestureEvent) => {
-          this.angle = this.rotateValue + event.angle;
+          this.angle = this.rotateValue + event.angle
         })
         .onActionEnd(() => {
-          this.rotateValue = this.angle;
-          console.info('Rotation end');
+          this.rotateValue = this.angle
+          console.info('Rotation end')
         })
       )
     }.width('100%')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
index 7e5706a19f443340a02512f055539332cd6f3e8c..6a2daf6dff7daad928caefbb6e2ed4aa32f3c5a9 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
@@ -42,8 +42,8 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
 @Entry
 @Component
 struct SwipeGestureExample {
-  @State rotateAngle: number = 0;
-  @State speed: number = 1;
+  @State rotateAngle: number = 0
+  @State speed: number = 1
 
   build() {
     Column() {
@@ -60,8 +60,8 @@ struct SwipeGestureExample {
       .gesture(
       SwipeGesture({ direction: SwipeDirection.Vertical })
         .onAction((event: GestureEvent) => {
-          this.speed = event.speed;
-          this.rotateAngle = event.angle;
+          this.speed = event.speed
+          this.rotateAngle = event.angle
         })
       )
     }.width('100%')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
index d71847aebda3c1dadd06d24f135060bd3faff079..0bc8ae2307857deca73d21c02c55a1be8f53c17f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-tapgesture.md
@@ -33,7 +33,7 @@ TapGesture(value?: { count?: number, fingers?: number })
 @Entry
 @Component
 struct TapGestureExample {
-  @State value: string = '';
+  @State value: string = ''
 
   build() {
     Column() {
@@ -42,7 +42,7 @@ struct TapGestureExample {
         .gesture(
         TapGesture({ count: 2 })
           .onAction((event: GestureEvent) => {
-            this.value = JSON.stringify(event.fingerList[0]);
+            this.value = JSON.stringify(event.fingerList[0])
           })
         )
       Text(this.value)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index d0660495488a6d94bfa3a50d8e1dd39094c70370..b9efef870d9d5be85079e46c3f4b9c9624652212 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -66,8 +66,8 @@ RenderingContextSettings(antialias?: boolean)
 @Entry
 @Component
 struct FillStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -96,8 +96,8 @@ struct FillStyleExample {
 @Entry
 @Component
 struct LineWidthExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -126,8 +126,8 @@ struct LineWidthExample {
 @Entry
 @Component
 struct StrokeStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -158,8 +158,8 @@ struct StrokeStyleExample {
 @Entry
 @Component
 struct LineCapExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -192,8 +192,8 @@ struct LineCapExample {
 @Entry
 @Component
 struct LineJoinExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -227,8 +227,8 @@ struct LineJoinExample {
 @Entry
 @Component
 struct MiterLimit {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -262,8 +262,8 @@ struct MiterLimit {
 @Entry
 @Component
 struct Fonts {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -292,8 +292,8 @@ struct Fonts {
 @Entry
 @Component
 struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -337,8 +337,8 @@ struct CanvasExample {
 @Entry
 @Component
 struct TextBaseline {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -382,8 +382,8 @@ struct TextBaseline {
 @Entry
 @Component
 struct GlobalAlpha {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -415,8 +415,8 @@ struct GlobalAlpha {
 @Entry
 @Component
 struct LineDashOffset {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -427,8 +427,8 @@ struct LineDashOffset {
         .onReady(() =>{
           this.context.arc(100, 75, 50, 0, 6.28)
           this.context.setLineDash([10,20])
-          this.context.lineDashOffset = 10.0;
-          this.context.stroke();
+          this.context.lineDashOffset = 10.0
+          this.context.stroke()
       })
     }
     .width('100%')
@@ -461,8 +461,8 @@ struct LineDashOffset {
 @Entry
 @Component
 struct GlobalCompositeOperation {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -499,8 +499,8 @@ struct GlobalCompositeOperation {
 @Entry
 @Component
 struct ShadowBlur {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -531,8 +531,8 @@ struct ShadowBlur {
 @Entry
 @Component
 struct ShadowColor {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -563,8 +563,8 @@ struct ShadowColor {
 @Entry
 @Component
 struct ShadowOffsetX {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -596,8 +596,8 @@ struct ShadowOffsetX {
 @Entry
 @Component
 struct ShadowOffsetY {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Canvas(this.context)
@@ -628,9 +628,9 @@ struct ShadowOffsetY {
 @Entry
 @Component
 struct ImageSmoothingEnabled {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -677,8 +677,8 @@ fillRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct FillRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -721,8 +721,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct StrokeRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -765,8 +765,8 @@ clearRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct ClearRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -811,8 +811,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
   @Entry
   @Component
   struct FillText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -856,8 +856,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
   @Entry
   @Component
   struct StrokeText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -925,8 +925,8 @@ measureText(text: string): TextMetrics
   @Entry
   @Component
   struct MeasureText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -968,8 +968,8 @@ stroke(path?: Path2D): void
   @Entry
   @Component
   struct Stroke {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1008,8 +1008,8 @@ beginPath(): void
   @Entry
   @Component
   struct BeginPath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1055,8 +1055,8 @@ moveTo(x: number, y: number): void
   @Entry
   @Component
   struct MoveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1100,8 +1100,8 @@ lineTo(x: number, y: number): void
   @Entry
   @Component
   struct LineTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1138,8 +1138,8 @@ closePath(): void
   @Entry
   @Component
   struct ClosePath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1176,7 +1176,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
 | 参数       | 类型                                               | 必填 | 描述                                                         |
 | ---------- | -------------------------------------------------- | ---- | ------------------------------------------------------------ |
 | image      | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是   | 图源对象，具体参考ImageBitmap对象。                          |
-| repetition | string                                             | 是   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp;'repeat-y'、'no-repeat'。<br/>默认值：'' |
+| repetition | string                                             | 是   | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp'repeat-y'、'no-repeat'。<br/>默认值：'' |
 
 **返回值：**：
 
@@ -1191,9 +1191,9 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
   @Entry
   @Component
   struct CreatePattern {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1240,8 +1240,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   @Entry
   @Component
   struct BezierCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1287,8 +1287,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
   @Entry
   @Component
   struct QuadraticCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1297,10 +1297,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.beginPath();
-            this.context.moveTo(20, 20);
-            this.context.quadraticCurveTo(100, 100, 200, 20);
-            this.context.stroke();
+            this.context.beginPath()
+            this.context.moveTo(20, 20)
+            this.context.quadraticCurveTo(100, 100, 200, 20)
+            this.context.stroke()
         })
       }
       .width('100%')
@@ -1336,8 +1336,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   @Entry
   @Component
   struct Arc {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1383,8 +1383,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   @Entry
   @Component
   struct ArcTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1393,9 +1393,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.moveTo(100, 20);
-            this.context.arcTo(150, 20, 150, 70, 50);
-            this.context.stroke();
+            this.context.moveTo(100, 20)
+            this.context.arcTo(150, 20, 150, 70, 50)
+            this.context.stroke()
           })
       }
       .width('100%')
@@ -1433,8 +1433,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1479,8 +1479,8 @@ rect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1522,8 +1522,8 @@ fill(fillRule?: CanvasFillRule): void
   @Entry
   @Component
   struct Fill {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1574,17 +1574,17 @@ struct Fill {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          let region = new Path2D();
-          region.moveTo(30, 90);
-          region.lineTo(110, 20);
-          region.lineTo(240, 130);
-          region.lineTo(60, 130);
-          region.lineTo(190, 20);
-          region.lineTo(270, 90);
-          region.closePath();
+          let region = new Path2D()
+          region.moveTo(30, 90)
+          region.lineTo(110, 20)
+          region.lineTo(240, 130)
+          region.lineTo(60, 130)
+          region.lineTo(190, 20)
+          region.lineTo(270, 90)
+          region.closePath()
           // Fill path
-          this.context.fillStyle = 'green';
-          this.context.fill(region, "evenodd");
+          this.context.fillStyle = 'green'
+          this.context.fill(region, "evenodd")
         })
     }
     .width('100%')
@@ -1615,8 +1615,8 @@ clip(fillRule?: CanvasFillRule): void
   @Entry
   @Component
   struct Clip {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1669,9 +1669,9 @@ struct Clip {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          let region = new Path2D();
-          region.rect(80,10,20,130);
-          region.rect(40,50,100,50);
+          let region = new Path2D()
+          region.rect(80,10,20,130)
+          region.rect(40,50,100,50)
           this.context.clip(region,"evenodd")
           this.context.fillStyle = "rgb(255,0,0)"
           this.context.fillRect(0, 0, this.context.width, this.context.height)
@@ -1739,8 +1739,8 @@ rotate(angle: number): void
   @Entry
   @Component
   struct Rotate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1782,8 +1782,8 @@ scale(x: number, y: number): void
   @Entry
   @Component
   struct Scale {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1838,8 +1838,8 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   @Entry
   @Component
   struct Transform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1891,8 +1891,8 @@ setTransform方法使用的参数和transform()方法相同，但setTransform()
   @Entry
   @Component
   struct SetTransform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1942,8 +1942,8 @@ translate(x: number, y: number): void
   @Entry
   @Component
   struct Translate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1998,9 +1998,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
   @Entry
   @Component
   struct ImageExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2009,7 +2009,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+            this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
         })
       }
       .width('100%')
@@ -2102,8 +2102,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 @Entry
 @Component
 struct GetImageData {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
   build() {
@@ -2113,9 +2113,9 @@ struct GetImageData {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.context.drawImage(this.img,0,0,130,130);
-          var imagedata = this.context.getImageData(50,50,130,130);
-          this.context.putImageData(imagedata,150,150);
+          this.context.drawImage(this.img,0,0,130,130)
+          var imagedata = this.context.getImageData(50,50,130,130)
+          this.context.putImageData(imagedata,150,150)
         })
     }
     .width('100%')
@@ -2154,8 +2154,8 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
   @Entry
   @Component
   struct PutImageData {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2268,7 +2268,7 @@ struct CanvasGetLineDash {
           .onReady(() => {
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
-            this.context.stroke();
+            this.context.stroke()
             let res = this.context.getLineDash()
           })
       }
@@ -2382,7 +2382,7 @@ struct ToDataURL {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          var dataURL = this.context.toDataURL();
+          var dataURL = this.context.toDataURL()
         })
     }
     .width('100%')
@@ -2405,8 +2405,8 @@ restore(): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2415,11 +2415,11 @@ restore(): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save(); // save the default state
-            this.context.fillStyle = "green";
-            this.context.fillRect(20, 20, 100, 100);
-            this.context.restore(); // restore to the default state
-            this.context.fillRect(150, 75, 100, 100);
+            this.context.save() // save the default state
+            this.context.fillStyle = "green"
+            this.context.fillRect(20, 20, 100, 100)
+            this.context.restore() // restore to the default state
+            this.context.fillRect(150, 75, 100, 100)
           })
       }
       .width('100%')
@@ -2443,8 +2443,8 @@ save(): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2453,11 +2453,11 @@ save(): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save(); // save the default state
-            this.context.fillStyle = "green";
-            this.context.fillRect(20, 20, 100, 100);
-            this.context.restore(); // restore to the default state
-            this.context.fillRect(150, 75, 100, 100);
+            this.context.save() // save the default state
+            this.context.fillStyle = "green"
+            this.context.fillRect(20, 20, 100, 100)
+            this.context.restore() // restore to the default state
+            this.context.fillRect(150, 75, 100, 100)
           })
       }
       .width('100%')
@@ -2490,8 +2490,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
   @Entry
   @Component
   struct CreateLinearGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2541,8 +2541,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
   @Entry
   @Component
   struct CreateRadialGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
index 583aa6775a1a807995a5d3c2e9628c8dfb8fae77..ec9d2e8021068ffde8cf932df2ca0fea5612f381 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
@@ -39,12 +39,12 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
 @Entry
 @Component
 struct GestureGroupExample {
-  @State count: number = 0;
-  @State offsetX: number = 0;
-  @State offsetY: number = 0;
-  @State positionX: number = 0;
-  @State positionY: number = 0;
-  @State borderStyles: BorderStyle = BorderStyle.Solid;
+  @State count: number = 0
+  @State offsetX: number = 0
+  @State offsetY: number = 0
+  @State positionX: number = 0
+  @State positionY: number = 0
+  @State borderStyles: BorderStyle = BorderStyle.Solid
 
   build() {
     Column() {
@@ -57,37 +57,37 @@ struct GestureGroupExample {
     .margin(20)
     .border({ width: 3, style: this.borderStyles })
     .gesture(
-      //以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
+      // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
     GestureGroup(GestureMode.Sequence,
     LongPressGesture({ repeat: true })
       .onAction((event: GestureEvent) => {
         if (event.repeat) {
-          this.count++;
+          this.count++
         }
-        console.info('LongPress onAction');
+        console.info('LongPress onAction')
       })
       .onActionEnd(() => {
-        console.info('LongPress end');
+        console.info('LongPress end')
       }),
     PanGesture()
       .onActionStart(() => {
-        this.borderStyles = BorderStyle.Dashed;
-        console.info('pan start');
+        this.borderStyles = BorderStyle.Dashed
+        console.info('pan start')
       })
       .onActionUpdate((event: GestureEvent) => {
-        this.offsetX = this.positionX + event.offsetX;
-        this.offsetY = this.positionY + event.offsetY;
-        console.info('pan update');
+        this.offsetX = this.positionX + event.offsetX
+        this.offsetY = this.positionY + event.offsetY
+        console.info('pan update')
       })
       .onActionEnd(() => {
-        this.positionX = this.offsetX;
-        this.positionY = this.offsetY;
-        this.borderStyles = BorderStyle.Solid;
-        console.info('pan end');
+        this.positionX = this.offsetX
+        this.positionY = this.offsetY
+        this.borderStyles = BorderStyle.Solid
+        console.info('pan end')
       })
     )
       .onCancel(() => {
-        console.info('sequence gesture canceled');
+        console.info('sequence gesture canceled')
       })
     )
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
index 12063d494b68b2c694ec35090730d4625a81e620..8785206dcef551053042f745837aa8e664757c5d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
@@ -10,10 +10,10 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
 
 ## 属性
 
-| 属性 | 类型 | 描述 | 
+| 属性 | 类型 | 描述 |
 | -------- | -------- | -------- |
-| width | number | ImageBitmap的像素宽度。 | 
-| height | number | ImageBitmap的像素高度。 | 
+| width | number | ImageBitmap的像素宽度。 |
+| height | number | ImageBitmap的像素高度。 |
 
 **示例：**
 
@@ -22,9 +22,9 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
   @Entry
   @Component
   struct ImageExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -33,7 +33,7 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+            this.context.drawImage( this.img,0,0,500,500,0,0,400,200)
         })
       }
       .width('100%')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
index 00ca2d47e15d1efc2e71777f11fef69a70e1eeb7..f3dd34c03f3578b435ded7faa34f7d3e01ea65a7 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
@@ -10,11 +10,11 @@ ImageData对象可以存储canvas渲染的像素数据。
 
 ## 属性
 
-| 属性 | 类型 | 描述 | 
+| 属性 | 类型 | 描述 |
 | -------- | -------- | -------- |
-| width | number | 矩形区域实际像素宽度。 | 
-| height | number | 矩形区域实际像素高度。 | 
-| data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | 
+| width | number | 矩形区域实际像素宽度。 |
+| height | number | 矩形区域实际像素高度。 |
+| data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
 
 **示例：**
 
@@ -23,8 +23,8 @@ ImageData对象可以存储canvas渲染的像素数据。
 @Entry
 @Component
 struct Translate {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
   build() {
@@ -34,9 +34,9 @@ struct Translate {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.context.drawImage(this.img,0,0,130,130);
-          var imagedata = this.context.getImageData(50,50,130,130);
-          this.context.putImageData(imagedata,150,150);
+          this.context.drawImage(this.img,0,0,130,130)
+          var imagedata = this.context.getImageData(50,50,130,130)
+          this.context.putImageData(imagedata,150,150)
         })
     }
     .width('100%')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
index 86c6d07bdfa37959bf8e15714ade8ce4786e2c22..086230f8b37b74650ed96120f8daf35916d14f7e 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-ability-component.md
@@ -65,10 +65,10 @@ struct MyComponent {
               },
           })
           .onConnect(() => {
-              console.log('AbilityComponent connect');
+              console.log('AbilityComponent connect')
           })
           .onDisconnect(() => {
-              console.log('AbilityComponent disconnect');
+              console.log('AbilityComponent disconnect')
           })
       }
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
index 27fbd173f704132eb302d27c2191d258761e8533..0628db7cfcfb691e410c71a17e98d5bcb432e0ec 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-counter.md
@@ -6,10 +6,6 @@
 > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-
-
-
-
 ## 子组件
 
 可以包含子组件。
@@ -24,10 +20,10 @@ Counter()
 
 不支持通用事件和手势， 仅支持如下事件：
 
-| 名称 | 功能描述 | 
+| 名称 | 功能描述 |
 | -------- | -------- |
-| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 | 
-| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 | 
+| onInc(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值增加事件。 |
+| onDec(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 监听数值减少事件。 |
 
 
 ## 示例
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
index b6e0e30f1490ec2b2a80d57893ee97f41058d19d..305facc51a69b54fe0fe82e8e5b37d1f55a9abe4 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
@@ -168,8 +168,8 @@ scrollBy(dx: Length, dy: Length): void
 @Entry
 @Component
 struct ScrollExample {
-  scroller: Scroller = new Scroller();
-  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  scroller: Scroller = new Scroller()
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
   build() {
     Stack({ alignContent: Alignment.TopStart }) {
@@ -193,33 +193,33 @@ struct ScrollExample {
       .scrollBarWidth(30) // 滚动条宽度
       .edgeEffect(EdgeEffect.None)
       .onScroll((xOffset: number, yOffset: number) => {
-        console.info(xOffset + ' ' + yOffset);
+        console.info(xOffset + ' ' + yOffset)
       })
       .onScrollEdge((side: Edge) => {
-        console.info('To the edge');
+        console.info('To the edge')
       })
       .onScrollEnd(() => {
-        console.info('Scroll Stop');
+        console.info('Scroll Stop')
       })
 
       Button('scroll 150')
         .onClick(() => { // 点击后下滑指定距离150.0vp
-          this.scroller.scrollBy(0,150);
+          this.scroller.scrollBy(0,150)
         })
         .margin({ top: 10, left: 20 })
       Button('scroll 100')
         .onClick(() => { // 点击后滑动到指定位置，即下滑100.0vp的距离
-          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 });
+          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
         })
         .margin({ top: 60, left: 20 })
       Button('back top')
         .onClick(() => { // 点击后回到顶部
-          this.scroller.scrollEdge(Edge.Top);
+          this.scroller.scrollEdge(Edge.Top)
         })
         .margin({ top: 110, left: 20 })
       Button('next page')
         .onClick(() => { // 点击后滑到下一页
-          this.scroller.scrollPage({ next: true });
+          this.scroller.scrollPage({ next: true })
         })
         .margin({ top: 170, left: 20 })
     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
@@ -235,8 +235,8 @@ struct ScrollExample {
 @Component
 struct NestedScroll {
   @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
-  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-  private scroller: Scroller = new Scroller();
+  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+  private scroller: Scroller = new Scroller()
 
   build() {
     Flex() {
@@ -257,17 +257,17 @@ struct NestedScroll {
           }
           .width("100%").height("50%").edgeEffect(EdgeEffect.None)
           .onReachStart(() => {
-            this.listPosition = 0;
+            this.listPosition = 0
           })
           .onReachEnd(() => {
-            this.listPosition = 2;
+            this.listPosition = 2
           })
           .onScrollBegin((dx: number, dy: number) => {
             if ((this.listPosition == 0 && dy >= 0) || (this.listPosition == 2 && dy <= 0)) {
-              this.scroller.scrollBy(0, -dy);
-              return { dxRemain: dx, dyRemain: 0 };
+              this.scroller.scrollBy(0, -dy)
+              return { dxRemain: dx, dyRemain: 0 }
             }
-            this.listPosition = 1;
+            this.listPosition = 1
             return { dxRemain: dx, dyRemain: dy };
           })
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
index c6634faf732e678e7609827cb81606410f185645..365f1333b677c98e55b5323b45cb20c2daa6ebde 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-shape.md
@@ -152,12 +152,12 @@ struct ShapeExample {
 @Entry
 @Component
 struct ShapeMeshExample {
-  @State columnVal: number = 0;
-  @State rowVal: number = 0;
-  @State count: number = 0;
-  @State verts: Array<number> = [];
-  @State shapeWidth: number = 600;
-  @State shapeHeight: number = 600;
+  @State columnVal: number = 0
+  @State rowVal: number = 0
+  @State count: number = 0
+  @State verts: Array<number> = []
+  @State shapeWidth: number = 600
+  @State shapeHeight: number = 600
 
   build() {
     Column() {
@@ -186,34 +186,34 @@ struct ShapeMeshExample {
       .height(this.shapeHeight + 'px')
       // 手指触摸Shape组件时会显示mesh扭曲效果
       .onTouch((event: TouchEvent) => {
-        var touchX = event.touches[0].x * 2;
-        var touchY = event.touches[0].y * 2;
-        this.columnVal = 20;
-        this.rowVal = 20;
-        this.count = (this.columnVal + 1) * (this.rowVal + 1);
-        var orig = [this.count * 2];
-        var index = 0;
+        var touchX = event.touches[0].x * 2
+        var touchY = event.touches[0].y * 2
+        this.columnVal = 20
+        this.rowVal = 20
+        this.count = (this.columnVal + 1) * (this.rowVal + 1)
+        var orig = [this.count * 2]
+        var index = 0
         for (var i = 0; i <= this.rowVal; i++) {
-          var fy = this.shapeWidth * i / this.rowVal;
+          var fy = this.shapeWidth * i / this.rowVal
           for (var j = 0; j <= this.columnVal; j++) {
-            var fx = this.shapeWidth * j / this.columnVal;
-            orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx;
-            orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy;
+            var fx = this.shapeWidth * j / this.columnVal
+            orig[index * 2 + 0] = this.verts[index * 2 + 0] = fx
+            orig[index * 2 + 1] = this.verts[index * 2 + 1] = fy
             index++;
           }
         }
         for (var k = 0; k < this.count * 2; k += 2) {
-          var dx = touchX - orig[k + 0];
-          var dy = touchY - orig[k + 1];
-          var dd = dx * dx + dy * dy;
-          var d = Math.sqrt(dd);
-          var pull = 80000 / (dd * d);
+          var dx = touchX - orig[k + 0]
+          var dy = touchY - orig[k + 1]
+          var dd = dx * dx + dy * dy
+          var d = Math.sqrt(dd)
+          var pull = 80000 / (dd * d)
           if (pull >= 1) {
-            this.verts[k + 0] = touchX;
-            this.verts[k + 1] = touchY;
+            this.verts[k + 0] = touchX
+            this.verts[k + 1] = touchY
           } else {
-            this.verts[k + 0] = orig[k + 0] + dx * pull;
-            this.verts[k + 1] = orig[k + 1] + dy * pull;
+            this.verts[k + 0] = orig[k + 0] + dx * pull
+            this.verts[k + 1] = orig[k + 1] + dy * pull
           }
         }
       })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
index dcc4bf1065fbf418faf35acfe9b4392ee82ee600..d31658612f6d098d7bac990af1899929c541aed6 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -85,8 +85,8 @@
 @Entry
 @Component
 struct GestureSettingsExample {
-  @State priorityTestValue: string = '';
-  @State parallelTestValue: string = '';
+  @State priorityTestValue: string = ''
+  @State parallelTestValue: string = ''
 
   build() {
     Column() {
@@ -95,7 +95,7 @@ struct GestureSettingsExample {
           .gesture(
           TapGesture()
             .onAction(() => {
-              this.priorityTestValue += '\nText';
+              this.priorityTestValue += '\nText'
             }))
       }
       .height(200)
@@ -107,7 +107,7 @@ struct GestureSettingsExample {
       .priorityGesture(
       TapGesture()
         .onAction((event: GestureEvent) => {
-          this.priorityTestValue += '\nColumn';
+          this.priorityTestValue += '\nColumn'
         }), GestureMask.IgnoreInternal)
 
       Column() {
@@ -115,7 +115,7 @@ struct GestureSettingsExample {
           .gesture(
           TapGesture()
             .onAction(() => {
-              this.parallelTestValue += '\nText';
+              this.parallelTestValue += '\nText'
             }))
       }
       .height(200)
@@ -127,7 +127,7 @@ struct GestureSettingsExample {
       .parallelGesture(
       TapGesture()
         .onAction((event: GestureEvent) => {
-          this.parallelTestValue += '\nColumn';
+          this.parallelTestValue += '\nColumn'
         }), GestureMask.Normal)
     }
   }
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
index 76ea01dc98ffc8ac952cba14b5192b8bebcc26da..61dd5ab8e724f97b8e9d0b4a87bc71627980d9da 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
@@ -41,13 +41,13 @@ struct TimePickerDialogExample {
             onAccept: (value: TimePickerResult) => {
               // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
               this.selectTime.setHours(value.hour, value.minute)
-              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
+              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
             },
             onCancel: () => {
-              console.info("TimePickerDialog:onCancel()");
+              console.info("TimePickerDialog:onCancel()")
             },
             onChange: (value: TimePickerResult) => {
-              console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
+              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
             }
           })
         })
@@ -59,13 +59,13 @@ struct TimePickerDialogExample {
             useMilitaryTime: true,
             onAccept: (value: TimePickerResult) => {
               this.selectTime.setHours(value.hour, value.minute)
-              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
+              console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
             },
             onCancel: () => {
-              console.info("TimePickerDialog:onCancel()");
+              console.info("TimePickerDialog:onCancel()")
             },
             onChange: (value: TimePickerResult) => {
-              console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
+              console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
             }
           })
         })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 5928d2c9c52ee3b4d17d4c72b6e86853d92d4a90..f243c3342ad7ee14e6d77fece525d2c149cd1e78 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -67,8 +67,8 @@ struct FillStyleExample {
         .onReady(() =>{
           this.offContext.fillStyle = '#0000ff'
           this.offContext.fillRect(20, 160, 150, 100)
-          var image = this.offContext.transferToImageBitmap();
-          this.context.transferFromImageBitmap(image);
+          var image = this.offContext.transferToImageBitmap()
+          this.context.transferFromImageBitmap(image)
         })
     }
     .width('100%')
@@ -445,8 +445,8 @@ struct LineDashOffset {
         .onReady(() =>{
           this.offContext.arc(100, 75, 50, 0, 6.28)
           this.offContext.setLineDash([10,20])
-          this.offContext.lineDashOffset = 10.0;
-          this.offContext.stroke();
+          this.offContext.lineDashOffset = 10.0
+          this.offContext.stroke()
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
@@ -1016,7 +1016,7 @@ stroke(path?: Path2D): void
 | path | [Path2D](ts-components-canvas-path2d.md) | 否    | null | 需要绘制的Path2D。 |
 
  **示例：**
- 
+
   ```ts
   // xxx.ets
   @Entry
@@ -1373,10 +1373,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.beginPath();
-            this.offContext.moveTo(20, 20);
-            this.offContext.quadraticCurveTo(100, 100, 200, 20);
-            this.offContext.stroke();
+            this.offContext.beginPath()
+            this.offContext.moveTo(20, 20)
+            this.offContext.quadraticCurveTo(100, 100, 200, 20)
+            this.offContext.stroke()
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
         })
@@ -1475,9 +1475,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.moveTo(100, 20);
-            this.offContext.arcTo(150, 20, 150, 70, 50);
-            this.offContext.stroke();
+            this.offContext.moveTo(100, 20)
+            this.offContext.arcTo(150, 20, 150, 70, 50)
+            this.offContext.stroke()
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
@@ -1664,17 +1664,17 @@ struct Fill {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          let region = new Path2D();
-          region.moveTo(30, 90);
-          region.lineTo(110, 20);
-          region.lineTo(240, 130);
-          region.lineTo(60, 130);
-          region.lineTo(190, 20);
-          region.lineTo(270, 90);
-          region.closePath();
+          let region = new Path2D()
+          region.moveTo(30, 90)
+          region.lineTo(110, 20)
+          region.lineTo(240, 130)
+          region.lineTo(60, 130)
+          region.lineTo(190, 20)
+          region.lineTo(270, 90)
+          region.closePath()
           // Fill path
-          this.offContext.fillStyle = 'green';
-          this.offContext.fill(region, "evenodd");
+          this.offContext.fillStyle = 'green'
+          this.offContext.fill(region, "evenodd")
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
@@ -1766,9 +1766,9 @@ struct Clip {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          let region = new Path2D();
-          region.rect(80,10,20,130);
-          region.rect(40,50,100,50);
+          let region = new Path2D()
+          region.rect(80,10,20,130)
+          region.rect(40,50,100,50)
           this.offContext.clip(region,"evenodd")
           this.offContext.fillStyle = "rgb(255,0,0)"
           this.offContext.fillRect(0, 0, 600, 600)
@@ -2214,8 +2214,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 @Entry
 @Component
 struct GetImageData {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
   private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
@@ -2226,9 +2226,9 @@ struct GetImageData {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.drawImage(this.img,0,0,130,130);
-          var imagedata = this.offContext.getImageData(50,50,130,130);
-          this.offContext.putImageData(imagedata,150,150);
+          this.offContext.drawImage(this.img,0,0,130,130)
+          var imagedata = this.offContext.getImageData(50,50,130,130)
+          this.offContext.putImageData(imagedata,150,150)
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
@@ -2330,7 +2330,7 @@ struct SetLineDash {
         .onReady(() =>{
           this.offContext.arc(100, 75, 50, 0, 6.28)
           this.offContext.setLineDash([10,20])
-          this.offContext.stroke();
+          this.offContext.stroke()
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
       })
@@ -2384,7 +2384,7 @@ struct OffscreenCanvasGetLineDash {
           .onReady(() => {
             this.offContext.arc(100, 75, 50, 0, 6.28)
             this.offContext.setLineDash([10,20])
-            this.offContext.stroke();
+            this.offContext.stroke()
             let res = this.offContext.getLineDash()
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
@@ -2437,7 +2437,7 @@ struct ToDataURL {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          var dataURL = this.offContext.toDataURL();
+          var dataURL = this.offContext.toDataURL()
         })
     }
     .width('100%')
@@ -2534,11 +2534,11 @@ struct CanvasExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.save(); // save the default state
-          this.offContext.fillStyle = "green";
-          this.offContext.fillRect(20, 20, 100, 100);
-          this.offContext.restore(); // restore to the default state
-          this.offContext.fillRect(150, 75, 100, 100);
+          this.offContext.save() // save the default state
+          this.offContext.fillStyle = "green"
+          this.offContext.fillRect(20, 20, 100, 100)
+          this.offContext.restore() // restore to the default state
+          this.offContext.fillRect(150, 75, 100, 100)
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
@@ -2575,11 +2575,11 @@ struct CanvasExample {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.offContext.save(); // save the default state
-          this.offContext.fillStyle = "green";
-          this.offContext.fillRect(20, 20, 100, 100);
-          this.offContext.restore(); // restore to the default state
-          this.offContext.fillRect(150, 75, 100, 100);
+          this.offContext.save() // save the default state
+          this.offContext.fillStyle = "green"
+          this.offContext.fillRect(20, 20, 100, 100)
+          this.offContext.restore() // restore to the default state
+          this.offContext.fillRect(150, 75, 100, 100)
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
index 512c61a0d18a484fa80a2a279639b4b3a38f3937..268745a58a2edbff9dd22bd06d6ca3558eb84fd5 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
@@ -41,7 +41,7 @@
 @Entry
 @Component
 struct Index {
-  @State outSetValue: number = 40;
+  @State outSetValue: number = 40
 
   build() {
     Row() {
@@ -63,8 +63,8 @@ struct Index {
         })
           .margin({ top: 30 })
           .onChange((value: number, mode: SliderChangeMode) => {
-            this.outSetValue = value;
-            console.info('value:' + value + 'mode:' + mode.toString());
+            this.outSetValue = value
+            console.info('value:' + value + 'mode:' + mode.toString())
           })
       }
       .width('100%')
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
index f417b1f8d1e02e97998dda9da036f7d9931d966c..e915efdd2c514a9a015f19d6b5060cfb37e30412 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-focus.md
@@ -63,7 +63,7 @@ struct FocusableExample {
               .width(165)
               .height(40)
               .fontColor(Color.White)
-              .focusOnTouch(true)           //该Button组件点击后可获焦
+              .focusOnTouch(true)           // 该Button组件点击后可获焦
             Row({ space: 5 }) {
               Button()
                 .width(80)
@@ -73,7 +73,7 @@ struct FocusableExample {
                 .width(80)
                 .height(40)
                 .fontColor(Color.White)
-                .focusOnTouch(true)           //该Button组件点击后可获焦
+                .focusOnTouch(true)           // 该Button组件点击后可获焦
             }
             Row({ space: 5 }) {
               Button()
@@ -86,7 +86,7 @@ struct FocusableExample {
                 .fontColor(Color.White)
             }
           }.borderWidth(2).borderColor(Color.Red).borderStyle(BorderStyle.Dashed)
-          .tabIndex(1)                      //该Column组件为按TAB键走焦的第一个获焦的组件
+          .tabIndex(1)                      // 该Column组件为按TAB键走焦的第一个获焦的组件
           Column({ space: 5 }) {
             Button('Group2')
               .width(165)
@@ -101,7 +101,7 @@ struct FocusableExample {
                 .width(80)
                 .height(40)
                 .fontColor(Color.White)
-                .groupDefaultFocus(true)      //该Button组件上级Column组件获焦时获焦
+                .groupDefaultFocus(true)      // 该Button组件上级Column组件获焦时获焦
             }
             Row({ space: 5 }) {
               Button()
@@ -114,14 +114,14 @@ struct FocusableExample {
                 .fontColor(Color.White)
             }
           }.borderWidth(2).borderColor(Color.Green).borderStyle(BorderStyle.Dashed)
-          .tabIndex(2)                      //该Column组件为按TAB键走焦的第二个获焦的组件
+          .tabIndex(2)                      // 该Column组件为按TAB键走焦的第二个获焦的组件
         }
         Column({ space: 5 }) {
           TextInput({placeholder: 'input', text: this.inputValue})
             .onChange((value: string) => {
               this.inputValue = value
             })
-            .defaultFocus(true)             //该TextInput组件为页面的初始默认焦点
+            .defaultFocus(true)             // 该TextInput组件为页面的初始默认焦点
           Button('Group3')
             .width(165)
             .height(40)
@@ -165,7 +165,7 @@ struct FocusableExample {
               .fontColor(Color.White)
           }
         }.borderWidth(2).borderColor(Color.Orange).borderStyle(BorderStyle.Dashed)
-        .tabIndex(3)                      //该Column组件为按TAB键走焦的第三个获焦的组件
+        .tabIndex(3)                      // 该Column组件为按TAB键走焦的第三个获焦的组件
       }.alignItems(VerticalAlign.Top)
     }
   }
@@ -200,7 +200,7 @@ focusControl.requestFocus示例代码：
 使用focusContrl.requestFocus接口使指定组件获取焦点。
 ```ts
 // requestFocus.ets
-import prompt from '@system.prompt';
+import prompt from '@ohos.prompt'
 
 @Entry
 @Component
@@ -250,7 +250,7 @@ struct RequestFocusExample {
         Button("RequestFocus")
           .width(200).height(70).fontColor(Color.White)
           .onClick(() => {
-            var res = focusControl.requestFocus(this.selectId)      //使选中的this.selectId的组件获焦
+            var res = focusControl.requestFocus(this.selectId)      // 使选中的this.selectId的组件获焦
             if (res) {
               prompt.showToast({message: 'Request success'})
             } else {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index 09b45008a49582d537d1896e552b0cda0125e538..fbdaabe2a84141eb2de4b1f3a6f7387cea5dc96f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -34,7 +34,7 @@
 struct BlurEffectsExample {
   build() {
     Column({ space: 10 }) {
-      //       对字体进行模糊
+      // 对字体进行模糊
       Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
       Flex({ alignItems: ItemAlign.Center }) {
         Text('original text').margin(10)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index 16070d610f5dd2bbca8bfae08bfd95aa696c71e9..c909c6988b7711c00f9febca084960e0d3caebe1 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -20,8 +20,6 @@
 | -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
 | message                  | string                                          | 是    | 弹窗信息内容。                                     |
 | placementOnTop           | boolean                                         | 否    | 是否在组件上方显示，默认值为false。                  |
-| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length)                    | 否    | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。      |
-| showInSubWindow<sup>9+</sup> | boolean                    | 否    | 是否在子窗口显示气泡，默认值为false。 |
 | primaryButton            | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否    | 第一个按钮。<br/>value:&nbsp;弹窗里主按钮的文本。<br/>action:&nbsp;点击主按钮的回调函数。 |
 | secondaryButton          | {<br/>value:&nbsp;string,<br/>action:&nbsp;()&nbsp;=&gt;&nbsp;void<br/>} | 否    | 第二个按钮。<br/>value:&nbsp;弹窗里辅助按钮的文本。<br/>action:&nbsp;点击辅助按钮的回调函数。 |
 | onStateChange            | (event:&nbsp;{&nbsp;isVisible:&nbsp;boolean&nbsp;})&nbsp;=&gt;&nbsp;void | 否    | 弹窗状态变化事件回调，参数isVisible为弹窗当前的显示状态。      |
@@ -34,8 +32,6 @@
 | -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
 | builder                  | [CustomBuilder](ts-types.md#custombuilder8)  | 是   | 提示气泡内容的构造器。                                          |
 | placement                | [Placement](ts-appendix-enums.md#placement8) | 否   | 气泡组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>默认值：Placement.Bottom     |
-| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length)                 | 否   | popup箭头在弹窗处的偏移。箭头在气泡上下方时，数值为0表示箭头居最左侧，偏移量为箭头至最左侧的距离，默认居中。箭头在气泡左右侧时，偏移量为箭头至最上侧的距离，默认居中。          |
-| showInSubWindow<sup>9+</sup> | boolean                    | 否    | 是否在子窗口显示气泡，默认值为false。 |
 | maskColor                | [ResourceColor](ts-types.md#resourcecolor)  | 否   | 提示气泡遮障层的颜色。                                          |
 | popupColor               | [ResourceColor](ts-types.md#resourcecolor)  | 否   | 提示气泡的颜色。                                               |
 | enableArrow              | boolean                                      | 否   | 是否显示箭头。<br/>从API Version 9开始，如果箭头所在方位侧的气泡长度不足以显示下箭头，则会默认不显示箭头。比如：placement设置为Left，但气泡高度小于箭头的宽度（32vp），则实际不会显示箭头。<br/>默认值：true |
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
index 137610753611d3a732559979a46d274c3d8a2d9a..09c1d74aa7bb7ca2ee484ab339996a88825c94fd 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
@@ -50,12 +50,12 @@
 @Entry
 @Component
 struct DragExample {
-  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six'];
-  @State text: string = '';
-  @State bool: boolean = false;
-  @State appleVisible: Visibility = Visibility.Visible;
-  @State orangeVisible: Visibility = Visibility.Visible;
-  @State bananaVisible: Visibility = Visibility.Visible;
+  @State numbers: string[] = ['one', 'two', 'three', 'four', 'five', 'six']
+  @State text: string = ''
+  @State bool: boolean = false
+  @State appleVisible: Visibility = Visibility.Visible
+  @State orangeVisible: Visibility = Visibility.Visible
+  @State bananaVisible: Visibility = Visibility.Visible
 
   // 自定义拖拽过程中显示的内容
   @Builder pixelMapBuilder() {
@@ -87,10 +87,10 @@ struct DragExample {
           .backgroundColor(0xAFEEEE)
           .visibility(this.appleVisible)
           .onDragStart(() => {
-            this.bool = true;
-            this.text = 'apple';
-            this.appleVisible = Visibility.None;
-            return this.pixelMapBuilder;
+            this.bool = true
+            this.text = 'apple'
+            this.appleVisible = Visibility.None
+            return this.pixelMapBuilder
           })
         Text('orange')
           .width('25%')
@@ -100,10 +100,10 @@ struct DragExample {
           .backgroundColor(0xAFEEEE)
           .visibility(this.orangeVisible)
           .onDragStart(() => {
-            this.bool = true;
-            this.text = 'orange';
-            this.orangeVisible = Visibility.None;
-            return this.pixelMapBuilder;
+            this.bool = true
+            this.text = 'orange'
+            this.orangeVisible = Visibility.None
+            return this.pixelMapBuilder
           })
         Text('banana')
           .width('25%')
@@ -113,11 +113,11 @@ struct DragExample {
           .backgroundColor(0xAFEEEE)
           .visibility(this.bananaVisible)
           .onDragStart((event: DragEvent, extraParams: string) => {
-            console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
-            this.bool = true;
-            this.text = 'banana';
-            this.bananaVisible = Visibility.None;
-            return this.pixelMapBuilder;
+            console.log('Text onDragStart, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
+            this.bool = true
+            this.text = 'banana'
+            this.bananaVisible = Visibility.None
+            return this.pixelMapBuilder
           })
       }.padding({ top: 10, bottom: 10 }).margin(10)
 
@@ -147,20 +147,20 @@ struct DragExample {
       .padding(15)
       .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 })
       .onDragEnter((event: DragEvent, extraParams: string) => {
-        console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
+        console.log('List onDragEnter, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
       })
       .onDragMove((event: DragEvent, extraParams: string) => {
-        console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
+        console.log('List onDragMove, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
       })
       .onDragLeave((event: DragEvent, extraParams: string) => {
-        console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY());
+        console.log('List onDragLeave, ' + extraParams + 'X:' + event.getX() + 'Y:' + event.getY())
       })
       .onDrop((event: DragEvent, extraParams: string) => {
         var jsonString = JSON.parse(extraParams);
         if (this.bool) {
           // 通过splice方法插入元素
-          this.numbers.splice(jsonString.insertIndex, 0, this.text);
-          this.bool = false;
+          this.numbers.splice(jsonString.insertIndex, 0, this.text)
+          this.bool = false
         }
       })
     }.width('100%').height('100%').padding({ top: 20 }).margin({ top: 20 })
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
index 2caa55742494f1bcbc26afd7a90ac4b6c98b500e..9d5189505861443501e4bb079ae2526f5c3c3624 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-key.md
@@ -36,20 +36,20 @@
 @Entry
 @Component
 struct KeyEventExample {
-  @State text: string = '';
-  @State eventType: string = '';
+  @State text: string = ''
+  @State eventType: string = ''
 
   build() {
     Column() {
       Button('KeyEvent')
         .onKeyEvent((event: KeyEvent) => {
           if (event.type === KeyType.Down) {
-            this.eventType = 'Down';
+            this.eventType = 'Down'
           }
           if (event.type === KeyType.Up) {
-            this.eventType = 'Up';
+            this.eventType = 'Up'
           }
-          this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText;
+          this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText
         })
       Text(this.text).padding(15)
     }.height(300).width('100%').padding(35)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
index d3ff6dc98d86fb800a524ade36c90514e9540a07..f2a9dc6bf283788e6facda74f53f3f208cce2ebf 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-show-hide.md
@@ -19,32 +19,32 @@
 
 ```ts
 // xxx.ets
-import prompt from '@ohos.prompt';
+import prompt from '@ohos.prompt'
 
 @Entry
 @Component
 struct AppearExample {
-  @State isShow: boolean = true;
-  @State changeAppear: string = 'Hide Text';
-  private myText: string = 'Text for onAppear';
+  @State isShow: boolean = true
+  @State changeAppear: string = 'Hide Text'
+  private myText: string = 'Text for onAppear'
 
   build() {
     Column() {
       Button(this.changeAppear)
         .onClick(() => {
-          this.isShow = !this.isShow;
+          this.isShow = !this.isShow
         }).margin(15)
       if (this.isShow) {
         Text(this.myText).fontSize(26).fontWeight(FontWeight.Bold)
           .onAppear(() => {
-            this.changeAppear = 'Hide Text';
+            this.changeAppear = 'Hide Text'
             prompt.showToast({
               message: 'The text is shown',
               duration: 2000
             })
           })
           .onDisAppear(() => {
-            this.changeAppear = 'Show Text';
+            this.changeAppear = 'Show Text'
             prompt.showToast({
               message: 'The text is hidden',
               duration: 2000
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
index f24bb33026d8b5a126b960bfb387be2a506b8423..5534089ecbe6ea7df5323922809d4e9ab1dca920 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-events-touch.md
@@ -45,42 +45,42 @@
 @Entry
 @Component
 struct TouchExample {
-  @State text: string = '';
-  @State eventType: string = '';
+  @State text: string = ''
+  @State eventType: string = ''
 
   build() {
     Column() {
       Button('Touch').height(40).width(100)
         .onTouch((event: TouchEvent) => {
           if (event.type === TouchType.Down) {
-            this.eventType = 'Down';
+            this.eventType = 'Down'
           }
           if (event.type === TouchType.Up) {
-            this.eventType = 'Up';
+            this.eventType = 'Up'
           }
           if (event.type === TouchType.Move) {
-            this.eventType = 'Move';
+            this.eventType = 'Move'
           }
           this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
           + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
           + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
-          + event.target.area.width + '\nheight:' + event.target.area.height;
+          + event.target.area.width + '\nheight:' + event.target.area.height
         })
       Button('Touch').height(50).width(200).margin(20)
         .onTouch((event: TouchEvent) => {
           if (event.type === TouchType.Down) {
-            this.eventType = 'Down';
+            this.eventType = 'Down'
           }
           if (event.type === TouchType.Up) {
-            this.eventType = 'Up';
+            this.eventType = 'Up'
           }
           if (event.type === TouchType.Move) {
-            this.eventType = 'Move';
+            this.eventType = 'Move'
           }
           this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
           + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nComponent globalPos:('
           + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
-          + event.target.area.width + '\nheight:' + event.target.area.height;
+          + event.target.area.width + '\nheight:' + event.target.area.height
         })
       Text(this.text)
     }.width('100%').padding(30)