把HTML網(wǎng)頁(yè)下載為單文件，可離線訪問(wèn)

網(wǎng)頁(yè)下載下來(lái)使用，在日常工作中使用頻率還是很高的，有時(shí)候確實(shí)能解一時(shí)之急，我自己就有很窘迫的經(jīng)歷。

我開(kāi)會(huì)的時(shí)候，都會(huì)把準(zhǔn)備好的文檔存在局域網(wǎng)，到會(huì)議室直接打開(kāi)就能直接用了。有一次到分公司，由于分公司剛剛成立，內(nèi)網(wǎng)還沒(méi)有和母公司連通。結(jié)果這下子懵逼了，上不去內(nèi)網(wǎng)，看不到文檔。又是叫同事發(fā)過(guò)來(lái)，又是提發(fā)送文件的安全申請(qǐng)，讓人著急。

如果把網(wǎng)站保存下來(lái)，放在自己的電腦中，既不用擔(dān)心信息泄露問(wèn)題，又不用為了看不了文檔而著急。

遇到問(wèn)題，記錄下來(lái)，然后解決問(wèn)題，程序員的解決思路永遠(yuǎn)是自己創(chuàng)造輪子的，接下來(lái)就是不斷的探索解決方案。

其實(shí)下載網(wǎng)頁(yè)的方式有很多種，其中有幾種辦法使用的比較多，例如：如果你用Chrome，直接按 Ctrl+s 就可實(shí)現(xiàn)。使用這種方法，Chrome會(huì)把整個(gè)網(wǎng)站，按照編譯完成的源碼目錄結(jié)構(gòu)保存下來(lái)。像下面這樣：

下載完成的文件直接點(diǎn)擊 xxx.html 可以直接離線訪問(wèn)，但是這種方式對(duì)目錄的依賴結(jié)構(gòu)比較高，怎么理解呢？就是 html 文件和對(duì)應(yīng)文件名的文件夾必須在同一個(gè)目錄中，才能正常使用。拷貝到其他機(jī)器的時(shí)候必須要兩個(gè)同時(shí)拷貝才可以，否則就會(huì)排版錯(cuò)亂。

如果有十個(gè)或者更多的網(wǎng)頁(yè)需要拷貝或者刪除，就會(huì)很麻煩，例如我想在其中找到其中幾個(gè)，復(fù)制到其他地方，很容易弄錯(cuò)順序。

HTML 是一種純文本格式，它用于排版文字。純文本文檔的意思就是，文檔中只包含文字內(nèi)容，不包含二進(jìn)制內(nèi)容，舉個(gè)例子：打印出的A4紙，只有文字沒(méi)有圖片。而 HTML 想要顯示照片等二進(jìn)制信息，通常都會(huì)鏈接到其他文件，也就是上面文件夾里面的內(nèi)容。

不過(guò) Chrome 下載文件這種方式也有優(yōu)點(diǎn)，下載下來(lái)的文件可以保持獨(dú)立性，比如說(shuō)，我需要這個(gè)網(wǎng)頁(yè)中的一張圖片，那么就可以直接到文件夾里面尋找了。

另外還有一種辦法，也有很多人再使用。Chrome 在打印網(wǎng)頁(yè)的時(shí)候，會(huì)把網(wǎng)頁(yè)轉(zhuǎn)成 PDF ，然后在進(jìn)行打印。那么就給我們提供了很明確的思路，把網(wǎng)頁(yè)直接保存為 PDF ，這樣保存下來(lái)的網(wǎng)頁(yè)就只有一個(gè)文件。

使用Chrome，直接按下Ctrl+p就可以。然后目標(biāo)打印機(jī)選擇另存為 PDF 。

這個(gè)功能很多瀏覽器都支持

但是這種辦法也有很明顯的缺點(diǎn)，由于 PDF 是靜態(tài)文檔，網(wǎng)頁(yè)上的一些動(dòng)畫(huà)可能不會(huì)正常顯示，而且排版也有可能會(huì)錯(cuò)亂，這完全靠運(yùn)氣。個(gè)人覺(jué)得這不是一種很靠譜的方法。

這時(shí)候主角來(lái)了！有一個(gè)工具既可以把網(wǎng)頁(yè)保存為 html 又可以保持是單文件。他就是 monolith ，你可以在 github 上面找到它，但是源碼并沒(méi)有編譯為可執(zhí)行文件，我把它編譯了一下，下面會(huì)放上來(lái)鏈接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就簡(jiǎn)單說(shuō)說(shuō)使用方法：如果你下載我的鏈接，那么里面有三個(gè)文件：

第一個(gè)是Mac平臺(tái)編譯出來(lái)的，使用方式為：

