整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

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

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

TML模板网站是提供免费或付费网站模板下载的在线平台。这些模板设计精美、功能齐全,可帮助用户快速搭建自己的网站。在这个数字化时代,网站已成为企业、个人展示和推广的重要工具之一。

在过去,搭建一个网站需要具备一定的编程知识和技术能力。但随着HTML模板网站的出现,普通用户也能够通过简单的操作完成网站的搭建。这些模板已经预设了布局、颜色、字体等设计元素,用户只需要根据自己的需求进行修改和添加内容,就能够快速创建出一个专业而独特的网站。

HTML模板网站通常有以下特点:

1. 多样化的模板选择:HTML模板网站提供了各种各样的网站模板,涵盖了各个领域和行业。用户可以根据自己的需求选择适合的模板,如企业官网、个人博客、在线商店等。

2. 设计精美:这些模板经过专业的设计师精心设计,具有美观大方的外观、清晰明了的布局以及合理的信息组织,能够吸引用户的眼球并提供良好的用户体验。

3. 简单易用:HTML模板网站的使用非常简便,只需要用户进行一些基本的设置和修改即可完成网站的搭建。一般来说,网站模板会提供详细的使用说明和教程,帮助用户快速上手。

4. 兼容性强:这些模板通常采用HTML、CSS、JavaScript等标准的前端技术开发,具有良好的兼容性,可以在各种浏览器和设备上正常显示和运行。

5. 可定制性:虽然模板已经预设了一些设计元素,但用户仍然可以根据自己的需求进行修改和定制。通过修改文字、图片、颜色等元素,用户可以使得网站更符合自己的风格和品牌形象。

6. 多种扩展功能:HTML模板网站通常会提供一些额外的功能组件或插件,用户可以根据自己的需求添加到网站中,如图库、社交媒体分享、滑动幻灯片等。

尽管HTML模板网站为用户提供了快速建站的解决方案,但也存在一些挑战和限制。

首先是模板的通用性。由于这些模板需要适应不同行业和领域的需求,因此有些功能可能无法满足特定的要求。此时,用户可能需要自己进行一些编程定制或者寻找专业的开发人员来满足特定的需求。

其次是个性化和差异性。尽管模板提供了一些定制的选项,但仍然有可能在大量网站中找到相似的设计元素。这就需要用户通过自己的努力和创造力,不断地优化网站,使其与众不同。

此外,还需要注意模板的版权问题。虽然我们可以从HTML模板网站中下载并使用这些模板,但有些模板可能有版权保护,或者在模板使用时需要满足特定的使用条件。用户在下载和使用模板时要注意相关的版权规定,避免违反法律法规。

综上所述,HTML模板网站是一个方便快捷的工具,可帮助用户快速建立个性化的网站。但在使用模板的过程中,用户仍然需要不断优化和改进,以确保网站具有独特性和个性化。

因此,对于想要搭建一个个性化、具有专业性的网站的用户来说,HTML模板网站是一个不错的选择。通过选择适合自己需求的模板,并进行适度的定制与优化,用户可以快速搭建一个美观、实用的网站,提高企业形象和个人品牌。

于企业或个人来说,原创制作一个网站需要很多时间,先用 Photoshop 做网页设计,接着用 DIV+CSS 来写编写HTML代码,最后可能还要程序开发才能完成,不仅花费时间长,成本也是比较昂贵的。

如果你缺少设计或前端技能,但又想快速完成一个网站,那么我们建议你直接选择网站模板,比如静态类的 HTML/CSS 网站模板,使用他们可以省下设计、前端这个阶段的工作,而程序开发是可选的,只有需要后台才需要程序编写,不需要的话也可以直接替换模板的文字、图片就行。

今天我们整理了一些优秀免费无版权限制的 HTML5 网站模板,有不同的类型,比如作品展示用的模板适合摄影师、设计师、企业产品展示等。

注:小编已经打包好,下载模板地址在文章底部哦!!

New Age

这款是 APP 产品宣传官网模板,现在有很多 APP 程序员自己开发了一些有趣 APPs,但是不懂设计或没时间来制作网站,那么这款模板就可以用上啦,使用Bootstrap 框架搭建,手机端完全兼容。

在线演示

Howdy(个人简历式网页模板)

想做一份创意个人简历吗?请不要错过 Howdy 这款个人简历模板,设计、动画、实用性全有了!设计达人网小编推荐哦!

同时推荐:22款高端个人简历模板 含PSD或HTML版本下载

还有技术展示数据表,增加简历描述的可视化,HR 看后一定会加分哦。

在线演示暂无,请下载源文件查看 DEMO ~~(建议下载查看,动画好帅)

Ethereal

Ethereal 模板有意思,是直接向左右滚动来查看网页,界面也的设计也很棒,喜欢个性独特风格的朋友不要错过。

在线演示

Creative

一个工作室类的单网页模板,有了个,就算你是个人,也可以用他来做个工作室一样的网站,用于宣传你的业务也是不错的。

在线演示

Megakit

这个免费模板可以说是超值哦,一共13种类型页面,每个页面设计都不简单哦,页面有 Service,About, Team, Events, FAQ, Contacts, Corporate, App Landing, Portfolio, Coming Soon等等,建议下载下来看 DEMO。

在线演示

Story

Story是一款左右布局为主的列表展示页以及作品展示 ,适用于作品介绍。

同时还支援当前页面弹窗来展示作品图片,很适合用来放自己的作品上去。

在线演示

Agency

在线演示

Karmo

超时尚的 Protfolio 网页模板,Bootstrap 模板构建,布局新颖,再加上流畅的动画效果,Nice!

有4个主要页面,分别是:Home / Services / SingleProject / Contact.

免费有这样的质量,真的超值哦!

在线演示

KapukAlas

响应式模板 KapukAlas,首页效果不错,但目前只有首页,如果有子页面就更好了!

在线演示 (HTML演示请下载源文件方可查看)

AitOnepage

这款主师来自 keenthemes 出品,质量很棒,流行的单页面设计,布局有 Aabout,Products, Pricing, Work, Service 和 Contact页面。

在线演示

Magnet

想展示作品集,并且喜欢简约设计感?嘿嘿~ 这个经典简约模板是不二之先啊。

在线演示

头条不给放网盘地址,需要下载的的,私信我!