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的表格功能可以很好的帮助定位元素的位置

本文链接：https://blog.csdn.net/weixin_42287935/article/details/108318982

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

南阳理工-35-程序员宅基地

文章浏览阅读65次。http://acm.nyist.net/JudgeOnline/problem.php?pid=35#include<iostream>#include<cstdio>#include<cstring>#include<stack>#include<algorithm>using namespace st..._南阳理工学院有csdn

使用elementUI的时候，使用Upload 上传的时候，使用 list-type 属性来设置文件列表的样式，before-upload方法失效...-程序员宅基地

文章浏览阅读6.7k次。最近在做项目的时候，使用elementUI的时候，使用Upload上传的时候，before-upload方法失效。情况下：使用list-type属性来设置文件列表的样式。最终的优化之后：（演示的是修改）需求：1、已经提交的附件不可删除，新上传的附件可以删除2、图片附件不能上传其他格式的文件，一次可以多张上传图片，最多上传3张，最大不超过2M3、文件附件不能上传除了图片..._el upload list-type

FunPlus面经(2016-11-20更新)_funplus 面试题-程序员宅基地

文章浏览阅读2.7k次。FunPlus面经_funplus 面试题

彻底防止Windows 7/8/8.1升级更新到Windows 10_win7/win8.1不想升级win10-程序员宅基地

文章浏览阅读3k次。转自 http://wangye.org/blog/archives/1035/去年7月写过一篇文章讲解如何去除扰人的获取Windows 10的图标，那时候微软也只是推送了获取Windows 10的提示，具体安装Windows 10与否还是有显著的选项让用户自己选择的。虽然通过先前的方法确实抑制了升级Windows 10的提示，怎奈微软接下来连续放大招推送升级补丁，并且不怎么明显的“诱使”_win7/win8.1不想升级win10

Android主流三方库源码分析（一、深入理解OKHttp源码）_android中okhttp源码解析-程序员宅基地

文章浏览阅读619次。前言成为一名优秀的Android开发，需要一份完备的知识体系，在这里，让我们一起成长为自己所想的那样~。更好的阅读体验请跳转至个人博客前两篇我们详细分析了View的核心源码—Android的触摸事件传递机制和Android View的绘制流程，从这篇开始，笔者接下来将会陪大家深入分析目前Android中大部分的主流开源框架源码，从而能够让我们真正地去理解这些优秀开源框架背后的思想，真真切切地..._android中okhttp源码解析

!! 浅谈Java学习方法和后期面试技巧-程序员宅基地

文章浏览阅读61次。浅谈Java学习方法和后期面试技巧昨天查看3303回复33部落用户大酋长下面简单列举一下大家学习java的一个系统知识点的一些介绍一、java基础部分：java基础的时候，有些知识点是非常重要的，比如循环系列。For,while,do-while.这方面只要大家用心点基本没什么难点。二、面向对象：oop面向对象的时候，偏重理...