面試1.0

簡歷知識樹

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~h六、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 控制檯