既能 HTML 在线预览，又能高亮对应、边看边学
这里不只是一个简单的在线预览：实时渲染、语法高亮、代码和预览双向联动，再加上说明系统，让你一眼看到哪段代码对应页面哪一块，并理解它在做什么。不管是排查样式还是学前端，本工具都兼顾「看」和「学」。
无需账号
浏览器里直接跑
学习者都在用
一个为「看」和「学」而做的在线预览工具
我们做这个工具，是希望有一个地方：既能看 HTML、CSS、JavaScript 的效果，又能看到代码和页面之间的对应关系，还能读一点说明、搞懂原理。所以它不只是「能预览」——点页面会高亮代码，点代码会高亮页面，再配合说明，很适合既想快速看效果又想认真学的人。
代码和预览同步，一目了然
打开本工具，左边是 HTML/CSS/JS 代码，右边是实时预览。点预览里的任意元素，对应代码会高亮；点代码某一行，预览里对应区域也会高亮。这种双向联动让你很快看清结构和样式是怎么对应的，别的工具很少把「看」和「学」结合得这么顺手。
说明系统再补一层：很多标签、属性、CSS 都会有一小段解释，告诉你它在干什么、对页面有什么影响。这样你不光是在做在线预览，还在顺带学代码含义。不管是看别人的片段还是练自己的写法，都能既看清效果又搞懂原理，这也是我们和普通预览工具不一样的地方。
试试本工具实时预览与高亮
本工具提供实时在线预览，并支持代码与预览双向高亮，方便逐元素查看和对照。
说明系统
在预览的同时，对标签、属性和 CSS 做简要说明，边看边学。
看与学一体
用本工具可以查看任意 HTML/CSS/JS，在游乐场里改一改、看效果，循序渐进学前端。
为什么选我们的 HTML 在线预览：能看、能高亮、能学
重点能力是双向高亮联动：点代码看效果、点预览定位到源代码。
双向高亮联动：点哪儿就对应到哪儿
我们的高亮是“代码 ↔ 预览”的对应关系：点击代码区某一行，预览中对应的元素会高亮；同样，点击预览区的某个元素，代码区会跳到并高亮对应行。小提示：当代码非常长时，从预览点击跳转到代码的滚动位置可能略有偏差，通常再往下滑几行就能准确看到那条高亮。
- 实时预览：在这里即时查看 HTML/CSS/JS 效果
- 双向高亮：点代码或点预览，工具都会同步高亮；当代码很长时，定位可能需要再向下滑动一点才能看到最精确的高亮行。
- 说明系统：在预览时学习标签与样式含义
- 无需注册：在浏览器里免费使用
Playground：几个常用功能说明
编辑模式与双向高亮
默认情况下，源代码与预览区会双向联动：点预览中的元素会高亮对应代码，点代码会高亮预览区域。需要连续修改或粘贴大段代码时，可点击「编辑」进入编辑模式；该模式下会暂时关闭高亮与跳转，方便专注输入。
格式化
「格式化」会对当前标签页（HTML / CSS / JavaScript）整理缩进与换行，使代码更易读，便于检查和分享。
全部展开 / 全部折叠
代码较长时，编辑器可折叠代码块。「全部展开」与「全部折叠」用于一键展开或收起所有折叠区域，便于快速浏览整份文件或聚焦某一段。
用户怎么说本工具
不少开发者和学习者用本工具查看代码、对照源码与效果、学前端，下面是他们的一些使用感受。
我特别需要能看到「这段代码对应页面哪一块」的工具，这里正好满足：高亮对应还有说明。我每天拿它看片段、学 CSS，是目前用过最适合既看又学的工具。
张明
前端开发
"说明系统让本工具很实用，我可以一边看效果一边搞懂每个标签和样式在干什么，对学生党特别友好。"
李悦
学生 / 使用约 4 个月
"我经常用本工具看教程里的 HTML/CSS，双向高亮很顺手：点页面就能看到对应代码，查看和学习都方便。"
王帆
设计师 / 使用约 2 个月
"终于有一个不只能「预览」的工具了，可以看、可以高亮、可以读说明，在一个地方搞懂 HTML 和 CSS 怎么配合。"
陈小萌
入门学习者 / 使用约 3 个月
HTML 在线预览常见问题
马上用本工具
在浏览器里打开本工具，查看 HTML、CSS、JavaScript 的实时效果，带高亮和说明，无需注册，打开即看、即学。
