# HTML在线编辑器 (www.htmleditor.cn)

## 网站简介
HTML在线编辑器是一个免费的在线HTML/CSS代码编辑工具，支持实时预览、语法高亮、代码模板和一键下载。无需安装，在浏览器中即可编写和预览网页代码。

## 核心功能
- 实时预览：编辑代码时右侧窗口同步显示效果
- 语法高亮：基于CodeMirror的HTML/CSS/JS/JSON/SQL/Markdown语法着色
- 15+代码模板：提供空白页面、Bootstrap卡片、登录表单等多种模板
- 设备预览：支持桌面/平板/手机三种预览尺寸
- 代码格式化：一键整理代码缩进
- 自动保存：编辑内容自动保存到浏览器本地存储
- 全屏编辑：沉浸式编码体验
- 一键下载：保存为独立的HTML文件
- 查找替换：支持Ctrl+F查找和Ctrl+H替换功能
- 字体调节：可调节编辑器字体大小
- 内容分享：通过URL分享代码内容
- 行号显示：可切换编辑器行号显示
- 主题切换：深色/浅色编辑主题
- 拖拽导入：拖拽文件到编辑器自动导入
- 40+在线工具：编码转换、代码压缩、代码格式化、开发辅助、SEO工具等

## 使用场景
- 前端开发快速原型制作
- HTML/CSS/JS学习练习
- 网页片段测试和调试
- 代码分享和演示
- Web前端性能优化

## 技术栈
- 后端：Go + Gin框架
- 编辑器：CodeMirror 5
- 前端：原生JavaScript
- 样式：Bootstrap 5 + Font Awesome

## 在线编辑器
- HTML在线编辑器：https://www.htmleditor.cn
- CSS在线编辑器：https://www.htmleditor.cn/css-editor
- JS在线编辑器：https://www.htmleditor.cn/js-editor
- Markdown在线编辑器：https://www.htmleditor.cn/markdown-editor
- JSON在线编辑器：https://www.htmleditor.cn/json-editor
- Markdown预览工具：https://www.htmleditor.cn/markdown-live
- 文本编辑器：https://www.htmleditor.cn/text-editor
- 富文本编辑器：https://www.htmleditor.cn/rich-text-editor

## 代码格式化工具
- JSON格式化：https://www.htmleditor.cn/json-formatter
- SQL格式化：https://www.htmleditor.cn/sql-formatter
- CSS格式化：https://www.htmleditor.cn/css-formatter
- 代码美化工具：https://www.htmleditor.cn/code-beautifier
- HTML表格生成器：https://www.htmleditor.cn/html-table-generator

## 编码转换工具
- Base64编码解码：https://www.htmleditor.cn/base64-encoder
- URL编码解码 ：https://www.htmleditor.cn/url-encoder
- HTML实体编码：https://www.htmleditor.cn/html-encoder
- 字母大小写转换：https://www.htmleditor.cn/case-converter
- HEX/ASCII转换：https://www.htmleditor.cn/hex-ascii-converter
- JWT解码：https://www.htmleditor.cn/jwt-decoder
- JSON转CSV：https://www.htmleditor.cn/json-to-csv

## 代码优化工具
- HTML压缩：https://www.htmleditor.cn/html-minifier
- CSS压缩：https://www.htmleditor.cn/css-minifier
- JS压缩：https://www.htmleditor.cn/js-minifier
- HTML验证：https://www.htmleditor.cn/html-validator

## CSS工具
- CSS渐变生成器：https://www.htmleditor.cn/css-gradient
- CSS阴影生成器：https://www.htmleditor.cn/css-shadow
- Border Radius生成器：https://www.htmleditor.cn/border-radius
- 颜色转换工具：https://www.htmleditor.cn/color-tools
- 配色方案生成器：https://www.htmleditor.cn/color-palette
- CSS单位转换：https://www.htmleditor.cn/css-unit-converter
- CSS Flexbox布局生成器：https://www.htmleditor.cn/css-flexbox
- CSS Grid布局生成器：https://www.htmleditor.cn/css-grid
- CSS动画生成器：https://www.htmleditor.cn/css-animation
- CSS盒子模型可视化：https://www.htmleditor.cn/css-box-model
- CSS文字阴影生成器：https://www.htmleditor.cn/css-text-shadow
- WCAG颜色对比度检测：https://www.htmleditor.cn/color-contrast
- 色盲模拟工具：https://www.htmleditor.cn/color-blindness-simulator

