既能 HTML 在线预览，又能高亮对应、边看边学
这里不只是一个简单的在线预览：实时渲染、语法高亮、代码和预览双向联动，再加上说明系统，让你一眼看到哪段代码对应页面哪一块，并理解它在做什么。不管是排查样式还是学前端，本工具都兼顾「看」和「学」。
无需账号
浏览器里直接跑
学习者都在用
一个为「看」和「学」而做的在线预览工具
我们做这个工具，是希望有一个地方：既能看 HTML、CSS、JavaScript 的效果，又能看到代码和页面之间的对应关系，还能读一点说明、搞懂原理。所以它不只是「能预览」——点页面会高亮代码，点代码会高亮页面，再配合说明，很适合既想快速看效果又想认真学的人。
代码和预览同步，一目了然
打开本工具，左边是 HTML/CSS/JS 代码，右边是实时预览。点预览里的任意元素，对应代码会高亮；点代码某一行，预览里对应区域也会高亮。这种双向联动让你很快看清结构和样式是怎么对应的，别的工具很少把「看」和「学」结合得这么顺手。
说明系统再补一层：很多标签、属性、CSS 都会有一小段解释，告诉你它在干什么、对页面有什么影响。这样你不光是在做在线预览，还在顺带学代码含义。不管是看别人的片段还是练自己的写法，都能既看清效果又搞懂原理，这也是我们和普通预览工具不一样的地方。
实时预览与高亮
本工具提供实时在线预览，并支持代码与预览双向高亮，方便逐元素查看和对照。
说明系统
在预览的同时，对标签、属性和 CSS 做简要说明，边看边学。
看与学一体
用本工具可以查看任意 HTML/CSS/JS，在游乐场里改一改、看效果，循序渐进学前端。
为什么选我们的 HTML 在线预览：能看、能高亮、能学
本工具提供一整套能力：实时预览、语法高亮、代码与预览双向联动、说明系统。你可以查看任意 HTML/CSS/JS，精确看到哪段代码对应哪块效果，并通过说明理解原理。无论你是想快速做一次预览排查页面，还是想系统学前端，这里都适用。
语法高亮 + 双向联动，一处全搞定
本工具对 HTML、CSS、JavaScript 做语法高亮，阅读代码更轻松。点击代码某行，预览里对应部分会高亮；点击预览里某个元素，代码会跳到并高亮对应行。这样在预览时，既能看清结构，又能理解标记和样式如何映射到页面，查看和学习都在同一处完成。
- 实时预览：在这里即时查看 HTML/CSS/JS 效果
- 双向高亮：点代码或点预览，工具都会同步高亮
- 说明系统：在预览时学习标签与样式含义
- 无需注册：在浏览器里免费使用
怎么用本工具
查看与检查 HTML
把任意 HTML（以及可选的 CSS/JS）粘贴进本工具即可查看效果，用高亮看清哪段代码对应哪个元素，无需离开浏览器即可完成查看与检查。
学 HTML、CSS、JS
把本工具当学习工具：改代码、看预览、读说明，把「写的」和「看到的」连起来，通过查看和试错来学习。
调试与试错
当效果和预期不符时，用本工具看实时效果并反向定位到代码，高亮和说明帮你快速找到问题、边改边学。
用户怎么说本工具
不少开发者和学习者用本工具查看代码、对照源码与效果、学前端，下面是他们的一些使用感受。
我特别需要能看到「这段代码对应页面哪一块」的工具，这里正好满足：高亮对应还有说明。我每天拿它看片段、学 CSS，是目前用过最适合既看又学的工具。
张明
前端开发
"说明系统让本工具很实用，我可以一边看效果一边搞懂每个标签和样式在干什么，对学生党特别友好。"
李悦
学生 / 使用约 4 个月
"我经常用本工具看教程里的 HTML/CSS，双向高亮很顺手：点页面就能看到对应代码，查看和学习都方便。"
王帆
设计师 / 使用约 2 个月
"终于有一个不只能「预览」的工具了，可以看、可以高亮、可以读说明，在一个地方搞懂 HTML 和 CSS 怎么配合。"
陈小萌
入门学习者 / 使用约 3 个月