css3都有哪些選擇器，一個合格的web前端需要掌握哪些技術？

謝邀，我來分享作為BAT的web工程師看到的，一個合格的web前端需要掌握哪些技術。

三駕馬車

最基礎的自然是JavaScript，HTML和css這三種語言。

首先了解下它們到底是什么。

HTML是用戶看到的網頁的骨架，比如你會發現當前頁面分為左中右三個部分，其中還填充了不同的文字和圖片；每個子部分還會繼續細分，比如當前頁面的中間部分下方有輸入框等等。

CSS是網頁展示的細節控制，比如你會發現有的文字是紅底白色，有的子部分占了頁面的二分之一寬，有的只占六分之一，有些部分需要用戶進行某些操作（如點擊，滑動）才會出現等等，這些就是有CSS來控制。

JavaScript是負責捕捉用戶在瀏覽器上的操作，并與后端服務器進行數據交換的腳本語言。當用戶在前端進行點擊，輸入等操作的時候，會觸動綁定了該動作的JavaScript腳本，然后JavaScript收集數據，調用后端的api接口，再將后端返回的數據交給HTML和CSS渲染出來。

一個網頁的HTML代碼和CSS代碼是可以直接在瀏覽器中查看的，你可以直接按F12，就能看到下圖右側的模塊，左右側紅框就是代碼與實際頁面的對應關系。因此如果你看到某個網站的布局很不錯，不妨點擊F12，進行學習。

前端框架

然而，實際應用中，已經很少有正規的項目組直接用上述三種語言進行web 前端開發了，而是使用很多封裝了這三種語言的框架，比如

Vue.js

，angular，react native等等。它們是來自谷歌和Facebook的大神項目組，基于自己的經驗，封裝了原生前端語言，實現了更多更復雜更酷炫的功能。因此，可以說，學會使用這些框架，能達到事半功倍的效果。

比如用了vue，它是自底向上增量開發的設計，其核心只關心圖層，而且還可以與其他庫或已存項目融合，學習門檻極其友好；另一方面，vue可以驅動單文件組件和vue生態系統支持的庫開發的復雜單頁應用。有了這個生態系統，可以說，vue是處在一個不斷壯大，不斷完善的欣欣向榮的狀態。

網絡通信協議

由于前后端分離的趨勢，前端還需要了解很多網絡通信協議的知識，這里不局限于http協議，因為據我的經驗，有時候我們還會用到websocket等協議。因此，前端需要簡單了解不同協議的特點以及使用方式，但是好消息是不用像學習計算機網絡課程一樣對每種協議的原理都了解的特別透徹，只要學會如何用前端語言發送這種協議的請求就夠了。

以上，如果對你有幫助，歡迎點贊或者留言~

我是蘇蘇思量，來自BAT的Java開發工程師，每日分享科技類見聞，歡迎關注我，與我共同進步。

html中class選擇器又叫？

Class 在程序中稱“類”，同時在CSS中也書面語也叫“類”。css中class即類選擇器。

html中的class=是一個選擇器，可以理解為一個標識，用來標識特定的標簽。

比如：<divclass="div1"></div>這就是一個標識效果，以后你想要改變這個div的樣式的話就可以找class為div1的元素了。

報個培訓班出來能就業嗎？

前端是當代比較火的一個互聯網技術知識，許多年輕人把目光放在了前端上邊，想要通過前端培訓班的學習進入到這個行業，但是，很多人對于前端這個行業其實沒有多少了解，多數也只是通過別人的口中獲知的一些信息，對于前端學習什么，出來能干什么了解的并不多，那么前端主要學什么，報名前端培訓班出來是否能就業？接下來小編就帶大家一起來了解一下。

前端主要學什么？

第一階段：HTML + CSS核心

HTML常用標簽、盒模型、CSS選擇器集群、偽元素/偽類、浮動/定位、CSS3動畫、CSS3過渡、CC3漸變、經典布局方案、2d/3d變換HTML + CSS核心

第二階段：JavaScript核心 + 高級

變量/內存、數據類型、條件語句、循環語句、函數/對象/數組、DOM/BOM對象、閉包/原型/作用域、事件完整解析、線程/進程、JavaScript繼承模式、JavaScript算法、JavaScript設計模式、棧/隊列、高級函數/函數柯里化

