如何使用 HtmlDrag：匯入、編輯、最佳化和匯出 HTML

本指南遵循從起始材料到最終 HTML 結果的真實工作流程。了解如何匯入現有頁面、捕獲公共 URL、使用 AI 精修、將支援的文件轉換為可編輯的 HTML、進行視覺化編輯以及保存、分享或匯出您的作品。

⚡ 關鍵事實概覽與 4 步驟快速入門（HtmlDrag 工作流程）

1. 核心目的：現有 HTML、AI 產生的程式碼和即時網頁的視覺化「最後一哩路」編輯器。無需重寫程式碼，只需拖放、編輯副本、調整佈局以及直觀地交換圖像即可。
2. 4 步驟快速入門工作流程: 步驟1 匯入 (上傳 HTML / 貼上程式碼 / 複製網頁 / AI 創建) → 步驟 2 視覺細化 （雙擊複製，拖曳元素，在右側面板自訂表格和樣式）→ 步驟 3 針對性的 AI 改進 （選擇特定元素並提示AI進行本地化編輯，無需全頁重新生成）→ 步驟 4 獨立於平台的匯出 （下載純粹的、可用於生產的 HTML 程式碼，零供應商鎖定）。
3. 五種核心匯入方法: • 複製網頁 （將公開網頁擷取到可編輯專案中）； • 上傳 HTML （將本機 .html 檔案拖放到畫布中）； • 貼上程式碼 （來自 ChatGPT/Claude/v0 的 AI 程式碼的即時視覺渲染）； • AI 精修 （對現有頁面進行提示驅動的在地化編輯）； • 檔案轉 HTML （將文件和影像轉換為可編輯的版面配置）。
4. 零供應商鎖定：匯出的項目仍然是 100% 標準 HTML/CSS。隨時部署到您自己的伺服器、Vercel、Netlify 或直接整合到您的程式碼庫中。

1.將內容引入HtmlDrag

選擇與您現有的材料相符的起始路徑。上傳 HTML 並貼上程式碼開啟現有頁面進行視覺化編輯；複製網頁抓取公共網頁； AI 精修 對匯入的頁面進行針對性編輯；檔案轉 HTML 將受支援的文件和圖像轉換為可編輯的 HTML 草稿。

1.1 家庭工作區

主工作區將主要的起始內容集中在一起：用於現有 HTML 的 HTML 編輯器、用於對匯入頁面進行有針對性更改的 AI 優化，以及用於從來源材料生成可編輯頁面的文件到 HTML。選擇與您的起點相符的項目，然後在編輯器或預覽工作區中繼續。

1.2 複製網頁

複製網頁捕獲公共網頁並將結果轉換為可編輯的項目。當您有實時參考頁面但沒有其原始 HTML 文件時，它非常有用。

輸入公用 URL

打開 複製網頁，貼上公共 http:// 或者 https:// 地址，然後按一下 複製。不支援專用網路位址、本機檔案路徑和需要專用登入的頁面。

複製網頁：貼上公用網頁位址並開始克隆

查看捕獲的頁面

擷取完成後，在預覽或編輯器工作區中查看頁面。外部資產、受保護的圖像或純 JavaScript 內容可能無法準確複製；如果結果不完整，請貼上渲染的 HTML 或上傳原始 HTML。

1.3 上傳HTML

使用 上傳 HTML 當你已經有一個 .html 或者 .htm 文件並希望進行視覺更改而不從頭開始重建頁面。

選擇現有的 HTML 文件

選擇 上傳 HTML，然後按一下或拖曳 HTML 檔案到上傳區域。來源頁面仍然是編輯器的起點； HtmlDrag 不會將頁面變成靜態螢幕截圖。

上傳 HTML：選擇或拖曳現有 .html 或 .htm 文件

檢查匯入結果

在安全性檢查和解析步驟之後，打開預覽或編輯器並在編輯之前驗證佈局、文字、圖像、連結和外部資源。

1.4 貼上程式碼

使用 貼上程式碼 當 HTML 位於程式碼助理、本機編輯器、電子郵件或其他瀏覽器標籤中。

貼上渲染的 HTML

將完整的 HTML 貼到程式碼區域，包括頁面所需的結構和樣式，然後按一下 開啟編輯器。如果頁面是由 AI 工具產生的，請貼上您想要進行視覺優化的版本，而不是頁面的描述。

貼上程式碼：插入 HTML 原始碼並在編輯器中開啟它

查看資源與安全注意事項

HtmlDrag 在打開匯入的內容之前檢查它。查看有關腳本、本機資源、外部字體或封鎖嵌入的任何警告，並確認頁面在編輯器中看起來仍然正確。

1.5 AI 精修

AI 精修 用於透過集中說明更改現有頁面。從上傳的 HTML 頁面、貼上的程式碼或捕獲的 URL 開始，然後告訴 AI 要更改哪些內容，而不要求它重建頁面的不相關部分。

AI 優化：選擇現有頁面作為目標編輯的來源

