現在的web前端非常的火，很多小夥伴想學習又找不到方法，也沒有切入點，而且前端看起來簡單其實複雜程度不低於任何一門後端語言，在不斷接觸和學習前端中很多初學者很難理清楚這個體系的結構，以下我們來了解下前端如何入門。

html和css學習

1、HTML常用標籤

語言是什麼 、Web前端開發語言、 HTML超文字標記語言 、 網頁主體結構 、常用標籤、超連結（a標籤）、Img圖片標籤。

2、盒子模型

初探Div盒子模型 、css樣式、 簡單css樣式、盒子模型Border邊框講解、盒子模型外邊距盒子模型內邊距、盒子模型佔位計算、ul無序列表、ol有序列表、dl定義列表、補充知識（css）。

3、樣式初始化及display+外邊距合併

樣式初始化、元素型別轉換、 內聯元素對於以下屬性特殊化、塊級元素和內聯元素的具體應用控制元素水平方向居中、盒子模型外邊距合併原則

如果你想學習前端可以來這個群，首先是二九一，中間是八五一，最後是一八九，裡面可以學習和交流，也有資料下載。

4、元素選擇符+背景

HTML命名規範 、 行業命名規範、 選擇器初級 、background背景樣式

5、css樣式（Font+Text）+特殊符號

font字型樣式、text文字樣式、特殊符號、css樣式查詢表

6、選擇器高階及a偽類

css選擇器、a偽類

7、選擇器高階應用&樣式優先順序 常用css3

選擇器優先順序、樣式的多種形式 、樣式優先順序排序、常用css3

8、浮動

浮動概況、浮動的一般情況 、 浮動的特殊情況 、 浮動對文字的影響float浮動後的特徵 和 inlink-block 特徵對比、清除浮動、清除浮動的多種辦法、min-width的運用

9、定位

position定位概況、static 、相對定位 relative、絕對定位 absolute、固定定位、z-index 層的位置關係

10、vertical-align img特徵 cursor opacity

img特徵、 vertical-align 垂直對齊方式、cursor指標樣式、opacity透明度

11、表單

form表單 、form中的控制元件

12、表格

table表格結構 、table樣式重置、table的預設特徵、table單元格合併、display:table的特徵

13、frameset框架

iframe內聯框架、frameset框架集、frame子框架、自適應框架例項

最後給初學者一點建議：

1. 掌握HTML是網頁的核心，是一種製作全球資訊網頁面的標準語言，是全球資訊網瀏覽器使用的一種語言，它消除了不同計算機之間資訊交流的障礙，因此，它是目前網路上應用最為廣泛的語言，也是構成網頁文件的主要語言，學好HTML是成為Web開發人員的基本條件。

2. 學好CSS學好CSS是網頁外觀的重要一點，CSS可以幫助把網頁外觀做得更加美觀。