200字
小学田字格在线打印练字
2025-10-14
2025-10-15
工具站

image-arIZ.png

专栏导读

  • 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手
  • 💻 个人主页——>个人主页欢迎访问
  • 😸 Github主页——>Github主页欢迎访问
  • 🏳️‍🌈 CSDN博客主页：请点击——> 一晌小贪欢的博客主页求关注
  • 👍 该系列文章专栏：请点击——>Python办公自动化专栏求订阅
  • 🕷 此外还有爬虫专栏：请点击——>Python爬虫基础专栏求订阅
  • 📕 此外还有python基础专栏：请点击——>Python基础学习专栏求订阅
  • 文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏
  • ❤️ 欢迎各位佬关注！ ❤️

前言

一个专为中文练字设计的在线田字格生成工具，让传统书法练习与现代技术完美结合。

📖 项目背景

项目已上线，欢迎访问：田字格生成器
项目已上线，欢迎访问：田字格生成器
项目已上线，欢迎访问：田字格生成器

在数字化时代，孩子们越来越少接触传统的手写练习。然而，汉字书写不仅是一项基本技能，更是传承中华文化的重要方式。田字格作为最经典的汉字练习工具，能够帮助孩子掌握汉字的结构和笔画规律。

本项目旨在将传统的田字格练习与现代Web技术相结合，为家长和老师提供一个便捷、实用的练字工具生成器。

✨ 核心特性

🎯 智能田字格生成

  • 灵活配置：支持1-20行、1-15列的自由组合
  • 实时预览：参数调整即时生效，所见即所得
  • 标准规格：严格按照传统田字格标准设计

📝 丰富的汉字库

  • 数字汉字：一、二、三、四、五...（适合初学者）
  • 基础汉字：人、口、手、日、月、水、火...（常用基本字）
  • 家庭称谓：爸、妈、爷、奶、哥、姐...（生活常用）
  • 动物汉字：猫、狗、鸟、鱼、虎、兔...（孩子喜欢的动物）
  • 颜色汉字：红、黄、蓝、绿、白、黑...（颜色认知）
  • 自定义模式：支持输入任意汉字进行练习

🎨 精美的视觉设计

  • 现代化界面：采用渐变色设计，界面美观大方
  • 响应式布局：完美适配桌面、平板、手机等设备
  • 用户友好：直观的操作界面，老人小孩都能轻松使用

🖨️ 专业打印优化

  • A4纸张适配：专门针对A4纸张进行优化
  • 打印样式：打印时自动隐藏控制界面，只显示田字格
  • 清晰效果：优化线条粗细和颜色，确保打印效果清晰

🚀 快速开始

在线使用

  1. 下载 index.html 文件
  2. 双击打开文件，或拖拽到浏览器中
  3. 开始使用！

本地服务器运行

# 进入项目目录
cd 田字格生成器练习

# 启动HTTP服务器
python -m http.server 8000

# 在浏览器中访问
http://localhost:8000/index.html

📋 使用指南

基础操作

  1. 设置格子数量

    • 调整"行数"和"列数"滑块
    • 实时预览生成效果

  2. 配置显示选项

    • 选择是否显示对角线辅助线
    • 选择是否显示汉字参考

  3. 选择汉字内容

    • 从预设汉字库中选择
    • 或使用自定义模式输入特定汉字

  4. 生成和打印

    • 点击"生成田字格"查看效果
    • 点击"打印田字格"进行打印

高级功能

  • 键盘快捷键：Ctrl+P 快速打印，F5 重新生成
  • 自动保存：参数调整自动保存到浏览器
  • 批量练习：一次生成大量田字格，提高练习效率

🎯 适用场景

👨‍👩‍👧‍👦 家庭教育

  • 家长辅导孩子练字
  • 制作个性化练字作业
  • 培养孩子书写兴趣

🏫 学校教学

  • 语文老师制作练字材料
  • 书法课程辅助工具
  • 学生作业布置

🎨 书法爱好者

  • 成人书法练习
  • 字体结构研究
  • 创意书法设计

🛠️ 技术实现

前端技术栈

  • HTML5：语义化标签，结构清晰
  • CSS3：现代化样式，响应式设计
  • JavaScript：原生JS实现，无依赖

核心算法

  • 田字格绘制：使用CSS Grid和Flexbox布局
  • 对角线生成：CSS transform和linear-gradient实现
  • 打印优化：CSS媒体查询@media print

设计亮点

