在线html网页编辑器

作者：断念已残发布日期:2025-09-30 浏览:22

<!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;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
        }
        .editor {
            width: 50%;
            height: 100%;
            border-right: 1px solid #ccc;
        }
        .preview {
            width: 50%;
            height: 100%;
            overflow: auto;
        }
        textarea {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            padding: 10px;
            box-sizing: border-box;
            resize: none;
        }
    </style>
</head>
<body>
    <div class="editor">
        <textarea id="html-editor" placeholder="在这里输入HTML代码"></textarea>
    </div>
    <div class="preview" id="preview"></div>

    <script>
        const editor = document.getElementById('html-editor');
        const preview = document.getElementById('preview');

        // 初始化预览内容
        editor.value = '<h1>欢迎使用在线HTML编辑器</h1><p>你可以在这里编写和预览HTML代码。</p>';

        // 实时更新预览
        editor.addEventListener('input', () => {
            preview.innerHTML = editor.value;
        });
    </script>
</body>
</html>

解释说明

HTML结构:
- textarea 用于输入HTML代码。
- div 用于实时预览输入的HTML代码。
CSS样式:
- 使用了简单的布局，将页面分为左右两部分，左边是编辑区，右边是预览区。
- 设置了一些基本的样式，如字体、边距、边框等，以确保界面美观。
JavaScript功能:
- 使用 addEventListener 监听 textarea 的输入事件，每当用户输入或修改HTML代码时，实时更新右侧的预览区。
- 初始值设置为一段欢迎信息，帮助用户快速上手。

这个示例代码提供了一个简单的在线HTML编辑器，用户可以在左侧编写HTML代码，并在右侧实时查看渲染效果。

上一篇：html disabled

下一篇：html figure