From 619b52b9572f62a9855038741351c7cda09b869a Mon Sep 17 00:00:00 2001
From: yamila <tianyu55@huawei.com>
Date: Thu, 17 Nov 2022 19:37:41 +0800
Subject: [PATCH] uiANDjs example cherryPick 3.1release

Signed-off-by: yamila <tianyu55@huawei.com>
---
 .../arkui-js/js-components-basic-input.md     | 36 ++++++-------
 .../arkui-js/js-components-basic-label.md     |  6 +--
 .../arkui-js/js-components-basic-qrcode.md    |  6 +--
 .../arkui-js/js-components-canvas-canvas.md   |  6 +--
 .../js-components-common-transition.md        | 36 ++++++-------
 .../arkui-js/js-components-container-list.md  |  2 +-
 .../arkui-js/js-components-media-video.md     |  9 ----
 .../arkui-ts/ts-drawing-components-circle.md  | 29 +++++------
 .../arkui-ts/ts-drawing-components-ellipse.md | 37 +++++++-------
 .../arkui-ts/ts-drawing-components-line.md    | 41 +++++++--------
 .../arkui-ts/ts-drawing-components-path.md    | 42 ++++++++--------
 .../arkui-ts/ts-drawing-components-polygon.md | 13 ++---
 .../ts-drawing-components-polyline.md         | 39 ++++++++-------
 .../arkui-ts/ts-drawing-components-rect.md    | 49 +++++++++---------
 .../arkui-ts/ts-drawing-components-shape.md   | 11 ++--
 .../ui/js-framework-syntax-js.md              | 34 ++++++-------
 zh-cn/application-dev/ui/ui-js-animate-svg.md | 10 ++--
 .../ui/ui-js-animate-transform.md             | 38 +++++++-------
 .../ui/ui-js-component-tabs.md                | 28 ++++++-----
 .../ui/ui-js-components-canvas.md             | 18 ++++---
 ...-js-components-canvasrenderingcontext2d.md | 50 +++++++++++--------
 .../ui/ui-js-components-form.md               | 22 ++++----
 .../ui/ui-js-components-grid.md               | 24 +++++----
 .../ui/ui-js-components-offscreencanvas.md    | 16 +++---
 .../ui/ui-js-components-path2d.md             | 14 +++---
 .../ui/ui-js-components-switch.md             | 16 +++---
 26 files changed, 328 insertions(+), 304 deletions(-)

diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md
index 17361e8555..d2dd4f4c95 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md
@@ -92,34 +92,36 @@
 ## 示例
 
 1. type为text
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="content">
      <input id="input" class="input" type="text" value="" maxlength="20" enterkeytype="send"
        headericon="/common/search.svg" placeholder="Please input text" onchange="change"
        onenterkeyclick="enterkeyClick">
      </input>
-     <input class="button" type="button" value="Submit" onclick="buttonClick"></input>
+     <input class="button" type="button" value="Submit" onclick="buttonClick" style="color: blue"></input>
    </div>
    ```
 
-   ```
+   ```css
    /* xxx.css */
    .content {
-     width: 60%;
+     width: 100%;
      flex-direction: column;
      align-items: center;
    }
    .input {
+     width: 60%;
      placeholder-color: gray;
    }
    .button {
+     width: 60%;
      background-color: gray;
      margin-top: 20px;
-   }
-   ```
-
+}
    ```
+   
+   ```js
    // xxx.js
    import prompt from '@system.prompt'
    export default {
@@ -140,20 +142,20 @@
          error: 'error text'
        });
      },
-   }
+}
    ```
 
    ![zh-cn_image_0000001252835901](figures/zh-cn_image_0000001252835901.png)
-
+   
 2. type为button
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="div-button">
      <input class="button" type="button" value="Input-Button"></input>
    </div>
    ```
 
