html编辑器

作者：平凡中的不凡发布日期:2026-08-03 浏览:102

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

    <script>
        function renderHTML() {
            const editor = document.getElementById('editor');
            const output = document.getElementById('output');
            const htmlContent = editor.value;

            // 使用 innerHTML 渲染用户输入的 HTML
            output.innerHTML = htmlContent;
        }
    </script>
</body>
</html>

解释说明：

HTML结构：
- textarea：用于输入HTML代码。
- button：点击按钮后，调用renderHTML函数来渲染HTML。
- div#output：用于显示渲染后的HTML内容。
CSS样式：
- 给textarea设置了宽度、高度和边框等样式，使其看起来更像一个编辑器。
- #output用于展示渲染后的HTML内容，并且设置了适当的样式以确保内容能够正确显示。
JavaScript逻辑：
- renderHTML函数获取textarea中的HTML代码，并将其设置为div#output的内容，从而实现HTML代码的实时预览。

这个简单的HTML编辑器可以帮助用户编写和预览HTML代码。

上一篇：html导航栏

下一篇：html文件指什么