./monolith 網(wǎng)站地址 > xxx.html

默認(rèn)情況下 monolith 會(huì)把生成的 html 輸出到標(biāo)準(zhǔn)輸出流，也就是當(dāng)前終端。使用 > 我們把輸出的內(nèi)容重定向并覆蓋到文件。

執(zhí)行完成之后，在這個(gè)目錄下面就會(huì)有一個(gè)對(duì)應(yīng)的文件：xxx.html 。

另外兩個(gè)是 Windows 平臺(tái)使用的。為了簡(jiǎn)化使用，我寫(xiě)了一個(gè) CMD 腳本。直接點(diǎn)擊 monolith.cmd ，然后粘貼地址就可以完成下載。

下載完成之后，在本地你會(huì)發(fā)現(xiàn)只有一個(gè) html 文件。我們打開(kāi)之后，發(fā)現(xiàn)圖片和JS等信息都在，而且排版正常。那么就要思考了，我們之前說(shuō)過(guò)，HTML 是放置純文本信息的，那么圖片在哪里呢？

答案顯而易見(jiàn)，就在 HTML 文件里面。為了方便小圖片傳輸，有一種叫 Base64 的東西，它可以把二進(jìn)制信息變成成純文本。這在使用 Json 傳遞數(shù)據(jù)的今天十分常見(jiàn)，它可以減少一次請(qǐng)求（題外話），這里就是用的這個(gè)原理。monolith 把圖片等二進(jìn)制內(nèi)容轉(zhuǎn)為了純文本，保存在 HTML 文件中。我們?cè)谙螺d的文件源碼可以看到：

對(duì)比源代碼，src 信息已經(jīng)變成了 base64 格式的圖片，就是那串亂碼。復(fù)制那串亂碼，從網(wǎng)上搜一個(gè) base64 轉(zhuǎn)圖片工具，粘貼進(jìn)去，這時(shí)會(huì)發(fā)現(xiàn)就是我們看到的那張圖片。這樣一來(lái)，無(wú)論這個(gè)網(wǎng)站上有多少個(gè)文件，都會(huì)保存到一個(gè) HTML 文件里面，而且還能離線使用。

當(dāng)然，base64 編碼的圖片比原生圖片略大，這可能也是你現(xiàn)在在擔(dān)心的問(wèn)題。不過(guò) monolith 會(huì)特殊處理文件體積。我們可以看看 Chrome 直接下載和使用 monolith 下載體積相差多少。我們把兩種方式下載的網(wǎng)頁(yè)都進(jìn)行了 7-Zip 壓縮。

我們可以看到，使用 monolith 下載會(huì)比 Chrome 直接下載小一倍還多！

最后要說(shuō)的是局限性，無(wú)論那種方法，都幾乎不能把視頻網(wǎng)站中的視頻下載下來(lái)。因?yàn)楝F(xiàn)在的視頻地址都是 Token 加密的，同理，使用 Token 加密的其他請(qǐng)求信息也無(wú)法下載。

比如你可以試試下載其他網(wǎng)站的首頁(yè)，Logo 和視頻都是下載不了的。但是也有解決辦法，那就是另外一個(gè)領(lǐng)域的事情了，以后有機(jī)會(huì)說(shuō)給大家聽(tīng)。

如果這篇文章對(duì)您或者您的朋友有幫助，感謝您關(guān)注，轉(zhuǎn)發(fā)。

txt文件變成html網(wǎng)頁(yè)文件

如果您看過(guò)《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》這篇教程，請(qǐng)按照其中說(shuō)明創(chuàng)建一個(gè)txt文件。具體過(guò)程如下：

step1：在您方便的磁盤(pán)中建立一個(gè)文件夾，命名為"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"。例如我在D盤(pán)中建立了"零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作"文件夾。

step2：在文件夾中創(chuàng)建"HTML框架.txt"文件。鼠標(biāo)移動(dòng)到空白處點(diǎn)擊右鍵選擇"文本文檔"。

命名為"html框架"，如下圖所示。

如果您的電腦沒(méi)有顯示".txt"后綴的話，請(qǐng)做如下操作：點(diǎn)擊"工具"，找到"文件夾選項(xiàng)"

菜單如下：點(diǎn)擊"查看選項(xiàng)"。

下拉滑條，找到"隱藏已知文件類型的擴(kuò)展名"選項(xiàng)，將前面的對(duì)勾去掉。

如果您使用的是win10的話請(qǐng)參考《邊學(xué)邊做網(wǎng)頁(yè)篇------初識(shí)HTML》，這也是我做的教程，不過(guò)以后都使用這個(gè)賬號(hào)來(lái)發(fā)了。

