Word文件转HTML_vscode word转html-程序员宅基地

技术标签： 软技能  

Word 转 HTML

第一步：使用word文档打开文件，将文档另存为 "筛选过的网页(*.htm,*.html)"格式 到 “a文件夹” 下

在这里插入图片描述

此时的 “a文件夹” 下会多出一个文件和文件夹：

  • 文件：包含html内容、js脚本、css样式，点击可通过浏览器直接预览
  • 文件夹：包含word文档中的图片

在这里插入图片描述

第二步：将 html 或者 htm 文件使用编辑器打开（以vscode为例）

在这里插入图片描述

如果出现乱码，点击 右下角 UTF-8 ，选择通过编码重新打开，点击后，选择 gb2312 即可

如果仍存在乱码使用其余编码格式尝试 或 谷歌搜索，word软件转换的html该以什么编码格式打开
在这里插入图片描述

第三步：通过浏览器打开 htm（或 html） 文件，此时点击目录即可跳转到相应锚点

在这里插入图片描述

第四步：此时开始调整样式，使用 <div class="left-nav></div>" 包裹整个目录
  • 你可以通过vscode的搜索功能快速定位整个目录的元素，例如：我先搜索了 “一、业主端APP”
  • 也许存在多个匹配项，可通过hml（或html） 打开的网页可快速确定出现的第几个是匹配目录的
  • 给目录元素头部添加 <div class="left-nav">，尾部添加 </div>
  • 搜索 </style> 快速定位到 css 样式的编写位置，在其后添加 如下代码：
body > div {
    
  position: relative;
  overflow: hidden;
  margin-left: 260px;
}
.left-nav {
    
  float: left;
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  height: 100%;
  background: #fafafa;
  border-right: 1px solid #eee;
  padding-bottom: 20px;
}
.left-nav a {
    
  color: #364149;
  display: inline-block;
  padding: 8px 0;
  text-decoration: none;
}
.left-nav a:visited,.left-nav span.MsoHyperlinkFollowed {
    
  color: #008cff;
}
.left-nav a:active,.left-nav span.MsoHyperlink {
    
  color: #008cff;
}
.left-nav p:last-child {
    
  margin-bottom: 20px;
}
p.MsoTocHeading {
    
  padding: 20px 0 !important;
  text-align:center;
  page-break-after:auto;
  color: #364149;
  font-weight: bold;
}
p.MsoToc1 {
    
  padding-left: 10px;
}
p.MsoToc1 span {
    
  font-weight: bold !important;
}
p.MsoToc2 {
    
  margin-left: 16px;
}
p.MsoToc3 {
    
  margin-left: 40px;
}
p.MsoToc3 span{
    
  font-size: 15px;
}
.zw2 {
    
  padding-top: 30px;
}

实际上就是向被包裹的目录元素设置固定定位，以及样式内容，同时对内容元素设置 左外边距（margin-left）

如果添加代码后保存时提示无法直接修改，直接选择另存为即可 ，此处我另存为了 rong.htm（名字无限制）
在这里插入图片描述

要点记录：

详解第四步 如何搜索目录元素

  • 可先全选htm代码，使用编辑器自带的 整理代码功能，让代码格式更便于阅读
  • 为何我的文件转换后的文件没有目录
    • 转换文件不会出现原本就不存在的东西，目录需要在word文档中存在目录
    • 如果不存在，使用word的插入目录功能，点击引用 -> 目录，生成目录
      在这里插入图片描述
    • 注意生成的目录选第一种，不要第二种，否则将花费时间去掉htm文件中的 “…”
      在这里插入图片描述在这里插入图片描述
    • 通过浏览器控制台配合编辑器可快速定位，一般都是在 WordSectionX div中，根据你目录生成位置
    • MsoTocX 即你的目录层级，一级目录就是 MsoToc1，以此类推
    • 找到最后一个 MsoTocX，就是你需要使用 <div class="left-nav"></div> 包裹的HTML元素
      在这里插入图片描述
      在这里插入图片描述

word 转为html后部分内容渲染与原先不相同

  • 大部分是原因是使用了形状，这类元素可以在word文档上随意拖拽的元素使用时需要注意尽可能水平居中，原因是定位不准，可能导致渲染的元素被隐藏
  • 使用word的表格功能可以很好的帮助定位元素的位置
    在这里插入图片描述
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42287935/article/details/108318982

智能推荐

Android bugreport 分析方法-程序员宅基地

文章浏览阅读98次。文章来源：https://www.jianshu.com/p/20e1bfdf5161作者：特立独行的佩奇Android bugreport 概述bugreport 是Android 系统下的一个工具，功能类似于系统的一个黑匣子；通过执行相应的命令可以获取到bugreport 包，其中包含设备日志，堆栈跟踪和其他诊断信息，可帮助您查找和修复系统错误；bugreport信息量非常之大，几乎涵盖整个系..._bugreport 日志目录结构

物联网|探索cortex-M系列CPU的内核|实验课程前的准备|开发环境构建|开发资料|物联网开发系列课程之零基础玩转Cortex-M系列CPU-学习笔记（5）_基于arm cortex的物联网开发软件-程序员宅基地

文章浏览阅读120次。物联网|探索cortex-M系列CPU的内核|实验课程前的准备|开发环境构建|开发资料|物联网开发系列课程之零基础玩转Cortex-M系列CPU-学习笔记（5）_基于arm cortex的物联网开发软件

华为云云耀云服务器L实例评测 | 企业建站 SoEasy_华为云l实例-程序员宅基地

