diff --git a/en/application-dev/quick-start/in-app-hsp.md b/en/application-dev/quick-start/in-app-hsp.md
index cb31cbc5b703c3caec5c34b4e0702657b56d26f5..f9e6926bc7dcc284cceaa26729cf822aa933cb57 100644
--- a/en/application-dev/quick-start/in-app-hsp.md
+++ b/en/application-dev/quick-start/in-app-hsp.md
@@ -146,7 +146,7 @@ struct Index {
 }
 ```
 
-### Redirecting to a Page in Another Bundle
+### Redirecting to a Page
 
 If you want to add a button in the **entry** module to jump to the menu page (**library/src/main/ets/pages/menu.ets**) in the **library** module, you can write the following code in the **entry/src/main/ets/MainAbility/Index.ets** file of the **entry** module:
 ```ts
diff --git a/en/application-dev/quick-start/module-structure.md b/en/application-dev/quick-start/module-structure.md
index 9888faac93bbd619ac13c5f901e6219225115cf6..85671b57c764616e3c8821d2784138d8373805ea 100644
--- a/en/application-dev/quick-start/module-structure.md
+++ b/en/application-dev/quick-start/module-structure.md
@@ -20,7 +20,7 @@ The **module** tag contains the HAP configuration.
 | shortcuts       | Shortcuts of the application. The value is an array of objects, each of which represents a shortcut object.| Object array| Yes (initial value: left empty)|
 | reqPermissions  | Permissions that the application requests from the system when it is running.| Object array| Yes (initial value: left empty)|
 | colorMode       | Color mode of the application. The options are as follows:<br>- **dark**: Resources applicable for the dark mode are used.<br>- **light**: Resources applicable for the light mode are used.<br>- **auto**: Resources are used based on the color mode of the system.| String| Yes (initial value: **auto**)|
-| distributionFilter | Distribution rules of the application. This attribute defines the rules for distributing HAP files based on different device specifications, so that precise matching can be performed when the application market distributes applications. Distribution rules cover three factors: API version, screen shape, and screen resolution. During distribution, a unique HAP is determined based on the mapping between **deviceType** and these three factors.| Object| Yes (initial value: left empty) Set this attribute when an application has multiple entry modules.|
+| distributionFilter | Rules for distributing HAP files based on different device specifications, so that precise matching can be performed when the application market distributes applications. All sub-attributes under this attribute are optional. This attribute must be configured in the **/resource/profile** directory. During distribution, a unique HAP is determined based on the mapping between **deviceType** and attributes listed in the table below.| Object| Yes (initial value: left empty) Set this attribute when an application has multiple entry modules.|
 |commonEvents        | Information about the common event static subscriber, which must contain the subscriber name, required permissions, and list of the common events subscribed to. When a subscribed event is sent, the static subscriber is started. Unlike the dynamic subscriber, the static subscriber does not need to proactively call the common event subscription API in the service code, and may not be running when the common event is published.| Object array| Yes (initial value: left empty)|
 | entryTheme         | Keyword of an OpenHarmony internal theme. Set it to the resource index of the name.| String| Yes (initial value: left empty)|
 |testRunner          | Test runner configuration.| Object| Yes (initial value: left empty)|
diff --git a/en/application-dev/quick-start/resource-categories-and-access.md b/en/application-dev/quick-start/resource-categories-and-access.md
index f87ae3594a44b17b34233adfd0d8127a2be34028..f047ad787904690cb3efd7f8c9beaf580d348a7b 100644
--- a/en/application-dev/quick-start/resource-categories-and-access.md
+++ b/en/application-dev/quick-start/resource-categories-and-access.md
@@ -240,6 +240,8 @@ To reference an application resource in a project, use the **"$r('app.type.name'
 
 When referencing resources in the **rawfile** subdirectory, use the **"$rawfile('filename')"** format. Wherein **filename** indicates the relative path of a file in the **rawfile** subdirectory, which must contain the file name extension and cannot start with a slash (/).
 
