= ['1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '*', '0', '.', '/']
-
- @Styles textStyle(){
- .backgroundColor(0xd0d0d0)
- .width('100%')
- .height('100%')
- .borderRadius(5)
- }
-
- build() {
- Column({ space: 5 }) {
- Grid() {
- GridItem() {
- Text('0')
- .fontSize(30)
- .textStyle()
- }.columnStart(1).columnEnd(4)
-
- GridItem() {
- Text('清空')
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .textStyle()
- }.columnStart(1).columnEnd(2)
-
- GridItem() {
- Text('回退')
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .textStyle()
- }.columnStart(3).columnEnd(4)
-
- ForEach(this.Number, (day: string) => {
- if (day === '0') {
- GridItem() {
- Text(day)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .textStyle()
- }.columnStart(1).columnEnd(2)
- } else {
- GridItem() {
- Text(day)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .textStyle()
- }
- }
- })
- }
- .columnsTemplate('1fr 1fr 1fr 1fr')
- .rowsTemplate('2fr 1fr 1fr 1fr 1fr 1fr')
- .columnsGap(10)
- .rowsGap(15)
- .width('90%')
- .backgroundColor(0xF0F0F0)
- .height('70%')
- }.width('100%').margin({ top: 5 })
- }
-}
-```
-
-在大屏设备上展示效果如下：
-
-
-
-在小屏设备下展示效果如下：
-
-
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-linear.md b/zh-cn/application-dev/ui/ui-ts-layout-linear.md
deleted file mode 100644
index 0e89b56ad71bb008cae24b6b3151ea7464cd7862..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ui-ts-layout-linear.md
+++ /dev/null
@@ -1,370 +0,0 @@
-# 线性布局
-
-线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上（水平方向和垂直方向）依次排列。
-
-通过线性容器[Row](../reference/arkui-ts/ts-container-row.md)和[Column](../reference/arkui-ts/ts-container-column.md)实现线性布局。Column容器内子组件按照垂直方向排列，Row组件中，子组件按照水平方向排列。
-
-## 线性布局的排列
-
-线性布局的排列方向由所选容器组件决定。根据不同的排列方向，选择使用Row或Column容器创建线性布局，通过调整space，alignItems，justifyContent属性调整子组件的间距，水平垂直方向的对齐方式。
-1. 通过space参数设置主轴（排列方向）上子组件的间距。达到各子组件在排列方向上的等间距效果。
-2. 通过alignItems属性设置子组件在交叉轴（排列方向的垂直方向）的对齐方式。且在各类尺寸屏幕中，表现一致。其中，交叉轴为垂直方向时，取值为[VerticalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#verticalalign)，水平方向取值为[HorizontalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign)。
-3. 通过justifyContent属性设置子组件在主轴（排列方向）上的对齐方式。实现布局的自适应均分能力。取值为[FlexAlign类型](../reference/arkui-ts/ts-appendix-enums.md#flexalign)。
-
-具体使用以及效果如下表所示：
-
-|属性名|描述|Row效果图|Column效果图|
-|------|---------------------------|----------------------------|---------------------------|
-|space |- 横向布局中各子组件的在水平方向的间距
- 纵向布局中个子组件垂直方向间距|  |  |
-|alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式| ||
-|justifyContent |容器排列方向上，子组件在父容器中的对齐方式 | ||
-
-## 自适应拉伸
-
-在线性布局下，常用空白填充组件[Blank](../reference/arkui-ts/ts-basic-components-blank.md)，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。
-
-```ts
-@Entry
-@Component
-struct BlankExample {
- build() {
- Column() {
- Row() {
- Text('Bluetooth').fontSize(18)
- Blank()
- Toggle({ type: ToggleType.Switch, isOn: true })
- }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
- }.backgroundColor(0xEFEFEF).padding(20).width('100%')
- }
-}
-```
-
-
-
-## 自适应缩放
-
-自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现：
-
-1. 父容器尺寸确定时，设置了layoutWeight属性的子组件与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。
-
- ```ts
- @Entry
- @Component
- struct layoutWeightExample {
- build() {
- Column() {
- Text('1:2:3').width('100%')
- Row() {
- Column() {
- Text('layoutWeight(1)')
- .textAlign(TextAlign.Center)
- }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
-
- Column() {
- Text('layoutWeight(2)')
- .textAlign(TextAlign.Center)
- }.layoutWeight(4).backgroundColor(0xffed97).height('100%')
-
- Column() {
- Text('layoutWeight(6)')
- .textAlign(TextAlign.Center)
- }.layoutWeight(6).backgroundColor(0xffd306).height('100%')
-
- }.backgroundColor(0xffd306).height('30%')
-
- Text('2:5:3').width('100%')
- Row() {
- Column() {
- Text('layoutWeight(2)')
- .textAlign(TextAlign.Center)
- }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
-
- Column() {
- Text('layoutWeight(5)')
- .textAlign(TextAlign.Center)
- }.layoutWeight(5).backgroundColor(0xffed97).height('100%')
-
- Column() {
- Text('layoutWeight(3)')
- .textAlign(TextAlign.Center)
- }.layoutWeight(3).backgroundColor(0xffd306).height('100%')
- }.backgroundColor(0xffd306).height('30%')
- }
- }
- }
- ```
-
- 
-
-
-3. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。
-
- ```ts
- @Entry
- @Component
- struct WidthExample {
- build() {
- Column() {
- Row() {
- Column() {
- Text('left width 20%')
- .textAlign(TextAlign.Center)
- }.width('20%').backgroundColor(0xffd306).height('100%')
-
- Column() {
- Text('center width 50%')
- .textAlign(TextAlign.Center)
- }.width('50%').backgroundColor(0xffed97).height('100%')
-
- Column() {
- Text('right width 30%')
- .textAlign(TextAlign.Center)
- }.width('30%').backgroundColor(0xffd306).height('100%')
- }.backgroundColor(0xffd306).height('30%')
- }
- }
- }
- ```
-
- 
-
- 上例中，在任意大小的设备中，子组件的宽度占比固定。
-
-## 定位能力
-- 相对定位
-
- 使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
-
- ```ts
- @Entry
- @Component
- struct OffsetExample {
- @Styles eleStyle() {
- .size({ width: 120, height: '50' })
- .backgroundColor(0xbbb2cb)
- .border({ width: 1 })
- }
-
- build() {
- Column({ space: 20 }) {
- Row() {
- Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
- Text('2 offset(15, 30)')
- .eleStyle()
- .fontSize(16)
- .align(Alignment.Start)
- .offset({ x: 15, y: 30 })
- Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
- Text('4 offset(-10%, 20%)')
- .eleStyle()
- .fontSize(16)
- .offset({ x: '-5%', y: '20%' })
- }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed })
- }
- .width('100%')
- .margin({ top: 25 })
- }
- }
- ```
-
- 
-
-
-- 绝对定位
-
- 线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。
-
- ```ts
- @Entry
- @Component
- struct PositionExample {
- @Styles eleStyle(){
- .backgroundColor(0xbbb2cb)
- .border({ width: 1 })
- .size({ width: 120, height: 50 })
- }
-
- build() {
- Column({ space: 20 }) {
- // 设置子组件左上角相对于父组件左上角的偏移位置
- Row() {
- Text('position(30, 10)')
- .eleStyle()
- .fontSize(16)
- .position({ x: 10, y: 10 })
-
- Text('position(50%, 70%)')
- .eleStyle()
- .fontSize(16)
- .position({ x: '50%', y: '70%' })
-
- Text('position(10%, 90%)')
- .eleStyle()
- .fontSize(16)
- .position({ x: '10%', y: '80%' })
- }.width('90%').height('100%').border({ width: 1, style: BorderStyle.Dashed })
- }
- .width('90%').margin(25)
- }
- }
- ```
-
- 
-
-
-## 自适应延伸
-
-自适应延伸是在不同尺寸设备下，当页面显示内容个数不一并延伸到屏幕外时，可通过滚动条拖动展示。适用于线性布局中内容无法一屏展示的场景。常见以下两类实现方法。
-
-
-- List组件
-
- List子项过多一屏放不下时，未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到极限的回弹效果。
-
-
- 纵向List：
- ```ts
- @Entry
- @Component
- struct ListExample1 {
- @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
- @State alignListItem: ListItemAlign = ListItemAlign.Start
-
- build() {
- Column() {
- List({ space: 20, initialIndex: 0 }) {
- ForEach(this.arr, (item) => {
- ListItem() {
- Text('' + item)
- .width('100%')
- .height(100)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .borderRadius(10)
- .backgroundColor(0xFFFFFF)
- }
- .border({ width: 2, color: Color.Green })
- }, item => item)
- }
- .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
- .scrollBar(BarState.On) // 滚动条常驻
- .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
-
- }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
- }
- }
- ```
-
- 
-
-
- 横向List：
-
- ```ts
- @Entry
- @Component
- struct ListExample2 {
- @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
- @State alignListItem: ListItemAlign = ListItemAlign.Start
-
- build() {
- Column() {
- List({ space: 20, initialIndex: 0 }) {
- ForEach(this.arr, (item) => {
- ListItem() {
- Text('' + item)
- .height('100%')
- .width(100)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .borderRadius(10)
- .backgroundColor(0xFFFFFF)
- }
- .border({ width: 2, color: Color.Green })
- }, item => item)
- }
- .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
- .scrollBar(BarState.On) // 滚动条常驻
- .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
- .listDirection(Axis.Horizontal) // 列表水平排列
- }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
- }
- }
- ```
-
- 
-
-- Scroll组件
-
- 线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。在Column或者Row外层包裹一个可滚动的容器组件Scroll实现。
-
- 纵向Scroll:
-
- ```ts
- @Entry
- @Component
- struct ScrollExample {
- scroller: Scroller = new Scroller();
- private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-
- build() {
- Scroll(this.scroller) {
- Column() {
- ForEach(this.arr, (item) => {
- Text(item.toString())
- .width('90%')
- .height(150)
- .backgroundColor(0xFFFFFF)
- .borderRadius(15)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .margin({ top: 10 })
- }, item => item)
- }.width('100%')
- }
- .backgroundColor(0xDCDCDC)
- .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
- .scrollBar(BarState.On) // 滚动条常驻显示
- .scrollBarColor(Color.Gray) // 滚动条颜色
- .scrollBarWidth(30) // 滚动条宽度
- .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
- }
- }
- ```
-
- 
-
- 横向Scroll:
-
- ```ts
- @Entry
- @Component
- struct ScrollExample {
- scroller: Scroller = new Scroller();
- private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-
- build() {
- Scroll(this.scroller) {
- Row() {
- ForEach(this.arr, (item) => {
- Text(item.toString())
- .height('90%')
- .width(150)
- .backgroundColor(0xFFFFFF)
- .borderRadius(15)
- .fontSize(16)
- .textAlign(TextAlign.Center)
- .margin({ left: 10 })
- }, item => item)
- }.height('100%')
- }
- .backgroundColor(0xDCDCDC)
- .scrollable(ScrollDirection.Horizontal) // 滚动方向横向
- .scrollBar(BarState.On) // 滚动条常驻显示
- .scrollBarColor(Color.Gray) // 滚动条颜色
- .scrollBarWidth(30) // 滚动条宽度
- .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
- }
- }
- ```
- 
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md b/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
deleted file mode 100644
index 26ce8fb6aeecca3aeee250c5b2dcc6b2fe851206..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# 媒体查询
-
-[媒体查询（Media Query）](../reference/apis/js-apis-mediaquery.md)作为响应式设计的核心，在移动设备上应用十分广泛。它根据不同设备类型或同设备不同状态修改应用的样式。媒体查询的优势有：
-
-1. 提供丰富的媒体特征监听能力，针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
-
-2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。
-
-
-
-## 媒体查询引入与使用流程
-
-媒体查询通过媒体查询接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑，实现页面的响应式设计。具体步骤如下：
-
-首先导入媒体查询模块。
-
-```ts
-import mediaquery from '@ohos.mediaquery'
-```
-
-通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener。
-
-```ts
-listener = mediaquery.matchMediaSync('(orientation: landscape)')
-```
-
-给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑。
-
-```ts
-onPortrait(mediaQueryResult) {
- if (mediaQueryResult.matches) {
- // do something here
- } else {
- // do something here
- }
-}
-listener.on('change', onPortrait)
-```
-
-## 媒体查询条件
-
-媒体查询条件由媒体类型，逻辑操作符，媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，其中，媒体特征要使用()包裹且可以有多个。具体规则如下：
-
-### 语法规则
-
-```
-[media-type] [and|not|only] [(media-feature)]
-```
-
-例如：
-
-`screen and (round-screen: true)` ：当设备屏幕是圆形时条件成立。
-
-`(max-height: 800)` ：当高度小于等于800时条件成立。
-
-`(height <= 800) ` ：当高度小于等于800时条件成立。
-
-`screen and (device-type: tv) or (resolution < 2)` ：包含多个媒体特征的多条件复杂语句查询，当设备类型为tv或设备分辨率小于2时条件成立。
-
-### 媒体类型(media-type)
-
-| 类型 | 说明 |
-| ------ | -------------- |
-| screen | 按屏幕相关参数进行媒体查询。 |
-
-### 媒体逻辑操作(and|or|not|only)
-
-媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（, ）将其组合起来，详细解释说明如下表。
-
- **表1** 媒体逻辑操作符
-
-| 类型 | 说明 |
-| -------- | ---------------------------------------- |
-| and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴且应用的最大高度小于等于600个像素单位时成立。 |
-| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
-| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
使用not运算符时必须指定媒体类型。 |
-| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
使用only时必须指定媒体类型。 |
-| , (comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。
例如：screen and (min-height: 1000), （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
-
-在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了< =，> =，< ，> 操作符。
-
- **表2** 媒体逻辑范围操作符
-
-| 类型 | 说明 |
-| ----- | ---------------------------------------- |
-| < = | 小于等于，例如：screen and (height < = 50)。 |
-| > = | 大于等于，例如：screen and (height > = 600)。 |
-| < | 小于，例如：screen and (height < 50)。 |
-| > | 大于，例如：screen and (height > 600)。 |
-
-### 媒体特征(media-feature)
-
-| 类型 | 说明 |
-| ----------------- | ------------------------------------------------------------ |
-| height | 应用页面可绘制区域的高度。 |
-| min-height | 应用页面可绘制区域的最小高度。 |
-| max-height | 应用页面可绘制区域的最大高度。 |
-| width | 应用页面可绘制区域的宽度。 |
-| min-width | 应用页面可绘制区域的最小宽度。 |
-| max-width | 应用页面可绘制区域的最大宽度。 |
-| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：
- dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
- dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。 |
-| min-resolution | 设备的最小分辨率。 |
-| max-resolution | 设备的最大分辨率。 |
-| orientation | 屏幕的方向。
可选值：
- orientation: portrait（设备竖屏）
- orientation: landscape（设备横屏） |
-| device-height | 设备的高度。 |
-| min-device-height | 设备的最小高度。 |
-| max-device-height | 设备的最大高度。 |
-| device-width | 设备的宽度。 |
-| device-type | 设备的类型。
可选值：default、tablet |
-| min-device-width | 设备的最小宽度。 |
-| max-device-width | 设备的最大宽度。 |
-| round-screen | 屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。 |
-| dark-mode | 系统为深色模式时为true，否则为false。 |
-
-## 场景示例
-
-下例中使用媒体查询，实现屏幕横竖屏切换时给页面文本应用不同的内容和样式的效果。
-
-```ts
-import mediaquery from '@ohos.mediaquery'
-
-let portraitFunc = null
-
-@Entry
-@Component
-struct MediaQueryExample {
- @State color: string = '#DB7093'
- @State text: string = 'Portrait'
- listener = mediaquery.matchMediaSync('(orientation: landscape)') // 当设备横屏时条件成立
-
- onPortrait(mediaQueryResult) {
- if (mediaQueryResult.matches) {
- this.color = '#FFD700'
- this.text = 'Landscape'
- } else {
- this.color = '#DB7093'
- this.text = 'Portrait'
- }
- }
-
- aboutToAppear() {
- portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
- this.listener.on('change', portraitFunc)
- }
-
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Text(this.text).fontSize(50).fontColor(this.color)
- }
- .width('100%').height('100%')
- }
-}
-```
-
-横屏下文本内容为Landscape，颜色为#FFD700。
-
-
-
-非横屏下文本内容为Portrait，颜色为#DB7093。
-
-
-
-## 相关实例
-
-使用媒体查询的自适应布局开发，有以下相关实例可供参考：
-
-- [`MediaQuery`：媒体查询（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/ArkTsComponentClollection/MediaQuery)
-
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-stack.md b/zh-cn/application-dev/ui/ui-ts-layout-stack.md
deleted file mode 100644
index 19f7026c6f9868826fb716afeaaf0bf37e715b57..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ui-ts-layout-stack.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# 层叠布局
-
-层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。
-通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。
-
-## 对齐方式
-
-设置子元素在容器内的对齐方式。支持左上，上中，右上，左，中，右，右下，中下，右下九种对齐方式，如下表所示：
-
-|名称| 描述| 图示 |
-|---| ---|---|
-|TopStart| 顶部起始端 ||
-Top |顶部横向居中 ||
-TopEnd| 顶部尾端 ||
-Start| 起始端纵向居中 ||
-Center| 横向和纵向居中 ||
-End| 尾端纵向居中 ||
-BottomStart |底部起始端 ||
-Bottom| 底部横向居中 ||
-BottomEnd| 底部尾端 ||
-
-## Z序控制
-
-Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/arkui-ts/ts-universal-attributes-z-order.md)
-属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。
-
-- 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。
-
- ```ts
- Stack({ alignContent: Alignment.BottomStart }) {
- Column() {
- Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
- }.width(100).height(100).backgroundColor(0xffd306)
- Column() {
- Text('Stack子元素2').fontSize(20)
- }.width(150).height(150).backgroundColor(Color.Pink)
- Column() {
- Text('Stack子元素3').fontSize(20)
- }.width(200).height(200).backgroundColor(Color.Grey)
- }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
- ```
-
- 
-
- 上图中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏。改变子元素1，子元素2的zIndex属性后，可以将元素展示出来。
-
- ```ts
- Stack({ alignContent: Alignment.BottomStart }) {
- Column() {
- Text('Stack子元素1').fontSize(20)
- }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
- Column() {
- Text('Stack子元素2').fontSize(20)
- }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
- Column() {
- Text('Stack子元素3').fontSize(20)
- }.width(200).height(200).backgroundColor(Color.Grey)
- }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
- ```
-
- 
diff --git a/zh-cn/application-dev/ui/ui-ts-overview.md b/zh-cn/application-dev/ui/ui-ts-overview.md
deleted file mode 100644
index 2ea4568505d0858da89a57ad21687a034763a525..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ui-ts-overview.md
+++ /dev/null
@@ -1,89 +0,0 @@
-# 概述
-
-
-基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架，支持开发者高效地构建OpenHarmony应用UI界面。
-
-## 基础能力
-
-使用基于ArkTS的声明式开发范式的方舟开发框架，采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。开发框架不仅从组件、动画和状态管理三个维度来提供UI能力，还提供了系统能力接口以实现系统能力的极简调用。
-ArkTS语言的基础知识请参考[学习ArkTS语言](../quick-start/arkts-get-started.md)文档；此外，请参考[基于ArkTS的声明式开发范式API](../reference/arkui-ts/ts-universal-events-click.md)文档，全面地了解内置组件，更好地开发应用。
-
-- **开箱即用的组件**
-
- 框架提供丰富的系统内置组件，可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，使页面具有更强的工程性。
-
-- **丰富的动效接口**
-
- 提供svg标准的绘制图形能力，同时开放了丰富的动效接口，开发者可以通过封装的物理模型或者调用动画能力接口来实现自定义动画轨迹。
-
-- **状态与数据管理**
-
- 状态数据管理作为基于ArkTS的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。
-
-- **系统能力接口**
-
- 使用基于ArkTS的声明式开发范式的方舟开发框架，还封装了丰富的系统能力接口，开发者可以通过简单的接口调用，实现从UI设计到系统能力调用的极简开发。
-
-
-## 整体架构
-
-
-
-- **声明式UI前端**
-
- 提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。
-
-- **语言运行时**
-
- 选用方舟语言运行时，提供了针对UI范式语法的解析能力、跨语言调用支持的能力和TS语言高性能运行环境。
-
-- **声明式UI后端引擎**
-
- 后端引擎提供了兼容不同开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互事件，提供了状态管理和绘制能力。
-
-- **渲染引擎**
-
- 提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕的能力。
-
-- **平台适配层**
-
- 提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。
-
-
-## 相关实例
-
-基于ArkTS的声明式开发范式的方舟开发框架，有以下相关实例可供参考：
-
-- [`Drag`：拖拽事件（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Drag)
-
-- [`ArkUIAnimation`：动画（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/ArkUIAnimation)
-
-- [`MouseEvent`：鼠标事件（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MouseEvent)
-
-- [`Chat`：聊天示例应用（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/IM/Chat)
-
-- [`Shopping`：购物示例应用（ArkTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/AppSample/Shopping)
-
-- [`Lottie`：Lottie（ArkTS）（API9）（Full SDK）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/Lottie)
-
-- [`Flybird`：小鸟避障游戏（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/TaskManagement/Flybird)
-
-- [`AdaptiveCapabilities`：多设备自适应能力（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/SuperFeature/MultiDeviceAppDev/AdaptiveCapabilities)
-
-- [`Game2048`：2048游戏（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/Solutions/Game/Game2048)
-
-- [`TransitionAnimation`：转场动画(ArkTS)（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/TransitionAnimation)
-
-- [基础组件Slider的使用（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SliderExample)
-
-- [转场动画的使用（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimation)
-
-- [极简声明式UI范式（ArkTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts)
-
-- [购物应用（ArkTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts)
-
-- [弹窗（ArkTS）（API8）](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialogEts)
-
-- [`UpgradePopup`：自定义弹窗（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/UpgradePopup)
-
-- [ComponentCollection:组件集合（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/UI/ArkTsComponentClollection/ComponentCollection)
diff --git a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
deleted file mode 100644
index c5701a8e1470f112a8c9c36bae7efd9aac02f8be..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
+++ /dev/null
@@ -1,272 +0,0 @@
-# 页面跳转与数据传递
-
-本节将学习页面跳转和数据传递，实现：
-
-
-1. 页面跳转：点击食物分类列表页面的食物条目后，跳转到食物详情页；点击食物详情页的返回按钮，返回到食物列表页。
-
-2. 页面间数据传递：点击不同的食物条目后，FoodDetail接受前一个页面的数据，渲染对应的食物详情页。
-
-
-## 页面跳转
-
-声明式UI范式提供了两种机制来实现页面间的跳转：
-
-1. 路由容器组件Navigator，包装了页面路由的能力，指定页面target后，使其包裹的子组件都具有路由能力。
-
-2. 路由RouterAPI接口，通过在页面上引入router，可以调用router的各种接口，从而实现页面路由的各种操作。
-
-下面我们就分别学习这两种跳转机制来实现食物分类列表页面和食物详情页的链接。
-
-1. 点击FoodListItem后跳转到FoodDetail页面。在FoodListItem内创建Navigator组件，使其子组件都具有路由功能，目标页面target为'pages/FoodDetail'。
- ```ts
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {
- Navigator({ target: 'pages/FoodDetail' }) {
- Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- .height(40)
- .width(40)
- .backgroundColor('#FFf1f3f5')
- .margin({ right: 16 })
- Text(this.foodItem.name)
- .fontSize(14)
- .flexGrow(1)
- Text(this.foodItem.calories + ' kcal')
- .fontSize(14)
- }
- .height(64)
- }
- .margin({ right: 24, left:32 })
- }
- }
- ```
-
- 
-
-2. 点击FoodGridItem后跳转到FoodDetail页面。调用页面路由router模块的push接口，将FoodDetail页面推到路由栈中，实现页面跳转。使用router路由API接口，需要先引入router。
- ```ts
- import router from '@ohos.router'
-
- @Component
- struct FoodGridItem {
- private foodItem: FoodData
- build() {
- Column() {
- ......
- }
- .height(184)
- .width('100%')
- .onClick(() => {
- router.pushUrl({ url: 'pages/FoodDetail' })
- })
- }
- }
- ```
-
- 
-
-3. 在FoodDetail页面增加回到食物列表页面的图标。在resources > base > media文件夹下存入回退图标Back.png。新建自定义组件PageTitle，包含后退的图标和Food Detail的文本，调用路由的router.back()接口，弹出路由栈最上面的页面，即返回上一级页面。
- ```ts
- // FoodDetail.ets
- import router from '@ohos.router'
-
- @Component
- struct PageTitle {
- build() {
- Flex({ alignItems: ItemAlign.Start }) {
- Image($r('app.media.Back'))
- .width(21.8)
- .height(19.6)
- Text('Food Detail')
- .fontSize(21.8)
- .margin({left: 17.4})
- }
- .height(61)
- .backgroundColor('#FFedf2f5')
- .padding({ top: 13, bottom: 15, left: 28.3 })
- .onClick(() => {
- router.back()
- })
- }
- }
- ```
-
-4. 在FoodDetail组件内创建Stack组件，包含子组件FoodImageDisplay和PageTitle子组件，设置其对齐方式为左上对齐TopStart。
- ```ts
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- Stack( { alignContent: Alignment.TopStart }) {
- FoodImageDisplay()
- PageTitle()
- }
- ContentTable()
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
- 
-
-
-## 页面间数据传递
-
-我们已经完成了FoodCategoryList页面和FoodDetail页面的跳转和回退，但是点击不同的FoodListItem/FoodGridItem，跳转的FoodDetail页面都是西红柿Tomato的详细介绍，这是因为没有构建起两个页面的数据传递，需要用到携带参数（parameter）路由。
-
-1. 在FoodListItem组件的Navigator设置其params属性，params属性接受key-value的Object。
- ```ts
- // FoodList.ets
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {
- Navigator({ target: 'pages/FoodDetail' }) {
- ......
- }
- .params({ foodData: this.foodItem })
- }
- }
- ```
-
- FoodGridItem调用的routerAPI同样有携带参数跳转的能力，使用方法和Navigator类似。
-
- ```ts
- router.pushUrl({
- url: 'pages/FoodDetail',
- params: { foodData: this.foodItem }
- })
- ```
-
-2. FoodDetail页面引入FoodData类，在FoodDetail组件内添加foodItem成员变量。
- ```ts
- // FoodDetail.ets
- import { FoodData } from '../model/FoodData'
-
- @Entry
- @Component
- struct FoodDetail {
- private foodItem: FoodData
- build() {
- ......
- }
- }
- ```
-
-3. 获取foodData对应的value。调用router.getParams()['foodData']来获取到FoodCategoryList页面跳转来时携带的foodData对应的数据。
- ```ts
- @Entry
- @Component
- struct FoodDetail {
- private foodItem: FoodData = router.getParams()['foodData']
-
- build() {
- ......
- }
- }
- ```
-
-4. 重构FoodDetail页面的组件。在构建视图时，FoodDetail页面的食物信息都是直接声明的常量，现在要用传递来的FoodData数据来对其进行重新赋值。整体的FoodDetail.ets代码如下。
- ```ts
- @Component
- struct PageTitle {
- build() {
- Flex({ alignItems: ItemAlign.Start }) {
- Image($r('app.media.Back'))
- .width(21.8)
- .height(19.6)
- Text('Food Detail')
- .fontSize(21.8)
- .margin({left: 17.4})
- }
- .height(61)
- .backgroundColor('#FFedf2f5')
- .padding({ top: 13, bottom: 15, left: 28.3 })
- .onClick(() => {
- router.back()
- })
- }
- }
-
- @Component
- struct FoodImageDisplay {
- private foodItem: FoodData
- build() {
- Stack({ alignContent: Alignment.BottomStart }) {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- Text(this.foodItem.name)
- .fontSize(26)
- .fontWeight(500)
- .margin({ left: 26, bottom: 17.4 })
- }
- .height(357)
- .backgroundColor('#FFedf2f5')
- }
- }
-
- @Component
- struct ContentTable {
- private foodItem: FoodData
-
- @Builder IngredientItem(title:string, name: string, value: string) {
- Flex() {
- Text(title)
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text(name)
- .fontSize(17.4)
- .flexGrow(1)
- Text(value)
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- }
-
- build() {
- Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
- this.IngredientItem('Calories', 'Calories', this.foodItem.calories + 'kcal')
- this.IngredientItem('Nutrition', 'Protein', this.foodItem.protein + 'g')
- this.IngredientItem('', 'Fat', this.foodItem.fat + 'g')
- this.IngredientItem('', 'Carbohydrates', this.foodItem.carbohydrates + 'g')
- this.IngredientItem('', 'VitaminC', this.foodItem.vitaminC + 'mg')
- }
- .height(280)
- .padding({ top: 30, right: 30, left: 30 })
- }
- }
-
- @Entry
- @Component
- struct FoodDetail {
- private foodItem: FoodData = router.getParams()['foodData']
-
- build() {
- Column() {
- Stack( { alignContent: Alignment.TopStart }) {
- FoodImageDisplay({ foodItem: this.foodItem })
- PageTitle()
- }
- ContentTable({ foodItem: this.foodItem })
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
-## 相关实例
-
-针对页面布局与连接，有以下示例工程可供参考：
-
-- [`DefiningPageLayoutAndConnection`：页面布局和连接（ArkTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection)
-
- 本示例构建了食物分类列表页面和食物详情页，向开发者展示了List布局、Grid布局以及页面路由的基本用法。
diff --git a/zh-cn/application-dev/web/Readme-CN.md b/zh-cn/application-dev/web/Readme-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..7d74417e17ffc7e3468459dbbfc18f257855f0d9
--- /dev/null
+++ b/zh-cn/application-dev/web/Readme-CN.md
@@ -0,0 +1,17 @@
+# Web
+
+- [Web组件概述](web-component-overview.md)
+- [使用Web组件加载页面](web-page-loading-with-web-components.md)
+- 设置基本属性和事件
+ - [设置深色模式](web-set-dark-mode.md)
+ - [上传文件](web-file-upload.md)
+ - [在新窗口中打开页面](web-open-in-new-window.md)
+ - [管理位置权限](web-geolocation-permission.md)
+- 在应用中使用前端页面JavaScript
+ - [应用侧调用前端页面函数](web-in-app-frontend-page-function-invoking.md)
+ - [前端页面调用应用侧函数](web-in-page-app-function-invoking.md)
+ - [建立应用侧与前端页面数据通道](web-app-page-data-channel.md)
+- [管理页面跳转及浏览记录导航](web-redirection-and-browsing-history-mgmt.md)
+- [管理Cookie及数据存储](web-cookie-and-data-storage-mgmt.md)
+- [自定义页面请求响应](web-resource-interception-request-mgmt.md)
+- [使用Devtools工具调试前端页面](web-debugging-with-devtools.md)
\ No newline at end of file
diff --git a/zh-cn/application-dev/web/figures/debug-effect.png b/zh-cn/application-dev/web/figures/debug-effect.png
new file mode 100644
index 0000000000000000000000000000000000000000..32c46cadbb99a6623532f50d14fa0750854c9a5d
Binary files /dev/null and b/zh-cn/application-dev/web/figures/debug-effect.png differ
diff --git a/zh-cn/application-dev/web/figures/resource-path.png b/zh-cn/application-dev/web/figures/resource-path.png
new file mode 100644
index 0000000000000000000000000000000000000000..602c750894581e13296cb7cb77e9714f143983f9
Binary files /dev/null and b/zh-cn/application-dev/web/figures/resource-path.png differ
diff --git a/zh-cn/application-dev/web/web-app-page-data-channel.md b/zh-cn/application-dev/web/web-app-page-data-channel.md
new file mode 100644
index 0000000000000000000000000000000000000000..27e2ee162c7b4476dce38f650b29273d9a46fc0a
--- /dev/null
+++ b/zh-cn/application-dev/web/web-app-page-data-channel.md
@@ -0,0 +1,143 @@
+# 建立应用侧与前端页面数据通道
+
+
+前端页面和应用侧之间可以用[createWebMessagePorts()](../reference/apis/js-apis-webview.md#createwebmessageports)接口创建消息端口来实现两端的通信。
+
+
+在下面的示例中，用侧页面中通过createWebMessagePorts方法创建消息端口，再把其中一个端口通过[postMessage()](../reference/apis/js-apis-webview.md#postmessage)接口发送到前端页面，便可以在前端页面和应用侧之间互相发送消息。
+
+
+- 应用侧代码。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ ports: web_webview.WebMessagePort[];
+ @State sendFromEts: string = 'Send this message from ets to HTML';
+ @State receivedFromHtml: string = 'Display received message send from HTML';
+
+ build() {
+ Column() {
+ // 展示接收到的来自HTML的内容
+ Text(this.receivedFromHtml)
+ // 输入框的内容发送到html
+ TextInput({placeholder: 'Send this message from ets to HTML'})
+ .onChange((value: string) => {
+ this.sendFromEts = value;
+ })
+
+ Button('postMessage')
+ .onClick(() => {
+ try {
+ // 1、创建两个消息端口。
+ this.ports = this.controller.createWebMessagePorts();
+ // 2、在应用侧的消息端口(如端口1)上注册回调事件。
+ this.ports[1].onMessageEvent((result: web_webview.WebMessage) => {
+ let msg = 'Got msg from HTML:';
+ if (typeof(result) === 'string') {
+ console.info(`received string message from html5, string is: ${result}`);
+ msg = msg + result;
+ } else if (typeof(result) === 'object') {
+ if (result instanceof ArrayBuffer) {
+ console.info(`received arraybuffer from html5, length is: ${result.byteLength}`);
+ msg = msg + 'lenght is ' + result.byteLength;
+ } else {
+ console.info('not support');
+ }
+ } else {
+ console.info('not support');
+ }
+ this.receivedFromHtml = msg;
+ })
+ // 3、将另一个消息端口(如端口0)发送到HTML侧，由HTML侧保存并使用。
+ this.controller.postMessage('__init_port__', [this.ports[0]], '*');
+ } catch (error) {
+ console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+
+ // 4、使用应用侧的端口给另一个已经发送到html的端口发送消息。
+ Button('SendDataToHTML')
+ .onClick(() => {
+ try {
+ if (this.ports && this.ports[1]) {
+ this.ports[1].postMessageEvent(this.sendFromEts);
+ } else {
+ console.error(`ports is null, Please initialize first`);
+ }
+ } catch (error) {
+ console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ Web({ src: $rawfile('xxx.html'), controller: this.controller })
+ }
+ }
+ }
+ ```
+
+- 前端页面代码。
+
+ ```html
+
+
+
+
+
+ WebView Message Port Demo
+
+
+
+
+
+ WebView Message Port Demo
+
+
+
+
+ display received message send from ets
+
+
+ ```
diff --git a/zh-cn/application-dev/web/web-component-overview.md b/zh-cn/application-dev/web/web-component-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..194d99267c2ab27725aa78565530dd785ca7b224
--- /dev/null
+++ b/zh-cn/application-dev/web/web-component-overview.md
@@ -0,0 +1,14 @@
+# Web组件概述
+
+
+Web组件用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。
+
+
+- 页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、Html格式文本数据。
+
+- 页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。
+
+- 页面调试：Web组件支持使用Devtools工具调试前端页面。
+
+
+下面通过常见使用场景举例，来具体介绍Web组件功能特性。
diff --git a/zh-cn/application-dev/web/web-cookie-and-data-storage-mgmt.md b/zh-cn/application-dev/web/web-cookie-and-data-storage-mgmt.md
new file mode 100644
index 0000000000000000000000000000000000000000..8f8dd1357c30b4c51a0434ffb8db34b029345eaf
--- /dev/null
+++ b/zh-cn/application-dev/web/web-cookie-and-data-storage-mgmt.md
@@ -0,0 +1,131 @@
+# 管理Cookie及数据存储
+
+
+## Cookie管理
+
+Cookie是网络访问过程中，由服务端发送给客户端的一小段数据。客户端可持有该数据，并在后续访问该服务端时，方便服务端快速对客户端身份、状态等进行识别。
+
+Web组件提供了WebCookieManager类，用于管理Web组件的Cookie信息。Cookie信息保存在应用沙箱路径下/proc/{pid}/root/data/storage/el2/base/cache/web/Cookiesd的文件中。
+
+下面以[setCookie()](../reference/apis/js-apis-webview.md#setcookie)接口举例，为“www.example.com”设置单个Cookie的值“value=test”。其他Cookie的相关功能及使用，请参考[WebCookieManager()](../reference/apis/js-apis-webview.md#webcookiemanager)接口文档。
+
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview';
+
+@Entry
+@Component
+struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+
+ build() {
+ Column() {
+ Button('setCookie')
+ .onClick(() => {
+ try {
+ web_webview.WebCookieManager.setCookie('https://www.example.com', 'value=test');
+ } catch (error) {
+ console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ Web({ src: 'www.example.com', controller: this.controller })
+ }
+ }
+}
+```
+
+
+## 缓存与存储管理
+
+在访问网站时，网络资源请求是相对比较耗时的。开发者可以通过Cache、Dom Storage等手段将资源保持至本地，以提升访问同一网站的速度。
+
+
+### Cache
+
+使用[cacheMode()](../reference/arkui-ts/ts-basic-components-web.md#cachemode%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E)配置页面资源的缓存模式，Web组件为开发者提供四种缓存模式，分别为：
+
+- Default : 优先使用未过期的缓存，如果缓存不存在，则从网络获取。
+
+- None : 加载资源使用cache，如果cache中无该资源则从网络中获取。
+
+- Online : 加载资源不使用cache，全部从网络中获取。
+
+- Only ：只从cache中加载资源。
+
+
+在下面的示例中，选用缓存设置为None模式。
+
+
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview';
+
+@Entry
+@Component
+struct WebComponent {
+ @State mode: CacheMode = CacheMode.None;
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .cacheMode(this.mode)
+ }
+ }
+}
+```
+
+
+ 同时，为了获取最新资源，开发者可以通过[removeCache()](../reference/apis/js-apis-webview.md#removecache)接口清除已经缓存的资源，示例代码如下：
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview';
+
+@Entry
+@Component
+struct WebComponent {
+ @State mode: CacheMode = CacheMode.None;
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ build() {
+ Column() {
+ Button('removeCache')
+ .onClick(() => {
+ try {
+ // 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存
+ this.controller.removeCache(true);
+ } catch (error) {
+ console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ Web({ src: 'www.example.com', controller: this.controller })
+ .cacheMode(this.mode)
+ }
+ }
+}
+```
+
+
+### Dom Storage
+
+Dom Storage包含了Session Storage和Local Storage两类。前者为临时数据，其存储与释放跟随会话生命周期；后者为可持久化数据，落盘在应用目录下。两者的数据均通过Key-Value的形式存储，通常在访问需要客户端存储的页面时使用。开发者可以通过Web组件的属性接口[domStorageAccess()](../reference/arkui-ts/ts-basic-components-web.md#domstorageaccess)进行使能配置，示例如下：
+
+
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview';
+
+@Entry
+@Component
+struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .domStorageAccess(true)
+ }
+ }
+}
+```
diff --git a/zh-cn/application-dev/web/web-debugging-with-devtools.md b/zh-cn/application-dev/web/web-debugging-with-devtools.md
new file mode 100644
index 0000000000000000000000000000000000000000..2917bca7bb527dd54af497783ad06faf2bb802f7
--- /dev/null
+++ b/zh-cn/application-dev/web/web-debugging-with-devtools.md
@@ -0,0 +1,45 @@
+# 使用Devtools工具调试前端页面
+
+
+Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过[setWebDebuggingAccess()](../reference/apis/js-apis-webview.md#setwebdebuggingaccess)接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页。
+
+
+使用DevTools工具，可以执行以下步骤：
+
+
+1. 在应用代码中开启Web调试开关，具体如下：
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ aboutToAppear() {
+ // 配置web开启调试模式
+ web_webview.WebviewController.setWebDebuggingAccess(true);
+ }
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ }
+ }
+ }
+ ```
+
+2. 将设备连接上电脑，在电脑端配置端口映射，配置方法如下：
+
+ ```
+ // 添加映射
+ hdc fport tcp:9222 tcp:9222
+ // 查看映射
+ hdc fport ls
+ ```
+
+3. 在电脑端chrome浏览器地址栏中输入chrome://inspect/\#devices，页面识别到设备后，就可以开始页面调试。调试效果如下：
+
+ **图1** 页面调试效果图
+
+ 
diff --git a/zh-cn/application-dev/web/web-file-upload.md b/zh-cn/application-dev/web/web-file-upload.md
new file mode 100644
index 0000000000000000000000000000000000000000..d2d37e6734fabb5f8dabd3a1df04a0ed62c20c89
--- /dev/null
+++ b/zh-cn/application-dev/web/web-file-upload.md
@@ -0,0 +1,52 @@
+# 上传文件
+
+
+Web组件支持前端页面选择文件上传功能，应用开发者可以使用[onShowFileSelector()](../reference/arkui-ts/ts-basic-components-web.md#onshowfileselector9)接口来处理前端页面文件上传的请求。
+
+
+下面的示例中，当用户在前端页面点击文件上传按钮，应用侧在[onShowFileSelector()](../reference/arkui-ts/ts-basic-components-web.md#onshowfileselector9)接口中收到文件上传请求，在此接口中开发者将上传的本地文件路径设置给前端页面。
+
+
+- 应用侧代码。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: WebController = new WebController()
+ build() {
+ Column() {
+ // 加载本地local.html页面
+ Web({ src: $rawfile('local.html'), controller: this.controller })
+ .onShowFileSelector((event) => {
+ // 开发者设置要上传的文件路径
+ let fileList: Array = [
+ 'xxx/test.png',
+ ]
+ event.result.handleFileList(fileList)
+ return true;
+ })
+ }
+ }
+ }
+ ```
+
+
+- local.html页面代码。
+
+ ```html
+
+
+
+
+ Document
+
+
+
+
+
+
+
+ ```
diff --git a/zh-cn/application-dev/web/web-geolocation-permission.md b/zh-cn/application-dev/web/web-geolocation-permission.md
new file mode 100644
index 0000000000000000000000000000000000000000..82866d3ecd6f058d95b354e4c5d788f03b2a21ef
--- /dev/null
+++ b/zh-cn/application-dev/web/web-geolocation-permission.md
@@ -0,0 +1,73 @@
+# 管理位置权限
+
+
+Web组件提供位置权限管理能力。开发者可以通过[onGeolocationShow()](../reference/arkui-ts/ts-basic-components-web.md#ongeolocationshow)接口对某个网站进行位置权限管理。Web组件根据接口响应结果，决定是否赋予前端页面权限。获取设备位置，需要开发者配置[ohos.permission.LOCATION](../security/accesstoken-guidelines.md)权限。
+
+
+在下面的示例中，用户点击前端页面"获取位置"按钮，Web组件通过弹窗的形式通知应用侧位置权限请求消息。
+
+
+- 前端页面代码。
+
+ ```html
+
+
+
+ 位置信息
+
+
+
+
+ ```
+
+
+- 应用代码。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ build() {
+ Column() {
+ Web({ src:$rawfile('getLocation.html'), controller:this.controller })
+ .geolocationAccess(true)
+ .onGeolocationShow((event) => { // 地理位置权限申请通知
+ AlertDialog.show({
+ title: '位置权限请求',
+ message: '是否允许获取位置信息',
+ primaryButton: {
+ value: 'cancel',
+ action: () => {
+ event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
+ }
+ },
+ secondaryButton: {
+ value: 'ok',
+ action: () => {
+ event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求
+ }
+ },
+ cancel: () => {
+ event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求
+ }
+ })
+ })
+ }
+ }
+ }
+ ```
diff --git a/zh-cn/application-dev/web/web-in-app-frontend-page-function-invoking.md b/zh-cn/application-dev/web/web-in-app-frontend-page-function-invoking.md
new file mode 100644
index 0000000000000000000000000000000000000000..2a490281b417a51f408e09acf18b3e62c66a917e
--- /dev/null
+++ b/zh-cn/application-dev/web/web-in-app-frontend-page-function-invoking.md
@@ -0,0 +1,48 @@
+# 应用侧调用前端页面函数
+
+
+应用侧可以通过[runJavaScript()](../reference/apis/js-apis-webview.md#runjavascript)方法调用前端页面的JavaScript相关函数。
+
+
+在下面的示例中，点击应用侧的“runJavaScript”按钮时，来触发前端页面的htmlTest()方法。
+
+
+- 前端页面代码。
+
+ ```html
+
+
+
+
+
+
+
+ ```
+
+
+- 应用侧代码。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+
+ build() {
+ Column() {
+ Web({ src: $rawfile('index.html'), controller: this.webviewController})
+ Button('runJavaScript')
+ .onClick(() => {
+ this.webviewController.runJavaScript('htmlTest()');
+ })
+ }
+ }
+ }
+ ```
diff --git a/zh-cn/application-dev/web/web-in-page-app-function-invoking.md b/zh-cn/application-dev/web/web-in-page-app-function-invoking.md
new file mode 100644
index 0000000000000000000000000000000000000000..caffe3d2cc2a18efae36fd67650113202e5e4d2d
--- /dev/null
+++ b/zh-cn/application-dev/web/web-in-page-app-function-invoking.md
@@ -0,0 +1,113 @@
+# 前端页面调用应用侧函数
+
+
+开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
+
+
+注册应用侧代码有两种方式，一种在Web组件初始化使用调用，使用[javaScriptProxy()](../reference/arkui-ts/ts-basic-components-web.md#javascriptproxy)接口。另外一种在Web组件初始化完成后调用，使用[registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy)接口。
+
+
+在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。
+
+
+- [javaScriptProxy()](../reference/arkui-ts/ts-basic-components-web.md#javascriptproxy)接口使用示例如下。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+ // 声明需要注册的对象
+ testObj = {
+ test: () => {
+ return 'ArkTS Hello World!';
+ }
+ }
+
+ build() {
+ Column() {
+ // web组件加载本地index.html页面
+ Web({ src: $rawfile('index.html'), controller: this.webviewController})
+ // 将对象注入到web端
+ .javaScriptProxy({
+ object: this.testObj,
+ name: "testObjName",
+ methodList: ["test"],
+ controller: this.webviewController
+ })
+ }
+ }
+ }
+ ```
+
+
+- 应用侧使用registerJavaScriptProxy()接口注册。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct Index {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+ testObj = {
+ test: (data) => {
+ return "ArkUI Web Component";
+ },
+ toString: () => {
+ console.info('Web Component toString');
+ }
+ }
+
+ build() {
+ Column() {
+ Button('refresh')
+ .onClick(() => {
+ try {
+ this.webviewController.refresh();
+ } catch (error) {
+ console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ Button('Register JavaScript To Window')
+ .onClick(() => {
+ try {
+ this.webviewController.registerJavaScriptProxy(this.testObj, "objName", ["test", "toString"]);
+ } catch (error) {
+ console.error(`Errorcode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ Web({ src: $rawfile('index.html'), controller: this.webviewController })
+ }
+ }
+ }
+ ```
+
+ > **说明：**
+ >
+ > 使用[registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy)接口注册方法时，注册后需调用[refresh()](../reference/apis/js-apis-webview.md#refresh)接口生效。
+
+
+- index.htm前端页面触发应用侧代码。
+
+ ```html
+
+
+
+
+
+
+
+
+
+ ```
diff --git a/zh-cn/application-dev/web/web-open-in-new-window.md b/zh-cn/application-dev/web/web-open-in-new-window.md
new file mode 100644
index 0000000000000000000000000000000000000000..99a244544598060f16881ab6b020eb431e6f8ecf
--- /dev/null
+++ b/zh-cn/application-dev/web/web-open-in-new-window.md
@@ -0,0 +1,69 @@
+# 在新窗口中打开页面
+
+
+Web组件提供了在新窗口打开页面的能力，开发者可以通过[multiWindowAccess()](../reference/arkui-ts/ts-basic-components-web.md#multiwindowaccess9)接口来设置是否允许网页在新窗口打开。当有新窗口打开时，应用侧会在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件，开发者需要在此接口事件中，新建窗口来处理Web组件窗口请求。
+
+
+> **说明：**
+>
+> - [allowWindowOpenMethod()](../reference/arkui-ts/ts-basic-components-web.md#allowwindowopenmethod9)接口设置为true时，前端页面通过JavaScript函数调用的方式打开新窗口。
+>
+> - 如果开发者在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口通知中不需要打开新窗口，需要将[ControllerHandler.setWebController()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口返回值设置成null。
+
+
+如下面的本地示例，当用户点击“新窗口中打开网页”按钮时，应用侧会在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件。
+
+
+- 应用侧代码。
+
+ 创建新窗口的方法可参考[Web开发相关例子](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser)。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ build() {
+ Column() {
+ Web({ src:$rawfile("window.html"), controller: this.controller })
+ .multiWindowAccess(true)
+ .onWindowNew((event) => {
+ console.info("onWindowNew...");
+ var popController: web_webview.WebviewController = new web_webview.WebviewController();
+ // 开发者需要在此处新建窗口,跟popController关联，并且将popController返回给Web组件。如果不需要打开新窗口请将返回值设置为event.handler.setWebController(null);
+ event.handler.setWebController(popController);
+ })
+ }
+ }
+ }
+ ```
+
+
+- window.html页面代码。
+
+ ```html
+
+
+
+
+ WindowEvent
+
+
+
+
+
+
+
+ ```
diff --git a/zh-cn/application-dev/web/web-page-loading-with-web-components.md b/zh-cn/application-dev/web/web-page-loading-with-web-components.md
new file mode 100644
index 0000000000000000000000000000000000000000..98a7ea1360330dd20be8fcfc3afe6e3f9de01922
--- /dev/null
+++ b/zh-cn/application-dev/web/web-page-loading-with-web-components.md
@@ -0,0 +1,140 @@
+# 使用Web组件加载页面
+
+
+页面加载是Web组件的基本功能。根据页面加载数据来源可以分为三种常用场景，包括加载网络页面、加载本地页面、加载HTML格式的富文本数据。
+
+
+页面加载过程中，若涉及网络资源获取，需要配置[ohos.permission.INTERNET](../security/accesstoken-guidelines.md)网络访问权限。
+
+
+## 加载网络页面
+
+开发者可以在Web组件创建的时候指定默认加载的网络页面 。在默认页面加载完成后，如果开发者需要变更此Web组件显示的网络页面，可以通过调用[loadUrl()](../reference/apis/js-apis-webview.md#loadurl)接口加载指定网络网页。
+
+
+在下面的示例中，在Web组件加载完“www.example.com”页面后，开发者可通过loadUrl接口将此Web组件显示页面变更为“www.example1.com”。
+
+
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview';
+
+@Entry
+@Component
+struct WebComponent {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+
+ build() {
+ Column() {
+ Button('loadUrl')
+ .onClick(() => {
+ try {
+ // 点击按钮时，通过loadUrl，跳转到www.example1.com
+ this.webviewController.loadUrl('www.example1.com');
+ } catch (error) {
+ console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ // 组件创建时，加载www.example.com
+ Web({ src: 'www.example.com', controller: this.webviewController})
+ }
+ }
+}
+```
+
+
+## 加载本地页面
+
+将本地页面文件放在应用的rawfile目录下，开发者可以在Web组件创建的时候指定默认加载的本地页面 ，并且加载完成后可通过调用[loadUrl()](../reference/apis/js-apis-webview.md#loadurl)接口变更当前Web组件的页面。
+
+
+在下面的示例中展示加载本地页面文件的方法：
+
+
+- 将资源文件放置在应用的resources/rawfile目录下。
+
+ **图1** 资源文件路径
+
+ 
+
+
+- 应用侧代码。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+
+ build() {
+ Column() {
+ Button('loadUrl')
+ .onClick(() => {
+ try {
+ // 点击按钮时，通过loadUrl，跳转到local1.html
+ this.webviewController.loadUrl($rawfile("local1.html"));
+ } catch (error) {
+ console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ // 组件创建时，通过$rawfile加载本地文件local.html
+ Web({ src: $rawfile("local.html"), controller: this.webviewController })
+ }
+ }
+ }
+ ```
+
+
+- local.html页面代码。
+
+ ```html
+
+
+
+
+ Hello World
+
+
+ ```
+
+
+## 加载HTML格式的文本数据
+
+Web组件可以通过[loadData()](../reference/apis/js-apis-webview.md#loaddata)接口实现加载HTML格式的文本数据。当开发者不需要加载整个页面，只需要显示一些页面片段时，可通过此功能来快速加载页面。
+
+
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview';
+
+@Entry
+@Component
+struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+
+ build() {
+ Column() {
+ Button('loadData')
+ .onClick(() => {
+ try {
+ // 点击按钮时，通过loadData，加载HTML格式的文本数据
+ this.controller.loadData(
+ 'Source:source
',
+ 'text/html',
+ 'UTF-8'
+ );
+ } catch (error) {
+ console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
+ }
+ })
+ // 组件创建时，加载www.example.com
+ Web({ src: 'www.example.com', controller: this.controller })
+ }
+ }
+}
+```
diff --git a/zh-cn/application-dev/web/web-redirection-and-browsing-history-mgmt.md b/zh-cn/application-dev/web/web-redirection-and-browsing-history-mgmt.md
new file mode 100644
index 0000000000000000000000000000000000000000..4d64482bf4e2ed1751e2e1f120064d481fa670cf
--- /dev/null
+++ b/zh-cn/application-dev/web/web-redirection-and-browsing-history-mgmt.md
@@ -0,0 +1,157 @@
+# 管理页面跳转及浏览记录导航
+
+
+## 历史记录导航
+
+使用者在前端页面点击网页中的链接时，Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时，会自动记录已经访问的网页地址。可以通过[forward()](../reference/apis/js-apis-webview.md#forward)和[backward()](../reference/apis/js-apis-webview.md#backward)接口向前/向后浏览上一个/下一个历史记录。
+
+ 在下面的示例中，点击应用的按钮来触发前端页面的后退操作。
+
+```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview';
+
+@Entry
+@Component
+struct WebComponent {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+ build() {
+ Column() {
+ Button('loadData')
+ .onClick(() => {
+ if (this.webviewController.accessBackward()) {
+ this.webviewController.backward();
+ return true;
+ }
+ })
+ Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
+ }
+ }
+}
+```
+
+
+如果存在历史记录，[accessBackward()](../reference/apis/js-apis-webview.md#accessbackward)接口会返回true。同样，您可以使用[accessForward()](../reference/apis/js-apis-webview.md#accessforward)接口检查是否存在前进的历史记录。如果您不执行检查，那么当用户浏览到历史记录的末尾时，调用[forward()](../reference/apis/js-apis-webview.md#forward)和[backward()](../reference/apis/js-apis-webview.md#backward)接口时将不执行任何操作。
+
+
+## 页面跳转
+
+当点击网页中的链接需要跳转到应用内其他页面时，可以通过使用Web组件的[onUrlLoadIntercept()](../reference/arkui-ts/ts-basic-components-web.md#onurlloadintercept)接口来实现。
+
+在下面的示例中，应用首页Index.ets加载前端页面route.html，在前端route.html页面点击超链接，可跳转到应用的ProfilePage.ets页面。
+
+- 应用首页index.ets页面代码。
+
+ ```ts
+ // index.ets
+ import web_webview from '@ohos.web.webview';
+ import router from '@ohos.router';
+ @Entry
+ @Component
+ struct WebComponent {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+
+ build() {
+ Column() {
+ Web({ src: $rawfile('route.html'), controller: this.webviewController })
+ .onUrlLoadIntercept((event) => {
+ let url: string = event.data as string;
+ if (url.indexOf('native://') === 0) {
+ // 跳转其他界面
+ router.pushUrl({ url:url.substring(9) })
+ return true;
+ }
+ return false;
+ })
+ }
+ }
+ }
+ ```
+
+- route.html前端页面代码。
+
+ ```html
+
+
+
+
+
+
+
+ ```
+
+- 跳转页面ProfilePage.ets代码。
+
+ ```ts
+ @Entry
+ @Component
+ struct ProfilePage {
+ @State message: string = 'Hello World';
+
+ build() {
+ Column() {
+ Text(this.message)
+ .fontSize(20)
+ }
+ }
+ }
+ ```
+
+
+## 跨应用跳转
+
+Web组件可以实现点击前端页面超链接跳转到其他应用。
+
+在下面的示例中，点击call.html前端页面中的超连接，跳转到电话应用的拨号界面。
+
+- 应用侧代码。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+ import call from '@ohos.telephony.call';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ webviewController: web_webview.WebviewController = new web_webview.WebviewController();
+
+ build() {
+ Column() {
+ Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
+ .onUrlLoadIntercept((event) => {
+ let url: string = event.data as string;
+ // 判断链接是否为拨号链接
+ if (url.indexOf('tel://') === 0) {
+ // 跳转拨号界面
+ call.makeCall(url.substring(6), (err) => {
+ if (!err) {
+ console.info('make call succeeded.');
+ } else {
+ console.info('make call fail, err is:' + JSON.stringify(err));
+ }
+ });
+ return true;
+ }
+ return false;
+ })
+ }
+ }
+ }
+ ```
+
+- 前端页面call.html代码。
+
+ ```html
+
+
+
+
+
+
+
+ ```
diff --git a/zh-cn/application-dev/web/web-resource-interception-request-mgmt.md b/zh-cn/application-dev/web/web-resource-interception-request-mgmt.md
new file mode 100644
index 0000000000000000000000000000000000000000..6a01c946eaed3e56c21827337484bb105334390c
--- /dev/null
+++ b/zh-cn/application-dev/web/web-resource-interception-request-mgmt.md
@@ -0,0 +1,70 @@
+# 自定义页面请求响应
+
+
+Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过[onInterceptRequest()](../reference/arkui-ts/ts-basic-components-web.md#oninterceptrequest9)接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。
+
+
+Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载。
+
+
+在下面的示例中，Web组件通过拦截页面请求“https://www.intercept.com/test.html”， 在应用侧代码构建响应资源，实现自定义页面响应场景。
+
+
+- 前端页面example.html代码。
+
+ ```html
+
+
+
+
+ example
+
+
+
+ intercept test!
+
+
+ ```
+
+- 应用侧代码。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController()
+ responseResource: WebResourceResponse = new WebResourceResponse()
+ // 开发者自定义响应数据
+ @State webData: string = '\n' +
+ '\n'+
+ '\n'+
+ 'intercept test\n'+
+ '\n'+
+ '\n'+
+ 'intercept ok
\n'+
+ '\n'+
+ ''
+ build() {
+ Column() {
+ Web({ src: $rawfile('example.html'), controller: this.controller })
+ .onInterceptRequest((event) => {
+ console.info('url:' + event.request.getRequestUrl());
+ // 拦截页面请求
+ if (event.request.getRequestUrl() !== 'https://www.intercept.com/test.html') {
+ return null;
+ }
+ // 构造响应数据
+ this.responseResource.setResponseData(this.webData);
+ this.responseResource.setResponseEncoding('utf-8');
+ this.responseResource.setResponseMimeType('text/html');
+ this.responseResource.setResponseCode(200);
+ this.responseResource.setReasonMessage('OK');
+ return this.responseResource;
+ })
+ }
+ }
+ }
+ ```
diff --git a/zh-cn/application-dev/web/web-set-dark-mode.md b/zh-cn/application-dev/web/web-set-dark-mode.md
new file mode 100644
index 0000000000000000000000000000000000000000..687249c6d5ee57c5ef0fc32c2721cc3ec90ec821
--- /dev/null
+++ b/zh-cn/application-dev/web/web-set-dark-mode.md
@@ -0,0 +1,50 @@
+# 设置深色模式
+
+
+Web组件支持对前端页面进行深色模式配置。
+
+
+- 通过[darkMode()](../reference/arkui-ts/ts-basic-components-web.md#darkmode9)接口可以配置不同的深色模式，[WebDarkMode.Off](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E)模式表示关闭深色模式。[WebDarkMode.On](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E)表示开启深色模式，并且深色模式跟随前端页面。[WebDarkMode.Auto](../reference/arkui-ts/ts-basic-components-web.md#webdarkmode9%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E)表示开启深色模式，并且深色模式跟随系统。
+ 在下面的示例中, 通过[darkMode()](../reference/arkui-ts/ts-basic-components-web.md#darkmode9)接口将页面深色模式配置为跟随系统。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ @State mode: WebDarkMode = WebDarkMode.Auto;
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .darkMode(this.mode)
+ }
+ }
+ }
+ ```
+
+
+- 通过[forceDarkAccess()](../reference/arkui-ts/ts-basic-components-web.md#forcedarkaccess9)接口可将前端页面强制配置深色模式，且深色模式不跟随前端页面和系统。配置该模式时候，需要将深色模式配置成WebDarkMode.On。
+ 在下面的示例中, 通过[forceDarkAccess()](../reference/arkui-ts/ts-basic-components-web.md#forcedarkaccess9)接口将页面强制配置为深色模式。
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview';
+
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController();
+ @State mode: WebDarkMode = WebDarkMode.On;
+ @State access: boolean = true;
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .darkMode(this.mode)
+ .forceDarkAccess(this.access)
+ }
+ }
+ }
+ ```