step3：把"HTML框架"復(fù)制粘貼到"html框架.txt"文件中。HTML框架代碼如下：

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

代碼講解請(qǐng)參照《HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》這篇教程中的講解。

粘貼后效果如下：使用CTRL+s組合鍵保存文件。

step4：復(fù)制"html框架.txt"文件，更名為"第一個(gè)網(wǎng)頁(yè).txt"。原始的"html框架.txt"文件為以后備用。

如圖所示：

step5：把"第一個(gè)網(wǎng)頁(yè).txt"的后綴名".txt"改為".html"。

首先將光標(biāo)放在"第一個(gè)網(wǎng)頁(yè).txt"文件上，點(diǎn)擊右鍵，選擇"重命名"。如圖：

選擇".txt"

更改為".html",敲擊回車鍵。這時(shí)會(huì)彈出一個(gè)對(duì)話框，如圖:

大膽的點(diǎn)擊"是"即可。

修改后文件是這樣的，如圖：因?yàn)槲业哪J(rèn)瀏覽器是360，所以，".html"文件圖標(biāo)顯示為360瀏覽器的圖標(biāo)，顯示其他瀏覽器的圖標(biāo)也沒(méi)有問(wèn)題。

step6：將鼠標(biāo)移動(dòng)到"第一個(gè)網(wǎng)頁(yè).html"文件上，單擊右鍵，選擇打開(kāi)方式，如圖：

選擇任何一個(gè)瀏覽器打開(kāi)即可，我使用的是火狐瀏覽器（Firefox），打開(kāi)后如圖所示：空白一片。

點(diǎn)擊鍵盤(pán)F12鍵，看一下控制臺(tái)，如圖：查看器中已經(jīng)顯示我們的代碼框架了。成功！

如果網(wǎng)頁(yè)是一道菜，那么，html框架我們可以理解為裝菜的白盤(pán)子，所以我們打開(kāi)框架時(shí)，瀏覽器顯示一片白。下面我們?yōu)楸P(pán)子中加些簡(jiǎn)單的"菜"。

為html頁(yè)面添加標(biāo)題與段落

首先我們?yōu)轫?yè)面添加"標(biāo)題"

在添加標(biāo)題前，我們來(lái)看一下html框架代碼中的內(nèi)容，在<html></html>標(biāo)簽中有<head></head>和<body></body>兩個(gè)兄弟標(biāo)簽。

我們?cè)陧?yè)面中看到的所有的內(nèi)容都是添加到<body></body>標(biāo)簽中間！

<head></head>標(biāo)簽中的內(nèi)容并不會(huì)顯示在頁(yè)面中。

那么如何添加"標(biāo)題"呢？

標(biāo)題在HTML中用<h></h>標(biāo)簽表示。在<h></h>中間加入文字內(nèi)容即可。如下所示：

<h>第一個(gè)頁(yè)面</h>

右鍵，使用"記事本"打開(kāi)"第一個(gè)網(wǎng)頁(yè).html"文件。如圖所示：如果您的"打開(kāi)方式"中沒(méi)有"記事本"請(qǐng)點(diǎn)擊"選擇默認(rèn)程序"

在"其他程序"中找到"記事本"。點(diǎn)擊"確定"。從此，"記事本"就一直存在于"打開(kāi)方式"中了。

我們把這句代碼粘貼到<body></body>之間。如下所示：保存后使用瀏覽器打開(kāi)。

<!DOCTYPE HTML><html><head> </head> <body> <h>第一個(gè)頁(yè)面</h> </body> </html>

然后，使用瀏覽器打開(kāi)，如圖所示：標(biāo)題出現(xiàn)在頁(yè)面中了。

下面，我們來(lái)添加段落內(nèi)容。

段落在HTML中使用<p></p>標(biāo)簽添加。代碼如下

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

請(qǐng)各位自行將代碼添加到"第一個(gè)網(wǎng)頁(yè).html"文件中吧！示例代碼如下：

<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一個(gè)網(wǎng)頁(yè)</h><p>千里之行始于足下</p> </body> </html>

結(jié)果如圖所示：

通過(guò)這個(gè)練習(xí)，我們可以發(fā)現(xiàn)一個(gè)規(guī)律，在<body></body>中，子元素代碼的上下順序代表了它在頁(yè)面中顯示的排版順序。

這也簡(jiǎn)單回答了代碼結(jié)構(gòu)與排版的關(guān)系，html的標(biāo)簽語(yǔ)句只是標(biāo)記了它所承載的信息的屬性和版面位置。

基于這個(gè)特性，html被稱為超文本標(biāo)記語(yǔ)言。