+To obtain the descriptor of a file in the **rawfile** subdirectory, you can use the [getRawFd](../reference/apis/js-apis-resource-manager.md#getrawfd9) API, whose return value **descriptor.fd** is the file descriptor (FD). To access the file with this FD, use {fd, offset, length}.
+
 > **NOTE**
 > 
 > Resource descriptors accept only strings, such as **'app.type.name'**, and cannot be combined.
@@ -284,7 +286,7 @@ To reference a system resource, use the **"$r('sys.type.resource_id')"** format.
 
 > **NOTE**
 >
-> - Use of system resources is supported in the declarative development paradigm, but not in the web-like development paradigm.
+> - The use of system resources is supported in the declarative development paradigm, but not in the web-like development paradigm.
 >
 > - For details about the implementation of preconfigured resources, visit the [OpenHarmony/resources repository](https://gitee.com/openharmony/resources/tree/master/systemres/main/resources). The directory structure there is similar to that of the **resources** directory in the project. Resource qualifiers are used to match resources with different devices and device states.
 
diff --git a/en/application-dev/ui/arkts-navigation-tabs.md b/en/application-dev/ui/arkts-navigation-tabs.md
index 7b21b69fdb725a77746e96c0ef61db0c68de5e7c..ba8b5840df303ced41f47072e72c8ee588c96eee 100644
--- a/en/application-dev/ui/arkts-navigation-tabs.md
+++ b/en/application-dev/ui/arkts-navigation-tabs.md
@@ -269,7 +269,7 @@ TabContent() {
 
 ## Switching to a Specified Tab
 
-Non-custom navigation bars follow the default system switching logic. If you are using a custom navigation bar, you must manually implement the logic for switching tabs so that when the user touches a tab, the application displays the corresponding tab page.
+Non-custom navigation bars follow the default system switching logic. If you are using a custom navigation bar, you must manually implement the logic for switching tabs so that when the user switches to a tab, the application displays the corresponding tab page.
 
 
   **Figure 10** Switching to a specified tab in a custom navigation bar 
@@ -332,7 +332,7 @@ For non-custom navigation bars, tabs and tab content are linked by default. For
 
   **Figure 11** Lack of linkage between tabs and tab content 
 
-![lack-of-linkage](figures /lack-of-linkage.gif)
+![lack-of-linkage](figures/lack-of-linkage.gif)
 
 
 To manually switch between the tabs, use the **onChange** API provided by the **\<Tabs>** component to listen for the index change and pass the index of the active tab to **currentIndex**.
@@ -367,3 +367,4 @@ Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
   **Figure 12** Linkage between tabs and tab content
 
 ![final-effect](figures/final-effect.gif)
+
diff --git a/en/application-dev/ui/figures/bottom-navigation.gif b/en/application-dev/ui/figures/bottom-navigation.gif
index 19347f2d6324e7e86e0d4ac5e9a5143588526589..7cca04dbaced070d13de01bc236b2845c35379eb 100644
Binary files a/en/application-dev/ui/figures/bottom-navigation.gif and b/en/application-dev/ui/figures/bottom-navigation.gif differ
diff --git a/en/application-dev/ui/figures/final-effect.gif b/en/application-dev/ui/figures/final-effect.gif
index e530e58a239d0c76893046f0b73b061f5550820b..3760df20cfbe8af38be11d46a33634402d2954cf 100644
Binary files a/en/application-dev/ui/figures/final-effect.gif and b/en/application-dev/ui/figures/final-effect.gif differ
diff --git a/en/application-dev/ui/figures/fixed-navigation.gif b/en/application-dev/ui/figures/fixed-navigation.gif
index 21e0aaf7ee9c2a6a3c5311c183bbaa72189056fb..99b17da1d0d59167c6e7b863fc4869be1dfbfb30 100644
Binary files a/en/application-dev/ui/figures/fixed-navigation.gif and b/en/application-dev/ui/figures/fixed-navigation.gif differ
diff --git a/en/application-dev/ui/figures/lack-of-linkage.gif b/en/application-dev/ui/figures/lack-of-linkage.gif
index c0dde5b1ef76e44606de04a979c5e62cf4464438..d9e8139b1688563ed68c2d5fe7c3910d8ff8db72 100644
Binary files a/en/application-dev/ui/figures/lack-of-linkage.gif and b/en/application-dev/ui/figures/lack-of-linkage.gif differ
diff --git a/en/application-dev/ui/figures/restricted-navigation.gif b/en/application-dev/ui/figures/restricted-navigation.gif
index 43ea4148ee3e5fdcb9497481a230fb7da8de9d7e..5bc547f9eb84db10d87af42fd823fadfbc8afa65 100644
Binary files a/en/application-dev/ui/figures/restricted-navigation.gif and b/en/application-dev/ui/figures/restricted-navigation.gif differ
diff --git a/en/application-dev/ui/figures/scrollable-navigation.gif b/en/application-dev/ui/figures/scrollable-navigation.gif
index 7699d8659a5a9b288c4d9bfd9f8f6ee9a6d17adb..e22661277fd8ee6d612c0bb9b3a39c087762a7f2 100644
Binary files a/en/application-dev/ui/figures/scrollable-navigation.gif and b/en/application-dev/ui/figures/scrollable-navigation.gif differ
diff --git a/en/application-dev/ui/figures/switching-to-a-specified-tab.gif b/en/application-dev/ui/figures/switching-to-a-specified-tab.gif
index 824c0b29c31d1d21767f602f00ba49e8652dee4f..3760df20cfbe8af38be11d46a33634402d2954cf 100644
Binary files a/en/application-dev/ui/figures/switching-to-a-specified-tab.gif and b/en/application-dev/ui/figures/switching-to-a-specified-tab.gif differ
diff --git a/en/application-dev/ui/figures/top-navigation.gif b/en/application-dev/ui/figures/top-navigation.gif
index 8526ec78f67b77db19fb4e59bf827cfa5fa53135..22047ae468ab32752007551c3f810e6b27120fbf 100644
Binary files a/en/application-dev/ui/figures/top-navigation.gif and b/en/application-dev/ui/figures/top-navigation.gif differ
diff --git a/en/application-dev/web/web-app-page-data-channel.md b/en/application-dev/web/web-app-page-data-channel.md
index f26c635fdf294c9237342381355538da950ad281..76787de818314cef5a974970f274e544f463813d 100644
--- a/en/application-dev/web/web-app-page-data-channel.md
+++ b/en/application-dev/web/web-app-page-data-channel.md
@@ -90,7 +90,14 @@ In the following example, **createWebMessagePorts** is used to create message po
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>WebView Message Port Demo</title>
   </head>
-
+  <body>
+      <h1>WebView Message Port Demo</h1>
+      <div>
+          <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
+          <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
+      </div>
+      <p class="output">display received message send from ets</p>
+  </body>
   <script>
   var h5Port;
   var output = document.querySelector('.output');
@@ -107,7 +114,7 @@ In the following example, **createWebMessagePorts** is used to create message po
                   msg = msg + result;
                 } else if (typeof(result) === 'object') {
                   if (result instanceof ArrayBuffer) {
-                    console.info(`received arraybuffer from html5, length is:` ${result.byteLength}`);
+                    console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
                     msg = msg + 'lenght is ' + result.byteLength;
                   } else {
                     console.info('not support');
@@ -130,14 +137,5 @@ In the following example, **createWebMessagePorts** is used to create message po
       }
   }
   </script>
-
-  <body>
-      <h1>WebView Message Port Demo</h1>
-      <div>
-          <input type="button" value="SendToEts" onclick="PostMsgToEts(msgFromJS.value);"/><br/>
-          <input id="msgFromJS" type="text" value="send this message from HTML to ets"/><br/>
-      </div>
-      <p class="output">display received message send from ets</p>
-  </body>
   </html>
   ```