開啟優化工作區

選擇 AI 精修 條目並等待頁面預覽載入。工作區將說明區域保留在頁面旁邊，以便您可以選擇需要注意的確切內容。

AI細化：正在處理所選頁面

選擇變更範圍

使用 點選選擇 對於單一元素或 區域選擇 對於一個地區。當頁面需要更多空間可供選擇時，您也可以進入全螢幕模式。然後在提示框中描述所要求的更改，例如修改選定的副本、替換影像或調整對焦的視覺區域。

AI細化：標記指令應影響的元素

查看並繼續編輯

結果準備好後，將更新後的預覽與原始頁面進行比較。如果更改正確，請在編輯器中開啟它以進行進一步的視覺化編輯；如果不夠精確，請縮小選擇範圍或重寫指令，而不是更改不相關的元素。

AI 優化：查看結果，然後在編輯器中開啟或預覽

1.6 AI 檔案轉為可編輯 HTML

檔案轉 HTML 從來源材料建立可編輯的 HTML 頁面。當起點是 PDF、Word 文件、PPT/PPTX 簡報、Excel/XLSX 電子表格、CSV、Markdown 或文字檔案或圖像而不是現有 HTML 時，它非常有用。

文件到 HTML：從文件、電子表格、簡報或圖像開始

上傳原始檔

打開 檔案轉 HTML，附加來源文件，並添加描述您要建立的內容的簡短說明。提示可以指定頁面目的、受眾、基調、結構或視覺方向。

文件到 HTML：附加來源文件並描述您想要的頁面

等待內容整理完畢

HtmlDrag 先讀取來源資料，辨識其內容層次結構，並規劃頁面佈局。長文件、表格、幻燈片和圖像可能需要不同的時間來處理。

文件到 HTML：原始碼被組裝成 HTML 頁面

文件到 HTML：系統正在組織層次結構、佈局和元件

查看可編輯結果

頁面準備好後，查看預覽並選擇 AI 精修, 在編輯器中開啟, 分享， 或者 下載 HTML 根據需要。輸出是一個可編輯的 HTML 頁面，可以繼續執行相同的視覺化編輯工作流程。

文件到 HTML：產生的 HTML 頁面可供檢視和編輯

2. 視覺化編輯器核心功能

HtmlDrag 的核心是一個功能強大的所見即所得編輯器，可讓您直接在真實的 HTML 環境中工作，無需進行程式碼編輯。

2.1 編輯器介面概述

視覺化編輯器結合了畫布、導航、右側控制面板以及儲存或匯出操作。所選元素在畫布上勾勒出輪廓，而右側面板則顯示適用於目前選擇的控制項。

視覺化編輯器工作區：選擇一個元素，對其進行調整，然後儲存或匯出項目

左側導航和歷史記錄

左側導覽在主工作區和已儲存的工作區之間切換。用它來返回主頁條目學分或開啟現有項目。

中心畫布區

畫布顯示匯入或產生的 HTML 頁面。直接選擇元素，在頁面複雜時使用選擇工具，在需要更多空間時使用縮放或全螢幕控制項。

右面板（編輯/組件/圖層/庫）

右側面板包含用於編輯所選元素、插入元件、在圖層清單中定位元素以及重複使用資料庫中儲存的元件的控制項。

頂部和底部操作

頂部區域提供項目標題、共享、圖像和 HTML 匯出操作。底部控制項提供預覽、還原、刷新和儲存版本操作。

2.2 基本操作及選擇

編輯器支援直接選擇、區域選擇、全螢幕審查、集中編輯。從涵蓋您想要進行的更改的最小選擇開始。

選擇視圖：在應用重點變更之前查看所選元素

元素識別

使用 點選選擇 選擇頁面上的一個元素。編輯器概述了元素並在選擇狀態下顯示其標籤或內容。

區域選擇和全螢幕

使用 區域選擇 當幾個附近的元素屬於同一視覺區域時。使用 全螢幕 當頁面需要更多空間來選擇、檢視或優化複雜佈局。

全螢幕選擇：在複雜頁面上使用更多空間

拖曳模式和編輯模式

使用拖曳模式重新定位所選元素，使用編輯模式變更文字或支援的元素內容。右側控制項根據目前選擇進行更新。

鎖定、隱藏和刪除元素

使用元素控制項或上下文功能表鎖定元素以防止意外編輯、在查看佈局時隱藏它或從目前 HTML 中刪除它。刪除前確認選擇；當您需要返回到先前的狀態時，請使用撤銷或恢復。

內容選單

右鍵單擊選定的元素以存取快速操作，例如複製、貼上、將元素新增至庫、編輯連結、圖層操作、鎖定、隱藏和刪除。

多選

當需要一起檢查或調整多個元素時，請使用多重選擇。在應用變更之前檢查所選元素列表，如果不受影響，則從選擇中刪除項目。

2.3 畫布快捷鍵

掌握鍵盤快速鍵可以顯著提升您的編輯效率。以下是畫布區域支援的主要快捷鍵：