下一期我們具體討論頁(yè)面中文字編輯的技巧。

喜歡的小伙伴請(qǐng)加關(guān)注，有任何問(wèn)題請(qǐng)給我留言，歡迎大家給與指正！感激不盡！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

面效果展示

頁(yè)面完整代碼

<!DOCTYPE HTML>
<html>
<head> 
<title>文內(nèi)鏈接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使頁(yè)面居中顯示，并展視窗50%寬度-->
<div style="position:fixed; top:0px;"><!--使導(dǎo)航菜單懸停在頂端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進(jìn)程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動(dòng)態(tài)</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評(píng)價(jià)</a>
</div><!--使導(dǎo)航菜單懸停在頂端（結(jié)尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動(dòng)條-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >試飛進(jìn)程</a></h2>
殲-20隱形戰(zhàn)斗機(jī)首架技術(shù)驗(yàn)證機(jī)于2011年1月11日中午12時(shí)50分左右進(jìn)行首次升空飛行測(cè)試，13時(shí)08分成功著陸，歷時(shí)18分鐘。<br>
整個(gè)首飛過(guò)程在殲-10S戰(zhàn)斗教練機(jī)陪伴下完成 。
2016年10月28日，首次發(fā)布“空軍試飛員將駕殲-20飛機(jī)亮相中國(guó)航展”后，還陸續(xù)發(fā)布了“殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)”“空軍殲-20戰(zhàn)機(jī)首次開(kāi)展海上方向?qū)崙?zhàn)化訓(xùn)練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日，第十一屆珠海航展，殲-20首次進(jìn)行空中飛行展示。兩架殲-20做了公開(kāi)飛行，不僅在現(xiàn)場(chǎng)引起轟動(dòng)，也立刻被西方媒體大量報(bào)道。殲-20是中國(guó)現(xiàn)代空中力量的代表作，也進(jìn)入了世界最先進(jìn)的第五代戰(zhàn)斗機(jī)行列，它是中國(guó)國(guó)防能力高速發(fā)展的一個(gè)象征。<br>
2018年11月11日，第十二屆中國(guó)航展在珠海迎來(lái)“高光時(shí)刻”：殲-20戰(zhàn)機(jī)在公開(kāi)飛行展示中掛彈開(kāi)倉(cāng)，震撼獻(xiàn)禮人民空軍成立69周年紀(jì)念日。 <br>
2019年10月13日，慶祝人民空軍成立70周年航空開(kāi)放活動(dòng)新聞發(fā)布上，空軍新聞發(fā)言人申進(jìn)科大校介紹殲-20戰(zhàn)機(jī)列陣人民空軍“王牌部隊(duì)”
<h2><a id="chapter3" >服役動(dòng)態(tài)</a></h2>
2017年3月9日，中央電視臺(tái)報(bào)道殲-20戰(zhàn)斗機(jī)正式進(jìn)入空軍序列。<br>
2017年3月13日，《中國(guó)日?qǐng)?bào)》發(fā)布消息稱，中國(guó)自主研制的殲-20近期將裝配國(guó)產(chǎn)發(fā)動(dòng)機(jī)。<br>
2017年7月30日，殲-20三機(jī)編隊(duì)參加在朱日和舉行的慶祝中國(guó)人民解放軍成立90周年閱兵。殲擊機(jī)梯隊(duì)飛來(lái)，3架殲-20隱形戰(zhàn)斗機(jī)以楔形編隊(duì)的形式在天空中飛過(guò)。<br>
2017年9月28日，在中國(guó)國(guó)防部行記者會(huì)上，國(guó)防部新聞發(fā)言人吳謙大校介紹殲-20飛機(jī)已經(jīng)列裝部隊(duì)。<br>
2017年11月10日上午，中國(guó)空軍發(fā)言人申進(jìn)科大校表示，殲-20 列裝部隊(duì)后，已經(jīng)開(kāi)展編隊(duì)訓(xùn)練。<br>
2018年2月9日，中國(guó)空軍新聞發(fā)言人申進(jìn)科大校發(fā)布消息，殲-20開(kāi)始列裝空軍作戰(zhàn)部隊(duì)。<br>
2018年10月30日，中國(guó)空軍4架殲-20隱形戰(zhàn)斗機(jī)現(xiàn)身珠海金灣機(jī)場(chǎng)上空。<br>
2019年10月1日，殲-20現(xiàn)身慶祝中華人民共和國(guó)成立70周年閱兵式；閱兵中，殲-20與殲-16、殲-10C三型飛機(jī)分別以5機(jī)楔隊(duì)組成戰(zhàn)斗隊(duì)形接受檢閱；該三款殲擊機(jī)被譽(yù)為中國(guó)空軍殲擊機(jī)家族的“三劍客”，是未來(lái)聯(lián)合作戰(zhàn)的骨干力量
<h2><a id="chapter4" >總體評(píng)價(jià)</a></h2>
殲-20是眼下亞洲區(qū)域最先進(jìn)的戰(zhàn)機(jī)，這讓中國(guó)空軍在面對(duì)日本、韓國(guó)與印度等國(guó)家的空軍時(shí)占有顯著優(yōu)勢(shì)。外媒將殲-20與其他國(guó)家戰(zhàn)機(jī)進(jìn)行了對(duì)比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機(jī)由于研制進(jìn)度幾度推遲，尚未正式交付入役；美國(guó)F-35戰(zhàn)斗機(jī)也多次出現(xiàn)飛機(jī)供氧不足的問(wèn)題，大面積停飛，出口受阻；韓國(guó)KF-X隱形戰(zhàn)機(jī)先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機(jī)的情況，后又傳出了合作方印尼打算撤資并已告知韓國(guó)的消息。因此，中國(guó)殲-20戰(zhàn)機(jī)成為亞太區(qū)域領(lǐng)跑的優(yōu)勢(shì)戰(zhàn)機(jī)。<br>
中國(guó)空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進(jìn)，成為有效塑造態(tài)勢(shì)、管控危機(jī)、遏制戰(zhàn)爭(zhēng)、打贏戰(zhàn)爭(zhēng)的重要力量。殲-20戰(zhàn)機(jī)列裝空軍作戰(zhàn)部隊(duì)，將進(jìn)一步提升空軍綜合作戰(zhàn)能力，有助于空軍更好的肩負(fù)起維護(hù)國(guó)家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>
殲20是我國(guó)自主研制的第五代戰(zhàn)斗機(jī)，它的研制實(shí)現(xiàn)了既定的四大目標(biāo)——打造跨代新機(jī)、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團(tuán)隊(duì)。打造跨代新機(jī)，是按照性能、技術(shù)和進(jìn)度要求，研制開(kāi)發(fā)我國(guó)自己的新一代隱身戰(zhàn)斗機(jī)。引領(lǐng)技術(shù)發(fā)展，指通過(guò)自主創(chuàng)新實(shí)現(xiàn)強(qiáng)軍興軍的目標(biāo)。殲20在態(tài)勢(shì)感知、信息對(duì)抗、協(xié)同作戰(zhàn)等多方面取得了突破，這是中國(guó)航空工業(yè)從跟跑到并跑，再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系，是指建設(shè)最先進(jìn)的飛機(jī)研制條件和研制流程。通過(guò)一大批大國(guó)重器的研制，我們建立了具有我國(guó)特色的數(shù)字化研發(fā)體系。建設(shè)卓越團(tuán)隊(duì)，是指通過(guò)型號(hào)研制，錘煉一支愛(ài)黨愛(ài)國(guó)的研制隊(duì)伍，這些擁有報(bào)國(guó)情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來(lái)發(fā)展的生力軍。未來(lái)，我們將在戰(zhàn)斗機(jī)的機(jī)械化、信息化、智能化發(fā)展征程上不斷前行。
</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氣動(dòng)外形分析"><!--必須保證畫(huà)面尺寸與頁(yè)面顯示尺寸一致！-->
</map>
</div><!--小div(結(jié)尾)-->
</div><!--小div套大div隱藏滾動(dòng)條（結(jié)尾）-->
</div><!--使頁(yè)面居中顯示，并展視窗50%寬度（結(jié)尾）-->
</body> 
</html>

頁(yè)面制作技術(shù)解析

1.頁(yè)面內(nèi)容居中顯示方法

2.導(dǎo)航欄懸停頂端方法

3.鼠標(biāo)滑過(guò)導(dǎo)航標(biāo)題或鏈接時(shí)改變背景色提示

3.隱藏滾動(dòng)條方法

4.圖片區(qū)域鏈接

大家結(jié)合代碼和技術(shù)解析，先自行分析一下每段代碼的作用，以及它們之間的前后關(guān)系。這一步練習(xí)對(duì)培養(yǎng)代碼閱讀能力很有好處，希望大家可以先自行閱讀分析。

下一次，我會(huì)逐步演示“頁(yè)面制作技術(shù)解析”中的五個(gè)步驟以及一些注意事項(xiàng)。

使用碎片時(shí)間，學(xué)習(xí)完整知識(shí)！關(guān)注大魚(yú)師兄，一起精研技藝。

整合營(yíng)銷服務(wù)商