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

智能推荐

如何使用Unity制作虚拟导览(一)_unity 商场导览程序-程序员宅基地

文章浏览阅读3.2k次，点赞3次，收藏12次。Unity用来制作游戏已经是目前市场上的一个发展趋势，而且有越来越多的公司与开发者不断的加入，那么Unity的应用是否能涵盖到各种领域?如果使用Unity制作建筑景观模拟？没错，这已是一个新时代的潮流，许多设计院的老板们发现，如果还是用效果图与一段动画展示已经很难满足客户的需求了，而公司内部现有的CAD软件与3dsmax能否与Unity完美搭配？是否需要其他的投入？我们来看看现在设计院的情_unity 商场导览程序

c# async await-程序员宅基地

文章浏览阅读8.1k次，点赞6次，收藏14次。本篇博客来谈一下我对c#中的async和awaite关键字的理解。先来聊聊我在理解这个异步编程机制时的困惑吧。 我看了[使用 Async 和 Await 的异步编程（C# 和 Visual Basic）]这篇文章后，感觉so easy，异步方法返回一个Task对象，凭着我对Task类的“深入理解”，我就断定：当调用一个同步方法时，由于同步方法返回的是Task，.net自动就让这个ta

关于XML解析报错问题（LF、CRLF）-程序员宅基地

文章浏览阅读2.1k次。报错内容的主要部分：UnicodeDecodeError: ‘gbk’ codec can’t decode byte 0x80 in position123: illegal multibyte sequence问题产生在做目标检测时，使用的数据集来自网络，在将xml和图片转换到特定格式时，有些xml文件解析出现了问题。像这样：我发现，当我未使用labelImg工具，而直接通过记..._xml解析报错

C1083_qt 提升自定义控件 no such file or directory-程序员宅基地

文章浏览阅读145次。在使用QT过程中会自定义一些控件。比如：自定义了一个树形控件。使用的时候，在界面上拖动创建一个树形控件，然后使用“提升为”当前自定义的树形控件。提升之后的结果：但是编译的时候，出现了错误：\GeneratedFiles\ui_QtGuiUserDraw.h(23): fatal error C1083: 无法打开包括文件: “userdrawgeotree.h”: No such file or directory (编译源文件 QtGuiUserDraw.cpp)1。_qt 提升自定义控件 no such file or directory

java中所有的类都继承于_Java中所有的类都是通过直接或间接地继承( )类得到的...-程序员宅基地

文章浏览阅读4.2k次。Java中所有的类都是通过直接或间接地继承( )类得到的答：java.lang.Object关于主机地址 192.168.19.125 (子网掩码： 255.255.255.248 )，以下说法正确答：广播地址为：192.168.19.127 ； 网络地址为：192.168.19.120 ；在小儿基本手法中，逆运内八卦的功效是?(??)答：宽胸利膈，行滞消食对事物的知觉是答：人脑对直接作用感官的..._java中所有的类都是通过直接或间接地继承( )类得到的。 2分 a、java.lang.object

【幻化万千戏红尘】qianfengDay21-java基础学习：进程、线程、Timer-程序员宅基地

文章浏览阅读222次。课程回顾：面向对象数组异常常用类集合IO流今日内容：进程：应用程序运行时，产生的独立的应用程序，拥有独立的代码和存储空间多进程：操作系统可以并发的执行多个进程线程：进程内部的一条执行路径多线程：java语言支持程序内部进行多线程开发进程内部可以有多个线程线程的作用：可以分担压力，提高性能主要用来完成耗时

随便推点

用python做一个数据查询软件_GitHub - lepfinder/dbmaster: 一个python实现的online SQL 查询器...-程序员宅基地

文章浏览阅读810次。介绍dbmaster是一个python编写的在线数据库查询客户端，可以有效隔离线上数据库环境，提供了一系列便于开发者使用的特性。操作体验尽量兼容navcat。github地址：https://github.com/lepfinder/dbmaster特性支持SQL语法高亮和自动提示支持SQL格式化支持执行选中的SQL片段支持数据库SCHEMA显示和表结构信息(双击表名显示表结构信息)支持快捷键执行..._dbmaster

利用Vultr主机安转宝塔Web面板搭建wordpress博客建站教程_vulrt 安装宝塔面板-程序员宅基地

文章浏览阅读924次。本篇文章是针对新手个人站长，来教大家利用Vultr主机如何安装宝塔Web面板搭建wordpress博客的方法。1、一台Vultr VPS主机，如果没有的可以购买（vultr官网），现在Vultr有活动，新用户注册送100美元，参考《Vultr优惠码汇总 Vultr优惠充值活动更新》。2、注册Vultr账号创建VPS实例创建VPS实例点击Deploy Now创建服务器实例，Status显示Running表示已经成功安装，一版需要等5-10分钟。IP Address:XX.XX.XXX.XXXU_vulrt 安装宝塔面板

日志文件分析_日志分析-程序员宅基地

文章浏览阅读818次，点赞2次，收藏3次。8.在test2这台服务器查看test1的/var/log/ssg.log日志。_日志分析

OpenCV 2.4.8组件结构全解析_opencv2.4 build结构-程序员宅基地

文章浏览阅读501次。之前啃了不少OpenCV的官方文档，发现如果了解了一些OpenCV整体的模块架构后，再重点学习自己感兴趣的部分的话，就会有一览众山小的感觉，于是，就决定写出这篇文章，作为启程OpenCV系列博文的第二篇。 至于OpenCV组件结构的研究方法，我们不妨管中窥豹，通过opencv安装路径下include目录里面头文件的分类存放，来一窥OpenCV这些年迅猛发展起来的庞杂组件架构。_opencv2.4 build结构

source insight遇到__attribute__解析不到函数_sourceinsight识别不了特殊的函数类型-程序员宅基地

文章浏览阅读7.2k次，点赞10次，收藏8次。bestboyxie 励志做一名能帮助到他人的程序员，如果你觉得这篇文章对你有帮助，麻烦你点赞最近分析DPDK代码的时候遇到 __attribute__这种东西。就无法解析对应的函数,跳转苦不堪言：如果你遇到这个问题，然后有幸，看到了我的文章。告诉你有幸啦打开 source insight 安装目录C:\Program Files (x86)\Sou_sourceinsight识别不了特殊的函数类型

Android 单独抽取 WebRtc-VAD（语音端点检测） 模块_android webrtc vad-程序员宅基地

文章浏览阅读3.7k次，点赞3次，收藏10次。本文基于webrtc最新源码进行抽取编译做简单讲解。最终目的是Android 单独抽取 WebRtc-VAD 模块，封装好JNI层，并且ndk-build出so库。希望对大家有所帮助，有需要看JNI层实现和完整demo的，请加我V：15092216090先来看一下vad模块的头文件，webrtc_vad.h,该文件路径为common_audio\vad\include\webrtc_v..._android webrtc vad

推荐文章

热门文章

相关标签