2.4 右側面板-編輯選項卡

「編輯」標籤是最常用的區域，提供模式切換和豐富的樣式調整工具。選擇元素後，面板會根據元素類型智慧顯示編輯選項。

編輯標籤：模式切換和樣式工具

模式切換

面板頂部提供了四個模式開關來控制編輯器互動行為。每個開關都可以獨立開啟或關閉，並有訊息通知指示當前狀態。

提示： 編輯時預設停用連結導覽，以便進行元件編輯。若要開啟連結，請在編輯面板中啟用「連結導覽」開關。編輯模式也會封鎖表單提交，以保護你的內容。

文字樣式

選擇文字元素或進入編輯模式後，面板會顯示綜合文字樣式工具，其中包含以下格式選項：

文字樣式：字體、大小、顏色設定

元素樣式

選擇任何元素後，使用元素樣式工具調整其外觀：

圖像風格

選擇影像元素後，調整顯示選項並取代影像：

桌子樣式

選擇表格或表格儲存格後，可以使用專用的表格編輯工具。詳細說明請參見 4.10 表格編輯。

表格樣式：行/列操作、邊框和儲存格設置

連結編輯

將點擊導航連結新增至任何元素，或編輯現有連結：

對齊工具（多選）

當選擇多個元素時，面板會顯示對齊和分佈工具，以幫助您快速組織元素佈局：

2.5 右面板 - 組件選項卡

「組件」標籤提供各種元素類型的快速插入選項，幫助您快速為畫布新增內容。按一下按鈕插入對應的組件。

組件選項卡：一鍵插入各種元素

2.6 右面板 - 圖層標籤（DOM 樹）

「圖層」標籤提供了畫布上所有可編輯元素的清單視圖，支援過濾、批次操作和精確定位——管理複雜頁面元素的強大工具。

圖層選項卡：圖層管理和批次操作

元素卡列表

此面板將所有可管理元素顯示為卡片。每張卡片都顯示元素的標籤類型（例如 DIV、IMG、SPAN）和圖層級別，並帶有顯示內容預覽的文字元素。裝飾層元素標有“裝飾”徽章。快速鎖定/解鎖和隱藏/顯示圖示出現在每張卡片的右側。

過濾器選項

按一下篩選器按鈕可按元素狀態篩選列表，並具有以下選項：

批量操作

選擇卡片清單中的多個元素後，使用批次操作按鈕進行統一處理：

精密切換

「圖層」標籤提供了精確切換來控制元素辨識的準確性：

點擊卡片即可定位

點擊任意元素卡，畫布會自動捲動並突出顯示相應的元素，方便快速定位頁面上的特定元件。這在處理複雜或分層的頁面佈局時特別有用。

2.7 右側面板 - 庫選項卡（收藏夾）

「庫」標籤是您的個人元件庫，您可以在其中保存常用的元素或元件，以便在不同的專案中重複使用，從而提高您的創作效率。

庫選項卡：個人元件庫

最喜歡的組件列表

此面板將所有已儲存的元件顯示為卡片，每個元件都顯示縮圖和名稱。儲存時自動產生縮圖；未命名的元件顯示為「無標題」。

搜尋收藏夾

使用搜尋框可以按名稱快速尋找已儲存的元件。當您鍵入時，清單會即時過濾。

插入最喜歡的組件

按一下庫卡上的「插入」按鈕，將該元件新增至目前畫布。插入的元件可以正常編輯和調整。

重新命名/刪除收藏夾

每張圖書卡都提供「重新命名」和「刪除」選項。重新命名讓以後更容易找到元件；刪除會永久刪除已儲存的元件－請謹慎使用。

如何新增到庫

選擇畫布上的任何元素，然後從上下文選單中選擇“新增至庫”以將該元素及其子元素儲存為元件。成功時會出現「已新增至庫」確認訊息。

2.8 右鍵選單

右鍵點選選定的元素可開啟上下文選單，從而可以快速存取常用操作。選單內容根據所選元素類型動態調整。

上下文選單：快速存取常用操作

特定於餐桌的菜單

右鍵單擊表格單元格時，選單會顯示其他特定於表格的操作：

2.9 表格編輯

選擇表格或表格儲存格後，右側面板會顯示專用的表格編輯工具，具有全面的表格樣式和結構調整功能。

表格編輯：行/列操作和樣式設定

列和列操作

表格編輯器面板的「行和列」部分提供：

合併/拆分單元格

選擇多個相鄰儲存格後，使用「合併儲存格」將它們合併為一個。對於合併的儲存格，使用「分割儲存格」將其還原為原始的多個儲存格。

單元對齊

設定單元格內容在二維上的對齊方式：

邊框樣式

自訂表格邊框外觀，包括：

點選“應用”儲存變更。

細胞背景

使用顏色選擇器設定儲存格背景顏色 - 非常適合突出顯示標題或重要資料行。

2.10 縮放控制和視窗預設