/* 虚线对角线实现 */
.tian-grid .diagonal1::before {
    content: '';
    width: 141.42%; /* √2 * 100% */
    height: 1px;
    background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
    background-size: 6px 1px;
    transform: rotate(45deg);
}

📱 兼容性

浏览器支持

  • ✅ Chrome 60+
  • ✅ Firefox 55+
  • ✅ Safari 12+
  • ✅ Edge 79+

设备支持

  • 💻 桌面电脑
  • 📱 手机
  • 📱 平板
  • 🖨️ 打印机

🎨 界面预览

主界面

  • 渐变色背景，视觉效果佳
  • 卡片式布局，层次分明
  • 控制面板集中，操作便捷

田字格效果

  • 标准田字格比例
  • 清晰的十字线和对角线
  • 汉字以淡灰色显示，不干扰书写

打印效果

  • 黑白优化，节省墨水
  • 线条粗细适中
  • 页面布局合理

🔧 自定义配置

修改汉字库

const characterSets = {
    // 添加新的汉字分类
    poetry: ['春', '夏', '秋', '冬', '花', '鸟', '风', '月'],
    // 修改现有分类
    numbers: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '百', '千']
};

调整样式

/* 修改田字格大小 */
.tian-grid {
    width: 150px;  /* 默认120px */
    height: 150px;
}

/* 修改汉字颜色 */
.tian-grid .character {
    color: #666;  /* 默认#999 */
}

📈 未来规划

功能扩展

  • 添加笔顺动画演示
  • 支持繁体字练习
  • 增加书法字体选择
  • 添加练字进度跟踪

技术优化

  • PWA支持，离线使用
  • 云端保存练字记录
  • AI智能推荐练字内容
  • 多语言国际化支持

让每一个汉字都写得工整美观，让传统文化在数字时代焕发新的光彩！ ✨

项目创建时间：2025年9月16日

<font color=red size=5>转载请注明出处
<font color=red size=5>转载请注明出处
<font color=red size=5>转载请注明出处

完整代码

