之前用LaTeX\LaTeXLATE​X 制作田字格，觉得似乎已经挺酷了。而且LaTeX\LaTeXLATE​X是排版印刷神器，从强大性角度，无与伦比。但从简单易用的角度，尤其是从能够借助大语言模型降低工作量和软件安装等负荷的角度，一定咬定青山不放松非用LaTeX\LaTeXLATE​X实在不占优势。

比如LaTeX\LaTeXLATE​X编译，有 latex+divps+ps2pdf的传统路线，还有LaTeX  3ϵ\LaTeX\;3\epsilonLATE​X3ϵ的 XeLaTeX\rm{Xe}\LaTeXXeLATE​X路线，安装巨大的各种包和库，让人工智能大语言模型也往往难以按照简单提示词直接给出立即好用的代码。

但html则不然。我尝试了一下，发现非常简单好用，几乎无须修改，即便修改也非常简单，简直是生成相关材料居家旅行必备神器。

随便输入汉字、点击“生成”，方便快捷、界面友好，不像LaTeX改完定制的代码之后再运行一次，再定制就要再改再运行。html效果如下（提示词就随便描述就行了，主要是把要求讲具体，细节上不含糊就可以了）：
在这里插入图片描述Grok 3 beta生成的源代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉字田字格生成器</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            padding: 20px;
        }
        #input-container {
            margin-bottom: 20px;
        }
        #hanzi-input {
            font-size: 44px;
            padding: 10px;
            width: 300px;
        }
        #generate-btn, #print-btn {
            font-size: 18px;
            padding: 10px 20px;
            margin: 0 10px;
        }
        #grid-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .row {
            display: flex;
            margin-bottom: 10px;
        }
        .cell {
            width: 100px;
            height: 100px;
            border: 1px solid red; /* 红色实线边框 */
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 72px; /* 28号字体 */
            font-family: 'KaiTi', serif; /* 楷体 */
        }
        .cell::before, .cell::after {
            content: '';
            position: absolute;
            border: 1px dashed #ccc; /* 中心虚线 */
        }
        .cell::before {
            width: 100%;
            height: 0;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        .cell::after {
            width: 0;
            height: 100%;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
        }
        .black {
            color: black; /* 黑色汉字 */
        }
        .gray {
            color: #ccc; /* 浅灰色汉字 */
        }
        @media print {
            #input-container, #generate-btn, #print-btn {
                display: none; /* 打印时隐藏输入框和按钮 */
            }
            #grid-container {
                display: block;
            }
        }
    </style>
</head>
<body>
    <div id="input-container">
        <input type="text" id="hanzi-input" placeholder="输入汉字">
        <button id="generate-btn">生成</button>
        <button id="print-btn">打印</button>
    </div>
    <div id="grid-container"></div>

    <script>
        document.getElementById('generate-btn').addEventListener('click', function() {
            const input = document.getElementById('hanzi-input').value;
            const gridContainer = document.getElementById('grid-container');
            gridContainer.innerHTML = ''; // 清空现有内容

            for (let i = 0; i < input.length; i++) {
                const char = input[i];
                const row = document.createElement('div');
                row.className = 'row';

                for (let j = 0; j < 6; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    if (j === 0) {
                        cell.textContent = char;
                        cell.classList.add('black'); // 第一列黑色汉字
                    } else if (j < 5) {
                        cell.textContent = char;
                        cell.classList.add('gray'); // 第二到第五列浅灰色汉字
                    }
                    row.appendChild(cell);
                }
                gridContainer.appendChild(row);
            }
        });

        document.getElementById('print-btn').addEventListener('click', function() {
            window.print(); // 打印功能
        });
    </script>
</body>
</html>
# html # javascript # 前端
Logo
智能体开发者社区

中国智能体开发者社区，聚焦智能体与大模型开发，提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动，促进经验交流与协作，助力开发者快速构建创新智能应用。

更多推荐

OpenClaw 本地部署完整指南（Windows + Ollama）

本文档基于实际部署经验编写，旨在帮助你在 Windows 系统上从零开始搭建 OpenClaw，并连接本地 Ollama 模型（如 Qwen2.5 或 Qwen3），使其具备完整的智能体能力。文档包含了所有关键步骤以及常见问题的解决方案。

avatar 智能体开发者社区

OpenClaw 小白安装指南（Windows版）

（类似一个能自动执行任务的AI机器人），不是游戏。API Key只保存在你本地电脑的加密文件里，不会上传到任何地方。访问：https://github.com/miaoxworld/openclaw-manager/releases。: 一键安装脚本会自动安装Node.js 22+，如果失败，手动下载安装：https://nodejs.org/：在PowerShell中，鼠标右键就是粘贴，不需要按

avatar 智能体开发者社区

飞书 × OpenClaw 接入指南：不用服务器，用长连接把机器人跑起来

这个项目存在的意义，就是把“飞书接 OpenClaw”这件事，整理成一套的配置入口，并把官方文档没覆盖到的坑集中写成排查清单。先说清楚它的角色：OpenClaw 现在已经内置官方飞书插件 @openclaw/feishu，功能更完整、维护也更及时。，说明飞书 + AI 的接入已经走通。另外，仓库也推荐了一个新项目：把 OpenClaw 变成“多 Agent 团队”，用多个 Agent 分工，Sla

avatar 智能体开发者社区