畫布底部的縮放控制器提供縮放和視窗大小調整，幫助您在不同的裝置尺寸下預覽您的作品。

縮放控制：調整畫布縮放和視窗大小

放大/縮小/重置

使用“+”和“−”按鈕放大或縮小畫布視圖，或按住 Ctrl/Cmd + 滑鼠滾輪快速縮放。按一下百分比數字可重設為預設縮放。按住空白鍵並拖曳以平移畫布。

視口尺寸預設

點選視窗選擇器可在預覽尺寸之間切換，模擬不同裝置上的顯示：

預覽補丁

對於具有特殊結構的 HTML 頁面，可以使用三個預覽補丁來優化顯示。啟用或停用補丁將自動儲存並刷新預覽：

提示： 如果修補程式沒有明顯效果，請先嘗試「還原初始 HTML」，再重新啟用修補程式。

2.11 HTML 原始碼編輯器

HTML 編輯器可讓您直接檢視和編輯作品的完整 HTML 原始碼，非常適合需要微調或新增自訂程式碼的進階使用者。此功能僅限專業版。

HTML 編輯器：直接編輯原始碼（專業版）

查看/編輯完整 HTML

當您開啟 HTML 編輯器時，將顯示完整的 HTML 原始碼（包括 <!DOCTYPE html>）。可以直接編輯程式碼；儲存應用您的變更。

搜尋和替換

使用Ctrl+F開啟查找，輸入關鍵字即可快速定位代碼。使用Ctrl+H開啟replace進行批次文字替換。工具列顯示匹配計數（例如“3 / 15”），並提供單獨或全部替換選項。

前往線路

使用 Ctrl+G 或工具列跳轉功能輸入行號並快速導覽至該行 - 對於大型 HTML 檔案非常有用。

火柴盒

在搜尋過程中啟用「區分大小寫」選項以精確匹配區分大小寫的內容。

自動換行

啟用自動換行後，長程式碼行會自動換行以便查看，無需水平捲動。

複製/保存

按一下「複製 HTML」將完整的原始程式碼複製到剪貼簿。編輯後，按一下儲存以套用變更。如果內容為空或包含語法錯誤，則會顯示相應的訊息。

注意： 如果 HTML 內容超出儲存空間限制，儲存時會顯示「儲存空間不足，無法儲存此編輯內容」。請刪除不必要的內容，或升級方案以增加容量。

2.12 底部工具列

底部工具列提供編輯器的核心操作按鈕，包括預覽、撤銷/重做、恢復和儲存功能。

編輯器工作區：用於預覽、恢復、刷新和保存版本的底部控件

預覽（在新視窗中開啟）

點擊預覽按鈕可在新視窗中開啟您作品的完整預覽，展示實際的顯示結果。預覽頁面會顯示臨時預覽通知，提醒使用者這是帶有不可重複使用的連結的編輯階段預覽。

撤銷/重做

撤銷恢復上一次操作；重做恢復撤銷的操作。支援多個撤銷/重做步驟。也可透過 Ctrl+Z（取消）和 Ctrl+Y（重做）使用。

刷新預覽

點擊刷新將重新載入預覽區域。系統首先儲存目前內容，然後重新整理畫布以顯示最新狀態。在進行大量編輯後同步顯示很有用。

恢復上次儲存的狀態

將工作恢復到上次手動儲存的狀態。所有未儲存的編輯都將遺失 - 請謹慎使用。執行前系統會提示確認。

恢復初始 HTML

將作品的 HTML 恢復到首次建立時的原始狀態。所有編輯歷史記錄都將被清除。此操作不可逆轉 - 確保您已備份重要內容。

節省

手動儲存所有當前變更。系統還支援自動儲存，但建議重要編輯後手動儲存，以確保資料安全。完成後出現「儲存成功」。

2.13 頂部工具列

頂部工具列顯示工作資訊和快速操作按鈕，提供快速存取共用和下載功能。

編輯器工作區：用於 HTML 下載、圖片匯出和共用的頂部控件

項目標題（雙擊編輯）

頂部顯示目前項目標題；雙擊標題區域進入編輯模式並變更名稱。標題不能為空；成功時會出現「標題已成功更新」。未命名的項目顯示為「無標題作品」。

分享按鈕

點擊共享按鈕以啟用工作共享並產生可存取的連結。看 4.16 分享功能 了解詳情。此功能僅限專業版。

下載按鈕

右側提供「下載為圖片」和「下載為 HTML」按鈕。看 4.15 匯出和下載 HTML 了解詳情。

3. 專案管理、分享與匯出

編輯後，匯出乾淨的 HTML 文件，產生帶有密碼的安全預覽鏈接，或在專案工作區中管理專案版本。

3.1 匯出和下載 HTML

使用 下載 HTML 匯出您在編輯器中審閱的版本。匯出對話方塊將編輯的頁面與原始來源分開，還提供複製和 AI 切換選項。

匯出 HTML：選擇編輯或原始來源、複製 HTML 或將其傳送到 AI

