diff --git a/app/src/assets/scss/component/_chip.scss b/app/src/assets/scss/component/_chip.scss
index df880e418..ad528809a 100644
--- a/app/src/assets/scss/component/_chip.scss
+++ b/app/src/assets/scss/component/_chip.scss
@@ -6,6 +6,14 @@
   .b3-chip {
     margin: 4px;
   }
+
+  &__doctag {
+    padding: 0;
+
+    .b3-chip {
+      margin: 0 8px 8px 0;
+    }
+  }
 }
 
 .b3-chip {
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index f7d05c9f7..afb356e15 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -284,10 +284,6 @@
   &__action {
     transition: opacity 150ms linear;
     opacity: 0;
-
-    .b3-button {
-      margin-top: 8px;
-    }
   }
 
   &__icon {
@@ -301,7 +297,7 @@
     font-family: var(--b3-font-family-emoji);
     z-index: 1;
     position: relative;
-    margin-top: -40px;
+    margin-top: -48px;
     margin-bottom: 8px;
 
     img, svg {
@@ -318,6 +314,7 @@
 
   &__img {
     width: 100%;
+    margin-bottom: 8px;
 
     img {
       object-fit: cover;
diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 74efd7faf..0ef507ea8 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -16,6 +16,7 @@ import {Constants} from "../../constants";
 import {assetMenu} from "../../menus/protyle";
 import {previewImage} from "../preview/image";
 import {Menu} from "../../plugin/Menu";
+import {escapeHtml} from "../../util/escape";
 
 const bgs = [
     "background:radial-gradient(black 3px, transparent 4px),radial-gradient(black 3px, transparent 4px),linear-gradient(#fff 4px, transparent 0),linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),#fff;background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;",
@@ -124,7 +125,7 @@ export class Background {
 </div>
 <div class="protyle-background__ia">
     <div class="protyle-background__icon" data-menu="true" data-type="open-emoji"></div>
-    <div class="b3-chips fn__none"></div>
+    <div class="b3-chips b3-chips__doctag fn__none"></div>
     <div class="protyle-background__action">
         <button class="b3-button b3-button--cancel" data-menu="true" data-type="tag">
             <svg><use xlink:href="#iconTags"></use></svg>
@@ -443,11 +444,11 @@ export class Background {
             let html = "";
             const colors = ["secondary", "primary", "info", "success", "warning", "error", "pink"];
             tags.split(",").forEach((item, index) => {
-                html += `<div class="b3-chip b3-chip--middle b3-chip--pointer b3-chip--${colors[index % 7]}" data-type="open-search">${item}<svg class="b3-chip__close" data-type="remove-tag"><use xlink:href="#iconCloseRound"></use></svg></div>`;
+                html += `<div class="b3-chip b3-chip--middle b3-chip--pointer b3-chip--${colors[index % 7]}" data-type="open-search">${escapeHtml(item)}<svg class="b3-chip__close" data-type="remove-tag"><use xlink:href="#iconCloseRound"></use></svg></div>`;
             });
-            this.tagsElement.innerHTML = `${html}<span class="fn__space"></span>
+            this.tagsElement.innerHTML = `${html}
 <div class="protyle-background__action fn__flex-center">
-    <button class="b3-button b3-button--cancel" style="margin-top: 0" data-menu="true" data-type="tag"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addTag}</button>
+    <button class="b3-button b3-button--cancel" style="margin-bottom: 8px" data-menu="true" data-type="tag"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addTag}</button>
 </div>`;
             this.tagsElement.classList.remove("fn__none");
             this.actionElements[0].classList.add("fn__none");
@@ -491,6 +492,12 @@ export class Background {
             this.actionElements[2].classList.remove("fn__none");
             this.iconElement.style.marginTop = "8px";
         }
+
+        if (img || icon) {
+            this.iconElement.parentElement.style.marginTop = ""
+        } else {
+            this.iconElement.parentElement.style.marginTop = "8px"
+        }
     }
 
     private openTag(protyle: IProtyle, target: HTMLElement) {
@@ -513,7 +520,7 @@ export class Background {
                 }, (response) => {
                     let html = "";
                     response.data.tags.forEach((item: string, index: number) => {
-                        html += `<div class="b3-list-item b3-list-item--narrow${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
+                        html += `<div class="b3-list-item b3-list-item--narrow${index === 0 ? " b3-list-item--focus" : ""}">${escapeHtml(item)}</div>`;
                     });
                     listElement.innerHTML = html;
                 });
@@ -544,13 +551,13 @@ export class Background {
                         let searchHTML = "";
                         let hasKey = false;
                         response.data.tags.forEach((item: string) => {
-                            searchHTML += `<div class="b3-list-item b3-list-item--narrow">${item}</div>`;
+                            searchHTML += `<div class="b3-list-item b3-list-item--narrow">${escapeHtml(item)}</div>`;
                             if (item === `<mark>${response.data.k}</mark>`) {
                                 hasKey = true;
                             }
                         });
                         if (!hasKey && response.data.k) {
-                            searchHTML = `<div class="b3-list-item b3-list-item--narrow"><mark>${response.data.k}</mark></div>` + searchHTML;
+                            searchHTML = `<div class="b3-list-item b3-list-item--narrow"><mark>${escapeHtml(response.data.k)}</mark></div>` + searchHTML;
                         }
                         listElement.innerHTML = searchHTML;
                         listElement.firstElementChild.classList.add("b3-list-item--focus");
diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts
index b73e141c1..277e7cc57 100644
--- a/app/src/protyle/ui/initUI.ts
+++ b/app/src/protyle/ui/initUI.ts
@@ -178,11 +178,8 @@ export const setPadding = (protyle: IProtyle) => {
         protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px;margin-right:${right}px`);
     }
     if (protyle.options.render.title) {
-        /// #if MOBILE
+        // pc 端 文档名 attr 过长和添加标签等按钮重合
         protyle.title.element.style.margin = `16px ${right}px 0 ${left}px`;
-        /// #else
-        protyle.title.element.style.margin = `5px ${right}px 0 ${left}px`;
-        /// #endif
     }
     if (window.siyuan.config.editor.displayBookmarkIcon) {
         const editorAttrElement = document.getElementById("editorAttr");
diff --git a/app/src/search/util.ts b/app/src/search/util.ts
index 7fa8202f2..0cd4cca6f 100644
--- a/app/src/search/util.ts
+++ b/app/src/search/util.ts
@@ -1392,13 +1392,13 @@ export const inputEvent = (element: Element, config: Config.IUILayoutTabSearchCo
 export const getAttr = (block: IBlock) => {
     let attrHTML = "";
     if (block.name) {
-        attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span class="b3-list-item__hinttext">${block.name}</span></span>`;
+        attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span class="b3-list-item__hinttext">${escapeHtml(block.name)}</span></span>`;
     }
     if (block.alias) {
-        attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span class="b3-list-item__hinttext">${block.alias}</span></span>`;
+        attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span class="b3-list-item__hinttext">${escapeHtml(block.alias)}</span></span>`;
     }
     if (block.memo) {
-        attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span class="b3-list-item__hinttext">${block.memo}</span></span>`;
+        attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span class="b3-list-item__hinttext">${escapeHtml(block.memo)}</span></span>`;
     }
     return attrHTML;
 };