簡歷知識樹

HTML5 & CSS3

• 標籤語義化:語義化標籤就是一種我們僅通過標籤名就能判斷出該標籤內容的語義的標籤，如

<header>: 通常被放置在頁面或者頁面中某個區塊元素的頂部，包含整個頁面或者區塊的標題、簡介等資訊，起到引導與導航的作用。
<nav>: 表示頁面的導航，可以通過導航連線到網站的其他頁面，或者當前頁面的其它部分。
<aside>:所包含的內容不是頁面的主要內容、具有獨立性，是對頁面的補充。一般使用在頁面、文章的側邊欄、廣告、友情連結等區域。
<footer>:一般被放置在頁面或者頁面中某個區塊的底部，包含版權資訊、聯絡方式等資訊。
<article>:表示包含於一個文件、頁面、應用程式或網站中的一段獨立的內容，可以被獨立的釋出或者重新使用文章標記標籤。
<section>:
複製程式碼

• float佈局：本意是讓文字圍繞圖片，float是脫離文件流
• flex佈局:

• 容器(container)：

1. flex-direction: row | row-reverse | column | column-reverse; 決定主軸的方向
2. flex-wrap: nowrap | wrap | wrap-reverse; 定義，如果一條軸線排不下，如何換行。
3. flex-flow: flex-direction || flex-wrap; 是flex-direction屬性和flex-wrap屬性的簡寫形式
4. justify-content: flex-start | flex-end | center | space-between | space-around;
5. align-items: flex-start | flex-end | center | baseline | stretch;

• baseline:專案的第一行文字的基線對齊。
• stretch:(預設值)如果專案未設定高度或設為auto，將佔滿整個容器的高度。

6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

• 專案(item)：

1. order: 屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
2. flex-grow: 屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。將剩餘空間按glex-grow值比例分配。
3. flex-shrink：屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。負值對該屬性無效。
4. flex-basis: 屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。
5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || flex-basis
6. align-self: auto | flex-start | flex-end | center | baseline | stretch;允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性

• keyframes:MDN 菜鳥教程
• translation：MDN
• transform: 菜鳥教程

ECMAScript（JavaScript）

• ECMAScript
• 非同步與單執行緒
• 作用域鏈與閉包
• 原型鏈與繼承
• 物件導向
• 解構賦值:ES6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構
• Set 和 Map 資料結構:

Set:ES6 提供了新的資料結構 Set。它類似於陣列，但是成員的值都是唯一的，沒有重複的值。
Map:ES6之前，JS物件中的鍵只能是字串，ES6加入了Map資料結構，擴大了鍵的範圍，各種型別的值（包括物件）都可以當作鍵。
複製程式碼

DOM/BOM

• Document Object Model（文件物件模型），就是把「文件」當做一個「物件」來看待。
• Browser Object Model（瀏覽器物件模型）,即把「瀏覽器」當做一個「物件」來看待。
• 在 DOM 中，文件中的各個元件（component），可以通過 object.attribute 這種形式來訪問。一個 DOM 會有一個根物件，這個物件通常就是 document。
• BOM 除了可以訪問文件中的元件之外，還可以訪問瀏覽器的元件，比如navigator（導航條）、history（歷史記錄）等等。

JQuery

熟悉 jQuery 的常用 API，能使用 jQuery 類庫進行常規網站開發。 jQuery中文文件

1. 選擇器

• 基本選擇器

  

• 層級選擇器

  

• 過濾選擇器

  

• 篩選選擇器(方法)

  

2. 常用API

• addClass() 給元素新增class
• removeClass() 給元素去除class
• 三種選擇器： 元素 id 類
• 使用jQUery改變HTML元素的css樣式：選擇器.css("屬性","值");
• 使用jQUery設定元素不可用： $("#target1").prop("disabled",true);
• jQuery使用text()改變文字內容
• remove()： 刪除一個html元素
• appendTo()：移動html元素
• clone()方法拷貝元素，移動元素就是剪下，拷貝元素就是複製,所以應該就是clone一個，然後移動過去。$("#target5").clone().appendTo("#left-well");
• parent(): 操作父級元素
• children(): 操作子級元素
• target:nth-child(n) CSS選擇器索引操作元素: $(".target:nth-child(2)").addClass("animated bounce")

3. 更多的常用API

Vue.js

• 能使用 Vue.js 完成常見需求，理解 Vue.js 的父子元件間的通訊原理。
• 能使用 Vue-Router 製作前端路由；能使用 vuex 進行狀態管理。

HTTP與瀏覽器

• 瞭解 HTTP 基礎知識，瞭解常見狀態碼含義，能夠根據請求檢視響應。
• 理解客戶端快取、同源策略，以及常用的跨域方法。
• 瞭解瀏覽器執行機制和頁面載入的整個過程。

前端工程化

• 使用過 WebPack、Rollup、Parcel 等前端打包工具，能夠進行基礎的使用。
• 能在專案中使用 Less、Sass、Stylus 等前處理器，提高程式設計效率。
• 瞭解基本的前端安全，效能優化等知識，並能在專案中加以實踐。

面試中的題

1. 常見的塊級元素標籤和內聯元素標籤

• 塊級元素：div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等
• 內聯元素：span、img、a、lable、input、abbr（縮寫）、em（強調）、big、cite（引用）、i（斜體）、q（短引用）、textarea、select、small、sub、sup，strong、u（下劃線）、button（預設display：inline-block）

2. flex佈局的好處

• 可以簡便、完整、響應式地實現各種頁面佈局。
• 很容易實現垂直居中
• flex實現各種佈局

3. vue的優點，與其他兩大框架的區別,其他兩大框架是幹什麼的

• 三個框架的優缺點

5. meta 標籤要能默寫
   <meta name="viewport" content="width=device-width, height=device-height,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
6. ul li 去除預設樣式

ul,li{
    list-style-type:none;
}
複製程式碼

7. es 和 js 的關係
   JavaScript 是指令碼語言。ECMAScript 是它所基於的規範。通過閱讀 ECMAScript 規範，你將學會如何建立指令碼語言。通過閱讀 JavaScript 文件，你將學習如何使用指令碼語言。
8. es不相容怎麼辦 新出的ES6，有些瀏覽器還不支援，我們可以使用babel等語法解析轉換工具，將ES6語法轉換為ES5語法。但是ES6部分目前未能轉化。
9. 如何確認使用者處於登陸狀態/點登陸狀態發維持

• vuex
• 如圖：

  

10. 再總結一下自己的專案
11. vue 專案搭建的基礎步驟
12. html + css + style 如何引入
13. 原聲js 與 三大框架的關係
14. 瞭解自己平時用的工具

• node.js
• webpack
• vue
• vscode

1. 別不把VScode不當IDE

• gitbash
• FSCapture.exe
• chrome 控制檯