編輯後的 HTML

這 編輯後的 HTML 選項卡匯出目前版本，包括在畫布上所做的變更。

原始 HTML

這 原始 HTML 當您需要比較或還原起始版本時，標籤會保留初始匯入的來源可用。

複製 HTML 並匯出到 AI

複製 HTML 將目前來源複製到剪貼簿。 匯出到人工智慧 建立一個交接鏈接，以便另一個 AI 工作流程可以讀取當前的 HTML 並從編輯的結果繼續。

3.2 分享功能和公開預覽

共享功能為當前作品創建公共鏈接，以便其他人無需進入編輯器即可查看它。下面的螢幕截圖顯示了發布連結之前可用的共享設定。此功能可供專業版用戶使用。

共享項目：選擇連結持續時間並決定顯示哪些通知或側邊欄

選擇共享設定

點選 分享 並選擇可用的期限，例如 7 天、30 天、90 天或計劃的剩餘期限。共享連結的有效期限不能超過計劃到期日。

顯示選項

您可以選擇是否隱藏安全性提示以及是否隱藏共用頁面的右側側邊欄。這些選項會影響訪客視圖，而不影響專案中的可編輯來源。

共享頁面和訪問

分享後，複製產生的連結並發送給審查者或客戶。當頁面不再公開時，您可以返回共用控制項以更新連結或停止共用。

3.3 我的專案快速欄

左側「我的項目」快捷欄可讓您展開/折疊項目清單並快速切換項目，方便多個創作之間的平滑過渡。

展開和折疊

點選左上角的「我的專案」按鈕，展開側邊欄工作清單。再次點選或點選側邊欄外部可將其折疊。展開後，您可以直觀地瀏覽歷史項目的縮圖和標題。

切換項目

點擊清單中的任何項目卡即可立即將其內容載入到編輯器中。這使您可以快速比較和修改不同的設計稿，而無需返回主頁或個人資料。

3.4 版本歷史快照

在左側邊欄中，「我的專案」（歷史記錄）可讓您快速存取您過去的創作。它按時間順序列出了您的所有編輯記錄。

快速選擇和編輯

按一下清單中的任何記錄可將其快速載入到編輯器中並從上次中斷的位置繼續，無需重新匯入。

預覽視窗詳細信息

將滑鼠懸停在歷史記錄上以查看其預覽視窗。在預覽視窗中，您可以：

1. 直接編輯標題：點選標題文字可立即修改項目名稱。
2. 查看共享狀態：圖示指示目前是否共享該作品。
3. 快速行動：存取編輯、刪除等捷徑。

歷史：快速預覽和管理過去的項目

3.5 專案管理與組織

專案管理模組顯示您建立的所有項目，支援檢視、編輯、分享、刪除操作。

工作清單和過濾器

項目以卡片或清單的形式顯示。您可以使用以下方法過濾它們：

1. 搜尋：輸入工作代碼或職稱進行搜尋
2. 類型過濾器：透過AI生成器、文件上傳、複製網頁、程式碼貼上等過濾。
3. 日期範圍：選擇開始和結束日期以過濾特定期間的項目
4. 排序方式：按最新的優先、最舊的優先、喜歡數或查看數排序

專案管理：檢視、過濾和管理所有項目

查看和編輯項目

點擊項目卡上的“查看”按鈕進行預覽。在預覽介面中，您可以：

1. 編輯項目標題（雙擊標題進行編輯）
2. 點選「編輯」進入視覺化編輯器繼續編輯
3. 查看作品的保存歷史並恢復到特定版本

共享狀態管理

專業用戶可以共享項目，允許其他人透過連結查看：

1. 啟用共享：點擊“分享”按鈕，生成分享鏈接，有效期7天
2. 更新分享：已經分享的項目可以更新鏈接，刷新有效期
3. 停止分享：點擊“停止分享”，連結立即失效

刪除項目

點擊項目卡上的“刪除”按鈕將其刪除。系統將顯示兩個確認對話方塊以防止誤刪除：

1. 第一次確認：詢問是否要刪除作品
2. 第二次確認：提醒您刪除不可逆

提示： 一次最多可刪除 3 筆記錄。刪除作品後，其佔用的儲存空間會被釋放。

專案頁面是您查看和管理所有創作的專用空間。從側邊欄或使用者選單快速存取它。

作品展示

該頁面將您的所有項目顯示為卡片，每個項目包含：

1. 縮圖預覽：作品的視覺預覽，以便快速識別
2. 項目名稱：顯示項目名稱，點選可編輯
3. 創建時間：記錄作品創作時間
4. 分享狀態：顯示目前是否共享該作品

項目：在一個地方查看和管理您的所有創作

快速行動

每個項目卡提供方便的操作按鈕：

1. 編輯：進入視覺化編輯器繼續創建
2. 分享：產生或管理共享連結（僅限專業版）

4. 系統提示與故障排除

在使用過程中，您可能會遇到系統警報或限制。以下是常見系統提示的解釋和建議。

