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小時內與您取得聯系。

整合營銷服務商