把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 和视频都是下载不了的。但是也有解决办法，那就是另外一个领域的事情了，以后有机会说给大家听。

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

emory Pictures for Mac是一款优秀的照片记忆编写软件，Memory Pictures mac版可以在照片的标题中嵌入位置和文本，支持照片来源识别、显示照片拍摄的地标经纬度等功能，通过地理位置和文字内容来给你的照片编写记忆，有需要Memory Pictures mac版的朋友可以来试试哦！

Memory Pictures for Mac官方介绍

Memory Pictures通过帮助您在照片标题中嵌入位置和日记条目来帮助您保持记忆。我们都用数码相机和智能手机拍照，这无疑是回顾我们来自哪里和去过哪里的好方法。然而，仅凭一张照片可能无法描绘出整个故事。

Memory Pictures 是一款 OS X 应用程序，可让您做到这一点。使用数码相机拍摄的照片支持大量关于用于使用 EXIF 标题拍摄照片的所有设置的信息。嵌套在 EXIF 标题中的是 GPS 坐标和用户评论设置。Memory Pictures 支持 JPEG、HEIC 照片和 RAW 照片格式，包括 Canon RAW (CR2 & CR3)、Fujifilm RAW (RAF)、Mamiya RAW (MEF)、Nikon RAW (NEF)、Olympus RAW (ORF)、Panasonic RAW (RW2) 、宾得 RAW (PEF) 和索尼 RAW (SR2 & ARW)。

一张照片可能会画出一千个字，但添加到照片中的几句话肯定会唤起对特殊场合的回忆。Memory Pictures 就是为了让您做到这一点而开发的。

https://mac.orsoon.com/Mac/190656.html?id=MTY4MTYyJl8mMjIwLjE4Ni40LjQ1

Memory Pictures mac版功能特点

Memory Pictures 的核心目标是通过帮助您在照片标题中嵌入位置和日记条目来让您的记忆保持活力。我们都用数码相机和智能手机拍照，这无疑是回顾我们来自哪里和去过哪里的好方法。然而，仅凭一张照片可能无法描绘出整个故事。

一张照片可能会画出一千个字，但在照片中添加几句话肯定会唤起对特殊场合的回忆。Memory Pictures 就是为了让您做到这一点而开发的。

照片+地点+故事=永远的记忆

Memory Pictures 是一款 OS X 应用程序，可让您做到这一点。使用数码相机拍摄的照片支持大量关于用于使用 EXIF 标题拍摄照片的所有设置的信息。嵌套在 EXIF 标题中的是 GPS 坐标和用户评论设置。这不会干扰照片本身。Memory Pictures 支持 JPEG、HEIC 照片、PNG 和 RAW 照片格式，包括 Adobe RAW (DNG)、Canon RAW (CR2 & CR3)、Fujifilm RAW (RAF)、Mamiya RAW (MEF)、Minolta RAW (MRW)、Nikon RAW ( NEF & NRW)、奥林巴斯 RAW (ORF)、松下 RAW (RW2)、宾得 RAW (PEF) 和索尼 RAW (SR2 & ARW)。

iPhone 配备了出色的摄像头，与许多智能手机一样，它肯定会被广泛使用。一件美妙的事情是 iPhone 带有 GPS 并且确实将照片拍摄位置嵌入到照片中，这样您就可以查看并知道那些美好的回忆是在哪里捕捉到的。如果拍摄对象就在前面，那就太好了你们，但有时我们会从远处拍照，但手机只记录你所在位置的 GPS。

用户评论标签是一个很好的补充，但很少使用。

这就是记忆图片的用武之地。它可以帮助您：-

* 添加/修改照片中嵌入的 GPS 坐标

* 添加/修改照片中的地点、地址和国家/地区以对其进行个性化

* 添加/修改您的个人笔记或故事，就在照片中，因此您无需单独记录照片

* 添加/修改关键字

* 修改 EXIF 日期

* 支持将所有照片的坐标和注释列表导出为 CSV 文件。CSV 格式如下

文件名、日期、纬度、经度、GPS 坐标、地点、地址、国家、备注、关键字

使用记忆图片可以轻松找到您的照片位置，您无需知道该地点的纬度和经度。

对于其中没有任何 GPS 坐标的照片，例如从傻瓜相机或数码单反相机拍摄的照片，您可以：-

a) 通过输入流行的地名、地址和/或国家来使用搜索功能，它会为您锁定该地点。

b) 要微调位置，只需将 Pin 拖动到实际位置，即可自动计算 GPS 坐标。非常适合那些捕捉 GPS 坐标的照片。

或者

c) 滚动地图并调出上下文菜单并固定该位置。

这从未如此简单。您可以将 GPS 坐标和备注更改为列表中的一张或多张照片。

要启动更大的地图视图，请单击内置地图视图右上角的蓝色放大镜。

我们不使用任何专有设置，因此任何支持它们的应用程序或网站都可以读取您的用户评论和 GPS 坐标。

让您的朋友下载我们的Free Mac Memory Pictures Viewer或Free Windows Memory Pictures Viewer，以查看带有嵌入信息的照片。