项目已上线，欢迎访问：田字格生成器
项目已上线，欢迎访问：田字格生成器
项目已上线，欢迎访问：田字格生成器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>田字格生成器 - 练字专用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #111d51 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .controls {
            padding: 30px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }

        .control-group {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .control-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .control-item label {
            font-weight: 600;
            color: #495057;
            font-size: 1.1em;
        }

        .control-item input, .control-item select {
            padding: 10px 15px;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 1em;
            transition: all 0.3s ease;
        }

        .control-item input:focus, .control-item select:focus {
            outline: none;
            border-color: #4facfe;
            box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
        }

        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        .btn-success {
            background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
            color: white;
        }

        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(86, 171, 47, 0.3);
        }

        .grid-container {
            padding: 30px;
            background: white;
        }

        .grid-wrapper {
            display: grid;
            gap: 20px;
            justify-content: center;
        }

        .tian-grid {
            width: 120px;
            height: 120px;
            border: 3px solid #333;
            position: relative;
            background: white;
            display: inline-block;
            margin: 5px;
        }

        .tian-grid::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #666;
            transform: translateY(-50%);
        }

        .tian-grid::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 1px;
            background: #666;
            transform: translateX(-50%);
        }

        .tian-grid .diagonal1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .tian-grid .diagonal1::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 141.42%; /* √2 * 100% */
            height: 1px;
            background: #ccc;
            transform-origin: 0 0;
            transform: rotate(45deg);
            background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
            background-size: 6px 1px;
        }

        .tian-grid .diagonal2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .tian-grid .diagonal2::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 141.42%; /* √2 * 100% */
            height: 1px;
            background: #ccc;
            transform-origin: 100% 0;
            transform: rotate(-45deg);
            background-image: linear-gradient(to right, #ccc 50%, transparent 50%);
            background-size: 6px 1px;
        }

        .tian-grid .character {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 60px;
            font-weight: bold;
            color: #999;
            font-family: 'KaiTi', '楷体', serif;
            user-select: none;
            pointer-events: none;
            z-index: 1;
        }

        .footer {
            text-align: center;
            padding: 20px;
            background: #f8f9fa;
            color: #6c757d;
            font-size: 0.9em;
        }

        /* 打印样式 */
        @media print {
            body {
                background: white;
                padding: 0;
                margin: 0;
            }

            .container {
                box-shadow: none;
                border-radius: 0;
                max-width: none;
            }

            .header, .controls, .footer {
                display: none;
            }

            .grid-container {
                padding: 20px;
            }

            .tian-grid {
                width: 100px;
                height: 100px;
                margin: 3px;
                border: 2px solid #000;
                break-inside: avoid;
            }

            .tian-grid::before, .tian-grid::after {
                background: #000;
            }

            .tian-grid .diagonal1::before, .tian-grid .diagonal2::before {
                background-size: 4px 1px;
            }

            .grid-wrapper {
                gap: 0;
            }

            .tian-grid .character {
                font-size: 40px;
                color: #777;
            }

            @page {
                margin: 1cm;
                size: A4;
            }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .control-group {
                flex-direction: column;
                align-items: stretch;
            }

            .control-item {
                justify-content: space-between;
            }

            .header h1 {
                font-size: 2em;
            }

            .tian-grid {
                width: 80px;
                height: 80px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🖊️ 田字格生成器</h1>
            <p>专为孩子练字设计的田字格工具</p>
        </div>

        <div class="controls">
            <div class="control-group">
                <div class="control-item">
                    <label for="rows">行数：</label>
                    <input type="number" id="rows" min="1" max="20" value="11">
                </div>
                <div class="control-item">
                    <label for="cols">列数：</label>
                    <input type="number" id="cols" min="1" max="15" value="8">
                </div>
                <div class="control-item">
                    <label for="showDiagonal">显示对角线：</label>
                    <select id="showDiagonal">
                        <option value="true">是</option>
                        <option value="false">否</option>
                    </select>
                </div>
                <div class="control-item">
                    <label for="showCharacters">显示汉字：</label>
                    <select id="showCharacters">
                        <option value="true">是</option>
                        <option value="false">否</option>
                  
                    </select>
                </div>
            </div>
            <div class="control-group">
                <div class="control-item">
                    <label for="characterSet">汉字类型：</label>
                    <select id="characterSet">
                        <option value="numbers">数字 (一二三四五...)</option>
                        <option value="basic">基础汉字 (人口手日月...)</option>
                        <option value="family">家庭称谓 (爸妈爷奶哥...)</option>
                        <option value="animals">动物 (猫狗鸟鱼虎...)</option>
                        <option value="colors">颜色 (红黄蓝绿白...)</option>
                        <option value="custom">自定义</option>
                    </select>
                </div>
                <div class="control-item" id="customCharactersGroup" style="display: none;">
                    <label for="customCharacters">自定义汉字：</label>
                    <input type="text" id="customCharacters" placeholder="请输入要练习的汉字" maxlength="100">
                </div>
            </div>
            <div class="control-group">
                <button class="btn btn-primary" onclick="generateGrid()">🔄 生成田字格</button>
                <button class="btn btn-success" onclick="printGrid()">🖨️ 打印田字格</button>
            </div>
        </div>

        <div class="grid-container">
            <div class="grid-wrapper" id="gridWrapper">
                <!-- 田字格将在这里生成 -->
            </div>
        </div>

        <div class="footer">
            <p>💡 提示：点击"生成田字格"按钮创建练字格，然后点击"打印田字格"进行打印</p>
            <p>建议使用A4纸张打印，效果最佳</p>
        </div>
    </div>

    <script>
        // 汉字字库
        const characterSets = {
            numbers: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
            basic: ['人', '口', '手', '日', '月', '水', '火', '土', '木', '金', '大', '小', '上', '下', '中', '天', '地', '山', '川', '田'],
            family: ['爸', '妈', '爷', '奶', '哥', '姐', '弟', '妹', '叔', '姨', '舅', '姑', '公', '婆', '儿', '女', '子', '孙', '家', '亲'],
            animals: ['猫', '狗', '鸟', '鱼', '虎', '兔', '马', '牛', '羊', '猪', '鸡', '鸭', '鹅', '象', '熊', '狼', '鹿', '蛇', '龙', '凤'],
            colors: ['红', '黄', '蓝', '绿', '白', '黑', '紫', '粉', '橙', '灰', '棕', '青', '银', '金', '彩', '亮', '暗', '淡', '浓', '鲜']
        };

        // 生成田字格
        function generateGrid() {
            const rows = parseInt(document.getElementById('rows').value);
            const cols = parseInt(document.getElementById('cols').value);
            const showDiagonal = document.getElementById('showDiagonal').value === 'true';
            const showCharacters = document.getElementById('showCharacters').value === 'true';
            const characterSet = document.getElementById('characterSet').value;
            const gridWrapper = document.getElementById('gridWrapper');

            // 清空现有内容
            gridWrapper.innerHTML = '';

            // 设置网格布局
            gridWrapper.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
            gridWrapper.style.gridTemplateRows = `repeat(${rows}, 1fr)`;

            // 获取要显示的汉字
            let characters = [];
            if (showCharacters) {
                if (characterSet === 'custom') {
                    const customText = document.getElementById('customCharacters').value.trim();
                    characters = customText ? customText.split('') : [];
                } else {
                    characters = characterSets[characterSet] || [];
                }
            }

            // 生成田字格
            for (let i = 0; i < rows * cols; i++) {
                const tianGrid = document.createElement('div');
                tianGrid.className = 'tian-grid';

                // 添加对角线
                if (showDiagonal) {
                    const diagonal1 = document.createElement('div');
                    diagonal1.className = 'diagonal1';
                    tianGrid.appendChild(diagonal1);

                    const diagonal2 = document.createElement('div');
                    diagonal2.className = 'diagonal2';
                    tianGrid.appendChild(diagonal2);
                }

                // 添加汉字
                if (showCharacters && characters.length > 0) {
                    const characterDiv = document.createElement('div');
                    characterDiv.className = 'character';
                    characterDiv.textContent = characters[i % characters.length];
                    tianGrid.appendChild(characterDiv);
                }

                gridWrapper.appendChild(tianGrid);
            }

            // 添加生成成功的提示
            showNotification('田字格生成成功！', 'success');
        }

        // 打印田字格
        function printGrid() {
            const gridWrapper = document.getElementById('gridWrapper');
      
            if (gridWrapper.children.length === 0) {
                showNotification('请先生成田字格再打印！', 'warning');
                return;
            }

            // 打印页面
            window.print();
        }

        // 显示通知
        function showNotification(message, type) {
            // 创建通知元素
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 25px;
                border-radius: 8px;
                color: white;
                font-weight: 600;
                z-index: 1000;
                animation: slideIn 0.3s ease;
                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            `;

            if (type === 'success') {
                notification.style.background = 'linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%)';
            } else if (type === 'warning') {
                notification.style.background = 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)';
            }

            notification.textContent = message;
            document.body.appendChild(notification);

            // 3秒后自动移除
            setTimeout(() => {
                notification.style.animation = 'slideOut 0.3s ease';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }

        // 添加CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            @keyframes slideOut {
                from {
                    transform: translateX(0);
                    opacity: 1;
                }
                to {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);

        // 页面加载时自动生成默认田字格
        window.addEventListener('load', function() {
            generateGrid();
        });

        // 监听输入变化，实时更新
        document.getElementById('rows').addEventListener('change', generateGrid);
        document.getElementById('cols').addEventListener('change', generateGrid);
        document.getElementById('showDiagonal').addEventListener('change', generateGrid);
        document.getElementById('showCharacters').addEventListener('change', generateGrid);
        document.getElementById('characterSet').addEventListener('change', function() {
            const customGroup = document.getElementById('customCharactersGroup');
            if (this.value === 'custom') {
                customGroup.style.display = 'flex';
            } else {
                customGroup.style.display = 'none';
            }
            generateGrid();
        });
        document.getElementById('customCharacters').addEventListener('input', generateGrid);

        // 键盘快捷键支持
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 'p') {
                e.preventDefault();
                printGrid();
            }
            if (e.key === 'F5') {
                e.preventDefault();
                generateGrid();
            }
        });
    </script>
</body>
</html>

  • 希望对初学者有帮助；致力于办公自动化的小小程序员一枚

  • 希望能得到大家的【❤️一个免费关注❤️】感谢！

  • 求个 🤞 关注 🤞 +❤️ 喜欢 ❤️ +👍 收藏 👍

  • 此外还有办公自动化专栏，欢迎大家订阅：Python办公自动化专栏

  • 此外还有爬虫专栏，欢迎大家订阅：Python爬虫基础专栏

  • 此外还有Python基础专栏，欢迎大家订阅：Python基础学习专栏

image-ofYN.png

小学田字格在线打印练字
作者
一晌小贪欢
发表于
2025-10-14
License
CC BY-NC-SA 4.0
Python爬虫第1课：爬虫基础概...
【Python】九宫格图片生成器

评论

© 一晌小贪欢. All Rights Reserved. / RSS / Sitemap
Powered by Halo & Theme-Fuwari
沪ICP备2025146533号