html在线编辑

作者：浪子罢了发布日期:2026-05-08 浏览:90

<!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: Arial, sans-serif;
        }
        #editor {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow: auto;
            resize: both;
        }
        #output {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 200px;
        }
    </style>
</head>
<body>
    <h1>HTML 在线编辑器</h1>
    <textarea id="editor" placeholder="在这里输入 HTML 代码"></textarea>
    <button onclick="renderHTML()">渲染</button>
    <div id="output"></div>

    <script>
        function renderHTML() {
            var editor = document.getElementById('editor');
            var output = document.getElementById('output');
            try {
                output.innerHTML = editor.value;
            } catch (e) {
                output.innerHTML = '渲染失败: ' + e.message;
            }
        }
    </script>
</body>
</html>

解释说明

HTML 结构:
- textarea 用于输入 HTML 代码。
- button 触发渲染功能。
- div 用于显示渲染后的 HTML 内容。
CSS 样式:
- 设置了 textarea 的宽度、高度和边框，使其看起来更像一个编辑器。
- div#output 用于展示渲染后的 HTML，设置了最小高度和边框。
JavaScript 功能:
- renderHTML() 函数获取 textarea 中的值，并将其内容设置为 div#output 的 innerHTML，从而实现在线预览效果。
- 如果渲染过程中出现错误，会捕获异常并在 div#output 中显示错误信息。

上一篇：html字体颜色

下一篇：html表单标签