Web前端開發入門，HTML一張圖學會，還在看數小時視頻浪費時間？

樣的地方，同樣的時間，又跟大家見面了。

很多人問我，前端開發入門怎么開始？這里呢，先看下我之前發的文章有大體的概括思路跟流程在里面。今天主要分享入門第一篇： HTML。

由于時間有限，空間有限，關于HTML歷史我就不嘮叨了，大家去w3c，菜鳥教程都可以查看的到，我主要是跟大家講講怎么快速理解并且掌握HTML。在文章最后我會給出總體輪廓圖，讓大家看完能夠清晰的帶著思路收藏起來。

一樣的老規矩，列出熟悉的流程：

1.HTML是什么

2.它跟瀏覽器有著什么樣的關系

3.HTML在工作中常用的東西是哪些

這四個流程講下來，你就知道我們打開的網頁原來就是這個樣子。

繼續，長篇大論我就不講了，感覺有點虛，直接進入主題關鍵是“懂”。那么首先第一步，HTML是什么？

這樣理解吧，我們可以把瀏覽器，屏幕當成一張A4紙，你在紙上面寫個人獎勵，有頭有尾，還有中心，那么網頁也是一樣，它也有頭，有尾，組合在一起的。我們只不過換了個地方，換了種方法在寫東西而已。這樣在你的大腦里，HTML就相當于是A4紙了，正如HTML的定義也是相當如此，即：它是超文本標記語言（相當于可以理解為很高級的A4紙）。帶著這種理解去開HTML的定義，你肯定收獲很大，比起你腦袋一片空白去看代碼要事半功倍的多。

第二點，這個HTML跟瀏覽器是怎么配合的？我們可以簡單理解為，你的A4紙，寫出來的東西，得讓人看的懂吧，別人在看的時候是不是在分析你的文字或者圖片。那么同樣的，瀏覽器它作用于幫助大家把代買看懂，然后用大家看的懂得形式展現出來。起到一個解析你的HTML作用。那么總結下來就是你寫的HTML，瀏覽器幫助你解析展現給大家。

到這里，說了這么多，一個代買沒見著？笑話，這怎么分享啊！不，我覺得大家先大腦有個概念，這樣下面的代碼就幾分鐘理解透徹。

好了，小二，來份HTML！。。。好嘞客觀稍等片刻。。。熱騰騰的HTML上來了

菜名：HTML

這是一個標準的HTML5文檔（不要怕，其實還是HTML，只是版本不同而已，不要想的太復雜），我們來用A4紙的例子解釋下。首先第一行，文本類型HTML的意思，直接翻譯就好，因為瀏覽器不只會讀懂HTML，還會有其他的。第二行是這個文檔解析標準英文。第三行head的意思就是頭咯，那么這就是文檔的頭，相當于A4紙的title，里面有meta告訴瀏覽器用的，說我是中文，不要給我解析成什么俄羅斯語言。。。繼續下面body，身子的意思，A4紙正文的意思。

為什么我不跟大家先說這些是標簽呢？--因為，個人認為，先知道這些代表什么，然后再知道怎么組裝他們更適合理解。

那么看完上面現在跟大家講：標簽是什么，其實理解簡單點就是組合HTML的規則，比如這個標準的HTML文檔，你要組合它，你的按規則來，不能亂寫。那么組合方法是什么，其實呀，用HTML規定的東西拼接起來，HTML規定標簽有兩種，單標簽跟雙標簽，單的就是上面的meta，雙的就是head，成雙成對出現的就是雙的，單個出現的就是單的。這還不好理解呀，那么問題來了，有多少標簽？網上搜索你就知道了，帶著這樣的理解思路，一看就懂咯。

現在回到流程第三步，最常用的在開發過程中的有哪些除了上面標準的格式。

以上就是最常用的了，仔細看可以看到有單標簽，有雙標簽。這些標簽組合上HTML標準格式，就是我們看到的網頁了。

