把HTML网页下载为单文件，可离线访问

网页下载下来使用，在日常工作中使用频率还是很高的，有时候确实能解一时之急，我自己就有很窘迫的经历。

我开会的时候，都会把准备好的文档存在局域网，到会议室直接打开就能直接用了。有一次到分公司，由于分公司刚刚成立，内网还没有和母公司连通。结果这下子懵逼了，上不去内网，看不到文档。又是叫同事发过来，又是提发送文件的安全申请，让人着急。

如果把网站保存下来，放在自己的电脑中，既不用担心信息泄露问题，又不用为了看不了文档而着急。

遇到问题，记录下来，然后解决问题，程序员的解决思路永远是自己创造轮子的，接下来就是不断的探索解决方案。

其实下载网页的方式有很多种，其中有几种办法使用的比较多，例如：如果你用Chrome，直接按 Ctrl+s 就可实现。使用这种方法，Chrome会把整个网站，按照编译完成的源码目录结构保存下来。像下面这样：

下载完成的文件直接点击 xxx.html 可以直接离线访问，但是这种方式对目录的依赖结构比较高，怎么理解呢？就是 html 文件和对应文件名的文件夹必须在同一个目录中，才能正常使用。拷贝到其他机器的时候必须要两个同时拷贝才可以，否则就会排版错乱。

如果有十个或者更多的网页需要拷贝或者删除，就会很麻烦，例如我想在其中找到其中几个，复制到其他地方，很容易弄错顺序。

HTML 是一种纯文本格式，它用于排版文字。纯文本文档的意思就是，文档中只包含文字内容，不包含二进制内容，举个例子：打印出的A4纸，只有文字没有图片。而 HTML 想要显示照片等二进制信息，通常都会链接到其他文件，也就是上面文件夹里面的内容。

不过 Chrome 下载文件这种方式也有优点，下载下来的文件可以保持独立性，比如说，我需要这个网页中的一张图片，那么就可以直接到文件夹里面寻找了。

另外还有一种办法，也有很多人再使用。Chrome 在打印网页的时候，会把网页转成 PDF ，然后在进行打印。那么就给我们提供了很明确的思路，把网页直接保存为 PDF ，这样保存下来的网页就只有一个文件。

使用Chrome，直接按下Ctrl+p就可以。然后目标打印机选择另存为 PDF 。

这个功能很多浏览器都支持

但是这种办法也有很明显的缺点，由于 PDF 是静态文档，网页上的一些动画可能不会正常显示，而且排版也有可能会错乱，这完全靠运气。个人觉得这不是一种很靠谱的方法。

这时候主角来了！有一个工具既可以把网页保存为 html 又可以保持是单文件。他就是 monolith ，你可以在 github 上面找到它，但是源码并没有编译为可执行文件，我把它编译了一下，下面会放上来链接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就简单说说使用方法：如果你下载我的链接，那么里面有三个文件：

第一个是Mac平台编译出来的，使用方式为：

./monolith 网站地址 > xxx.html

默认情况下 monolith 会把生成的 html 输出到标准输出流，也就是当前终端。使用 > 我们把输出的内容重定向并覆盖到文件。

执行完成之后，在这个目录下面就会有一个对应的文件：xxx.html 。

另外两个是 Windows 平台使用的。为了简化使用，我写了一个 CMD 脚本。直接点击 monolith.cmd ，然后粘贴地址就可以完成下载。

下载完成之后，在本地你会发现只有一个 html 文件。我们打开之后，发现图片和JS等信息都在，而且排版正常。那么就要思考了，我们之前说过，HTML 是放置纯文本信息的，那么图片在哪里呢？

答案显而易见，就在 HTML 文件里面。为了方便小图片传输，有一种叫 Base64 的东西，它可以把二进制信息变成成纯文本。这在使用 Json 传递数据的今天十分常见，它可以减少一次请求（题外话），这里就是用的这个原理。monolith 把图片等二进制内容转为了纯文本，保存在 HTML 文件中。我们在下载的文件源码可以看到：

