新手也能學編程，教你做一個簡單的html頁面

家好，我是有聞愛學，一名標準的程序員。我主要從事的是javaweb開發，有些朋友可能不了解什么是javaweb。簡單地說就是瀏覽器訪問的網站，javaweb大部分都可以做。

做了這么多年的開發，真心覺得這一行真的不錯，除非遇到某些996的公司。

那么接下來我就為有興趣進入這一行的或者想用這一行做個兼職的朋友們做一個簡單的入門指導。我們今天的目標是做一個簡單的html頁面。高手請忽略。

第一步:

準備一臺電腦（win7/10最好），在桌面新建一個文本文件如下圖（文件展示擴展名請自行百度）：

第二步：

打開此文件輸入如下內容，如圖：

第三步:

關閉編輯器，將此文件的擴展名改為.html,保存如下圖：

第四：

雙擊index.html打開，出現如下效果就代表你的第一個html頁面制作成功啦！

是不是很簡單，但這只是最簡單的一個靜態頁面，我們平時訪問的網站要比這復雜的多。

以后我將繼續為大家講解更深層次的知識。

網頁開發過程中，我們有時會遇到HTML頁面白屏的問題，即打開網頁時頁面顯示空白，沒有任何內容。這不僅令用戶困惑，也使開發者頭疼不已。本文將分享一些常見的HTML頁面白屏問題解決方法，幫助你快速解決這個問題，讓你的網頁煥然一新！

第一步：檢查HTML代碼

首先，我們需要檢查HTML代碼是否正確。常見的錯誤包括標簽未閉合、標簽嵌套錯誤等。這些錯誤可能會導致頁面無法正常顯示。因此，仔細檢查HTML代碼，確保沒有語法錯誤是解決白屏問題的第一步。

第二步：檢查CSS文件

HTML頁面的樣式通常由CSS文件控制。如果CSS文件中存在錯誤或者無法正常加載，可能會導致頁面白屏。我們可以通過以下步驟檢查CSS文件是否存在問題：

1、檢查CSS文件路徑是否正確：確保CSS文件的路徑正確，并且文件存在于指定的位置。可以通過瀏覽器開發者工具查看網絡面板，檢查CSS文件是否被成功加載。

2、檢查CSS文件語法錯誤：使用CSS驗證工具，如W3C CSS驗證服務，檢查CSS文件是否存在語法錯誤。如果存在錯誤，及時修復。

3、檢查CSS選擇器和樣式規則：檢查CSS文件中的選擇器和樣式規則是否正確。可能存在選擇器與HTML元素不匹配或樣式規則沖突的情況。可以通過逐個注釋掉樣式規則，逐步排查問題。

第三步：檢查JavaScript代碼

JavaScript代碼也可能導致頁面白屏。以下是檢查JavaScript代碼的步驟：

1、檢查JS文件路徑是否正確：與CSS文件類似，確保JS文件的路徑正確，并且文件存在于指定的位置。通過瀏覽器開發者工具查看控制臺面板，檢查是否有JS文件加載錯誤的提示信息。

2、檢查JS代碼語法錯誤：使用JS語法檢查工具，檢查JS代碼是否存在語法錯誤。如果有錯誤，及時修復。

3、檢查JS代碼邏輯錯誤：檢查JS代碼中的邏輯是否正確。可能存在變量未定義、函數未調用或者邏輯錯誤等問題。可以通過調試工具，如瀏覽器開發者工具中的調試器，逐步排查問題。

第四步：排查網絡請求問題

如果前面的步驟都沒有發現問題，那么可能是網絡請求出現了問題。以下是一些排查網絡請求問題的方法：

1、檢查網絡連接：確保你的設備已連接到互聯網，并且網絡連接穩定。

2、檢查資源加載狀態：通過瀏覽器開發者工具的網絡面板，檢查頁面中的資源加載狀態。可能存在資源加載失敗或者超時的情況，導致頁面白屏。

3、檢查服務器配置：如果你使用了服務器端腳本語言，如PHP，檢查服務器配置是否正確。可能存在服務器配置問題導致頁面無法正確渲染。

第五步：優化頁面性能

如果以上方法都沒有解決問題，那么可能是頁面性能問題導致白屏。以下是一些優化頁面性能的方法：

1、壓縮和合并文件：將CSS和JS文件進行壓縮和合并，減少文件的大小和數量，提高頁面加載速度。

2、使用緩存：利用瀏覽器緩存機制，將靜態資源進行緩存，減少服務器的請求次數，提高頁面加載速度。

3、異步加載資源：使用異步加載技術，如異步加載JS文件或使用延遲加載，減少頁面加載時間。

4、減少HTTP請求：減少頁面中的HTTP請求次數等。

結語：

通過以上五個步驟，我們可以逐步排查HTML頁面白屏問題，并解決它們。不同的問題可能需要不同的解決方法，因此需要耐心和細心地分析和排查。在開發過程中，我們也要時刻關注頁面性能，優化頁面加載速度，提高用戶體驗。

面效果展示

頁面完整代碼

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

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

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

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

整合營銷服務商

新手也能學編程，教你做一個簡單的html頁面

面效果展示

頁面完整代碼

頁面制作技術解析

目錄

您的項目需求