HTML中的列表与表格

序列表和有序列表

用于呈现逻辑上并列的具有相关性的数据内容.

<ul>
<li></li>
</ul>

ul元素可以用type属性设置不同的列表标记:

disc: 实心圆点

circle: 空心圆圈

square: 实心正方形

<ol>
<li></li>
</ol>

ol元素也可以设置不同的标记:

1: 阿拉伯数字

i: 小写罗马数字

I: 大写罗马数字

A: 大写字母

a: 小写字母

定义列表

适用呈现包含主题及描述的数据内容.

<dl>
<dt>主题</dt>
<dd>描述</dd>
</dl>

表格

<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

thead: 表头

tbody: 表体

tfoot: 表脚

th: 专用于表头中的单元格, 其具有自动加粗并且居中的效果.

表格的属性控制:

border: 边框

bordercolor: 边框颜色

width: 宽度

height: 高度

cellspacing: 单元格间距(外)

cellpadding: 单元格填充(内)

align: 表格的位置控制

单元格的属性控制:

align

valign

如何合并单元格/跨行或跨列?

注意: 合并后, 会引发单元格数量的减少!

列表练习案例源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>我的电脑文件列表</h1>
<ul>
<li>我的电脑
<ul>
<li>本地磁盘(C:)
<ul>
<li>我的文档</li>
<li>我的收藏</li>
</ul>
</li>
<li>本地磁盘(D:)
<ul>
<li>我的游戏</li>
<li>我的资料</li>
<li>我的电影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>

述

.NET的SelectPdf Html到Pdf转换器-社区版是.NET的SelectPdf库中提供的功能强大的html到pdf转换器的免费版本。
转换器提供了许多强大的选项（将任何网页转换为pdf，将任何html字符串转换为pdf，html5 / css3 / javascript支持，页眉和页脚支持等），唯一的限制是它最多可以生成pdf文档。5页长。
.NET的免费HTML至Pdf转换器–社区版功能：最多生成5页pdf文档，将任何网页转换为pdf，将任何原始html字符串转换为pdf，设置pdf页面设置（页面大小，页面方向，页面边距），在转换过程中调整内容大小以适合pdf页面，设置pdf文档属性，设置pdf查看器首选项，设置pdf安全性（密码，权限），设置转换延迟和网页导航超时，自定义页眉和页脚，在页眉中支持html和页脚，自动和手动分页符，在每个页面上重复html表头，支持@media类型屏幕和打印，支持内部和外部链接，基于html元素自动生成书签，支持HTTP标头，支持HTTP cookie，支持需要身份验证的网页，支持代理服务器，启用/禁用javascript，修改颜色空间，多线程支持，HTML5 / CSS3支持，Web字体支持等等。

代码实现

1、nuget 引用

Install-Package Select.HtmlToPdf

2、方法

using SelectPdf;using System.Collections.Specialized;using System.IO;using System.Web;
namespace BQoolCommon.Helpers.File{ public class WebToPdf { public WebToPdf() { //SelectPdf.GlobalProperties.LicenseKey="your-license-key"; }
 /// <summary> /// 將 Html 轉成 PDF，並儲存成檔案 /// </summary> /// <param name="html">html</param> /// <param name="fileName">絕對路徑</param> public void SaveToFileByHtml(string html, string fileName) { var doc=SetPdfDocument(html); doc.Save(fileName); }
 /// <summary> /// 傳入 Url 轉成 PDF，並儲存成檔案 /// </summary> /// <param name="url">url</param> /// <param name="fileName">絕對路徑</param> /// <param name="httpCookies">Cookies</param> public void SaveToFileByUrl(string url, string fileName, NameValueCollection httpCookies) { var doc=SetPdfDocument(url, httpCookies); doc.Save(fileName); }
 /// <summary> /// 將 Html 轉成 PDF，並輸出成 byte[] 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public byte[] GetFileByteByHtml(string html) { var doc=SetPdfDocument(html); return doc.Save(); }
 /// <summary> /// 傳入 Url 轉成 PDF，並輸出成 byte[] 格式 /// </summary> /// <param name="url">url</param> /// <param name="httpCookies">Cookies</param> /// <returns></returns> public byte[] GetFileByteByUrl(string url, NameValueCollection httpCookies) { var doc=SetPdfDocument(url, httpCookies); return doc.Save(); }
 /// <summary> /// 將 Html 轉成 PDF，並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByHtml(string html) { var doc=SetPdfDocument(html); var pdfStream=new MemoryStream();
 doc.Save(pdfStream); pdfStream.Position=0;
 return pdfStream; }
 /// <summary> /// 傳入 Url 轉成 PDF，並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByUrl(string url, NameValueCollection httpCookies) { var doc=SetPdfDocument(url, httpCookies); var pdfStream=new MemoryStream();
 doc.Save(pdfStream); pdfStream.Position=0;
 return pdfStream; }
 private PdfDocument SetPdfDocument(string html) { var converter=new HtmlToPdf();
 converter.Options.WebPageWidth=1200; html=HttpUtility.HtmlDecode(html);
 return converter.ConvertHtmlString(html); }
 private PdfDocument SetPdfDocument(string url, NameValueCollection httpCookies) { var converter=new HtmlToPdf(); converter.Options.WebPageWidth=1200;
 if (httpCookies != && httpCookies.Count !=0) { converter.Options.HttpCookies.Add(httpCookies); }
 return converter.ConvertUrl(url); }
 }}

3、调用

/// <summary> /// 下载pdf /// </summary> public void Downpdf(string data) { var stream=new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data)); Response.Clear(); //二进制流数据（如常见的文件下载） Response.ContentType="application/octet-stream"; //通知浏览器下载文件而不是打开 Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode("Profit and Loss Statement.pdf", System.Text.Encoding.UTF8)); var bytes=StreamToBytes(stream); Response.BinaryWrite(bytes); Response.Flush(); stream.Close(); stream.Dispose();
 Response.End(); }

那么如何获取指定页面的html 呢传入对应的model 获得指定动态的html

private string Gethtml(string data) { string str="";
 str=this.ControllerContext.RenderViewToString("ProfitDetails", data);
 return str; }

using BQoolCommon.Helpers.Format;using Newtonsoft.Json;using OrdersManager.Models.ViewModel.Report;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;
namespace OrdersManager.Web.Infrastructure{ public static class HelperExtensions { public static string RenderViewToString(this ControllerContext context, string viewName, string data) { if (string.IsOrEmpty(viewName)) viewName=context.RouteData.GetRequiredString("action");
 context.Controller.ViewData.Model=JsonConvert.DeserializeObject<ProfitDetailsmodel>(StringTools.Base64Decode(StringTools.Base64Decode(data)));
 using (var sw=new StringWriter()) { ViewEngineResult viewResult=ViewEngines.Engines.FindPartialView(context, viewName); var viewContext=new ViewContext(context, viewResult.View, context.Controller.ViewData, context.Controller.TempData, sw); try { viewResult.View.Render(viewContext, sw); } catch (Exception ex) { throw; }
 return sw.GetStringBuilder().ToString(); } } }}

参考文档

https://www.nuget.org/packages/Select.HtmlToPdf/

众号排版可以采用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代码，你可以更快速地完成公众号的排版工作，提升工作效率。

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

在线咨询

上一篇：JAVA笔记（三十一）：层叠样式表CSS常用总结
下一篇：还只会用div布局吗？快来学习下使用HTML5新语义

您的项目需求

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

整合营销服务商