对比源代码，src 信息已经变成了 base64 格式的图片，就是那串乱码。复制那串乱码，从网上搜一个 base64 转图片工具，粘贴进去，这时会发现就是我们看到的那张图片。这样一来，无论这个网站上有多少个文件，都会保存到一个 HTML 文件里面，而且还能离线使用。

当然，base64 编码的图片比原生图片略大，这可能也是你现在在担心的问题。不过 monolith 会特殊处理文件体积。我们可以看看 Chrome 直接下载和使用 monolith 下载体积相差多少。我们把两种方式下载的网页都进行了 7-Zip 压缩。

我们可以看到，使用 monolith 下载会比 Chrome 直接下载小一倍还多！

最后要说的是局限性，无论那种方法，都几乎不能把视频网站中的视频下载下来。因为现在的视频地址都是 Token 加密的，同理，使用 Token 加密的其他请求信息也无法下载。

比如你可以试试下载其他网站的首页，Logo 和视频都是下载不了的。但是也有解决办法，那就是另外一个领域的事情了，以后有机会说给大家听。

如果这篇文章对您或者您的朋友有帮助，感谢您关注，转发。

txt文件变成html网页文件

如果您看过《HTML是什么？——零基础自学网页制作》这篇教程，请按照其中说明创建一个txt文件。具体过程如下：

step1：在您方便的磁盘中建立一个文件夹，命名为"零基础自学网页制作"。例如我在D盘中建立了"零基础自学网页制作"文件夹。

step2：在文件夹中创建"HTML框架.txt"文件。鼠标移动到空白处点击右键选择"文本文档"。

命名为"html框架"，如下图所示。

如果您的电脑没有显示".txt"后缀的话，请做如下操作：点击"工具"，找到"文件夹选项"

菜单如下：点击"查看选项"。

下拉滑条，找到"隐藏已知文件类型的扩展名"选项，将前面的对勾去掉。

如果您使用的是win10的话请参考《边学边做网页篇------初识HTML》，这也是我做的教程，不过以后都使用这个账号来发了。

step3：把"HTML框架"复制粘贴到"html框架.txt"文件中。HTML框架代码如下：

<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>

代码讲解请参照《HTML是什么？——零基础自学网页制作》这篇教程中的讲解。

粘贴后效果如下：使用CTRL+s组合键保存文件。

step4：复制"html框架.txt"文件，更名为"第一个网页.txt"。原始的"html框架.txt"文件为以后备用。

如图所示：

step5：把"第一个网页.txt"的后缀名".txt"改为".html"。

首先将光标放在"第一个网页.txt"文件上，点击右键，选择"重命名"。如图：

选择".txt"

更改为".html",敲击回车键。这时会弹出一个对话框，如图:

大胆的点击"是"即可。

修改后文件是这样的，如图：因为我的默认浏览器是360，所以，".html"文件图标显示为360浏览器的图标，显示其他浏览器的图标也没有问题。

step6：将鼠标移动到"第一个网页.html"文件上，单击右键，选择打开方式，如图：

选择任何一个浏览器打开即可，我使用的是火狐浏览器（Firefox），打开后如图所示：空白一片。

点击键盘F12键，看一下控制台，如图：查看器中已经显示我们的代码框架了。成功！

如果网页是一道菜，那么，html框架我们可以理解为装菜的白盘子，所以我们打开框架时，浏览器显示一片白。下面我们为盘子中加些简单的"菜"。

为html页面添加标题与段落

首先我们为页面添加"标题"

在添加标题前，我们来看一下html框架代码中的内容，在<html></html>标签中有<head></head>和<body></body>两个兄弟标签。

我们在页面中看到的所有的内容都是添加到<body></body>标签中间！

<head></head>标签中的内容并不会显示在页面中。

那么如何添加"标题"呢？

标题在HTML中用<h></h>标签表示。在<h></h>中间加入文字内容即可。如下所示：

<h>第一个页面</h>

右键，使用"记事本"打开"第一个网页.html"文件。如图所示：如果您的"打开方式"中没有"记事本"请点击"选择默认程序"

在"其他程序"中找到"记事本"。点击"确定"。从此，"记事本"就一直存在于"打开方式"中了。