那么，有人就問了，我該怎么寫呢？不急，繼續往下看。

仔細重回上面看，可以看到body里面什么也沒有，這里就是你可以寫常用標簽的地方，網頁標簽組合的規則是：由外到內。也就是說它們存在包含關系，比如：一個框框里面有文字

div就是框，就是拼接的磚塊，它包含著你想表達的東西。那么，整個網頁外層就是一個大大的div框，里面包含了文字，圖片，選擇框等等我們看到的東西。

理解方法思路大概就是這個樣子，這些里面還有數多標簽，大家可以去網上查查，然后這樣去理解，基本一看就懂了。哦？原來網頁就是這個樣子。。。下面是我畫的一張大體圖片。

用HTML解釋下上圖（基本簡單的網站模型），這個外面粉色的框是個大的DIV，包含了里面的頭部，輪播圖，還有三塊內容．頭部也是一個DIV塊，里面包含了我們可以選擇進入的導航。輪播圖也是一個DIV，包含了我們看到的圖片。下面三塊內容也是一個DIV，包含了三塊內容，三塊內容分別又有DIV包含著。這下明白了，從最外層包含到最內層，就是前面講的：由外到內。這樣整個的結構清晰了，大家再去看些資料，就OK了。HTML文檔其實就這么簡單，沒有邏輯成分，只要找到理解技巧，看下就會了，比起看幾個小時的視頻而且還很多的專業名詞去理解要來的輕松些。

那么這些磚磚瓦瓦都砌上了，怎么把它們放到理想的位置上呢？其實呀，就是下一篇將要分享的CSS在搞的鬼！

看最終效果：

制作思路：

在timeline里每一行使用dl標簽布局；每行(dl)左側的邊框使用border-left繪制。左側圓形使用dt布局，我們可以使用border給dt加邊框，使用border-radius繪制圓形效果，右側文字使用dd排列。

html布局代碼如下：

<dl>

<dd>

<h3>管家接單中</h3>

</dd>

</dl>

<dl>

<dd>

<p></p>

</dd>

</dl>

<dl>

<dd>

<p></p>

</dd>

</dl>

</div>

css樣式代碼：

.timeline{ padding: 1rem 0;}

.timeline dl{border-left:1px solid #eee; position:relative; margin:0 0 0 .5rem; height: 5rem;}

.timeline dl dt{ position: absolute; left: -.5rem; top:0rem; width:.5rem; height: .5rem; border-radius: .5rem; border:2px solid #eee; background-color: #fff;}

.timeline dl dt.on{border:2px solid #FF8800;}

.timeline dl dd{ position: absolute; left: 1rem; top:0rem;}

.timeline dl dd h3{font-size:1.1rem; font-weight:600; padding:0 0 .5rem 0; color: #333333;}

.timeline dl dd p{ color: #949494;}

.timeline dl:last-child{border-left:none; }

說明：定義dl樣式的時候position一定要使用relative。因為后面我們需要給里面的dt和dd使用絕對定位。

dt標簽里，position：absolute代表使用絕對定位。left位置為-.5rem代表向左負的0.5rem（這里我使用的rem單位，你們使用px的話，就寫具體的px 值）。寬和高也同時是.5rem。然后為了繪制圓形設置border-radius也是.5rem。邊框使用border屬性設置寬度為2px。

dd標簽里，同樣設置position:absolute使用絕對定位。設置left為1rem（代表距離左邊界1rem）。

然后我們看到最后一個dl左邊是沒有邊框的，如下圖箭頭所示：

這個是通過：.timeline dl:last-child{border-left:none; }設定的。

如果沒有這行，效果就是這邊的樣子了：

好了，介紹就這些，代碼不多，實現了效果：）

面效果展示

頁面完整代碼

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

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

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

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

整合營銷服務商

Web前端開發入門，HTML一張圖學會，還在看數小時視頻浪費時間？

面效果展示

頁面完整代碼

頁面制作技術解析

目錄

您的項目需求