文章浏览阅读513次。当你的云服务器绑定了域名之后，需要在 WordPress 同步配置域名，才能使用域名正常访问到你的 WordPress 网站。在 WordPress 的后台管理页面中，选择“设置”，接着选择“常规”，找到 “WordPress 地址（URL）”和“站点地址（URL）”，在这两项中填入你的域名，并保存即可生效。完成了以上这些步骤，你就具备了在线访问你的网站，以及配置你的网站的能力。安装插件的步骤很简单，你只需要在管理界面的左侧菜单中选择“插件”，然后点击“安装插件”按钮，就会进入到插件安装列表页面。_华为云l实例

C# Winform 中使用 Webview2_c# webview2-程序员宅基地

文章浏览阅读6k次。目前的windows/Linux下的UI方案，以Qt为主，Flutter, Electron为辅，其他的各种UI都是不堪大用。除了使用CEF的Qt/C++/C#方案，Qt+WebEngine, 目前在Windows下各家的最终归路都转向Webview2方案，可以极大地减少发布的程序的大小。_c# webview2

C++程序员应了解的那些事（68）非类型模板参数_包含非静态存储持续时间的变量不能用作非类型参数-程序员宅基地

文章浏览阅读1.4k次，点赞3次，收藏9次。模板除了定义类型参数，我们还可以在模板定义非类型参数。什么是非类型形参？顾名思义，就是表示一个固定类型的常量而不是一个类型。※ 固定类型是有局限的，只有整形，指针和引用才能作为非类型形参；※ 而且绑定到该形参的实参必须是常量表达式，即编译期就能确认结果。非类型形参的局限：1.浮点数不可以作为非类型形参，包括float，double。具体原因可能是历史因素，也许未来C++会支持浮点数；2.类不可以作为非类型形参；3.字符串不可以作为非类型形参；4.整形，可转化为整形的类型都可以作为形参，比如int_包含非静态存储持续时间的变量不能用作非类型参数

正规的IT外包公司的报价组成_软件劳务派遣报价-程序员宅基地

文章浏览阅读3k次。在IT驻场外包中，外包公司在派遣人员与用人单位之间到底从中抽了多少？_软件劳务派遣报价

随便推点

C语言 在一维数组中找出值最小的元素，并将其与第一个元素的值对调_在一维数组中找出值最小的元素,并将其值与第一个元素的值对调。-程序员宅基地

文章浏览阅读9.6k次，点赞7次，收藏21次。因本人才疏学浅，见识浅薄，有不当之处望指正，谢谢！在一维数组中找出值最小的元素，并将其与第一个元素的值对调思路：每次比较过程中，若一个数比最小的数还要小。那它就是最小的数// 找最小，并和第一个元素的值互换#include &amp;lt;stdio.h&amp;gt;#define N 10int main(void){ int a[N],i,t,min =0; printf(&quot;input ..._在一维数组中找出值最小的元素,并将其值与第一个元素的值对调。

IDEA中快捷创建SpringBoot主启动类的方法的设置_idea本地启动spring配置主类-程序员宅基地

文章浏览阅读4.9k次，点赞4次，收藏11次。IDEA中快捷创建SpringBoot主启动类的方法的设置,自动同步同类名的参数_idea本地启动spring配置主类

Android 动态添加View 并设置id_android字符串动态生成view id-程序员宅基地

文章浏览阅读2.7w次，点赞14次，收藏40次。主页面布局（main_activity.xml） LinearLayout 里面加一个Button，注意这里的LinearLayout要有orientation&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;LinearLayout ="http://schemas.android.com/apk..._android字符串动态生成view id

[arcgis插件]尖锐角检查/批量处理工具-GIS程序猿_arcgis如何查尖锐角-程序员宅基地

文章浏览阅读459次。2、设置合并优先级。选择字段，设置优先级。无需优先级，可以吧文字清空，则会根据与地块有相同信息字段的值来合并。[arcgis插件]尖锐角检查/批量处理工具，支持arcgis10.2-10.8版本。7、仅仅检查选中的地块：先选中地块再执行流程。5、处理流程设置：1 处理，2 切割，3 合并。6、顺便检查选择检查狭长面、自相交、重复节点。4、存在尖锐角并且面积小于这个面积阈值，则无需切割，直接合并。可以选择shp数据、GDB或者MDB的矢量面图层。年度变更，又是尖锐角，死磕尖锐角，就不信搞不定它。_arcgis如何查尖锐角

例子：BlackBerry真正的后台运行程序，Task里面看不到的哦_黑莓手机guid-程序员宅基地

文章浏览阅读5k次。说明：1.BlackBerry_App_Descriptor.xml设置程序为Auto-run on startup，Do not display the application icon on the BlackBerry home screen2.手机开机后自动运行 BackgroundApplication3.主程序BackgroundApplication的main中，执行BackgroundThread.waitForSingleton().start();启动后台线程4.BackgroundTh_黑莓手机guid

oracle中查找执行效率低下的SQL_oracle 怎么抓取执行慢的sql-程序员宅基地

文章浏览阅读9.9k次。oracle中查找执行效率低下的SQLkt431128 发布于 9个月前，共有 0 条评论v$sqltext：存储的是完整的SQL,SQL被分割v$sqlarea：存储的SQL 和一些相关的信息，比如累计的执行次数，逻辑读，物理读等统计信息（统计）v$sql：内存共享SQL区域中已经解析的SQL语句。（即时） select opname, ta_oracle 怎么抓取执行慢的sql

推荐文章

热门文章

相关标签