几款开源的报表工具

. rdp报表

JavaWeb实现的报表工具，是唯一一款通过web页面设计报表的工具，仅需简单拖拽式配置，即可制作出各种复杂、炫酷的报表，商用免费的一款报表工具。

Web类Excel报表设计器，方便的B/S报表设计模式，具有强大的表达式和扩展功能，可以轻松快捷、零编码地实现各种复杂报表、

TML标签：

基本标签：

<html></html>双标签开头结尾 HTML标签为最大的标签称为根标签

<head></head> 文档头部标签且必须设置title

<title></title> 页面标题

<body></body> 文档的主体包含页面的内容

<h1>-<h6> HTML提供6个等级的页面标题有大到小

<p></p> p标签用于定义段落可以将页面分为若干个段落根据窗口大小自动换行

<br/>单标签换行标签（break打断）

格式化标签：

加粗 <strong></strong>or<b></b>

斜线 <em></em>or<i></i>

删除线 <del></del>or<s></s>

下划线 <ins></ins>or<u></u>

div和span标签：

没有语义属于一种盒子来装内容

<div></div> 表示分割分区用来布局一行一个大盒子

<span></span>意为跨度，跨距一行可以哦有多个小盒子

图像标签：

<img src="图像路径(url)"/> 定义页面中的图像

图像标签包含多个属性

src 图片路径必须属性

alt 文本替换文本图像不能显示的文字

title 文本鼠标放到图像上显示文字

width 像素宽度

height 高度

border 边框

相对路径和绝对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径

分类：下级路径/ 上级路径../

绝对路径：是指目录下的绝对位置，如硬盘中的路径或网路地址

超链接标签：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href用于指定链接目标的url地址(必须属性)

target用于指定链接打卡方式 _self为默认值 _blank为在新窗口打开方式

锚点链接：可以快速到页面某个位置

在链接文本中的href属性中，设置属性值为#名字的形式，如<a href="#two">目标</a>

找到目标位置标签，里面添加一个id属性 = 名字，如：<h3 id="two">目标</h3>

注释：

快捷键CTRL + /

特殊字符：

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		半个空白位
		一个空白位
		不断行的空白

表格标签：

<table></table> 是用于定义表格的标签

<tr></tr> 标签用于定义表格中的行，必须嵌套在<table></table>标签中

<tb></tb> 用于定义表格的单元格，必须嵌套在<tr></tr>标签中

<td> 元素中的文本通常是普通的左对齐文本。字母td指表格数据(table data)，即数据单元格的内容

表头单元格标签：

<th>标签表示HTML表格的表头部分 <th> 元素中的文本通常呈现为粗体并且居中。

表格属性：

align left center right 规定表格相对于周围元素的对齐方式
border 1or"" 规定表格单元是否拥有边框默认为"",表示没有边框

cellpadding 像素值规定单元边沿与其内容的空白，默认1像素

cellspacing 像素值规定单元格直接的空白默认2像素

with 像素值or百分比规定表格的宽度

合并单元表格方式：

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

列表标签：

<ul>标签表示无序列表里面只能包含li

<ol>有序标签里面只能包含li

<li>相当于一个容器定义列表项与<ui>or<li>嵌套使用 li里面可以包含任何标签

<dl>标签用于定义描述列表(或自定义列表),该标签会与<dt>(定义项目和名字)和<dd>(描述每一个项目名字)一起使用

表单标签：

标签	描述
<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

<input>标签用于收集用户信息包含一个type属性可以有多种样式

<input type="属性值" />

属性值：

button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。
checkbox	定义复选框。
file	定义输入字段和 "浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<label>标签

<label> 标签为 input 元素定义标注（标记）。 label是标注的意思

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

众号排版可以采用135编辑器、SVG代码、或HTML代码。今天的分享将介绍如何使用GPT进行公众号HTML代码排版。

HTML是一种用于制作网页的代码，就像搭积木一样，有显示标题、图片、文字等不同的积木块。我们把这些积木拼在一起，就形成了一个完整的网页。

但仅有积木还不够美观，我们需要用CSS来装饰。CSS像造型师，可以改变标题的大小和颜色，让图片旋转和平移，给文字加下划线和边框等。

简单来说，HTML负责网页的结构，CSS负责网页的外观。HTML是砖瓦木料，CSS是油漆壁纸，两者配合才能构建出漂亮实用的网页。

编辑器里的HTML

以135编辑器为例，编辑器菜单栏有专门的HTML图标。

https://www.135editor.com/beautify_editor.html

在编辑器中，你可以选中不同样式，切换HTML图标，即可看到不同样式对应的HTML代码的差异。

设计案例

参考企业设计元素，设计公众号排版样式。

下图是谷歌I/O大会的PPT截图：

将截图发给GPT，提示词很简单：“参考图片，帮我用HTML、CSS写出来，我要用于公众号排版。”（下文提问也类似）

GPT很快就能帮你写出HTML代码，放到135编辑器里即可看到渲染效果。

下图是GPT根据谷歌官方样式设计的效果：

