DOCX 转 HTML 对照表

以下是一个系统的 ‌DOCX 转 HTML 对照表‌，涵盖常见文档元素和格式的对应关系，适用于手动或半自动转换场景：

---

‌基础结构对照表‌

‌DOCX 元素/格式‌	‌HTML 对应标签或语法‌	‌备注‌
‌标题‌
标题1 (标题1 样式)	<h1>标题内容</h1>	层级从 h1 到 h6
标题2 (标题2 样式)	<h2>标题内容</h2>
标题3 (标题3 样式)	<h3>标题内容</h3>
‌正文段落‌	<p>段落内容</p>	段落间用 <p> 标签分隔
‌强制换行‌	<br>	行内换行符
‌文本格式‌
加粗	<strong>加粗文本</strong> 或 <b>加粗文本</b>	推荐语义化标签 <strong>
斜体	<em>斜体文本</em> 或 <i>斜体文本</i>	推荐语义化标签 <em>
下划线	<span style="text-decoration: underline">下划线文本</span>	避免滥用，HTML 默认不支持下划线
删除线	<del>删除线文本</del> 或 <s>删除线文本</s>	语义化标签 <del> 表示删除内容
上标	<sup>上标内容</sup>	如 x² → x<sup>2</sup>
下标	<sub>下标内容</sub>	如 H₂O → H<sub>2</sub>O
‌字体和颜色‌
字体大小	<span style="font-size: 14px">文本</span>	使用 CSS 内联样式
字体颜色	<span style="color: #ff0000">红色文本</span>
高亮文本	<mark>高亮内容</mark> 或 <span style="background-color: yellow">高亮</span>	<mark> 为语义化标签
‌列表‌
无序列表（项目符号）	<ul> <li>项目1</li> <li>项目2</li> </ul>	默认符号为圆点，可用 CSS 修改
有序列表（编号）	<ol> <li>项目1</li> <li>项目2</li> </ol>	支持 type 属性（如数字、字母）
多级列表（嵌套）	<ul> <li>一级项目 <ul> <li>二级项目</li> </ul> </li> </ul>	嵌套 <ul> 或 <ol>
‌表格‌
普通表格	<table> <tr> <th>表头</th> </tr> <tr> <td>单元格</td> </tr> </table>	<th> 表示表头，<td> 表示单元格
合并单元格	<td colspan="2">跨列</td> 或 <td rowspan="2">跨行</td>	通过 colspan 和 rowspan 属性实现
表格边框	<table style="border: 1px solid #000">	推荐用 CSS 控制样式
‌图片‌
插入图片	<img src="image.jpg" alt="图片描述" width="600" height="400">	alt 属性为必填（无障碍访问要求）
带标题的图片	<figure> <img src="image.jpg" alt="描述"> <figcaption>图片标题</figcaption> </figure>	语义化标签 <figure> 和 <figcaption>
‌超链接‌
普通链接	<a href="https://example.com">链接文本</a>	可添加 target="_blank" 在新标签页打开
锚点跳转	<a href="#section1">跳转到章节</a> 和 <h2 id="section1">目标章节</h2>	通过 id 属性定位
‌引用和注释‌
块引用	<blockquote>引用内容</blockquote>	长段引用
脚注	<sup><a href="#fn1"></a></sup> + <div id="fn1">脚注内容</div>	需手动关联锚点
‌代码块‌
行内代码	<code>print("Hello")</code>	等宽字体
多行代码块	<pre><code>代码内容</code></pre>	<pre> 保留缩进和换行

---

‌高级格式对照表‌

‌DOCX 特殊格式‌	‌HTML 解决方案‌	‌备注‌
分页符	<div style="page-break-before: always"></div>	通过 CSS 控制分页
分栏布局	<div style="column-count: 2">分栏内容</div>	需 CSS3 支持
页眉/页脚	<header>页眉内容</header> 或 <footer>页脚内容</footer>	语义化标签，需搭配 CSS 定位
文本框/浮动框	<div style="border: 1px solid #000; padding: 10px">文本框内容</div>	用 CSS 定义边框和边距
数学公式	<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> <p>公式：$E=mc^2$</p>	使用 MathJax 渲染 LaTeX 公式
响应式表格	<div style="overflow-x: auto"> <table>...</table> </div>	添加横向滚动条适配移动端

---

‌自动转换工具推荐‌

1. ‌Microsoft Word 自带功能‌

   • 直接另存为 .html 文件，但生成的 HTML 代码冗余，需手动清理。

2. ‌Pandoc‌

   • 命令：pandoc input.docx -o output.html
   • 支持基础格式转换，可保留标题、列表、表格等。

3. ‌在线转换器‌

   • Word to HTML Online：保留样式并生成简洁 HTML。

4. ‌专业工具‌

   • Adobe Acrobat：导出为 HTML 并优化布局。

---

‌注意事项‌

1. ‌样式分离‌：

   • 避免直接在 HTML 中使用内联样式（如 <font>），推荐用 CSS 文件统一控制样式。
   • 示例：

     /* styles.css */ h1 { color: #333; font-size: 24px; } table { border-collapse: collapse; }

2. ‌语义化标签‌：

   • 优先使用 <strong>, <em>, <header>, <footer> 等语义化标签，而非纯样式标签（如 <b>, <i>）。

3. ‌复杂内容处理‌：

   • DOCX 中的复杂表格、文本框、公式等需手动调整或借助 JavaScript 库（如 MathJax）。

4. ‌编码问题‌：

   • 确保 HTML 文件使用 UTF-8 编码：<meta charset="UTF-8">。

5. ‌响应式设计‌：

   • 添加视口标签适配移动端：<meta name="viewport" content="width=device-width, initial-scale=1.0">。

---

通过此对照表，您可以快速将 DOCX 内容转换为结构清晰、语义化的 HTML 代码。复杂格式建议结合 CSS 和 JavaScript 进一步优化！