html 查看器

作者：海枯石烂有多久发布日期:2026-01-21 浏览:111

<!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: 20px;
        }
        textarea {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
        }
        #output {
            border: 1px solid #ccc;
            padding: 10px;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <h1>HTML 查看器</h1>
    <textarea id="htmlInput" placeholder="在这里输入 HTML 代码"></textarea>
    <button onclick="renderHTML()">查看 HTML</button>
    <div id="output"></div>

    <script>
        function renderHTML() {
            const input = document.getElementById('htmlInput').value;
            const outputDiv = document.getElementById('output');
            // 使用 DOMParser 解析 HTML 字符串为文档对象
            const parser = new DOMParser();
            const doc = parser.parseFromString(input, 'text/html');
            // 将解析后的 HTML 内容插入到输出区域
            outputDiv.innerHTML = doc.documentElement.innerHTML;
        }
    </script>
</body>
</html>

解释说明：

HTML 结构:
- textarea 用于用户输入 HTML 代码。
- button 触发 renderHTML 函数来渲染 HTML。
- div#output 显示解析后的 HTML 内容。
CSS 样式:
- 简单的样式设置，确保页面布局和文本显示美观。
JavaScript 功能:
- renderHTML 函数使用 DOMParser 解析用户输入的 HTML 字符串，并将其内容插入到 div#output 中进行显示。

上一篇：html边框代码

下一篇：html怎么插入图片