4.1 HTML 偵測和盜鏈警報

為了確保匯入品質和編輯器穩定性，系統會自動掃描 URL 和文件，提醒您潛在的問題。

本地資源偵測

如果頁麵包含本機路徑（例如， file:// 或者 C:/），資源將無法載入。 建議：確保所有資源都使用公共 HTTP/HTTPS 連結。

圖片盜鏈保護

有些網站會阻止外部存取圖像。 建議：使用「替換圖像」上傳本機檔案或將其託管在公共服務上。

動態渲染頁 (SPA)

完全依賴 JavaScript (SPA) 的頁面可能會匯入為空或不完整，因為動態 DOM 不是直接捕獲的。 建議：透過從瀏覽器複製呈現的 HTML 來使用「貼上程式碼」。

外部字體/圖示庫

缺少 CORS 標題的字體或圖示可能會顯示不正確。 建議：在編輯器中將其替換為系統字體或庫圖示。

嵌入內容（iframe）

為了安全起見，某些 iframe 內容可能會被阻止或非互動。系統會盡可能保留佔位符。

4.2 儲存和使用限制

HtmlDrag 會根據您的方案應用資源配額。您可能會看到「已達到儲存限制」或「已達到工作限制」警報。

已達到儲存限制

空間不足時，您無法儲存編輯或上傳檔案。 解決方案:

1. 刪除“項目”中的舊項目以釋放空間。
2. 點擊對話方塊中的「立即升級」即可獲得 Pro 的更多容量。

項目數量限制

免費用戶對保存的項目數量有限制。刪除舊項目或升級以增加此限制。

圖片上傳限制

系統檢查單一檔案大小和批次限制。如果您看到“檔案大小超出限制”或“超出批次大小”，請壓縮圖片或以較小的批次上傳。專業用戶享有更高的限額。

4.3 安全沙箱與清理

內建安全掃描會在匯入 URL、上傳檔案或貼上程式碼時自動評估內容風險，以保護您的帳戶。

風險等級

根據 XSS、惡意腳本或危險標籤等威脅，風險分為：

1. 低風險：輕微警告；通常可以安全地繼續。
2. 中等風險：潛在問題；謹慎行事。
3. 高風險：嚴重風險；僅當來源可信時才繼續。
4. 嚴重風險：包含惡意軟體或網路釣魚內容；立即被封鎖。

安全模式

對於有一定風險的文件，系統提供“安全措施”，例如自動清理。您可以選擇“在安全模式下繼續”，系統將刪除危險程式碼，同時保留佈局和可編輯性。

4.4 系統通知和訊息

訊息模組接收重要的系統通知，包括帳戶狀態、付款提醒、訂閱到期警報和功能更新。

訊息：接收系統通知和警報

系統訊息列表

訊息清單按時間順序排序，顯示標題、摘要、建立時間和過期時間。按一下訊息以查看詳細資訊或執行操作（例如「繼續付款」、「立即續訂」）。

未讀過濾器

勾選右上角的「僅未讀」方塊可快速過濾未讀訊息，幫助您專注於重要通知。

全部標記為已讀

按一下「全部標記為已讀」按鈕可立即將目前清單中的所有郵件標記為已讀，並清除紅點指示器。

留言詳情

按一下訊息卡可查看完整的通知內容。對於訂單或訂閱訊息，詳細資訊通常包括快速操作按鈕，以方便您使用。

4.5 回饋與支持

如果您遇到問題或有建議，請透過回饋模組提交。您可以上傳圖片以更好地描述您的問題。

回饋：提交問題或建議

回饋清單和狀態

此清單顯示您的提交歷史記錄和當前狀態：

1. 進行中：回饋已提交，等待管理員審核。
2. 已回覆：管理員已回覆；點擊查看。
3. 關閉：回饋已存檔或已解決；不允許進一步回應。

提交新回饋

點擊“新回饋”，輸入您的內容（必填，最少 10 個字元）。您可以「上傳圖像」（每張最大 2MB）來提供螢幕截圖。完成後點選「提交回饋」。

回饋詳情和對話

按一下清單項目以查看完整的對話記錄，包括您的訊息和管理員回覆。頂部顯示反饋 ID 和附件。

繼續回覆

對於「正在進行」或「已回覆」回饋，請使用底部的輸入框提供更多資訊或回覆管理員直到解決。

提交回饋時，你可以新增相關截圖或檔案，幫助我們更好地理解你的需求。你也可以在回饋詳情頁查看管理員的回覆與對話紀錄，方便追蹤處理進度。

我們重視每一則回饋，並會盡快處理。感謝你的參與與支援！

5. 帳戶、積分和訂閱（附錄）

管理您的帳戶設定、登入安全性、信用餘額和訂閱方案。

5.1 註冊

HtmlDrag 使用電子郵件註冊。只需填寫一些基本詳細資料即可建立您的帳戶。註冊成功後，您將自動登入並重新導向至主頁。

信箱註冊

