@birthday8/doc-mcp 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +2 -11
- package/package.json +2 -2
- package/python/docx_converter.py +1220 -428
- package/python/html_fixer.py +125 -0
- package/python/html_validator.py +389 -0
- package/python/sample/example.html +407 -0
- package/python/server.py +193 -120
- package/python/test_error_detection.py +84 -0
- package/python/__pycache__/docx_converter.cpython-313.pyc +0 -0
|
@@ -0,0 +1,407 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>MCP复杂格式测试</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: '微软雅黑';
|
|
10
|
+
font-size: 12pt;
|
|
11
|
+
line-height: 1.8;
|
|
12
|
+
padding: 20px;
|
|
13
|
+
max-width: 800px;
|
|
14
|
+
margin: 0 auto;
|
|
15
|
+
}
|
|
16
|
+
h1 { font-family: '微软雅黑'; font-size: 18pt; text-align: center; color: #333; }
|
|
17
|
+
h2 { font-family: '微软雅黑'; font-size: 16pt; color: #4a3f6b; border-bottom: 2px solid #667eea; padding-bottom: 10px; }
|
|
18
|
+
h3 { font-family: '微软雅黑'; font-size: 14pt; color: #5b4e8c; }
|
|
19
|
+
</style>
|
|
20
|
+
</head>
|
|
21
|
+
<body>
|
|
22
|
+
<h1>MCP复杂格式测试文档</h1>
|
|
23
|
+
<p class="center">测试各种字体、颜色、大小、段距和嵌套结构</p>
|
|
24
|
+
|
|
25
|
+
<h2>一、字体样式测试</h2>
|
|
26
|
+
|
|
27
|
+
<h3>1.1 基础文本格式</h3>
|
|
28
|
+
<p>这是普通文本。<strong>这是加粗文本</strong>。<em>这是斜体文本</em>。<u>这是下划线文本</u>。<s>这是删除线文本</s>。</p>
|
|
29
|
+
|
|
30
|
+
<p><strong><em>加粗斜体组合</em></strong>、<u><strong>加粗下划线组合</strong></u>、<s><em>斜体删除线组合</em></s>。</p>
|
|
31
|
+
|
|
32
|
+
<h3>1.2 上标和下标</h3>
|
|
33
|
+
<p>数学公式：E = mc<sup>2</sup>，化学式：H<sub>2</sub>O，二氧化碳：CO<sub>2</sub>。</p>
|
|
34
|
+
<p>复杂公式：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>，x<sub>1</sub> + x<sub>2</sub> = 10。</p>
|
|
35
|
+
|
|
36
|
+
<h2>二、颜色测试</h2>
|
|
37
|
+
|
|
38
|
+
<h3>2.1 文本颜色</h3>
|
|
39
|
+
<p>
|
|
40
|
+
<span style="color: #FF0000;">红色文本</span>、
|
|
41
|
+
<span style="color: #00FF00;">绿色文本</span>、
|
|
42
|
+
<span style="color: #0000FF;">蓝色文本</span>、
|
|
43
|
+
<span style="color: #FF00FF;">紫色文本</span>、
|
|
44
|
+
<span style="color: #FFA500;">橙色文本</span>。
|
|
45
|
+
</p>
|
|
46
|
+
|
|
47
|
+
<h3>2.2 背景高亮</h3>
|
|
48
|
+
<p>
|
|
49
|
+
<span class="highlight">黄色高亮</span>、
|
|
50
|
+
<span style="background-color: #E3F2FD;">浅蓝背景</span>、
|
|
51
|
+
<span style="background-color: #D4EDDA;">浅绿背景</span>、
|
|
52
|
+
<span style="background-color: #FFF3CD;">浅黄背景</span>、
|
|
53
|
+
<span style="background-color: #F8D7DA;">浅红背景</span>。
|
|
54
|
+
</p>
|
|
55
|
+
|
|
56
|
+
<h3>2.3 颜色和格式组合</h3>
|
|
57
|
+
<p>
|
|
58
|
+
<strong><span style="color: #FF0000;">红色加粗</span></strong>、
|
|
59
|
+
<em><span style="color: #0000FF;">蓝色斜体</span></em>、
|
|
60
|
+
<u><span style="color: #00FF00;">绿色下划线</span></u>、
|
|
61
|
+
<span style="color: #FF00FF; background-color: #FFFF00;">紫色文字黄色背景</span>。
|
|
62
|
+
</p>
|
|
63
|
+
|
|
64
|
+
<h2>三、公式测试</h2>
|
|
65
|
+
|
|
66
|
+
<h3>3.1 基础公式</h3>
|
|
67
|
+
<p>数学公式：<math>E = mc^2</math>、<math>H_2O</math>、<math>CO_2</math>、<math>a^2 + b^2 = c^2</math></p>
|
|
68
|
+
<p>希腊字母：α、β、γ、δ、π、θ、λ、μ、σ、φ、ω</p>
|
|
69
|
+
<p>数学符号：×、÷、±、≠、≤、≥、√、∞、·</p>
|
|
70
|
+
|
|
71
|
+
<h3>3.2 复杂公式</h3>
|
|
72
|
+
<p>勾股定理：<math>a^2 + b^2 = c^2</math></p>
|
|
73
|
+
<p>二次方程：<math>ax^2 + bx + c = 0</math></p>
|
|
74
|
+
<p>圆面积公式：<math>S = \pi r^2</math></p>
|
|
75
|
+
<p>三角函数：<math>\sin^2\theta + \cos^2\theta = 1</math></p>
|
|
76
|
+
<p>欧拉公式：<math>e^{i\pi} + 1 = 0</math></p>
|
|
77
|
+
|
|
78
|
+
<h3>3.3 化学公式</h3>
|
|
79
|
+
<p>水分子：<math>H_2O</math></p>
|
|
80
|
+
<p>二氧化碳：<math>CO_2</math></p>
|
|
81
|
+
<p>硫酸：<math>H_2SO_4</math></p>
|
|
82
|
+
<p>氨气：<math>NH_3</math></p>
|
|
83
|
+
<p>甲烷：<math>CH_4</math></p>
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
<h2>四、字体大小测试</h2>
|
|
88
|
+
|
|
89
|
+
<h3>3.1 不同字号</h3>
|
|
90
|
+
<p style="font-size: 10pt;">这是10pt小号字体。</p>
|
|
91
|
+
<p style="font-size: 12pt;">这是12pt标准字体。</p>
|
|
92
|
+
<p style="font-size: 14pt;">这是14pt中号字体。</p>
|
|
93
|
+
<p style="font-size: 16pt;">这是16pt大号字体。</p>
|
|
94
|
+
<p style="font-size: 18pt;">这是18pt特大号字体。</p>
|
|
95
|
+
|
|
96
|
+
<h3>3.2 混合字号</h3>
|
|
97
|
+
<p>正常文本中<span style="font-size: 16pt;">插入大号字</span>和<span style="font-size: 10pt;">小号字</span>。</p>
|
|
98
|
+
|
|
99
|
+
<h2>四、段落样式测试</h2>
|
|
100
|
+
|
|
101
|
+
<h3>4.1 对齐方式</h3>
|
|
102
|
+
<p style="text-align: left;">这是左对齐段落（默认）。</p>
|
|
103
|
+
<p class="center">这是居中对齐段落。</p>
|
|
104
|
+
<p style="text-align: right;">这是右对齐段落。</p>
|
|
105
|
+
<p style="text-align: justify;">这是两端对齐段落。这是一段较长的文本，用于测试两端对齐效果。人工智能作为21世纪最具革命性的技术之一，正在深刻改变着人类社会的生产生活方式。</p>
|
|
106
|
+
|
|
107
|
+
<h3>4.2 段距测试</h3>
|
|
108
|
+
<p style="margin-bottom: 5pt;">这是段后距5pt的段落。</p>
|
|
109
|
+
<p style="margin-bottom: 15pt;">这是段后距15pt的段落。</p>
|
|
110
|
+
<p style="margin-bottom: 25pt;">这是段后距25pt的段落。</p>
|
|
111
|
+
|
|
112
|
+
<h3>4.3 行距测试</h3>
|
|
113
|
+
<p style="line-height: 1.0;">这是1.0倍行距的段落。人工智能作为21世纪最具革命性的技术之一，正在深刻改变着人类社会的生产生活方式。</p>
|
|
114
|
+
<p style="line-height: 1.5;">这是1.5倍行距的段落。人工智能作为21世纪最具革命性的技术之一，正在深刻改变着人类社会的生产生活方式。</p>
|
|
115
|
+
<p style="line-height: 2.0;">这是2.0倍行距的段落。人工智能作为21世纪最具革命性的技术之一，正在深刻改变着人类社会的生产生活方式。</p>
|
|
116
|
+
|
|
117
|
+
<h2>五、字体测试</h2>
|
|
118
|
+
|
|
119
|
+
<h3>5.1 字体家族</h3>
|
|
120
|
+
<p><span style="font-family: 宋体;">宋体字体</span>、<span style="font-family: 微软雅黑;">微软雅黑字体</span>、<span style="font-family: 黑体;">黑体字体</span>、<span style="font-family: 楷体;">楷体字体</span>。</p>
|
|
121
|
+
<p><span style="font-family: Arial;">Arial</span>、<span style="font-family: Times New Roman;">Times New Roman</span>、<span style="font-family: Courier New;">Courier New</span>、<span style="font-family: Georgia;">Georgia</span>。</p>
|
|
122
|
+
|
|
123
|
+
<h3>5.2 字体变换嵌套</h3>
|
|
124
|
+
<p><strong>加粗中的宋体：<span style="font-family: 宋体;">这是宋体文字</span></strong></p>
|
|
125
|
+
<p><em>斜体中的黑体：<span style="font-family: 黑体;">这是黑体文字</span></em></p>
|
|
126
|
+
<p><span style="color: #FF0000;">红色中的楷体：<span style="font-family: 楷体;">这是楷体文字</span></span></p>
|
|
127
|
+
<p><span style="font-size: 16pt;">大号字中的微软雅黑：<span style="font-family: 微软雅黑;">这是微软雅黑文字</span></span></p>
|
|
128
|
+
|
|
129
|
+
<h3>5.3 多层字体嵌套</h3>
|
|
130
|
+
<p>普通文本 <span style="font-family: 宋体; font-size: 14pt;">宋体14pt</span> 继续 <span style="font-family: 黑体; color: #FF0000;">红色黑体</span> 继续 <span style="font-family: 楷体; background-color: #FFFF00;">黄色背景楷体</span> 结束。</p>
|
|
131
|
+
|
|
132
|
+
<h3>5.4 字体组合测试</h3>
|
|
133
|
+
<p><strong><span style="font-family: Arial; font-size: 14pt;">Arial 14pt 加粗</span></strong></p>
|
|
134
|
+
<p><em><span style="font-family: Times New Roman; color: #0000FF;">Times New Roman 蓝色斜体</span></em></p>
|
|
135
|
+
<p><u><span style="font-family: Courier New; font-size: 16pt;">Courier New 16pt 下划线</span></u></p>
|
|
136
|
+
<p><span style="font-family: Georgia; font-size: 18pt; color: #800080;">Georgia 18pt 紫色</span></p>
|
|
137
|
+
|
|
138
|
+
<h2>六、复杂嵌套测试</h2>
|
|
139
|
+
|
|
140
|
+
<h3>6.1 格式嵌套</h3>
|
|
141
|
+
<p>
|
|
142
|
+
复杂嵌套1：<strong>加粗文本中包含<em>斜体</em>和<span style="color: #FF0000;">红色文字</span></strong>。
|
|
143
|
+
</p>
|
|
144
|
+
<p>
|
|
145
|
+
复杂嵌套2：<u>下划线中包含<strong>加粗</strong>和<span style="background-color: #FFFF00;">高亮</span></u>。
|
|
146
|
+
</p>
|
|
147
|
+
|
|
148
|
+
<h3>6.2 多层嵌套</h3>
|
|
149
|
+
<p>
|
|
150
|
+
三层嵌套：<strong>第一层加粗<em>第二层斜体<span style="color: #FF00FF;">第三层紫色</span></em></strong>。
|
|
151
|
+
</p>
|
|
152
|
+
<p>
|
|
153
|
+
四层嵌套：<u>下划线<strong>加粗<em>斜体<span style="background-color: #FFFF00; color: #FF0000;">红字黄底</span></em></strong></u>。
|
|
154
|
+
</p>
|
|
155
|
+
|
|
156
|
+
<h2>七、提示框测试</h2>
|
|
157
|
+
|
|
158
|
+
<div class="info">
|
|
159
|
+
<strong>信息提示：</strong>这是一个信息提示框，使用蓝色背景和边框。
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div class="warning">
|
|
163
|
+
<strong>警告提示：</strong>这是一个警告提示框，使用黄色背景和边框。
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<div class="success">
|
|
167
|
+
<strong>成功提示：</strong>这是一个成功提示框，使用绿色背景和边框。
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<div class="info">
|
|
171
|
+
<strong>复杂内容：</strong>提示框中包含<strong>加粗</strong>、<em>斜体</em>和<span style="color: #FF0000;">红色文字</span>。
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div class="info">
|
|
175
|
+
<strong>字体测试：</strong>提示框中包含<span style="font-family: 宋体;">宋体</span>、<span style="font-family: 黑体;">黑体</span>、<span style="font-family: 楷体;">楷体</span>。
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<h2>八、列表嵌套测试</h2>
|
|
179
|
+
|
|
180
|
+
<h3>7.1 无序列表嵌套</h3>
|
|
181
|
+
<ul>
|
|
182
|
+
<li>一级项目A
|
|
183
|
+
<ul>
|
|
184
|
+
<li>二级项目A1
|
|
185
|
+
<ul>
|
|
186
|
+
<li>三级项目A1a</li>
|
|
187
|
+
<li>三级项目A1b</li>
|
|
188
|
+
</ul>
|
|
189
|
+
</li>
|
|
190
|
+
<li>二级项目A2</li>
|
|
191
|
+
</ul>
|
|
192
|
+
</li>
|
|
193
|
+
<li>一级项目B
|
|
194
|
+
<ul>
|
|
195
|
+
<li>二级项目B1</li>
|
|
196
|
+
<li>二级项目B2</li>
|
|
197
|
+
</ul>
|
|
198
|
+
</li>
|
|
199
|
+
</ul>
|
|
200
|
+
|
|
201
|
+
<h3>7.2 有序列表嵌套</h3>
|
|
202
|
+
<ol>
|
|
203
|
+
<li>第一步：准备工作
|
|
204
|
+
<ol>
|
|
205
|
+
<li>子步骤1.1：收集资料</li>
|
|
206
|
+
<li>子步骤1.2：整理数据</li>
|
|
207
|
+
</ol>
|
|
208
|
+
</li>
|
|
209
|
+
<li>第二步：执行操作
|
|
210
|
+
<ol>
|
|
211
|
+
<li>子步骤2.1：分析数据</li>
|
|
212
|
+
<li>子步骤2.2：生成报告</li>
|
|
213
|
+
</ol>
|
|
214
|
+
</li>
|
|
215
|
+
<li>第三步：完成工作</li>
|
|
216
|
+
</ol>
|
|
217
|
+
|
|
218
|
+
<h3>8.3 混合列表嵌套</h3>
|
|
219
|
+
<ul>
|
|
220
|
+
<li>无序项目1
|
|
221
|
+
<ol>
|
|
222
|
+
<li>有序子项目1.1</li>
|
|
223
|
+
<li>有序子项目1.2</li>
|
|
224
|
+
</ol>
|
|
225
|
+
</li>
|
|
226
|
+
<li>无序项目2
|
|
227
|
+
<ul>
|
|
228
|
+
<li>无序子项目2.1</li>
|
|
229
|
+
</ul>
|
|
230
|
+
</li>
|
|
231
|
+
</ul>
|
|
232
|
+
|
|
233
|
+
<h2>九、引用嵌套测试</h2>
|
|
234
|
+
|
|
235
|
+
<blockquote>
|
|
236
|
+
这是一级引用内容，包含<strong>加粗</strong>和<em>斜体</em>。
|
|
237
|
+
<blockquote>
|
|
238
|
+
这是二级引用内容，包含<span style="color: #0000FF;">蓝色文字</span>。
|
|
239
|
+
<blockquote>
|
|
240
|
+
这是三级引用内容，包含<span style="background-color: #FFFF00;">高亮</span>和<span style="font-family: 宋体;">宋体文字</span>。
|
|
241
|
+
</blockquote>
|
|
242
|
+
</blockquote>
|
|
243
|
+
</blockquote>
|
|
244
|
+
|
|
245
|
+
<h2>十、代码测试</h2>
|
|
246
|
+
<h3>9.1 行内代码</h3>
|
|
247
|
+
<p>使用<code>print("Hello World")</code>输出信息。</p>
|
|
248
|
+
<p>函数<code>def calculate(x, y):</code>用于计算。</p>
|
|
249
|
+
|
|
250
|
+
<h3>9.2 代码块</h3>
|
|
251
|
+
<pre><code>def complex_function(data):
|
|
252
|
+
"""
|
|
253
|
+
这是一个复杂的函数
|
|
254
|
+
包含多行代码
|
|
255
|
+
"""
|
|
256
|
+
result = []
|
|
257
|
+
for item in data:
|
|
258
|
+
if item > 0:
|
|
259
|
+
result.append(item * 2)
|
|
260
|
+
else:
|
|
261
|
+
result.append(0)
|
|
262
|
+
return result</code></pre>
|
|
263
|
+
|
|
264
|
+
<h2>十一、表格测试</h2>
|
|
265
|
+
|
|
266
|
+
<h3>10.1 基础表格</h3>
|
|
267
|
+
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
|
|
268
|
+
<thead>
|
|
269
|
+
<tr>
|
|
270
|
+
<th style="border: 1px solid #ddd; padding: 12px; text-align: center; background-color: #667eea; color: white;">功能</th>
|
|
271
|
+
<th style="border: 1px solid #ddd; padding: 12px; text-align: center; background-color: #667eea; color: white;">支持情况</th>
|
|
272
|
+
<th style="border: 1px solid #ddd; padding: 12px; text-align: center; background-color: #667eea; color: white;">备注</th>
|
|
273
|
+
</tr>
|
|
274
|
+
</thead>
|
|
275
|
+
<tbody>
|
|
276
|
+
<tr style="background-color: #f9f9f9;">
|
|
277
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">字体样式</td>
|
|
278
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;"><span style="color: #28a745;">✓</span></td>
|
|
279
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">加粗、斜体、下划线等</td>
|
|
280
|
+
</tr>
|
|
281
|
+
<tr>
|
|
282
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">颜色</td>
|
|
283
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;"><span style="color: #28a745;">✓</span></td>
|
|
284
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">文本颜色和背景色</td>
|
|
285
|
+
</tr>
|
|
286
|
+
<tr style="background-color: #f9f9f9;">
|
|
287
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">字号</td>
|
|
288
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;"><span style="color: #28a745;">✓</span></td>
|
|
289
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">支持任意字号</td>
|
|
290
|
+
</tr>
|
|
291
|
+
</tbody>
|
|
292
|
+
</table>
|
|
293
|
+
|
|
294
|
+
<h3>10.2 表格内嵌格式</h3>
|
|
295
|
+
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
|
|
296
|
+
<thead>
|
|
297
|
+
<tr>
|
|
298
|
+
<th style="border: 1px solid #ddd; padding: 12px; text-align: center; background-color: #667eea; color: white;">测试项</th>
|
|
299
|
+
<th style="border: 1px solid #ddd; padding: 12px; text-align: center; background-color: #667eea; color: white;">格式内容</th>
|
|
300
|
+
</tr>
|
|
301
|
+
</thead>
|
|
302
|
+
<tbody>
|
|
303
|
+
<tr>
|
|
304
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">加粗测试</td>
|
|
305
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">这是<strong>加粗文字</strong>的测试</td>
|
|
306
|
+
</tr>
|
|
307
|
+
<tr style="background-color: #f9f9f9;">
|
|
308
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">颜色测试</td>
|
|
309
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;"><span style="color: #FF0000;">红色</span>、<span style="color: #0000FF;">蓝色</span>、<span style="background-color: #FFFF00;">黄色背景</span></td>
|
|
310
|
+
</tr>
|
|
311
|
+
<tr>
|
|
312
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">组合测试</td>
|
|
313
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;"><strong><span style="color: #FF0000;">红字加粗</span></strong>、<em><span style="background-color: #E3F2FD;">蓝底斜体</span></em></td>
|
|
314
|
+
</tr>
|
|
315
|
+
<tr style="background-color: #f9f9f9;">
|
|
316
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;">公式测试</td>
|
|
317
|
+
<td style="border: 1px solid #ddd; padding: 12px; text-align: center;"><math>E = mc^2</math>、<math>H_2O</math>、<math>a^2 + b^2 = c^2</math></td>
|
|
318
|
+
</tr>
|
|
319
|
+
</tbody>
|
|
320
|
+
</table>
|
|
321
|
+
|
|
322
|
+
<h2>十二、多栏布局测试</h2>
|
|
323
|
+
|
|
324
|
+
<h3>11.1 双栏布局</h3>
|
|
325
|
+
<div class="columns" data-cols="2">
|
|
326
|
+
<p><strong>第一栏：</strong>这是双栏布局的第一栏内容。多栏布局常用于报纸、杂志等排版场景，可以让文档更加美观和易读。</p>
|
|
327
|
+
<p><strong>第二栏：</strong>这是双栏布局的第二栏内容。栏与栏之间会自动平衡内容，让每栏的高度大致相同。</p>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="columns" data-cols="1"></div>
|
|
331
|
+
|
|
332
|
+
<div class="columns" data-cols="2">
|
|
333
|
+
<p>第一栏续：在分栏区域内，文本会自动从一栏流向下一栏，保持整体的平衡和美观。</p>
|
|
334
|
+
<p>第二栏续：这种排版方式在杂志和报纸中很常见，让文档更具专业感和设计感。</p>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
<div class="columns" data-cols="1"></div>
|
|
338
|
+
|
|
339
|
+
<h3>11.2 三栏布局</h3>
|
|
340
|
+
<div class="columns" data-cols="3">
|
|
341
|
+
<p><strong>栏1：</strong>三栏布局适合展示更紧凑的内容。</p>
|
|
342
|
+
<p><strong>栏2：</strong>每栏的宽度会自动调整。</p>
|
|
343
|
+
<p><strong>栏3：</strong>栏间距也可以自定义设置。</p>
|
|
344
|
+
</div>
|
|
345
|
+
|
|
346
|
+
<div class="columns" data-cols="1"></div>
|
|
347
|
+
|
|
348
|
+
<div class="columns" data-cols="3">
|
|
349
|
+
<p>栏1续：可以混合使用不同栏数。</p>
|
|
350
|
+
<p>栏2续：这种排版方式很灵活。</p>
|
|
351
|
+
<p>栏3续：让文档更具设计感。</p>
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
<div class="columns" data-cols="1"></div>
|
|
355
|
+
|
|
356
|
+
<h3>11.3 回到单栏测试</h3>
|
|
357
|
+
<p>这是回到单栏后的内容，应该正常显示为单栏布局。三栏布局结束后，通过设置 data-cols="1" 恢复为单栏模式。</p>
|
|
358
|
+
|
|
359
|
+
<div class="columns" data-cols="1"></div>
|
|
360
|
+
|
|
361
|
+
<h2>十三、图片测试</h2>
|
|
362
|
+
|
|
363
|
+
<h3>13.1 基本图片插入</h3>
|
|
364
|
+
<p>下面是一张基本的图片插入示例：</p>
|
|
365
|
+
<img src="屏幕截图 2024-10-21 113235.png" alt="屏幕截图" />
|
|
366
|
+
|
|
367
|
+
<h3>13.2 居中对齐图片</h3>
|
|
368
|
+
<p>居中显示的图片（默认）：</p>
|
|
369
|
+
<img src="屏幕截图 2024-10-21 113235.png" alt="居中图片" align="center" />
|
|
370
|
+
|
|
371
|
+
<h3>13.3 左对齐图片</h3>
|
|
372
|
+
<p>左对齐显示的图片：</p>
|
|
373
|
+
<img src="屏幕截图 2024-10-21 113235.png" alt="左对齐图片" align="left" />
|
|
374
|
+
|
|
375
|
+
<h3>13.4 右对齐图片</h3>
|
|
376
|
+
<p>右对齐显示的图片：</p>
|
|
377
|
+
<img src="屏幕截图 2024-10-21 113235.png" alt="右对齐图片" align="right" />
|
|
378
|
+
|
|
379
|
+
<h3>13.5 指定宽度的图片</h3>
|
|
380
|
+
<p>指定宽度为4英寸的图片：</p>
|
|
381
|
+
<img src="屏幕截图 2024-10-21 113235.png" alt="指定宽度图片" width="384" />
|
|
382
|
+
|
|
383
|
+
<h3>13.6 指定高度的图片</h3>
|
|
384
|
+
<p>指定高度为3英寸的图片：</p>
|
|
385
|
+
<img src="屏幕截图 2024-10-21 113235.png" alt="指定高度图片" height="288" />
|
|
386
|
+
|
|
387
|
+
<h3>13.7 同时指定宽高的图片</h3>
|
|
388
|
+
<p>同时指定宽度和高度的图片（4x3英寸）：</p>
|
|
389
|
+
<img src="屏幕截图 2024-10-21 113235.png" alt="指定宽高图片" width="384" height="288" />
|
|
390
|
+
|
|
391
|
+
<h2>十四、综合复杂测试</h2>
|
|
392
|
+
|
|
393
|
+
<div class="info">
|
|
394
|
+
<strong>综合测试：</strong>这是一个包含各种格式的复杂段落。
|
|
395
|
+
包含<strong>加粗</strong>、<em>斜体</em>、<u>下划线</u>、<s>删除线</s>、
|
|
396
|
+
<span style="color: #FF0000;">红色</span>、
|
|
397
|
+
<span style="background-color: #FFFF00;">高亮</span>、
|
|
398
|
+
<span style="font-size: 14pt;">大字</span>、
|
|
399
|
+
上标<sup>2</sup>、下标<sub>2</sub>、
|
|
400
|
+
<code>代码</code>。
|
|
401
|
+
</div>
|
|
402
|
+
|
|
403
|
+
<p class="center" style="margin-top: 50px; font-size: 16pt; color: #667eea;">
|
|
404
|
+
<strong>—— 测试结束 ——</strong>
|
|
405
|
+
</p>
|
|
406
|
+
</body>
|
|
407
|
+
</html>
|