把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.圖片區域鏈接

大家結合代碼和技術解析，先自行分析一下每段代碼的作用，以及它們之間的前后關系。這一步練習對培養代碼閱讀能力很有好處，希望大家可以先自行閱讀分析。

下一次，我會逐步演示“頁面制作技術解析”中的五個步驟以及一些注意事項。

使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。

整合營銷服務商