在註冊頁面上，完成以下步驟來建立您的帳戶：

1. 輸入電子郵件：提供您常用的電子郵件地址。這將作為您的登入憑證和通知管道。確保電子郵件格式正確，例如 [email protected]。
2. 設定密碼：密碼必須同時包含字母和數字，長度為8-32個字元。我們建議使用強密碼來保護您的帳戶。
3. 確認密碼：重新輸入密碼以確保兩次輸入匹配。
4. 設定暱稱（可選）：您可以自訂您的暱稱。如果留空，系統會自動為您產生預設暱稱。
5. 同意條款：勾選“我已閱讀並同意服務條款和隱私權政策”，然後點擊“註冊”按鈕完成註冊。

註冊頁面：輸入郵箱和基本資訊建立帳戶

電子郵件驗證和信用獎勵

註冊成功後，系統將會向您的收件匣發送一封驗證郵件。完成電子郵件驗證後，您將收到可用於 AI 產生器和複製網頁功能的獎勵積分。如果您沒有收到電子郵件，請檢查您的垃圾郵件資料夾；您可以在 3 分鐘後點擊「重新發送」請求另一封驗證電子郵件。

提示： 完成電子郵件驗證不僅可獲得額外積分，還能解鎖完整功能並提升帳戶安全性。

5.2 登入

HtmlDrag 支援多種登入方法。根據您的喜好選擇最方便的選項。

電子郵件和密碼登入

使用您註冊時使用的電子郵件和密碼登入：

1. 在登入頁面輸入您的電子郵件地址
2. 輸入您的密碼（點擊眼睛圖示可切換密碼可見性）
3. 點擊“繼續”按鈕完成登入

成功登入後，您將自動重定向到可以開始建立的主頁。

第三方登入（Google / GitHub）

為了更快地訪問，您可以使用 Google 或 GitHub 帳戶登入：

1. 使用 Google 登入：點選「使用 Google 登入」按鈕。在 Google 授權彈出視窗中，選擇您的帳戶並確認授權。
2. 使用 GitHub 登入：點選「使用 GitHub 登入」按鈕。您將被重新導向到 GitHub 的授權頁面。確認後，您將自動返回HtmlDrag。

登入頁面：支援電子郵件/密碼和第三方帳戶

提示： 使用 Google 或 GitHub 登入會自動建立帳戶，不需要另外註冊。首次使用第三方服務登入時，系統會自動建立關聯帳戶。

忘記密碼連結

如果您忘記了密碼，請點選「忘記密碼？」登入頁面右下角的連結以進入密碼重設流程（請參閱第 1.3 節）。

5.3 忘記和重置密碼

如果您忘記了密碼，可以使用電子郵件驗證碼重設密碼。整個過程在一個頁面上完成，無需重定向。

重置密碼流程

請依照以下步驟重設您的密碼：

1. 輸入電子郵件：提供您註冊時使用的電子郵件地址
2. 取得驗證碼：點選“發送代碼”按鈕。系統將發送一封包含6位驗證碼的電子郵件
3. 輸入驗證碼：在驗證碼欄位中輸入您收到的6位代碼
4. 設定新密碼：輸入您的新密碼（必須包含字母和數字，長度8-32個字元）
5. 確認新密碼：重新輸入新密碼以確保它們匹配
6. 點擊“重設密碼”：完成密碼重置。看到成功訊息後，您將自動重定向到登入頁面

忘記密碼：透過信箱驗證碼重置

驗證碼有效性

驗證碼有有效期限，請收到郵件後及時使用。如果代碼已過期，您可以按一下「重新傳送」按鈕來要求新代碼（您需要等待倒數結束才能重新傳送）。

注意： 如果你的電子郵件尚未註冊到系統，將無法寄送驗證碼。請確認輸入的是註冊時使用的電子郵件地址。

5.4 設定檔設定

個人資料設定模組可讓您管理基本帳戶訊息，包括頭像、暱稱、電子郵件、個人簡介和密碼設定。

更改頭像

點選頭像區域的「更換頭像」按鈕，選擇本機圖片檔案上傳。系統會自動裁剪並儲存您的新頭像。

更改暱稱

按一下暱稱旁邊的編輯按鈕，輸入新名稱，然後按一下「儲存」。您的暱稱將顯示在您的所有項目和評論中。

電子郵件管理

電子郵件部分顯示您目前的電子郵件地址和驗證狀態：

1. 已驗證：您的電子郵件已驗證，所有功能均可使用
2. 未驗證：點擊「發送驗證郵件」完成驗證並賺取獎勵積分
3. 更改電子郵件：您需要先驗證您目前的郵箱，然後輸入新的郵箱地址即可完成更改

簡介

在個人簡介區輸入您的自我介紹（建議：不超過200個字元），然後點擊「儲存」進行更新。

更改密碼/設定密碼

點選「更改密碼」按鈕，開啟密碼設定對話框：