第三階段：jQuery框架 + Less + BootStrap

Less同Stylus,Sass區別、BootStrap框架語法、BootStrap組件應用、jQuery設計模式、jQueryAPI、Less封裝、BootStrap響應式原理、BootStrap柵格系統源碼分析

第四階段：NodeJs + 工程化

ECMAScript6新特性、JavaScript異步編程、Node基礎/Node搭建服務器、Express/Koa/EJS、原生Ajax/跨域解決方案、CMD/AMD/CommonJS/ES6(模塊化)

第五階段：Vue技術棧 + webApp + 項目部署

Vue核心基礎、Vue指令/表達式/實例、Vue組件通信、Vue生命周期詳解、Vue-router路由、Vuex狀態管理

第六階段：React技術棧 + 工程化高級

React核心基礎、ReactJSX語法、React組件、React組件通信、Redux源碼分析、Redux源碼分析、webpackHMR(熱膜替換)、webpack懶加載/預加載

第七階段：小程序技術棧 +服務器端框架

小程序核心語法、小程序路由、小程序生命周期、小程序支付流程、Mpvue框架、UniApp框架小程序WXML語法(遍歷，條件判斷等)

報個前端培訓班出來能就業嗎？

選擇前端培訓是否能夠實現就業，有下面幾點決定，只要能夠達到基本是沒有問題的。

1、選擇一個好的前端培訓班進行學習

2、在一個前端行業發展比較好的城市進行學習，這樣機會更多

3、在前端培訓過程中要加倍努力的去學習

附錄：2020前端學習路線圖

你遇到的前端面試題都有什么？

1. cookie session 的用途和區別，以及有效期

1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙

考慮到安全應當使用session。

3、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

2. vue的數據綁定原理，mvvm與mvc的區別

MVVM：

m:model數據模型層 v:view視圖層 vm:ViewModelvue中采用的是mvvm模式，這是從mvc衍生過來的MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題

圖片說明一下：

說到MVVM就要說一下雙向綁定和數據劫持的原理，

MVC：

m:model數據模型層 v:view視圖層 c:controller控制器

原理：c層需要控制model層的數據在view層進行顯示

MVC兩種方式，圖片說明：

總結：

mvvm與mvc最大的區別：MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性后該屬性對應的view層會自動改變。

不懂得可以復制鏈接查看：

https://www.pianshen.com/article/3716256399/

3. storage 的區別 sessionStorage localStorage

localStorage的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性

sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的

4.v-model雙向數據原理

有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然后獲取其value屬性但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值所以在后面的按鈕中獲取name值 直接獲取vue實例對象data里面的myname屬性即可

【數據為尊 ----數據映射到瀏覽器 如果數據v-model后修改（肯定input）然后到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】

5.keepAlive用過嗎？什么作用？

緩存路由組件

使用的是vue的一個組件，參考vue的官方文檔

使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀

-----【保障組件的數據不會被切換路由而銷毀數據】

<keep-alive include="Home"> Home是對應的組件對象的名字，不是路由的名字

<router-view></router-view>

</keep-alive>

6.多維數組拍平

數組拍平也稱數組扁平化，就是將數組里面的數組打開，最后合并為一個數組

一紅六種方法吧……

了解的請看：https://www.cnblogs.com/guan-shan/p/10165737.html

7.跨域的原因 解決方案

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。

這樣就可以說同源策略----協議---端口---域名

原生的src和href可以解決跨域

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是后端解決跨域問題

【別的需要了解看下方鏈接】

https://blog.csdn.net/qq_41604383/article/details/100770100

8.uniApp兼容問題

§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什么ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎么升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包，請注意HBuilderX升級后，真機運行基座和云打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯后HBuilderX正式版升級一兩天。

§ 如果你使用自定義基座，之前制作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX后你應該重新制作新版自定義基座。

§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。

§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式后，同時保留了對老編譯模式的向下兼容。在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。

§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。

§ 云打包的引擎版本說明HBuilderX Alpha，只有1套云打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。中間的緊急更新版本沒有獨立打包機。舉個例子：HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。那么當前可用的打包機有1.9.1和1.8.2這2臺。（即每個大版本的最后一個版本）除了這2個HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的云打包機）

【詳情請看】

https://ask.dcloud.net.cn/article/35845