html美化工具

作者：整整ー世♂陰霾そ发布日期:2025-02-09 浏览:136

<!-- 示例代码：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;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        pre {
            background: #f9f9f9;
            padding: 10px;
            border: 1px solid #ddd;
            white-space: pre-wrap;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HTML 美化工具</h1>
        <textarea id="inputHtml" placeholder="请输入 HTML 代码"></textarea>
        <button onclick="beautifyHtml()">美化 HTML</button>
        <pre id="outputHtml"></pre>
    </div>

    <script>
        function beautifyHtml() {
            const inputHtml = document.getElementById('inputHtml').value;
            const outputHtml = document.getElementById('outputHtml');

            // 使用 js-beautify 库来美化 HTML
            const beautifiedHtml = js_beautify(inputHtml, { indent_size: 4 });
            outputHtml.textContent = beautifiedHtml;
        }

        // 引入 js-beautify 库
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/js-beautify@1.14.0/js/lib/beautify-html.min.js';
        document.body.appendChild(script);
    </script>
</body>
</html>

解释说明：

HTML 结构：
- 页面包含一个输入框 (textarea) 用于输入原始的 HTML 代码。
- 一个按钮 (button) 触发美化操作。
- 一个 pre 标签用于显示美化的 HTML 代码。
CSS 样式：
- 简单的样式让页面看起来更整洁，设置了字体、背景色、容器宽度等。
- textarea 和 pre 标签的样式使其易于阅读和编辑。
JavaScript 功能：
- 使用了 js-beautify 库来实现 HTML 代码的美化功能。
- 当用户点击“美化 HTML”按钮时，会调用 beautifyHtml() 函数，该函数获取用户输入的 HTML 代码，并使用 js-beautify 进行格式化处理，最后将结果展示在页面上。
引入外部库：
- 通过 <script> 标签动态加载 js-beautify 库，确保代码可以正常运行。

上一篇：html border

下一篇：htmlcollection