-   ```
+   ```css
    /* xxx.css */
    .div-button {
      flex-direction: column;
@@ -168,14 +170,14 @@
    ![zh-cn_image_0000001207995958](figures/zh-cn_image_0000001207995958.png)
 
 3. type为checkbox
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="content">
      <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
    </div>
    ```
 
-   ```
+   ```css
    /* xxx.css */
    .content{
      width: 100%;
@@ -185,7 +187,7 @@
    }
    ```
 
-   ```
+   ```js
    // xxx.js
    import prompt from '@system.prompt'
    export default {
@@ -201,7 +203,7 @@
    ![zh-cn_image_0000001208155956](figures/zh-cn_image_0000001208155956.png)
 
 4. type为radio
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="content">
      <input type="radio" checked='true' name="radioSample" value="radio1" onchange="onRadioChange('radio1')"></input>
@@ -210,7 +212,7 @@
    </div>
    ```
 
-   ```
+   ```css
    /* xxx.css */
    .content{
      width: 100%;
@@ -220,7 +222,7 @@
    }
    ```
 
-   ```
+   ```js
    // xxx.js
    import prompt from '@system.prompt'
    export default {
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md
index cfa7a4a438..87f8efafe0 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-label.md
@@ -60,7 +60,7 @@
 
 ## 示例
 
-```
+```html
 <!--xxx.hml -->
 <div class="container">
   <div class="row">
@@ -78,11 +78,11 @@
 </div>
 ```
 
-```
+```css
 /*xxx.css */
 .container {
   flex-direction: column;
-  align-items: center;
+  margin-left: 20px;
 }
 .row {
   flex-direction: row;
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
index b0c73ee2ae..d263871d3f 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-qrcode.md
@@ -53,7 +53,7 @@
 
 ## 示例
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <qrcode value="{{qr_value}}" type="{{qr_type}}"
@@ -71,7 +71,7 @@
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   width: 100%;
@@ -90,7 +90,7 @@ select{
 }
 ```
 
-```
+```js
 /* index.js */
 export default {
   data: {
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md
index ffd3d1426f..27867bba07 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvas.md
@@ -37,7 +37,7 @@
 
 ### getContext
 
-getContext(type: '2d', options?:  ContextAttrOptions): CanvasRendering2dContext
+getContext(type: '2d', options?:  ContextAttrOptions): CanvasRenderingContext2D
 
 获取canvas绘图上下文。不支持在onInit和onReady中进行调用。
 
@@ -77,7 +77,7 @@ toDataURL(type?: string, quality?: number): string
 
 ## 示例
 
-```
+```html
 <!-- xxx.hml -->
 <div>
   <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
@@ -85,7 +85,7 @@ toDataURL(type?: string, quality?: number): string
 </div>
 ```
 
-```
+```css
 // xxx.js
 export default {
   handleClick() {
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
index 69ce3302ec..36976ca9dd 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-common-transition.md
@@ -42,7 +42,7 @@
 
 PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage”。
 
-```
+```html
 <!-- PageA -->
 <!-- xxx.hml -->
 <div>
@@ -57,7 +57,7 @@ PageA跳转到PageB，跳转的共享元素为image， shareid为“shareImage
 </div>
 ```
 
-```
+```js
 // xxx.js
 import router from '@system.router';
 export default {
@@ -70,7 +70,7 @@ export default {
 }
 ```
 
-```
+```css
 /* xxx.css */
 .shared-transition-style {
   shared-transition-effect: exchange;
@@ -82,7 +82,7 @@ export default {
 }
 ```
 
-```
+```html
 <!-- PageB -->
 <!-- xxx.hml -->
 <div>
@@ -90,7 +90,7 @@ export default {
 </div>
 ```
 
-```
+```js
 // xxx.js
 import router from '@system.router';
 export default {
@@ -100,7 +100,7 @@ export default {
 }
 ```
 
-```
+```css
 /* xxx.css */
 .shared-transition-style {
   shared-transition-effect: exchange;
@@ -130,7 +130,7 @@ export default {
 
 source_page包含顶部内容以及卡片列表，点击卡片可以跳转到target_page。
 
-```
+```html
 <!-- source_page -->
 <!-- xxx.hml -->
 <div class="container">
@@ -145,7 +145,7 @@ source_page包含顶部内容以及卡片列表，点击卡片可以跳转到tar
 </div>
 ```
 
-```
+```js
 // xxx.js
 import router from '@system.router'
 export default {
@@ -164,7 +164,7 @@ export default {
 }
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -184,7 +184,7 @@ export default {
 }
 ```
 
-```
+```html
 <!-- target_page -->
 <!-- xxx.hml -->
 <div class="container">
@@ -194,7 +194,7 @@ export default {
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -245,7 +245,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
 
 1. Page1
 
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="container">
        <text>index</text>
@@ -253,7 +253,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
    </div>
    ```
 
-   ```
+   ```js
    <!-- xxx.js -->
    import router from '@system.router';
    export default {
@@ -268,7 +268,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
    }
    ```
 
-   ```
+   ```css
    <!-- xxx.css -->
    .container {
        flex-direction: column;
@@ -315,15 +315,15 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
 
 2. Page2
 
-   ```
+   ```html
    <!-- xxx.hml -->
    <div class="container">
        <text>transition</text>
        <div class="move_page" onclick="jumpBack"></div>
-   </div
+   </div>
    ```
 
-   ```
+   ```js
    <!-- xxx.js -->
    import router from '@system.router';
    export default {
@@ -336,7 +336,7 @@ Page1有一个不透明盒子，点击盒子会跳转到Page2，当点击Page2
    }
    ```
 
-   ```
+   ```css
    <!-- xxx.css -->
    .container {
        flex-direction: column;
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
index de6e52a13a..ba6c520b08 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
@@ -71,7 +71,7 @@
 | scrollend | - | 列表滑动已经结束。 |
 | scrolltouchup | - | 手指已经抬起且列表仍在惯性滑动。 |
 | requestitem | - | 请求创建新的list-item。<br/>长列表延迟加载时，可视区域外缓存的list-item数量少于cachedcount时，会触发该事件。 |
-| rotate<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
+| rotation<sup>7+</sup> | {&nbsp;rotateValue:&nbsp;number&nbsp;} | 返回表冠旋转角度增量值，仅智能穿戴支持。 |
 
 
 ## 方法
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md
index ed78e584cd..2d2783562e 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-media-video.md
@@ -5,15 +5,6 @@
 >
 > - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 >
-> - 需要在config.json对应的"abilities"中设置"configChanges"属性为"orientation"
-> ```
-> "abilities": [
->  {
->    "configChanges": ["orientation"],
->    ...
->  }
-> ]
-> ```
 
 视频播放组件。
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
index caf04fd3b4..fa521485d2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-circle.md
@@ -21,7 +21,8 @@
 
 Circle(options?: {width?: string | number, height?: string | number})
 
-## 参数
+**参数：**
+
 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
 | -------- | -------- | -------- | -------- | -------- |
 | width | string \| number | 否 | 0 | 宽度。 |
@@ -32,19 +33,19 @@ Circle(options?: {width?: string | number, height?: string | number})
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
-| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框。 |
-| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
-| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
-| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 |
-| strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
-| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
+| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
+| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框。 |
+| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
+| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
+| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。<br/>**说明：**<br/>Circle组件无法设置锐角图形，该属性设置无效。 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。 |
+| strokeWidth | Length | 1 | 设置边框宽度。 |
+| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
 
 
 ## 示例
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
index 8f80cd2eea..664bd5c5fc 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md
@@ -22,30 +22,31 @@
 
 ellipse(options?: {width?: string | number, height?: string | number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | 否 | 0 | 宽度。 |
-  | height | string \| number | 否 | 0 | 高度。 |
+**参数：**
+
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| width | string \| number | 否 | 0 | 宽度。 |
+| height | string \| number | 否 | 0 | 高度。 |
 
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
-| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 |设置边框颜色，不设置时，默认没有边框。 |
-| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
-| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
-| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 |
-| strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
-| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
+| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
+| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - |设置边框颜色，不设置时，默认没有边框。 |
+| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
+| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
+| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。 |
+| strokeWidth | Length | 1 | 设置边框宽度。 |
+| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
 
 
 ## 示例
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
index 4c37739ad2..7065295272 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-line.md
@@ -21,32 +21,33 @@
 
 Line(options?: {width?: string | number, height?: string | number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | 否 | 0 | 宽度。 |
-  | height | string \| number | 否 | 0 | 高度。 |
+**参数：**
+
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| width | string \| number | 否 | 0 | 宽度。 |
+| height | string \| number | 否 | 0 | 高度。 |
 
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| startPoint | Array | [0,&nbsp;0] | 是   | 直线起点坐标点(相对坐标)。 |
-| endPoint   | Array | [0,&nbsp;0] | 是   | 直线终点坐标点(相对坐标)。 |
-| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
-| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置线条颜色。 |
-| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
-| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
-| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 |
-| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
-| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| startPoint | Array | [0,&nbsp;0] | 直线起点坐标点(相对坐标)。 |
+| endPoint   | Array | [0,&nbsp;0] | 直线终点坐标点(相对坐标)。 |
+| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。<br/>**说明：**<br/>Line组件无法形成闭合区域，该属性设置无效。 |
+| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。<br/>**说明：**<br/>Line组件无法形成闭合区域，该属性设置无效。 |
+| stroke | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置线条颜色。 |
+| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
+| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
+| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。<br/>**说明：**<br/>Line组件无法设置锐角图形，该属性设置无效。 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。 |
+| strokeWidth | Length | 1 | 设置线条宽度。 |
+| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
 
 ## 示例
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
index f16a17f75c..fcb84dad5b 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-path.md
@@ -16,34 +16,34 @@
 
 Path(value?: { width?: number | string; height?: number | string; commands?: string })
 
-- 参数
+**参数：**
+
+| 参数名   | 参数类型 | 必填 | 默认值 | 参数描述             |
+| -------- | -------- | ---- | ------ | -------------------- |
+| width    | number \| string   | 否   | 0      | 路径所在矩形的宽度   |
+| height   | number \| string   | 否   | 0      | 路径所在矩形的高度   |
+| commands | string   | 否   | ''  | 路径绘制的命令字符串 |
 
-  | 参数名   | 参数类型 | 必填 | 默认值 | 参数描述             |
-  | -------- | -------- | ---- | ------ | -------------------- |
-  | width    | number \| string   | 否   | 0      | 路径所在矩形的宽度   |
-  | height   | number \| string   | 否   | 0      | 路径所在矩形的高度   |
-  | commands | string   | 否   | ''  | 路径绘制的命令字符串 |
 
-  
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称     | 参数类型                                | 默认值  | 必填   | 参数描述                                     |
-| -------- | ----------------------------------- | ---- | ---- | ---------------------------------------- |
-| commands | string                              | ''   | 否  | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
-| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
-| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 |
-| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
-| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
-| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 |
-| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
-| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
+| 名称     | 类型                                | 默认值  | 描述                                     |
+| -------- | ----------------------------------- | ---- | ---------------------------------------- |
+| commands | string                              | ''   | 路径绘制的命令字符串，单位为px。像素单位转换方法请参考[像素单位转换](../../ui/ts-pixel-units.md)。 |
+| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
+| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
+| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 |
+| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
+| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
+| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。 |
+| strokeWidth | Length | 1 | 设置线条宽度。 |
+| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
 
 
 commands支持的绘制命令如下：
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
index c13acb8d49..458e1c391d 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polygon.md
@@ -21,18 +21,19 @@
 
 Polygon(options?: {width?: string | number, height?: string | number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | 否 | 0 | 宽度。 |
-  | height | string \| number | 否 | 0 | 高度。 |
+**参数：**
+
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| width | string \| number | 否 | 0 | 宽度。 |
+| height | string \| number | 否 | 0 | 高度。 |
 
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
 | -------- | -------- | -------- | -------- | -------- |
 | points | Array&lt;Point&gt; | [] | 否 | 多边形的顶点坐标列表。 |
 | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
index 97ced6b7a4..489846ae88 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-polyline.md
@@ -22,31 +22,32 @@
 
 Polyline(options?: {width?: string | number, height?: string | number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | string \| number | 否 | 0 | 宽度。 |
-  | height | string \| number | 否 | 0 | 高度。 |
+**参数：**
+
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| width | string \| number | 否 | 0 | 宽度。 |
+| height | string \| number | 否 | 0 | 高度。 |
 
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| points | Array&lt;Point&gt; | [] | 否 | 折线经过坐标点列表。 |
-| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
-| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置线条颜色。 |
-| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置线条间隙。 |
-| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 线条绘制起点的偏移量。 |
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置线条端点绘制样式。 |
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置线条拐角绘制样式。 |
-| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置线条透明度。 |
-| strokeWidth | Length | 1 | 否 | 设置线条宽度。 |
-| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| points | Array&lt;Point&gt; | [] | 折线经过坐标点列表。 |
+| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
+| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
+| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置线条颜色。 |
+| strokeDashArray | Array&lt;Length&gt; | [] | 设置线条间隙。 |
+| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 线条绘制起点的偏移量。 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置线条端点绘制样式。 |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置线条拐角绘制样式。 |
+| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置线条透明度。 |
+| strokeWidth | Length | 1 | 设置线条宽度。 |
+| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
 
 ## Point
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
index a25e207e7e..145c3b334a 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-drawing-components-rect.md
@@ -23,36 +23,37 @@
 Rect(options?: {width?: string | number,height?: string | number,radius?: string | number | Array&lt;string | number&gt;} |
   {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number})
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | width | string&nbsp;\|&nbsp;number | 否 | 0 | 宽度。 |
-  | height | string&nbsp;\|&nbsp;number | 否 | 0 | 高度。 |
-  | radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
-  | radiusWidth | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角宽度。 |
-  | radiusHeight | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角高度。 |
+**参数：**
+
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| width | string&nbsp;\|&nbsp;number | 否 | 0 | 宽度。 |
+| height | string&nbsp;\|&nbsp;number | 否 | 0 | 高度。 |
+| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 否 | 0 | 圆角半径，支持分别设置四个角的圆角度数。 |
+| radiusWidth | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角宽度。 |
+| radiusHeight | string&nbsp;\|&nbsp;number | 否 | 0 | 圆角高度。 |
 
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的宽度，仅设置宽时宽高一致。 |
-| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 否 | 圆角的高度，仅设置高时宽高一致。 |
-| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 否 | 圆角半径大小。 |
-| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
-| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置填充区域透明度。 |
-| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 否 | 设置边框颜色，不设置时，默认没有边框线条。 |
-| strokeDashArray | Array&lt;Length&gt; | [] | 否 | 设置边框间隙。 |
-| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 否 | 边框绘制起点的偏移量。 |
-| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 否 | 设置边框端点绘制样式。 |
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 否 | 设置边框拐角绘制样式。 |
-| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 否 | 设置锐角绘制成斜角的极限值。 |
-| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 否 | 设置边框透明度。 |
-| strokeWidth | Length | 1 | 否 | 设置边框宽度。 |
-| antiAlias | boolean | true | 否 | 是否开启抗锯齿效果。 |
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| radiusWidth | string&nbsp;\|&nbsp;number | 0 | 圆角的宽度，仅设置宽时宽高一致。 |
+| radiusHeight | string&nbsp;\|&nbsp;number | 0 | 圆角的高度，仅设置高时宽高一致。 |
+| radius | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Array&lt;string&nbsp;\|&nbsp;number&gt; | 0 | 圆角半径大小。 |
+| fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 设置填充区域颜色。 |
+| fillOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置填充区域透明度。 |
+| stroke | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置边框颜色，不设置时，默认没有边框线条。 |
+| strokeDashArray | Array&lt;Length&gt; | [] | 设置边框间隙。 |
+| strokeDashOffset | number&nbsp;\|&nbsp;string | 0 | 边框绘制起点的偏移量。 |
+| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | 设置边框端点绘制样式。 |
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | 设置边框拐角绘制样式。 |
+| strokeMiterLimit | number&nbsp;\|&nbsp;string | 4 | 设置锐角绘制成斜角的极限值。 |
+| strokeOpacity | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 1 | 设置边框透明度。 |
+| strokeWidth | Length | 1 | 设置边框宽度。 |
+| antiAlias | boolean | true | 是否开启抗锯齿效果。 |
 
 
 ## 示例
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 c7675ae3c2..757dd2b826 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
@@ -25,17 +25,18 @@
 
 Shape(value?: PixelMap)
 
-- 参数
-  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-  | -------- | -------- | -------- | -------- | -------- |
-  | value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
+**参数：**
+
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| value | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 否 | - | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
 
 
 ## 属性
 
 除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
 
-| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
 | -------- | -------- | -------- | -------- | -------- |
 | viewPort | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | { x:0, y:0, width:0, height:0 } | 否 | 形状的视口。 |
 | fill | [ResourceColor](ts-types.md#resourcecolor8) | Color.Black | 否 | 设置填充区域颜色。 |
diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md
index 5eb1398708..12e1bc8008 100644
--- a/zh-cn/application-dev/ui/js-framework-syntax-js.md
+++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md
@@ -31,7 +31,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 
   示例代码
 
-  ```
+  ```js
   // app.js
   export default {
     onCreate() {
@@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
   };
   ```
 
-  ```
+  ```js
   // index.js页面逻辑代码
   export default {
     data: {
@@ -91,7 +91,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 
   示例代码
 
-  ```
+  ```js
   // index.js
   export default {
     data: {
@@ -141,7 +141,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 
   示例：
 
-  ```
+  ```js
   this.$rootElement().scrollTo({position: 0})
   this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
   ```
@@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 ## 获取DOM元素
 
 1. 通过$refs获取DOM元素
-   ```
+   ```html
    <!-- index.hml -->
    <div class="container">
      <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    ```
 
-   ```
+   ```js
    // index.js
    export default {
      data: {
@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
    ```
 
 2. 通过$element获取DOM元素
-   ```
+   ```html
    <!-- index.hml -->
    <div class="container" style="width:500px;height: 700px; margin: 100px;">
      <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
    </div>
    ```
 
-   ```
+   ```js
    // index.js
    export default {
      data: {
@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 
 根节点所在页面：
 
-```
+```html
 <!-- root.hml -->
 <element name='parentComp' src='../../common/component/parent/parent.hml'></element>
 <div class="container">
@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 </div>
 ```
 
-```
+```js
 // root.js
 export default {
   data: {
@@ -243,25 +243,25 @@ export default {
 
 自定义parent组件：
 
-```
+```html
 <!-- parent.hml -->
 <element name='childComp' src='../child/child.hml'></element>
 <div class="item" onclick="textClicked">
   <text class="text-style" onclick="parentClicked">parent component click</text>
-  <text class="text-style" if="{{show}}">hello parent component!</text>
+  <text class="text-style" if="{{showValue}}">hello parent component!</text>
   <childComp id = "selfDefineChild"></childComp>
 </div>
 ```
 
-```
+```js
 // parent.js
 export default {
   data: {
-    show: false,
+    showValue: false,
     text: 'I am parent component!',
   },
   parentClicked () {
-    this.show = !this.show;
+    this.showValue = !this.showValue
     console.info('parent component get parent text');
     console.info(`${this.$parent().text}`);
     console.info("parent component get child function");
@@ -272,7 +272,7 @@ export default {
 
 自定义child组件：
 
-```
+```html
 <!-- child.hml -->
 <div class="item" onclick="textClicked">
   <text class="text-style" onclick="childClicked">child component clicked</text>
@@ -280,7 +280,7 @@ export default {
 </div>
 ```
 
-```
+```js
 // child.js
 export default {
   data: {
diff --git a/zh-cn/application-dev/ui/ui-js-animate-svg.md b/zh-cn/application-dev/ui/ui-js-animate-svg.md
index f4e2052989..3eb1912243 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-svg.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-svg.md
@@ -9,7 +9,7 @@
 在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <svg>
@@ -46,7 +46,7 @@
 在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)中，通过path设置动画变化的路径。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <svg fill="white" width="800" height="900">
@@ -65,10 +65,10 @@
 
 ## animateTransform动画
 
-在Svg的子组件[animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
+在Svg的子组件[animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md)中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container" style="">
   <svg>
@@ -94,7 +94,7 @@
 ```
 
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md
index b8b2c2938c..f53badbbcc 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-transform.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md
@@ -7,7 +7,7 @@
 
 创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件（正方形）移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-830px)得到烟囱。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="top"></div>
@@ -22,7 +22,7 @@
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   width:100%;
@@ -38,8 +38,8 @@
   height: 428px;
   background-color: #860303;
   transform: rotate(45deg);
-  margin-top: 230px;
-  margin-left: 266px;
+  margin-top: 284px;
+  margin-left: 148px;
 }
 .content{
   margin-top: 500px;
@@ -52,7 +52,7 @@
   width: 100px;
   height: 150px;
   background-color: #1033d9;
-  transform: translate(150px,-150px);
+  transform: translate(150px,-137px);
 }
 .window{
   z-index: 1;
@@ -85,7 +85,7 @@
   height: 100px;
   border-radius: 15px;
   background-color: #9a7404;
-  transform: translate(200px,-830px) skewX(-5deg);
+  transform: translate(200px,-710px) skewX(-5deg);
 }
 ```
 
@@ -96,7 +96,7 @@
 
 小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="circle"></div>
@@ -104,7 +104,7 @@
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   width:100%;
@@ -175,7 +175,7 @@
 
 设置不同的原点位置（transform-origin）改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="rotate">
@@ -194,7 +194,7 @@
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -252,13 +252,13 @@
 .rect4{
   width: 100px;
   height: 100px;
-  animation: rotate3d1 17ms infinite;
+  animation: rotate3d1 1000ms infinite;
   background: linear-gradient(#e6c4ec, #be15d9)
 }
 .rect5{
   width: 100px;
   height: 100px;
-  animation: rotate3d1 17ms infinite;
+  animation: rotate3d1 1000ms infinite;
   margin-left: 100px;
   background: linear-gradient(#e6c4ec, #be15d9)
 }
@@ -268,7 +268,7 @@
   height: 100px;
   border-radius: 50px;
   border: 1px solid #e70303;
-  animation: rotate3d2 17ms infinite;
+  animation: rotate3d2 1000ms infinite;
 }
 /* 眼睛的动效 */
 @keyframes rotate3d1{
@@ -311,7 +311,7 @@
 
 设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="circle">
@@ -326,7 +326,7 @@
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -422,14 +422,14 @@ text{
 
 matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置 了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="rect"> </div>
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container{
   background-color:#F1F3F5;
@@ -465,7 +465,7 @@ matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY
 
 transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放（scale），平移（translate），旋转（rotate）属性时的动画效果。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="rect1"></div>
@@ -476,7 +476,7 @@ transform可以设置多个值并且多个值可同时设置，下面案例中
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction:column;
diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md
index d33fd6ddfc..117047f3ad 100644
--- a/zh-cn/application-dev/ui/ui-js-component-tabs.md
+++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md
@@ -7,7 +7,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
 
 在pages/index目录下的hml文件中创建一个Tabs组件。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
     <tabs>
@@ -15,7 +15,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
             <text>item1</text>
             <text>item2</text>
         </tab-bar>
-        <tab-content>
+        <tab-content class="tabContent">
             <div class="text">
                 <text>content1</text>
             </div>
@@ -27,7 +27,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -35,6 +35,10 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
   align-items: center;
   background-color: #F1F3F5;
 }
+.tabContent{
+  width: 100%;
+  height: 100%;
+}
 .text{
   width: 100%;
   height: 100%;
@@ -50,7 +54,7 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快
 
 Tabs默认展示索引为index的标签及内容。通过设置vertical属性使组件纵向展示。
 
-```
+```html
 <!-- index.hml -->
 <div class="container" style="background-color:#F1F3F5;">
   <tabs index="1"  vertical="true">
@@ -74,7 +78,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
 
 设置mode属性使tab-bar的子组件均分，设置scrollable属性使tab-content不可进行左右滑动切换内容。
 
-```
+```html
 <!-- index.hml -->
 <div class="container" style="background-color:#F1F3F5;">
   <tabs style="margin-top: 30px;">
@@ -100,7 +104,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
 ## 设置样式
 
 设置Tabs背景色及边框和tab-content布局。
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <tabs class="tabs">
@@ -120,7 +124,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
@@ -155,7 +159,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
 
 开发者可以为Tabs添加change事件，实现页签切换后显示当前页签索引的功能。
 
-```
+```html
 <!-- index.hml -->
 <div class="container" style="background-color:#F1F3F5;">
   <tabs class="tabs" onchange="tabChange">
@@ -175,7 +179,7 @@ Tabs默认展示索引为index的标签及内容。通过设置vertical属性使
 </div>
 ```
 
-```
+```js
 /* index.js */
 import prompt from '@system.prompt';
 export default {
@@ -201,7 +205,7 @@ export default {
 
 用tabs、tab-bar和tab-content实现点击切换功能，再定义数组，设置属性。使用change事件改变数组内的属性值实现变色及下划线的显示。
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <tabs onchange="changeTabactive">
@@ -229,7 +233,7 @@ export default {
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container{
 width: 100%;
@@ -265,7 +269,7 @@ background-color:#F1F3F5;
 }
 ```
 
-```
+```js
 /* index.js */
 import prompt from '@system.prompt';
 export default {
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvas.md b/zh-cn/application-dev/ui/ui-js-components-canvas.md
index f1a8b53d97..e37d327d1e 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvas.md
+++ b/zh-cn/application-dev/ui/ui-js-components-canvas.md
@@ -9,7 +9,7 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
 在pages/index目录下的hml文件中创建一个Canvas组件。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas></canvas>
@@ -17,9 +17,11 @@ Canvas组件提供画布，用于自定义绘制图形。具体用法请参考[C
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -43,7 +45,7 @@ canvas{
 Canvas组件设置宽（width）、高（height）、背景色（background-color）及边框样式（border）。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas></canvas>
@@ -51,9 +53,11 @@ Canvas组件设置宽（width）、高（height）、背景色（background-colo
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -75,7 +79,7 @@ canvas{
 Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataURL方法返回的图片信息），打印在下方文本区域内。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1" onlongpress="getUrl"></canvas>
@@ -85,7 +89,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   width:100%;
@@ -112,7 +116,7 @@ Canvas添加长按事件，长按后可获取Canvas组件的dataUrl值（toDataU
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
diff --git a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
index 3865c41f1e..e73eed7f10 100644
--- a/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
@@ -9,7 +9,7 @@
 使用moveTo和lineTo画出一条线段，当使用closePath方法时会结束当前路径形成一个封闭图形 。设置quadraticCurveTo（二次贝赛尔曲线）或bezierCurveTo（三次贝赛尔曲线）的值组成图形。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1"></canvas>
@@ -24,9 +24,11 @@
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -47,7 +49,7 @@ select{
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -209,7 +211,7 @@ export default {
 
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1"></canvas>
@@ -222,11 +224,11 @@ export default {
 </div>
 ```
 
-
-
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -246,9 +248,7 @@ select{
 }
 ```
 
-
-
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -307,7 +307,7 @@ export default {
 添加createLinearGradient和createRadialGradient属性创建渐变容器，接着用addColorStop方法添加多个色块组成渐变色，再设置fillStyle为gradient将渐变色填充到矩形中，最后设置阴影的模糊级别（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffset）。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1"></canvas>
@@ -321,9 +321,11 @@ export default {
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -344,7 +346,7 @@ select{
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -432,7 +434,7 @@ export default {
 先创建文本，再用fillText方法把文字写在画布上。通过globalAlpha属性改变基线透明度，使基线不会挡住文字，再设置textAlign和textBaseline属性确定文字基于基线的位置。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1"></canvas>
@@ -445,9 +447,11 @@ export default {
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -468,7 +472,7 @@ select{
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -566,7 +570,7 @@ export default {
 创建图片对象后使用drawImage属性画出图片，给图片设置一些动画样式如scale（缩放）、translate（平移）或rotate（旋转）。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="content">
@@ -588,7 +592,7 @@ export default {
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -623,7 +627,7 @@ text{
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -742,7 +746,7 @@ export default {
 save方法可对画笔样式进行存储，restore可对存储的画笔进行恢复。如下面的示例，先设置画笔为红色，在保存画笔后对画布进行清除并改变画笔为蓝色，当我们直接使用画笔时会画出一个蓝色矩形，对存储的画笔进行恢复后就可画出红色矩形。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="content">
@@ -757,9 +761,11 @@ save方法可对画笔样式进行存储，restore可对存储的画笔进行恢
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
@@ -791,7 +797,7 @@ text{
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
diff --git a/zh-cn/application-dev/ui/ui-js-components-form.md b/zh-cn/application-dev/ui/ui-js-components-form.md
index c14e9d2df6..fad8a70d2a 100644
--- a/zh-cn/application-dev/ui/ui-js-components-form.md
+++ b/zh-cn/application-dev/ui/ui-js-components-form.md
@@ -10,7 +10,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 ## 创建Form组件
 
 在pages/index目录下的hml文件中创建一个Form组件。
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <form style="width: 100%; height: 20%">  
@@ -19,7 +19,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   width:100%;
@@ -37,7 +37,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 ## 实现表单缩放
 
 为Form组件添加click-effect属性，实现点击表单后的缩放效果，click-effect枚举值请参考[通用属性](../reference/arkui-js/js-components-common-attributes.md)。
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <form  id="formId" class="formClass" click-effect="spring-large">
@@ -53,7 +53,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 通过为Form添加background-color和border属性，来设置表单的背景颜色和边框。
 
 
-```
+```css
 /* xxx.css */
 .container {
   width: 100%;
@@ -79,7 +79,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 
 为Form组件添加submit和reset事件，来提交表单内容或重置表单选项。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <form onsubmit='onSubmit' onreset='onReset' class="form">
@@ -98,7 +98,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 </div>
 ```
 
-```
+```css
 /* index.css */
 .container{
   width: 100%;
@@ -118,7 +118,7 @@ Form是一个表单容器，支持容器内[Input](../reference/arkui-js/js-comp
 }
 ```
 
-```
+```js
 /* xxx.js */
 import prompt from '@system.prompt';
 export default{
@@ -145,7 +145,7 @@ export default{
 
 创建[Input](../reference/arkui-js/js-components-basic-input.md)组件，分别设置type属性为checkbox（多选框）和radio（单选框），再使用Form组件的onsubmit和onreset事件实现表单数据的提交与重置。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
    <form onsubmit="formSubmit" onreset="formReset">
@@ -180,9 +180,11 @@ export default{
 </div>
 ```
 
-```
+```css
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction:column;
   align-items:center;
   background-color:#F1F3F5;
@@ -197,7 +199,7 @@ label{
 }
 ```
 
-```
+```js
 /* xxx.js */
 import prompt from '@system.prompt';
 export default {
diff --git a/zh-cn/application-dev/ui/ui-js-components-grid.md b/zh-cn/application-dev/ui/ui-js-components-grid.md
index e622fc396f..afd87f8073 100644
--- a/zh-cn/application-dev/ui/ui-js-components-grid.md
+++ b/zh-cn/application-dev/ui/ui-js-components-grid.md
@@ -9,7 +9,7 @@
 在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/arkui-js/js-components-grid-row.md)子组件。
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
@@ -22,12 +22,13 @@
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -44,7 +45,7 @@
 grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" 
@@ -61,19 +62,20 @@ grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
 ```
 
 
-```
+```js
 // index.js
 import prompt from '@system.prompt';
 export default {
@@ -113,7 +115,7 @@ export default {
 创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
@@ -148,12 +150,13 @@ export default {
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -174,7 +177,7 @@ text{
 本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。
 
 
-```
+```html
 <!-- index.hml -->
 <div class="container">
   <refresh refreshing="{{fresh}}" onrefresh="refresh">
@@ -197,12 +200,13 @@ text{
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
 }
 text{
   color: #0a0aef;
@@ -211,7 +215,7 @@ text{
 ```
 
 
-```
+```js
 // index.js
 import prompt from '@system.prompt';
 export default {
diff --git a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
index ac829edabd..af61baaf3b 100644
--- a/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
+++ b/zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
@@ -4,7 +4,7 @@
 
 以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas1"></canvas>
@@ -23,9 +23,11 @@
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -45,7 +47,7 @@ select{
 }
 ```
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -89,7 +91,7 @@ export default {
 使用isPointInPath判断坐标点是否在路径的区域内，使用isPointInStroke判断坐标点是否在路径的边缘线上，并在页面上显示返回结果。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="content">
@@ -103,9 +105,11 @@ export default {
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -136,7 +140,7 @@ button{
 ```
 
 
-```
+```js
 // xxx.js
 export default {
   data: {
diff --git a/zh-cn/application-dev/ui/ui-js-components-path2d.md b/zh-cn/application-dev/ui/ui-js-components-path2d.md
index 2345c9123b..9c8dceb058 100644
--- a/zh-cn/application-dev/ui/ui-js-components-path2d.md
+++ b/zh-cn/application-dev/ui/ui-js-components-path2d.md
@@ -8,14 +8,14 @@
 
 创建Path2D，使用多条线段组合图形。
 
-```
+```html
 <!-- xxx.hml --> 
 <div class="container">
   <canvas ref="canvas"></canvas>
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -23,6 +23,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  height: 100%;
 }
 canvas{
   width: 600px;
@@ -32,7 +33,7 @@ canvas{
 }
 ```
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -81,7 +82,7 @@ export default {
 先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。
 
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <canvas ref="canvas"></canvas>
@@ -93,7 +94,7 @@ export default {
 ```
 
 
-```
+```css
 /* xxx.css */
 .container{
   flex-direction: column;
@@ -101,6 +102,7 @@ export default {
   align-items: center;
   justify-content: center;
   width: 100%;
+  height: 100%;
 }
 canvas{
   width: 600px;
@@ -128,7 +130,7 @@ text{
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 
diff --git a/zh-cn/application-dev/ui/ui-js-components-switch.md b/zh-cn/application-dev/ui/ui-js-components-switch.md
index db7de72007..b4b3770c5e 100644
--- a/zh-cn/application-dev/ui/ui-js-components-switch.md
+++ b/zh-cn/application-dev/ui/ui-js-components-switch.md
@@ -9,19 +9,17 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
 在pages/index目录下的hml文件中创建一个Switch组件。
 
 
-```
+```html
 <div class="container">
     <switch></switch>
 </div>
 ```
 
 
-```
+```css
 /* xxx.css */
 .container {
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   background-color: #F1F3F5;
 }
 ```
@@ -33,7 +31,7 @@ Switch为开关选择器，切换开启或关闭状态。具体用法请参考[S
 
   witch组件通过textoff和showtext属性设置文本选中和未选中时的状态。设置checked属性值为true（组件为打开状态）。添加change事件，当组件状态改变时触发，触发后执行switchChange函数获取组件当前状态（关闭/打开）。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
@@ -60,7 +58,7 @@ switch{
 ```
 
 
-```
+```css
 // xxx.js
 import prompt from '@system.prompt';
 export default {
@@ -92,7 +90,7 @@ export default {
 
   实现方法：创建Switch开关，设置checked属性为true，通过数据绑定改变收货地址。设置display属性（默认为none），当关闭开关改变display属性值为flex后显示地址模块，点击按钮改变颜色。
 
-```
+```html
 <!-- xxx.hml -->
 <div class="container">
   <div class="change">
@@ -111,7 +109,7 @@ export default {
 ```
 
 
-```
+```css
 /* xxx.css */
 .container {
   width: 100%;
@@ -166,7 +164,7 @@ switch{
 ```
 
 
-```
+```js
 // xxx.js
 import prompt from '@system.prompt';
 export default {
-- 
GitLab