css選擇器和web前端學習，需要掌握的技術是哪些？
互聯網的高速發展促使互聯網企業對于網站等頁面的用戶體驗要求也越來越高，導致網站開發難度越來越大，web前端工程師。相對于其他IT技術職位來說，很多從事此項工作的都是非計算機相關專業出身，這當然是因為互聯網行業吸引人，2020年web前端必會的技能有哪些呢？
1網頁的基本結構（HTML、CSS）
HTML是一種標記語言，而不是編程語言，最基本是標簽是和，CSS是用來定義如何顯示HTML元素的。對HTML+CSS很容易入門，但很多人不夠深入，
2瀏覽器是怎么展現網頁的
不同內核的瀏覽器對網頁的渲染是不一樣的，目前瀏覽器都有客戶端調試工具，
3網頁的什么周期
不同的web框架下，頁面的生命周期會有所不同，大體還是一樣：客戶端發送GET請求，服務器返回相應頁面，客戶端完成操作及數據，然后POST給服務器。一定要對數據的傳遞(前臺與后臺,頁面之間)的細節了然于心。
4DHTML DOM BOM JavaScript AJAX
這是Web前端開發的重中之中，大多數時候我們都在和他們打交道。說幾個注意點：javascript是單線程編程，所謂的javascript異步編程只不過是計劃在未來的某個時間上執行相應事件而已;
javascript很強大很靈活，不要幻想短時間內熟練(更別說精通)它，并寫些框架、類庫，初始階段還是先用熟練已成熟的框架(比如jquery)當入門;一定要熟練使用客戶端調試工具。
5服務器端語言開發經驗，PS切圖技術
Web前端開發介于設計與開發中間，所以兩端的東西都得懂點。編輯語言是相通的，之前編寫過服務器語言，對學習javascript是十分有益的，從圖片轉成靜態HTML頁面，少不了PS切圖技術。
6瀏覽器的兼容性
由于歷史原因，瀏覽器的兼容性一直都折磨web前端工程師的地方，雖然有W3組織，并制定了一些規范，雖然瀏覽器產商都正在努力改進并接近其規范，但現實網絡環境中各種內核、各種版本的瀏覽器都有一席之地。
7快速學習能力和主動學習意愿
web前端的發展很快，從事這一行業一定要有快速學習能力和主動學習意愿，這樣才能適應Web產品的要求。在Web前端領域沒有絕對的是與非,解決一個問題的方法有很多，但我們要找到一個更合適的方法，找到一個更合適的方法需要經驗作積累，總之Web前端入門容易，想熟練很難，需要更多的主動學習意愿。
前端初學者怎樣才能熟練地運用好html？
新的一年新的開始，我會繼續在悟空問答分享自己的學習工作經驗。我不是前端大牛，但是也看過很多技術文章，有自己的看法。我不會站在一個“土豪”的角度說東西，我會站在一個普通人的角度，通俗易懂的和你分享。
我也做了一年的前端，本科學的機械，但是感覺互聯網編程是更好的未來，才轉行到這里。開始學習的時候也是摸爬滾打，工作之后公司就自己一個前端開發，老大也真敢賭，在這里我也大大小小做了六七個項目。pc端移動端都有，所以我跟你分享的東西會很真，不會站在一個很高的角度，但是也會讓你容易理解，通俗易懂，入門學習。
這位朋友問的初學者怎么熟練用好html+css。確實今天的前端開發不像很早之前部署完頁面就可以了，后臺寫邏輯。現在都提倡前后端分離。而html，css算是最基礎最基礎的東西了，還不算是html5和css3的新特性。
很多頁面實現都可以使用html和某些css實現，不使用某些特別的標簽（說實話我也沒有完全掌握html標簽，但基礎布局都可以實現）。估計現在很多人不會做下來安靜地看書的，但是會使用百度，看點菜鳥教程這些文檔還是很好的。不用想太多上來就做一個京東首頁布局，淘寶首頁布局。這里面其實有很多交互的，可能還涉及js的知識。建議可以找一個靜態頁面，實現簡單的布局，在實踐中才能更好學習到東西。像悟空問答的回答區，任務這里怎么布局，頭像為什么是圓的？頭像右側怎么才能兩行，左右側有個關注按鈕怎么實現長寬色彩這些，一點一點實現，不要好高騖遠。
要有個好態度，主動去學習。如果小編想仿照某一個頁面，看到好看的效果，可以使用F12，看看人家的dom布局，和樣式書寫。其中可以最直接在瀏覽器內修改看效果，保持一顆好奇心。多查資料，現在很多效果都可以百度出來，遇到問題不要先想-這咋整啊，不可能啊。這會讓別人很厭煩。最開始做app時候，也沒人帶我，我一想到圖片拍照上傳，二維碼掃描，地圖什么的我也害怕了。所以在項目開始之前我就查閱資料，問一些前輩。其實很多技術都很成熟了，不用擔心，重要的是有一顆學習的心。
既然是熟練的使用，一定要多做，多寫。像很多人剛開始的時候連標簽都記不住，英文單詞都不行，也談不上熟練。打字的時候還單手指按，也不可能效率高，這些東應該是編寫好代碼的前提。
現在技術更迭很快，有些人了解了html，css，js，其實可以先上手框架了。我也不是html，js這些玩得很溜了，才學習的框架。而是在些項目的時候一點一點的深入的。畢竟沒有到那個程度，看幾個例子就知道了原理，遇到某些效果就可以靈活的運用。我也是看了很多文檔，有自己的思考，有自己的演示，像js同步異步，宏任務微任務，剛開始接觸前端的時候根本沒有接觸過這些概念。
希望看到這里的朋友，我感覺知識道理是實踐出來的，不是看到個東西想就能想明白，看著都很正確，到自己書寫的時候未必是那樣的。所以就是多練習，多寫，多問。只要肯付出，在電腦前減少玩游戲的時間，減少看直播的時間，減少追劇的時間，減少扯淡的時間，能力慢慢就提升了。
我是測不準，希望在新的一年里通過自己的努力面試進頭條公司。只是發表一些自己的愚見，不喜勿噴，如果你現在在學習前端，有問題可以給我留言，大家一起學習進步！
*百度網盤也有些學習資料，感興趣的小伙伴可以留言。不需關注。
如何幫助前端web新人入門和提高？
學習前端就好比如蓋房子~
html就充當了房子結構這部分，也是房子的基礎。
css呢，就好比咱們房子的裝修，墻面什么顏色，什么風格，什么地板...這些給房子改變風格，樣式的就是css
javascript呢，就好比這個房子的功能，房子需要制冷吧，需要暖氣吧，也需要上下水吧。這些功能性的就相當于是javascript
例子可能不是很恰當，只是幫助大家有個初步的認識~
方法步驟、工具以及開發的案例展現
1、前端工具箱（dreamwear/sublime/Photoshop/SVN等）
2、零基礎入門（html，CSS）
前端開發概況、代碼入門
頁面基本結構、文檔聲明、編碼聲明、css語法、style屬性、link和style標簽、id屬性、基本樣式、Border 、Background、 Font、盒模型、文本設置...
常用標簽集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd...絕對路徑、相對路徑、標簽語義化、標簽嵌套規范、SEO...
常用選擇器&標簽類型劃分
d、class、類型選擇、包含選擇、群組選擇、通配符、選擇器優先級、標簽樣式初始化訂制方案、超鏈接及偽類劃分、標簽類型劃分及特性、inline、inline-block、block..
浮動進階
浮動的作用、浮動的特性、文檔流、浮動的各種問題、clear、BFC(塊級格式化上下文)、觸發BFC的條件、Haslayout、Haslayout的觸發條件...
定位
relative相對定位、Absolute絕對定位、Absolute絕對定位、Fixed 固定定位、inherit 繼承、static靜態定位、默認值、zIndex層級問題、margin負值、透明度...
表格和表單
表格標簽、表格樣式重置、單元格合并、表單元素、表單相關的屬性操作、表單默認樣式初始...
兼容性問題處理
兼容性問題總結、浮動在IE6，7下的各種問題、表單在低版本IE的問題、處理低版本IE對新增標簽的支持、CssHack、條件注釋語句、PNG問題、透明度的問題、固定定位在IE低版本的處理方式...
整站進階
樣式規劃、favicon、Css Sprite、Data URI、隱藏元素、測試工具使用、滑動門、等高布局、三列布局、未知寬高圖片在容器內水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...
css3入門
transition、屬性選擇器、nth-of- type、nth-child、backgroundSize、box-sizing、圓角，盒模型陰影、文字陰影、rgba、表單高級、H5表單新增屬 性、E:not(s)、E:target、E::selection、background-clip...
移動端布局
測試環境Emulation、viewport、 window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移動端布局相關問題、 window.deviceorientationevent、橫豎屏判斷...
Animation和Transform
瀏覽器前綴、keyFrames、Animation調 用、播放次數設置、動畫偶數次調用順序、Animation的問題、無縫滾動、動畫播放|暫停、rotate旋轉、deg、skew斜切、scale縮 放、translate位移、transform-origin、transform的執行順序問題...
Bootstrap前端開發框架
Html語法規范、CSS語法規范、Less 和 Sass 中的嵌套、class 命名、選擇器、Normalize.css、柵格系統、排版、代碼、響應式工具...
3.項目實戰
PC端的企業網站布局（例：sony官網）
PC端的電商類網站布局（例：京東商城）
移動端常見頁面布局（例：微信活動頁/商城）
推薦圖書：
學習前端書籍自然不可少，這里給大家推薦《html 5與 css 3權威指南》，雖然主要是講解html5+css3，但倒也是一本好的入門書籍。該書比較系統，覆蓋面也比較廣。技術新穎，所有知識點都緊跟 html 5與css 3的最新發展動態（html 5和css 3仍在不斷完善之中）；也有比較強的實戰性（包含246個示例頁面），不僅每個知識點都 配有精心設計的小案例（便于動手實踐），配合案例，也比較生動有趣。該書不僅能滿足你全面而系統地學習理論知識的需求，還能滿足你需要充分實踐的需求。
本次整理了一些web前端視頻資料，注冊賬號就能免費下載，初級、中級、高級的任君選
下載鏈接： web前端開發工程師_web前端開發視頻教程
個人認為學習前端可能又分為下面幾個階段；
第一階段——HTML標簽的學習
超文本標記語言(HyperText Mark-up Language 簡稱HTML)，“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
html是一個網頁的骨架，就好比是蓋房子的結構~這也是前端頁面的基礎。試著想一下，如果一個房子連磚頭和水泥都沒有，后面的步驟又有什么意義呢？所以我們必須完全掌握HTML的基本結構和常見的標簽，屬性。有了一個好的開始，距離成功已經一小半啦~
關于HTML怎么記憶、學習？可能一上來死記硬背，也不會有太好的預期。而且還有可能被嚇到？
“我去！這么多標簽！怎么記得玩？”
個人感覺有兩點可以嘗試：
1，語義化的去記憶。比如ul li這個就是列表，button就是按鈕，table就是表格。其實這也是html5所倡導的，語義化標簽。
2，試著寫一個一個小的demo，也許就只是一個列表，一個表格，或者一個按鈕。也許寫著寫著你就懂了呢？
學習HTML就是要自己不斷的去寫，去嘗試。看著自己的代碼能跑起來，有了心目中的效果，這種心情還是很開心的！給大家推薦一個網站，w3cSchool，這里面有在線的代碼編輯器。可以邊寫邊看到效果~
ok~學習完成html后，我們來到第二階段——css
去給我們的房子裝修一番吧~
第二階段——CSS的學習
CSS，層疊樣式表—— （Cascading Style Sheets），是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言，CSS能夠對 網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，并能夠進行初步交互設計，是目前基于文 本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。
CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面布局，就基本上掌握了大半啦~這時我們就以及能夠對網頁中各個元素進行精準的排版，做出符合我們意愿的網頁啦！
關于CSS的各種屬 性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改 變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色—— border-right-color”等等等，諸如此類~
完全就是我們需要什么，只要憑著需求去尋找。
說完裝修，我們終于要給房子打造一些功能啦~follow me~
第三階段——JavaScript
JavaScript一種直譯式腳本語言，是一種動態 類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在 HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
簡單來 說，javascript是一個可以運行在瀏覽器上面的語言（當然現在基于一些庫/框架已經遠不只是在瀏覽器上了），它可以操控瀏覽器，讓瀏覽器聽從我們 的命令。這有點像一個電視劇和遙控器，而javascript就是我們的遙控器。瀏覽器根據javascript的指令，做出相應的反饋。比如操作 DOM（也可以理解成為操作HTML），可以操作CSS。有了javascript就可以讓我更加靈活&動態的操控HTML,CSS.
嚴格來說、HTML和CSS還算不上真正的“語言”，而javascript卻是如假包換的腳本型語言，既然是語言，那就會有字符串，數組，對象等等。而我們的javascript可以處理這些與數據有關的工作，比如給數組排個序，去個重等等。
而我們依靠javascript可以做些什么呢？網頁上常見的輪播圖，網站的注冊功能，提交我們的留言，刷新獲取新聞等等。當然，我們強大的javascript遠不止此啦~以后再為大家深入介紹~
然而因為歷史原因，比如我們灰常“尊敬”的 IE 瀏覽器~出了一套自己的javascript標準，沒有和主流javascript標準兼容啊！！作為一個前端er是不是應該把更多精力用在有意義的地方呢，而不是解決兼容。。。
所以，似乎我們還需要一個利器，來讓我們更快速的開發~沒有錯，這就是我們的——jQuery！
第四個階段——jQuery
jQuery是一個兼容多瀏覽器的 javascript庫，核心理念是write less,do more(寫得更少,做得更多)。jQuery在2006年1月由美國人 John Resig在紐約的barcamp發布，吸引了來自世界各地的眾多JavaScript高手加入，由Dave Methvin率領團隊進行開 發。如今，jQuery已經成為最流行的javascript庫，在世界前10000個訪問最多的網站中，有超過55%在使用jQuery。
如果繼續用蓋房子做例子，jQuery更像是一個裝修隊。我們只需要關注我們的房子設計本身，把我的想法，理念告知這個裝修隊，讓它來給我們處理那些雜七雜八的事情。比如會不會吵到鄰居？怎么協調物業？干活總得有人手的，對吧...
jQuery的優點我就不挨個說啦，一句話，jQuery是你更上一層樓的利器，也是我們前端er一大利器！
Web前端學習小建議
這里跟大家扯一扯學習前端的小方法，是我自己的學習方法，大家湊合看看，倒也不一定對~
在寫css前，其實html的結構要是比較合理的，這樣寫css也會比較順手。在寫一個網頁之前，建議先琢磨幾分鐘，不要上來就寫。多去看看別人是怎么寫的，然后結合自己的項目，心中有一個大致規劃。可以先把最外層輪廓寫好，先不著急去寫某一個具體的部分。
這里給大家分享一些小技巧：
1、使用reset.css
火狐和IE這兩種不同的瀏覽器，在繪制CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。（可以去網上找一下，很多的）
2、CSS縮寫
CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。
不是像這樣創建CSS
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
而是像這樣創建CSS
.header {
background: #fff url(image.gif) no-repeat top left
}
3、理解class和id
這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重復的樣式，而class是可以重復使用的。
4、實用的<li>
<li>也叫鏈接列表，在與<ol>或<ul>正確搭配的時候非常好用，尤其是用在導航菜單樣式上。
5、少用<table>多用<div>
CSS最大的優勢之 一是使用<div>達到樣式上的靈活多變。不同于<table>，<div>里的內容不會 被鎖在單元 格<td>中。可以說幾乎所有的表格布局都可以在<div>和樣式的正確使用下完成。當然，有大量表格內容時，還是 用 <table>吧。
6、CSS調試工具
在設計CSS時，能夠得到頁面布局的預覽對于優化CSS樣式和糾錯是很有幫助的。這里有一些免費的CSS調試工具推薦給你，你可以把它裝在瀏覽器上：比如FireFox Web Developer、DOM Inspector、Firebug等
7、!Important
所有被!important 標記的樣式，即使它后來被重寫，瀏覽器也只會采用被標記的那條。
.page {
background-color:blue !important;
background-color:red;
}
比如上面的例子，因為background-color:blue 被標記為!important ，即使后來有把背景改成紅色的語句，也只采用被標記的那條。!important 用來強制使一個樣式避免在之后的編碼中被修改，遺憾的是IE不支持。
牢記以上小技巧，也許你的css技能突然就起飛了呢？
關于javascript的一些小技巧，下次我再整理給大家~一次性看太多，大家是不是也有點暈？
學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什么苦。。。既然學習這么痛苦，為什么不快樂一點學呢？
專業的學習路徑是怎么樣的？
程序員也有鄙視鏈，后端開發程序員普遍看不上前端，原因是前端入門真的太簡單了。就html、css、簡單的JavaScript，認真學一天也能做個簡單的網頁來。
但是想要做好卻并不簡單，前端的學習路線有點陡峭，到后期要對各種細節問題進行探究、優化，所以如果想要做好，那也不簡單，關鍵還在于得多下功夫。
學習路線：
1、HTML、CSS、JavaScript語法基礎。學完基礎后，可以仿照電商網站（例如京東、小米）做首頁的布局。
2、JavaScript語法進階。作用域和閉包、this和對象原型等。前端的有很大一部分都在JavaScript與DOM上面了。JS目前來說在開發崗位算是最“萬能”的語言，前后端通吃。我曾經有個項目中就是用JS技術棧開發一個完整的系統，整個項目不管是運行在服務器端的程序還是運行在PC端的程序，基本上都是JS寫的。JS很重要、JS很重要、JS很重要（重要的事情說三遍）。
3、Xpath、Ajax、jQuery等。
4、移動Web開發、Bootstrap等。要注意移動開發中的適配和兼容性問題。
5、前端框架：
Node.js，nodejs不一定得學會，但是npm包管理一定要清楚，因為一些大型的前端項目會有一堆包。
Vue.js和React，這兩個框架必須要熟練一個。建議先學Vue.js，上手相對容易。同時掌握 Vue 和 React 才是合格的前端同學。
6、自動化工具：構建工具 Webpack、構建工具 gulp、CSS 預處理器 Sass 等。
7、網絡通訊：HTTP協議、跨域通信、安全問題（CSRF、XSS）、瀏覽器渲染機制、異步和單線程、頁面性能優化、防抖動（Debouncing）和節流閥（Throtting）、lazyload、前端錯誤監控、虛擬DOM等。
8、底層原理：V8、垃圾回收、內存生命周期、線程。
9、圖像處理：canvas、WebGL。
10、面向對象設計、架構設計、算法等。
PS：前面5條建議按照順序學習，這是基礎內存，作為一名前端必須掌握的。后面5條可按照需求修改先后順序。
以上是作為一名純技術前端來講的，如果是偏向UI前端，那么比較需要多一點了解業務知識，并且盡可能自己的審美觀變得接近大多數人。
附上一個我用前端實現的表情包，圖二（歡迎吐槽我的審美[我想靜靜]）