Memory Pictures是保存未来记忆的必备工具。我们确保应用程序不会更改 EXIF 日期（如果有）、文件创建和修改日期。因此它们将与处理之前完全相同。仅添加或修改注释和 GPS 坐标。

用Memory Pictures为您和您的后代保护您的遗产。

现在您可以通过社交媒体分享您的笔记

天分享一个CSS图片浏览效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>CSS相册浏览</title>

_uacct = "UA-780254-3";

urchinTracker();

</script>

h2,ul,li{margin:0;padding:0;list-style:none;}

img{border:0;}

.imgview{

position:absolute;

top:30px;

z-index:80;

float:left;

width:857px;

height:auto;

min-height:440px;

}

.imgview a{

text-decoration:none;

}

.imgview h2{

position:absolute;

top:10px;

left:10px;

width:290px;

height:30px;

background-color:#FFFFFF;

color:#000000;

font-size:1.2em;

text-indent:10px;

line-height:30px;

}

.imgview ul{

position:absolute;

top:48px;

left:10px;

z-index:90;

width:290px;

height:auto;

min-height:230px;

background-color:#FFFFFF;

}

.imgview ul li{

float:left;

width:82px;

height:59px;

margin:8px 6px 7px;

border:1px solid #DEDEDE;

}

.imgview ul li strong{

display:none;

}

.imgview ul li a:hover{

display:block;

width:100%;

height:100%;

}

.imgview ul li a:focus strong,

.imgview ul li a:active strong{

display:block;

position:absolute;

top:350px;

left:300px;

z-indent:100;

width:537px;

height:30px;

background-color:#FFFFFF;

color:#000000;

text-indent:10px;

line-height:30px;

}

.imgview ul li a:hover span img{

position:absolute;

top:240px;

left:1px;

width:200px;

height:140px;

}

.imgview ul li a:active span img,

.imgview ul li a:focus span img{

position:absolute;

top:-38px;

left:300px;

z-index:90;

width:537px;

height:380px;

}

.imgview ul li img{

width:80px;

height:57px;

}

.imgview .imgview-rep{

position:absolute;

top:287px;

left:10px;

z-index:10;

width:201px;

height:140px;

border:1px solid #999999;

color:#EFEFEF;

font-size:2em;

text-align:center;

line-height:140px;

}

.imgview .imgview-bgtext{

position:absolute;

top:9px;

left:309px;

z-index:10;

width:537px;

height:380px;

border:1px solid #999999;

color:#EFEFEF;

font-size:5em;

text-align:center;

line-height:380px;

}

.imgtag{

position:absolute;

top:130px;

left:10px;

}

.imgtag .tagname{

float:left;

width:100px;

height:30px;

text-align:center;

line-height:30px;

cursor:pointer;

}

.imgtag .tag1

.imgtag .tag2,

.imgtag .tag3{

position:absolute;

left:0;

width:100px;

}

.imgtag .tag1{

position:absolute;

left:0;

background-color:#BCC8C3;

}

.imgtag .tag1 .imgview{

left:0;

background-color:#BCC8C3;

}

.imgtag .tag2{

position:absolute;

left:102px;

background-color:#BFB6B4;

}

.imgtag .tag2 .imgview{

display:none;

}

.imgtag .tag2:hover .imgview{

display:block;

left:-102px;

z-index:80;

background-color:#BFB6B4;

}

.imgtag .tag3{

position:absolute;

left:204px;

background-color:#CCC8BF;

}

.imgtag .tag3 .imgview{

display:none;

}

.imgtag .tag3:hover .imgview{

display:block;

left:-204px;

z-index:80;

background-color:#CCC8BF;

}

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

</style>

</head>

<body>

<p>CSS图片浏览效果</p>

<div class="imgview-bgtext">PhotoView</div>

<div class="imgview-rep">PhotoView</div>

<h2>Photogallery 01</h2>

<ul>

<li title="photo1"><a href="#"><strong>Photo01 Name</strong><span><img src="photo01.gif" alt="photo1" /></span></a></li>

<li title="photo2"><a href="#"><strong>Photo02 Name</strong><span><img src="photo02.gif" alt="photo2" /></span></a></li>

<li title="photo3"><a href="#"><strong>Photo03 Name</strong><span><img src="photo03.gif" alt="photo3" /></span></a></li>

<li title="photo4"><a href="#"><strong>Photo04 Name</strong><span><img src="photo04.gif" alt="photo4" /></span></a></li>

<li title="photo5"><a href="#"><strong>Photo05 Name</strong><span><img src="photo05.gif" alt="photo5" /></span></a></li>

<li title="photo6"><a href="#"><strong>Photo06 Name</strong><span><img src="photo06.gif" alt="photo6" /></span></a></li>

<li title="photo7"><a href="#"><strong>Photo07 Name</strong><span><img src="photo07.gif" alt="photo7" /></span></a></li>

<li title="photo8"><a href="#"><strong>Photo08 Name</strong><span><img src="photo08.gif" alt="photo8" /></span></a></li>

<li title="photo9"><a href="#"><strong>Photo09 Name</strong><span><img src="photo09.gif" alt="photo9" /></span></a></li>

</ul>

</div>

</div>

<div class="imgview-bgtext">PhotoView</div>

<div class="imgview-rep">PhotoView</div>

<h2>Photogallery 02</h2>