HTML在线预览与运行
粘贴HTML代码或打开.html文件，边写边看页面效果。CSS和JavaScript可以分别写在单独的标签页里，可按手机、平板和笔记本宽度查看布局，在预览下方查看控制台输出和报错，还会列出未闭合标签、重复id、图片缺少alt等问题。代码可以格式化、压缩、下载，或生成分享链接。预览运行在沙箱中，与本站完全隔离。
免费 · 无需注册
使用方法
- 把HTML粘贴到输入框、打开.html文件，或加载示例。
- 如有CSS或JavaScript，分别填入对应标签页。
- 查看预览，切换手机或平板宽度，并查看控制台。
- 修正代码检查中的问题，然后下载、复制或分享。
为什么使用这个工具
实时预览
边输入边更新，HTML、CSS和JavaScript分标签页编辑。
手机和平板宽度
按375、768或1280像素宽度查看，测试响应式布局。
控制台
console.log输出、警告和JavaScript报错显示在预览下方。
代码检查
找出未闭合标签、重复id、缺少alt、缺少title等问题，并标出行号。
格式化和压缩
整理缩进方便阅读，或去掉空白和注释减小体积。
安全沙箱
代码在与本站隔离的框架中运行，不会上传到任何地方。
怎么查看HTML文件的效果
浏览器能直接打开.html文件，但只能看到结果。在这里可以同时看到代码和页面，改动立即生效，浏览器悄悄修正的错误也能被发现。用“打开文件”导入，或粘贴通过Ctrl+U看到的网页源代码。
前端入门练习
学习HTML和CSS时，最重要的是马上看到每个标签、每条样式的作用。加载简单网页示例，改一改颜色或标题，看看效果。代码检查会用通俗的话解释初学者常犯的错误。无需安装编辑器，手机和平板上也能练习。
检查邮件模板和网页代码片段
企业邮箱签名、营销邮件模板通常用表格和内联样式写成。粘贴代码即可查看效果，在手机宽度下检查排版，并找出缺少alt的图片（邮件客户端屏蔽图片时会显示alt文字）。压缩时会保留Outlook的条件注释。
准备贴到网站后台或建站平台的HTML片段，也可以先在这里预览，避免未闭合标签打乱整个页面。
代码检查包括
- 未闭合或闭合顺序错误的标签。
- 重复的id和重复的属性。
- 缺少alt的图片、缺少noopener的新窗口链接。
- 完整页面缺少doctype、lang、charset、viewport或title。
- 标题级别跳级和多个h1。
- center、font、marquee等已废弃标签。
常见问题
粘贴别处的HTML安全吗？
安全。预览在沙箱中运行，无法读取本站的Cookie和存储。也可以关闭“运行JavaScript”。
代码会上传到服务器吗？
不会。一切都在浏览器中完成。分享链接把代码放在链接本身里，服务器上不保存任何内容。
为什么电脑里的图片和样式显示不出来？
img/logo.png这样的相对路径指向你电脑里的文件，预览无法读取。请使用完整的https://地址，或把CSS粘贴到CSS标签页。
能看手机上的效果吗？
能。选择“手机”即按375像素宽度显示，也可以选平板和笔记本。记得加上viewport meta标签。
中文显示乱码怎么办？
在head中加入<meta charset="utf-8">。用GBK编码保存的旧文件，请另存为UTF-8后再打开。
支持PHP或Vue、React吗？
只运行原生HTML、CSS和JavaScript。PHP需要服务器，Vue或React需先构建，或通过CDN脚本引入。
相关工具
想开发什么吗？
告诉我们你想构建什么。
告诉我们您需要构建什么：从简单的网站到完整应用、AI 解决方案、自动化或定制系统都可以。