樹底下吃西瓜
初學者的話，這樣理解HTML做整個人頁面框架，基本上是靜態的。如果在我這個基礎上增加文字字體，顏色，大小，排布位置就有了CSS。再進一步就是動態交互JavaScript。
哈哈我剛在那邊
Html和css都是前端必須掌握的技術知識，也是很多編程入門課程。
既然是入門必學，從我理解開始，它們學起來相對簡單，容易上手。
既然必須掌握，那麼它們的重要性不言而喻，尤其對前端童鞋們來說。
我一個搞後端的，我當時就是從html學起，學完後緊接著就是css。
Html是超文本標記語言，它有一系列的html標籤或者說指令。通過這些指令將一些文字，圖片，視頻，超鏈接啊等資源進行整合通過瀏覽器渲染出來。
Html更像是蓋房子的骨架。像什麼鋼筋水泥，混凝土，磚頭等可以理解為它的標籤。
其實我覺得當初發明這種語言的應該是類比人來說的吧。
Html的結構有head title >
下面是它的大致結構。
<title>Title/<title>這些基本上就是一個空殼子，就跟房子的骨架一樣。我們大多都是往它的body裡面添加內容，瀏覽器上看到的文本，圖片，視頻大多數都是body的東西。標題和網頁的圖標是在瀏覽器的選項卡那能看到。
而css就是用來給房子裝修，或者說我們人化妝穿衣打扮。目的就一個，讓html更好看一些。吸引用戶的眼球。但是它只能讓html穿上衣服，就跟畫畫上色一樣，都是靜態的。
如果讓美美的外衣動起來，畫出的內容更加炫酷。就用到了JavaScript，也就是js。
切不可把js和Java混淆了。
css，js都是為html服務的。前者使它文靜的美，後者讓它動感的炫！
說了這麼多，到底怎麼學？
看視頻看不懂？
對於初學者來說，看視頻肯定學不會或者說學不好的。
為什麼？
因為這些html和css標籤都讓你看的眼花繚亂。這些js方法都夠你頭大的。
那麼問題出在哪呢？
那就是學習方法！
學技術，絕不是純粹的靠看視頻就能學會的。它更重要的在於六個字：多練，多練，多練！
只有看視頻的同時，多拿筆或者多動手敲，才有效果。
而且這個效果非常明顯！
我可以告訴你的是，這些看似很多的標籤，一個都不用刻意的去死記硬背！
而且背是沒什麼用的，因為今天可能這個版本有這個標籤，可能明天就廢棄了。技術更新迭代的很快，只有掌握了核心的思想，就可以以不變應萬變！
我當初學習就這樣，自己動手跟著視頻一個字母一個字母敲。
敲得多了，自然就記住了。慢慢的去嘗試做一些網頁，結合實際的項目，日積月累。各種佈局，各種頁面樣式，各種交互，看的多了練的多了。基本功練紮實了，以後回過頭你就發現，哇好簡單。
看到一個好的網站，你腦海中就能立馬展現出可能別人是怎麼佈局的，怎麼配色的，哪些動畫用可能用到了哪些方法。甚至你能一眼看出他前端用到了什麼框架。
OK，說到這裡我想你一定知道怎麼去學，怎麼有效的學，怎麼學的更快更紮實了吧。
碼農的搬磚生涯
CSS稱之為樣式表，HTML為標記語言。是前端web開發必須掌握的知識之二，再就是JavaScript是前端Web開發也必須掌握的編程語言。
我先用一個網站【千圖網】的源碼分析來了解CSS、HTML、JavaScript各自的作用
上圖是千圖網首頁的佈局,我先通過Google Chrome來調試看看這個網站的首頁（點擊鼠標右鍵選擇查看就可以看到如下圖所示）
左邊顯示的是HTML的主要內容，右邊顯示的是CSS的內容
CSS是什麼呢？其作用又是什麼？
打開暱圖網首頁，我們可以看到整體佈局非常美觀。那如果沒有CSS會怎麼樣呢？我們可以查看這個首頁的的源碼，可以看到是有引用css樣式表文件。
我現在將css引用給刪掉
我們再來看下首頁的效果
通過以上操作，你應該就能明白css的作用是什麼了吧?
css的主要作用就是用於網頁的排版佈局和美化，能夠讓我們開發出來的網頁更好看
HTML是什麼？其作用是什麼？
一個網頁是有很多個部件組成的,有文字顯示、有輸入欄、有列表、有圖片、有視頻、有跳轉到新的頁面的鏈接。我還是用上面網站的首頁結合檢查功能來說明。
上圖中紅色框標出來了，各種類型的部件。
上圖中左側顯示了部分的Html的內容。更多的html的內容，可以到
https://www.w3school.com.cn/index.html
進行了解。非常詳細
HTML標記語言的作用就是告訴瀏覽器，在加載的時候顯示的是什麼控件，再結合css就能夠顯示出非常漂亮美觀的靜態頁面了。那如果要做一些動態的頁面和數據交互，就需要用到JavaScript，你在這裡沒有提到這個問題，我就不做具體的說明了。可以自行查閱相關文檔及說明！
為什麼看了視頻還是看不懂？要如何學習？
對於初學者來說，其實我是不在建議直接看視頻來學習。個人的的建議是前期購買專業的web前端開發書或者通過我上面講到的w3school網站進行學習，將相關的基礎識知點完全掌握，並跟著書上或者網站上的代碼進行實際的敲打一篇或者多篇。一直到腦子裡有印象和概念，看到一個網頁，能夠知道這個網頁的佈局是什麼樣子的，用到了哪些部件，這個部件對應的html標籤是什麼？可能用到了什麼樣的css樣式？
只有做了這一步後，你再看視頻教程。更多的是建議看一些項目實戰的視頻，採取第一次將視頻看完,然後實際編寫一次。如果遇到有不記得的地方，回看視頻的，對照視頻進行編寫鞏固。通過這樣子的方式 不斷的加深記憶以及理解html和css的作用。
多敲代碼、多敲代碼、多敲代碼。編譯運行查看實際效果，反覆的這個過程中，我相信你現在提到的這個問題，最終就不是問題了。
如你自己本身自學能力不足，還有一個建議就是去專門的IT教育機構進行系統的專業的學習。
如果你選擇IT教育機構培訓，一定要注意的就是機構的選擇，這裡面也有比較多的坑。
我不是專門的web前端開發，但由於平時的工作原因，有時也需要自己寫了些web頁面。可以關注我私信溝通交流！