可以让GPT多写几个卡片样式，字体，颜色，大小都可以任意发挥，不过需要注意的是，微信公众号里不能接受所有的CSS语言，比如我让它设计了彩色渐变下划线和分隔符，复制到微信公众号编辑器里，就看不到效果了。

你可以参考所在企业的LOGO里的元素，设计专属的样式。

看到下图，你是不是觉得很眼熟？是的，你的感觉没错，我是截了苹果的宣传图让GPT生成的类似样式。

GPT设计

苹果官方

通过F12就可以检查选中元素的设置了。

接着，我请GPT仿造苹果官网产品卡片图，帮我设计HTML。

苹果官方

GPT设计

经过进一步调整，做出了如下效果：

批量生成样式

下图的的标题是直接用的135编辑器里的样式。

有读者可能会疑问，既然可以直接复制现成的样式，为何还要让GPT写HTML？这是因为可以让GPT批量制作。例如，可以给GPT批量文案，让它一一生成，而不需要手动一个元素一个元素调整。我尝试了GPTs，让GPT批量生成，但目前GPT模型遵循指令还不是很完美，有时一一对话更好。

下图放在小里是不是也可以？可以让GPT批量生成不同颜色的或不同内容。

PPT转公众号HTML

下图很特别，我让GPT先随机生成一个PPT，然后将PPT转公众号HTML，里面的表格样式也正确保留了下来，当然PPT本身也可以转成图片，就是清晰度不高，文字无法复制。

下图我让GPT随机调用了unsplash里的图片，GPT很聪明，会根据主题不同调用不同的图片。

如果你也想将PPT转成公众号文章，强烈推荐你试试让GPT帮你排版，速度飞快。

MD、CSV转公众号HTML

我还试了将今天的行情总结成Markdown格式让GPT设计排版。

做这些结构固定的内容，也可以让GPT写一个样式模板，从资讯系统导出对应表头的CSV，将CSV转成HTML，然后推送给用户。

代码分享

表格内容和下面的代码都可以按需更改。

这个代码生成的样式还比较简单，期待你自己探索。

分享一个小Tip，选择135编辑器里的多种类型样式，切换HTML，把HTML代码复制给GPT，让它帮你调整优化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Article</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            color: #333;
            margin: 0;
            padding: 0;
            background-color: #eef2f5;
        }
        .container {
            max-width: 700px;
            margin: 20px auto;
            padding: 20px;
            background: linear-gradient(135deg, #d0e2ed 0%, #f0f3f4 100%);
            color: #333;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        .header {
            text-align: center;
            padding: 20px 0;
            background-color: #0070c9;
            color: #fff;
            border-radius: 10px 10px 0 0;
        }
        .header h1 {
            font-size: 2.5em;
            margin: 0;
        }
        h2, h3, h4 {
            color: #005bb5;
            margin-top: 20px;
        }
        p {
            font-size: 1.1em;
            line-height: 1.6;
            margin: 15px 0;
        }
        .highlight {
            color: #0070c9;
            font-weight: bold;
        }
        .image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container" id="content">
        <div class="header">
            <h1>人工智能的未来 </h1>
        </div>
    </div>
    <!-- 确保marked.js在其他脚本之前加载 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.2/marked.min.js"></script>
    <script>
        async function fetchCsv() {
            const response = await fetch('ai_article_example.csv');
            const data = await response.text();
            return data;
        }

        function csvToJson(csv) {
            const lines = csv.split('\n');
            const result = [];
            const headers = lines[0].split(',');

            for (let i = 1; i < lines.length; i++) {
                const obj = {};
                const currentline = lines[i].split(',');

                for (let j = 0; j < headers.length; j++) {
                    obj[headers[j].trim()] = currentline[j] ? currentline[j].trim() : '';
                }
                result.push(obj);
            }
            return result;
        }

        function generateContent(data) {
            const contentDiv = document.getElementById('content');
            data.forEach(item => {
                const section = document.createElement('div');

                const h2 = document.createElement('h2');
                h2.textContent = item['一级标题'];
                section.appendChild(h2);

                const h3 = document.createElement('h3');
                h3.textContent = item['二级标题'];
                section.appendChild(h3);

                const h4 = document.createElement('h4');
                h4.textContent = item['三级标题'];
                section.appendChild(h4);

                const img = document.createElement('img');
                img.src = item['图片'];
                img.alt = item['三级标题'];
                img.className = 'image';
                section.appendChild(img);

                const p = document.createElement('p');
                p.innerHTML = marked.parse(item['正文内容']);
                section.appendChild(p);

                contentDiv.appendChild(section);
            });
        }

        async function main() {
            const csvData = await fetchCsv();
            console.log(csvData); // 检查CSV数据是否正确获取
            const jsonData = csvToJson(csvData);
            console.log(jsonData); // 检查JSON数据是否正确解析
            generateContent(jsonData);
        }

        main();
    </script>
</body>
</html>

希望这篇指南对你有所帮助！

通过GPT生成的HTML代码，你可以更快速地完成公众号的排版工作，提升工作效率。

也期待你来分享公众号排版技巧。

在线咨询

上一篇：分享一些工作中的小工具网站
下一篇：「Shopify模板」Shopify模板编辑&Shopify模板代码更改教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商