这是一个基于纯 HTML5、CSS3 和 Vanilla JavaScript 构建的轻量级、中文版在线 HTML 代码编辑器。它完全运行在浏览器端，无需后端支持，非常适合快速测试、学习或演示 HTML/CSS 代码。 This is a lightweight, Chinese-language online HTML code editor built entirely with HTML5, CSS3, and Vanilla JavaScript. It runs purely on the client-side (browser) and requires no backend, making it an excellent tool for quick testing, learning, or demonstrating HTML/CSS code.

✨ 主要功能

• 多模式切换： 支持 编辑模式、预览模式 和 实时预览分屏模式。
• 实时预览 (Live Preview)： 在分屏模式下，代码修改会即时在右侧的预览区渲染。
• 代码缓存： 使用浏览器 localStorage 实现代码的本地暂存和加载，防止意外关闭丢失进度。
• 代码下载： 一键将编辑区的代码内容下载为 .html 文件。
• 清空功能： 快捷清空编辑区代码。

🚀 如何使用

• 只需下载本仓库中的 中文版html编辑器.html 文件。

• 使用任意现代浏览器（如 Chrome, Firefox, Edge 等）直接打开 该文件即可开始使用。*

  ---

✨ Main functions

• Multi-mode switching: Supports Edit mode, Preview mode and Live preview split screen mode.5
• Live Preview (Live Preview): In split-screen mode, code modifications are rendered instantly in the preview area on the right.
• 代码缓存： 使用浏览器 localStorage 实现代码的本地暂存和加载，防止意外关闭丢失进度。
• 代码下载： 一键将编辑区的代码内容下载为 .html 文件。
• 清空功能： 快捷清空编辑区代码。

🚀 如何使用*

• 只需下载本仓库中的 中文版html编辑器.html 文件。
• 使用任意现代浏览器（如 Chrome, Firefox, Edge 等）直接打开 该文件即可开始使用。

✨ Key Features

• Multi-Mode Switching: Supports Edit Mode, Preview Mode, and Live Preview Split Mode.
• Real-Time Preview (Live Preview): In split mode, code changes are instantly rendered in the adjacent preview iframe.
• Code Caching: Uses the browser's localStorage to temporarily save and load code drafts, helping prevent accidental loss of progress.
• Code Download: One-click functionality to download the current editor content as an .html file.
• Clear Function: Quickly clear all code from the editor area with a confirmation prompt.

🚀 How to Use

• Simply download the main file: 中文版html编辑器.html from this repository.

• Open the file directly using any modern web browser (Chrome, Firefox, Edge, etc.) to start using the editor immediately.

  ---

  ##💻 网页页面/web page

按钮	Button Text	功能介绍 (Function Description)
编辑模式	Edit Mode	Switches the interface to Edit Mode, hiding the preview panel and showing only the code editor.
预览模式	Preview Mode	Switches the interface to Preview Mode, hiding the code editor and showing only the rendered preview of the code. The preview is updated immediately upon switching.
实时预览分屏	Live Split Preview	Switches the interface to Live Split Preview Mode, showing both the code editor and the preview panel side-by-side. The preview updates in real-time as you type.
缓存 代码	Cache Code (Save)	Saves the current content of the editor to the browser's local storage (localStorage). This allows the code to persist even if the page is closed and reopened.
加载 缓存	Load Cache	Loads the saved code from the browser's local storage back into the editor. A confirmation prompt appears if the editor is not empty.
下载代码	Download Code	Downloads the current code content as a file named my_editor_code.html to your local machine.
清空代码	Clear Code	Clears the entire content of the editor after a confirmation prompt. This action is irreversible.

BE CAREFUL,You should click “of course”,Friend.