我们把这句代码粘贴到<body></body>之间。如下所示：保存后使用浏览器打开。

<!DOCTYPE HTML><html><head> </head> <body> <h>第一个页面</h> </body> </html>

然后，使用浏览器打开，如图所示：标题出现在页面中了。

下面，我们来添加段落内容。

段落在HTML中使用<p></p>标签添加。代码如下

<p>千里之行始于足下</p>

请各位自行将代码添加到"第一个网页.html"文件中吧！示例代码如下：

<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一个网页</h><p>千里之行始于足下</p> </body> </html>

结果如图所示：

通过这个练习，我们可以发现一个规律，在<body></body>中，子元素代码的上下顺序代表了它在页面中显示的排版顺序。

这也简单回答了代码结构与排版的关系，html的标签语句只是标记了它所承载的信息的属性和版面位置。

基于这个特性，html被称为超文本标记语言。

下一期我们具体讨论页面中文字编辑的技巧。

喜欢的小伙伴请加关注，有任何问题请给我留言，欢迎大家给与指正！感激不尽！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

面效果展示

页面完整代码

<!DOCTYPE HTML>
<html>
<head> 
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示，并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端（结尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试，13时08分成功着陆，历时18分钟。<br>
整个首飞过程在歼-10S战斗教练机陪伴下完成 。
2016年10月28日，首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后，还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日，第十一届珠海航展，歼-20首次进行空中飞行展示。两架歼-20做了公开飞行，不仅在现场引起轰动，也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作，也进入了世界最先进的第五代战斗机行列，它是中国国防能力高速发展的一个象征。<br>
2018年11月11日，第十二届中国航展在珠海迎来“高光时刻”：歼-20战机在公开飞行展示中挂弹开仓，震撼献礼人民空军成立69周年纪念日。 <br>
2019年10月13日，庆祝人民空军成立70周年航空开放活动新闻发布上，空军新闻发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日，中央电视台报道歼-20战斗机正式进入空军序列。<br>
2017年3月13日，《中国日报》发布消息称，中国自主研制的歼-20近期将装配国产发动机。<br>
2017年7月30日，歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来，3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>
2017年9月28日，在中国国防部行记者会上，国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>
2017年11月10日上午，中国空军发言人申进科大校表示，歼-20 列装部队后，已经开展编队训练。<br>
2018年2月9日，中国空军新闻发言人申进科大校发布消息，歼-20开始列装空军作战部队。<br>
2018年10月30日，中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>
2019年10月1日，歼-20现身庆祝中华人民共和国成立70周年阅兵式；阅兵中，歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅；该三款歼击机被誉为中国空军歼击机家族的“三剑客”，是未来联合作战的骨干力量
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机，这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟，尚未正式交付入役；美国F-35战斗机也多次出现飞机供氧不足的问题，大面积停飞，出口受阻；韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况，后又传出了合作方印尼打算撤资并已告知韩国的消息。因此，中国歼-20战机成为亚太区域领跑的优势战机。<br>
中国空军正向全疆域作战的现代化战略性军种迈进，成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队，将进一步提升空军综合作战能力，有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>
歼20是我国自主研制的第五代战斗机，它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机，是按照性能、技术和进度要求，研制开发我国自己的新一代隐身战斗机。引领技术发展，指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破，这是中国航空工业从跟跑到并跑，再到领跑的必由之路。创新研发体系，是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制，我们建立了具有我国特色的数字化研发体系。建设卓越团队，是指通过型号研制，锤炼一支爱党爱国的研制队伍，这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来，我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致！-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条（结尾）-->
</div><!--使页面居中显示，并展视窗50%宽度（结尾）-->
</body> 
</html>

页面制作技术解析

1.页面内容居中显示方法

2.导航栏悬停顶端方法

3.鼠标滑过导航标题或链接时改变背景色提示

3.隐藏滚动条方法

4.图片区域链接

大家结合代码和技术解析，先自行分析一下每段代码的作用，以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处，希望大家可以先自行阅读分析。

下一次，我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。

使用碎片时间，学习完整知识！关注大鱼师兄，一起精研技艺。

整合营销服务商