diff --git a/pages.json b/pages.json
index 3a9eb28c584a3153a183a2babf69a7b6fc164c7b..bcfb5ee918b5a244056f89ca2629e4ba9370af3f 100644
--- a/pages.json
+++ b/pages.json
@@ -1452,9 +1452,9 @@
     },
     // #ifdef WEB
     {
-      "path": "pages/template/browser-canvas/browser-canvas",
+      "path": "pages/template/browser-element/browser-element",
       "style": {
-        "navigationBarTitleText": "如何使用浏览器 canvas"
+        "navigationBarTitleText": "如何使用浏览器 element"
       }
     },
     // #endif
diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index b91cb9e55ac74e8abf830e201a64bbd5d887c01e..500277d0500270a77671d682c08700d63abba20c 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -203,9 +203,9 @@
           // #endif
           // #ifdef WEB
           {
-            id: 'browser-canvas',
-            url: 'browser-canvas',
-            name: '如何使用浏览器 canvas',
+            id: 'browser-element',
+            url: 'browser-element',
+            name: '如何使用浏览器 element',
             open: false,
             pages: [] as Page[],
           },
diff --git a/pages/template/browser-element/browser-element.uvue b/pages/template/browser-element/browser-element.uvue
new file mode 100644
index 0000000000000000000000000000000000000000..ad5d1bfae72c8e0f4d76a2590547d0e289f64972
--- /dev/null
+++ b/pages/template/browser-element/browser-element.uvue
@@ -0,0 +1,48 @@
+<template>
+  <view class="page">
+    <page-head :title="title"></page-head>
+    <view class="page-body">
+      <!-- 如何使用浏览器内置 element -->
+      <text>使用浏览器内置的 a 标签</text>
+      <view ref="html-element-area"></view>
+
+      <text class="html-tips">HTML语法</text>
+      <text class="html-tips-link">{{linkTips}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: '浏览器 element',
+        linkTips: `<a href="https://doc.dcloud.net.cn/uni-app-x/" target="uni-app-x">uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎</a>`
+      }
+    },
+    onReady() {
+      const element = this.$refs['html-element-area'] as HTMLElement;
+      const linkElement = document.createElement('a') as HTMLLinkElement;
+      linkElement.href = 'https://doc.dcloud.net.cn/uni-app-x/';
+      linkElement.innerText = 'uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎';
+      linkElement.setAttribute('target', "uni-app-x");
+      element.appendChild(linkElement);
+    }
+  }
+</script>
+
+<style>
+  .page {
+    padding: 15px;
+  }
+
+  .html-tips {
+    margin-top: 15px;
+  }
+
+  .html-tips-link {
+    font-size: 12px;
+    margin-top: 5px;
+    opacity: .7;
+  }
+</style>