初級前端工程師的技術體系目前在網上有很多關于技術體系的文章捐腿，但是幾乎都是在一個很籠統的方面來介紹技術棧关串，這里我就給把那些籠統的概念給分解開训枢，詳細的來說一下需要掌握的知識內容再膳。

html部分

?首先是要掌握一些常用標簽的使用和他們的各個屬性腮考，這些常用的標簽我總結了一下有以下這些：

• html：頁面的根元素雇毫。
• head：頁面的頭部標簽，是所有頭部元素的容器踩蔚。
• body：頁面的主體標簽棚放，頁面展現的內容就放置在這里面。
• title：頁面的標題馅闽。
• meta：位于文檔的頭部飘蚯，提供頁面的元信息馍迄，包括關鍵字、描述等等局骤。
• link：定義文檔與外部資源的關系柬姚，最常用的用途就是引入樣式表。
• script：腳本標簽庄涡，可以把js腳本代碼放置在這個標簽內量承，也可以使用這個標簽的src屬性引入一個外部標簽。
• style：樣式標簽穴店，可以把css代碼寫在這個標簽中撕捍。
• a：超鏈接，href屬性代表要鏈接到的地方泣洞，target屬性代表打開方式忧风。
• img：圖像標簽，src屬性表示圖片的位置球凰。
• form：表單元素狮腿，它內部的input、select呕诉、textarea等標簽都是比較重要的缘厢。
• div：定義文檔中的分區(qū)或節(jié)，可以使用div來進行頁面的布局等操作甩挫。
• 另外還有ul贴硫、li、p伊者、button英遭、iframe、p亦渗、table等標簽也很常用挖诸，nav、section法精、article多律、header、aside亿虽、footer等語義化標簽也需要了解一下菱涤。

除了要了解上面這一些標簽之外苞也，還需要對一些新的HTML5的API有一定的了解：
audio洛勉、video標簽。
Canvas：定義圖形如迟，比如圖表和其他圖像收毫。
input標簽的accept屬性攻走，email、phone此再、url等類型昔搂。
getElementByClassName根據class名來獲取一個元素結點。
Multiple file selection多文件選擇屬性输拇。
html的import摘符、template process標簽，webGL等內容策吠。

還有一些要知道的知識點：

1. doctype的作用逛裤。
2. unicode、utf8等編碼的原理和區(qū)別猴抹。
3. 如何進行頁面性能優(yōu)化带族。
4. png、jpg蟀给、webp蝙砌、gif等圖片格式的不同的優(yōu)勢。
5. HTML行內元素與塊級元素的區(qū)別跋理。
6. 移動web端開發(fā)常用head標簽择克。
7. web語義化。
8. 瀏覽器中的緩存原理

css部分

?關于css這一塊前普，我的看法就是網上下載一個chm格式的css的參考手冊祠饺，然后根據手冊里面寫的一個個的都敲一下。
?css大體分為下面這幾塊知識點：

① 定位布局

1. position屬性的7個值（static | relative | absolute | fixed | center | page | sticky）分別有什么作用和不同汁政？
2. 實現品字形布局或者是三欄布局（左右寬度固定道偷，中間適應屏幕）。
3. 浮動與清除浮動的方法记劈，flex布局勺鸦，grid布局。

② 盒子模型

1. margin目木、padding换途、border這三個屬性。
2. 伸縮盒相關內容刽射。
3. Multi-column Layout Module多列布局模型军拟。

③ 文本字體

1. 強制換行與不換行，清除空白誓禁。
2. 文本對齊懈息、大小（如何設置chrome小于12px的字體）摹恰、縮進辫继、轉換怒见。
3. 單位（em、rem姑宽、px等）遣耍，顏色（rgb、rgba炮车，hls）舵变。

④ 變換、過渡和動畫

1. transform的各種取值的作用與兼容性瘦穆。
2. transition過渡的動畫類型棋傍，貝塞爾曲線的原理。
3. animation動畫的各種設置难审，@keyframes規(guī)則瘫拣。
4. 瀏覽器的重繪與重排。

⑤ 選擇器

1. 選擇器的分類告喊，權值和優(yōu)先級麸拄。
2. 有哪些屬性可以被繼承，哪些屬性沒法繼承黔姜。
3. 偽類和偽元素分別是什么拢切，有什么作用。

上面這些都是基礎的東西秆吵，除了這些基礎的內容之外需要了解Less淮椰、Sass、stylus等css預處理器纳寂，這將會大幅度提升你的css開發(fā)效率主穗，也需要了解一下Autoprefixer、PostCSS等css后處理器毙芜。

javascript部分

在這里就不說js的基礎知識了忽媒，我把js按照語法的層次和使用的層次分為了兩大塊。 按照語法的層次來說：

• 首先是javascript的面向對象方面的內容：在javascript中實現封裝腋粥、繼承和多態(tài)晦雨。
  ① 封裝：在js中可以通過閉包、作用域和作用域鏈來實現封裝隘冲，ES6的const闹瞧、let的作用。
  ② 繼承：基于原型鏈的繼承展辞、基于構造函數的繼承奥邮、組合式繼承、寄生式繼承等纵竖，外加ES6的class關鍵字漠烧，prototype和proto。
  ③ 多態(tài)：在javascript中多態(tài)是使用arguments來實現的靡砌，關于arguments會引申出來很多內容：

  1. arguments的caller已脓、callee等方法的作用。
  2. 方法的apply和call的作用和不同通殃。
  3. 使用Array.prototype.slice.call來把一個數組對象轉化為數組度液。
  4. array的各種方法，如shift画舌、splice堕担、push、filter曲聂、map霹购、reduce、forEach等等朋腋。

• 然后是Js的設計模式齐疙，比如說那三種工廠模式啊，建造者模式啊等等旭咽。

• 最后是在不同情況下的this分別都代表什么贞奋。
  按照使用的層次來說：

  1. 先最主要的就是ajax，ajax原理穷绵，ajax跨域的方法：jsonp轿塔、使用iframe的location.hash、postMessageAPI仲墨、websocket勾缭、服務器代理等等。
  2. 然后是tcp協議目养、udt協議以及http協議的協議頭漫拭、狀態(tài)碼等內容。 瀏覽器的緩存混稽，客戶端存儲方面的內容：localstorage采驻、sessionstorage、indexDB匈勋、cookie等等礼旅。
  3. 最后是一些新的js的API，例如文件讀惹⒔唷（fileReader）痘系、fetch、Promise饿自、Web Sockets等等內容汰翠，可以去caniuse上面看一下有哪些新的東西龄坪。