## 开发辅助工具
- 正则表达式测试：https://www.htmleditor.cn/regex-tester
- 文本差异对比：https://www.htmleditor.cn/diff-checker
- JSON数据对比：https://www.htmleditor.cn/json-diff
- Image to Base64转换：https://www.htmleditor.cn/image-to-base64
- QR码生成器：https://www.htmleditor.cn/qr-code-generator
- HTTP请求测试：https://www.htmleditor.cn/http-request-builder
- 占位图片生成：https://www.htmleditor.cn/placeholder-image
- HTML转图片：https://www.htmleditor.cn/html-to-image

## SEO与设计工具
- Meta标签生成器：https://www.htmleditor.cn/meta-tag-generator
- Favicon生成器：https://www.htmleditor.cn/favicon-generator
- HTML邮件测试器：https://www.htmleditor.cn/email-tester
- 色盲模拟工具：https://www.htmleditor.cn/color-blindness-simulator
- YAML在线编辑器：https://www.htmleditor.cn/yaml-editor
- XML格式化工具：https://www.htmleditor.cn/xml-formatter
- Cron表达式生成器：https://www.htmleditor.cn/cron-generator
- CSS变量生成器：https://www.htmleditor.cn/css-variables
- UserAgent解析器：https://www.htmleditor.cn/user-agent
- HTTP状态码查询：https://www.htmleditor.cn/http-status
- 代码语法高亮工具：https://www.htmleditor.cn/code-highlight
- JSON Schema生成器：https://www.htmleditor.cn/json-schema
- 正则表达式可视化：https://www.htmleditor.cn/regex-visual
- 数字进制转换器：https://www.htmleditor.cn/base-converter

## 实用工具
- 密码生成器：https://www.htmleditor.cn/password-generator
- UUID生成器：https://www.htmleditor.cn/uuid-generator
- 时间戳转换：https://www.htmleditor.cn/timestamp-converter
- Lorem Ipsum生成器：https://www.htmleditor.cn/lorem-ipsum

## 学习资源
- 开发博客：https://www.htmleditor.cn/blog
- HTML速查表：https://www.htmleditor.cn/html-cheatsheet
- CSS速查表：https://www.htmleditor.cn/css-cheatsheet
- JS速查表：https://www.htmleditor.cn/js-cheatsheet
- Git速查表：https://www.htmleditor.cn/git-cheatsheet
- TypeScript速查表：https://www.htmleditor.cn/typescript-cheatsheet
- Node.js速查表：https://www.htmleditor.cn/nodejs-cheatsheet
- React速查表：https://www.htmleditor.cn/react-cheatsheet
- Vue速查表：https://www.htmleditor.cn/vue-cheatsheet
- HTML入门指南：https://www.htmleditor.cn/blog/html-basics-guide
- CSS布局教程：https://www.htmleditor.cn/blog/css-layout-techniques
- JS基础教程：https://www.htmleditor.cn/blog/javascript-fundamentals
- HTML编辑器使用指南：https://www.htmleditor.cn/blog/html-editor-guide
- 开发工具推荐：https://www.htmleditor.cn/blog/web-development-tools
- 前端性能优化实践：https://www.htmleditor.cn/blog/optimizing-web-performance
- 响应式设计指南：https://www.htmleditor.cn/blog/responsive-web-design
- Web无障碍指南：https://www.htmleditor.cn/blog/web-accessibility-guide
- CSS Grid指南：https://www.htmleditor.cn/blog/css-grid-layout
- Flexbox指南：https://www.htmleditor.cn/blog/flexbox-guide
- ES6+新特性：https://www.htmleditor.cn/blog/javascript-es6-features
- SEO优化指南：https://www.htmleditor.cn/blog/seo-best-practices
- Web性能优化：https://www.htmleditor.cn/blog/web-performance-optimization
- HTML5语义标签：https://www.htmleditor.cn/blog/html5-semantic-tags
- CSS动画指南：https://www.htmleditor.cn/blog/css-animations-guide
- Git入门到精通：https://www.htmleditor.cn/blog/git-essentials

## 其他页面
- 关于我们：https://www.htmleditor.cn/about
- 隐私政策：https://www.htmleditor.cn/privacy
- 服务条款：https://www.htmleditor.cn/terms
- 联系我们：https://www.htmleditor.cn/contact
- 在线工具集：https://www.htmleditor.cn/tools
- 站点地图：https://www.htmleditor.cn/sitemap.xml

## 最后更新
2026-07-14