HTML预览
在线HTML预览工具,支持代码编辑和实时预览
HTML编辑器
分享
新页面打开
隐藏编辑器
HTML代码输入
格式化
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML预览示例</title> <style> body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; margin: 40px; color: #333; } .container { max-width: 800px; margin: 0 auto; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); background: #fff; } h1 { color: #2c3e50; border-bottom: 3px solid #3498db; padding-bottom: 10px; } h2 { color: #34495e; margin-top: 30px; } .highlight { background: #f1c40f; padding: 2px 6px; border-radius: 3px; } .button { background: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; transition: background 0.3s; } .button:hover { background: #2980b9; } .code { background: #f8f9fa; padding: 15px; border-radius: 5px; font-family: 'Monaco', 'Menlo', monospace; border-left: 4px solid #3498db; overflow-x: auto; } </style> </head> <body> <div class="container"> <h1>欢迎使用 HTML 预览工具</h1> <p>这是一个 <span class="highlight">HTML预览示例</span>,你可以在这里编辑HTML代码并实时查看效果。</p> <h2>功能特点</h2> <ul> <li>实时预览</li> <li>响应式设计</li> <li>语法高亮</li> <li>代码提示</li> </ul> <h2>示例代码</h2> <div class="code"> function greet(name) { return `Hello, ${name}!`; } </div> <button class="button" onclick="alert('Hello from HTML!')"> 点击测试 </button> <p>尝试修改左侧的HTML代码,看看效果!</p> </div> </body> </html>
预览效果
新页面打开