!7077 update docs

Merge pull request !7077 from 关明月/cherry-pick-1658720767

zh-cn/application-dev/reference/arkui-js/js-components-common-animation.md

@@ -75,6 +75,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  margin: 150px;
 }
 .rect{
   width: 200px;
@@ -90,7 +91,7 @@
   }
   /* 可以通过百分比指定动画运行的中间状态 */
   50% {    
-  background-color: \#f76160;    
+  background-color: #f76160;    
   transform:translate(100px) rotate(60deg) scale(1.3);  
   }  
   to {

zh-cn/application-dev/ui/js-framework-syntax-hml.md

@@ -24,7 +24,12 @@ HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组
   <text> {{content[1]}} </text>
 </div>
 ```
-
+```
+/*xxx.css*/
+.container{
+    margin: 200px;
+}
+```
 ```
 // xxx.js
 export default {
@@ -42,6 +47,7 @@ export default {
 >
 > - hml文件中的js表达式不支持ES6语法。
 
+![zh-cn_image_0000001118642003](figures/zh-cn_image_0000001118642003.png)
 
 ## 普通事件绑定
 
@@ -120,6 +126,7 @@ export default {
   }
   ```
 
+![zh-cn_image_0000001118642002](figures/zh-cn_image_0000001118642002.gif)
 
 ## 冒泡事件绑定<sup>5+</sup>
 
@@ -200,7 +207,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
 
 ```
 <!-- xxx.hml -->
-<div class="array-container">
+<div class="array-container" style="flex-direction: column;margin: 200px;">
   <!-- div列表渲染 -->
   <!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
   <div for="{{array}}" tid="id" onclick="changeText">
@@ -252,6 +259,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
 >
 > - tid不支持表达式。
 
+![zh-cn_image_0000001118642001](figures/zh-cn_image_0000001118642001.gif)
 
 ## 条件渲染
 
@@ -297,6 +305,8 @@ export default {
 }
 ```
 
+![zh-cn_image_0000001118642004](figures/zh-cn_image_0000001118642004.gif)
+
 优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。
 
 ```
@@ -335,6 +345,8 @@ export default {
 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
 > 禁止在同一个元素上同时设置for和if属性。
 
+![zh-cn_image_0000001118642005](figures/zh-cn_image_0000001118642005.gif)
+
 ## 逻辑控制块
 
 &lt;block&gt;控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。
@@ -367,6 +379,8 @@ export default {
 }
 ```
 
+![zh-cn_image_0000001118642006](figures/zh-cn_image_0000001118642006.png)
+
 ## 模板引用
 
 HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。

zh-cn/application-dev/ui/js-framework-syntax-js.md

@@ -184,7 +184,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
 2. 通过$element获取DOM元素
    ```
    <!-- index.hml -->
-   <div class="container">
+   <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>
    ```
@@ -213,6 +213,8 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
    };
    ```
 
+![zh-cn_image_0000001118642007](figures/zh-cn_image_0000001118642007.gif)
+
 ## 获取ViewModel
 
 根节点所在页面：
@@ -237,6 +239,8 @@ export default {
 }
 ```
 
+![zh-cn_image_0000001118642008](figures/zh-cn_image_0000001118642008.png)
+
 自定义parent组件：
 
 ```
@@ -272,7 +276,7 @@ export default {
 <!-- child.hml -->
 <div class="item" onclick="textClicked">
   <text class="text-style" onclick="childClicked">child component clicked</text>
-  <text class="text-style" if="{{show}}">hello child component</text>
+  <text class="text-style" if="{{isShow}}">hello child component</text>
 </div>
 ```
 
@@ -280,11 +284,11 @@ export default {
 // child.js
 export default {
   data: {
-    show: false,
+    isShow: false,
     text: 'I am child component!',
   },
   childClicked () {
-    this.show = !this.show;
+    this.isShow = !this.isShow;
     console.info('child component get parent text');
     console.info('${this.$parent().text}');
     console.info('child component get root text');
@@ -292,3 +296,5 @@ export default {
   },
 }
 ```
+
+![zh-cn_image_0000001118642009](figures/zh-cn_image_0000001118642009.gif)
\ No newline at end of file