1. 具有現有密碼的用戶：輸入目前密碼，然後設定新密碼（8-32個字符，包括字母和數字）
2. 沒有密碼的用戶：直接設定新密碼。設定完成後，即可使用信箱和密碼登入

刪除帳戶

若要刪除您的帳戶，請點擊頁面底部的「刪除帳戶」按鈕。為了安全起見，您需要透過電子郵件驗證碼驗證您的身分。

注意： 提交刪除申請後，帳戶會進入保留期間（通常為 30 天），期間內無法登入。保留期結束後，系統會永久刪除你的作品、積分與歷史記錄。

個人資料：管理頭像、暱稱、電子郵件和密碼

5.5 儲存使用

儲存使用量模組顯示您帳戶的儲存消耗情況，幫助您了解剩餘空間並相應地規劃您的創作。

儲存概述

頂部部分顯示您的整體使用情況，包括：

1. 用過的：目前使用的儲存空間
2. 全部的：您帳戶的儲存限制（專業版用戶享受更大的容量）
3. 其餘的：用於建立新專案的可用空間
4. 儲存的項目：目前保存的項目數量和限制

儲存細分

系統將儲存分為三種類型：

1. HTML 內容：您專案的網頁程式碼所佔用的空間
2. 圖片資源：上傳圖片檔案所佔用的空間
3. 其他資源：其他附件使用的空間

項目數量限制

免費版和專業版用戶有不同的工作計數限制。當達到限制時，您需要刪除一些項目或升級您的計劃，然後再建立新項目。

儲存刷新和升級

按一下刷新按鈕更新儲存資訊。如需更多儲存空間，請按一下「升級儲存」以存取定價頁面並選擇適當的方案。

提示： 如果帳戶儲存空間已滿或作品數量達到上限，系統會暫停建立新作品。請刪除部分作品或升級方案，以恢復上傳權限。

5.6 積分和使用歷史

信用記錄模組顯示您帳戶的信用交易歷史，包括消費和收益記錄。

信用交易記錄

信用記錄顯示在包含以下資訊的表格中：

1. 日期：信用變更發生時
2. 類型：信用變更的操作類型
3. 學分變更：增加的學分（正）或扣除的學分（負）
4. 描述：變更的詳細說明

您可以使用日期範圍篩選器來查看特定時間段內的記錄。

信用類型

1. 人工智慧生成器：使用AI生成器功能時消耗的積分
2. 複製網頁：使用複製網頁功能時消耗的積分
3. 報名獎勵：註冊並驗證電子郵件後向新用戶授予積分
4. 平台獎金：平台贈送的積分
5. 每月禮物：專業用戶的每月信用額度
6. 信用儲值：透過信用購買獲得的信用
7. 管理調整：由管理員手動調整的積分

信用記錄：查看信用交易明細

提示： Pro 使用者每月會獲得額外積分。積分可用於 AI 生成器、複製網頁等付費功能。

5.7 訂單歷史記錄和計費

訂單歷史模組顯示您的購買記錄和付款記錄，方便查詢和管理訂單。

訂單管理

訂單清單顯示您的購買記錄。你可以：

1. 查看訂單狀態和詳細信息
2. 使用過濾器快速找到特定訂單
3. 繼續支付待處理訂單
4. 關閉或刪除您不再需要的訂單

提示： 如果遇到付款問題，可以關閉目前的訂單並建立新訂單。

5.8 定價和訂閱計劃

定價頁面是您管理訂閱和積分充值的地方。選擇最適合您的計劃並釋放更多創意可能性。

訂閱計劃

HtmlDrag 提供 Pro 和 Pro Max 訂閱方案。訂閱後，您可以在有效訂閱期間內使用包含的權益：

專業版：適合需要完整 HTML 編輯、AI 生成、分享和匯出工作流程的普通創作者。

專業最大：適用於較重的 AI 創建、較大的項目和較高的使用限制。

訂閱根據結帳時顯示的計費週期續約。您可以透過您的帳戶或付款提供者管理或取消續約。

定價：選擇最適合您的計劃

儲值積分

如果您只需要暫時使用AI產生或複製網頁功能，可以選擇儲值積分。購買的積分永遠不會過期，並且您可以在積分不足時隨時充值，無需等待。

特性比較

免費版和專業版的主要差異如下：

信用使用指南

每一代人工智慧都會消耗固定數量的積分。免費用戶可以獲得基本的每月獎勵積分，而專業用戶可以獲得更多。購買的積分永遠不會過期，並且您可以在積分不足時隨時充值，無需等待配額恢復。

開始使用 HtmlDrag

從現有 HTML 頁面、公共 URL、AI 優化提示或支援的文件開始。 HtmlDrag 可協助您從來源資料轉向視覺化編輯、可分享預覽或乾淨的 HTML 匯出。

立即開始創作

本指南涵蓋 HTML 上傳、程式碼貼上、複製網頁、AI 優化、檔案轉 HTML、文字和圖像編輯、表格、元件、圖層、連結、鎖定和刪除元素、保存、共享和 HTML 匯出。