學習web前端開發,需要掌握哪些知識?

用戶8328945825930


 一、HTML部分

  首先是要掌握一些常用標籤的使用和他們的各個屬性,這些常用的標籤總結了一下有以下這些:

  html:頁面的根元素。

  head:頁面的頭部標籤,是所有頭部元素的容器。

  body:頁面的主體標籤,頁面展現的內容就放置在這裡面。

  title:頁面的標題。

  meta:位於文檔的頭部,提供頁面的元信息,包括關鍵字、描述等等。

  link:定義文檔與外部資源的關係,常用的用途就是引入樣式表。

  script:腳本標籤,可以把js腳本代碼放置在這個標籤內,也可以使用這個標籤的src屬性引入一個外部標籤。

  style:樣式標籤,可以把css代碼寫在這個標籤中。

  a:超鏈接,href屬性代表要鏈接到的地方,target屬性代表打開方式。

  img:圖像標籤,src屬性表示圖片的位置。

  form:表單元素,它內部的input、select、textarea等標籤都是比較重要的。

  div:定義文檔中的分區或節,可以使用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名來獲取一個元素結點。

  Multiplefileselection多文件選擇屬性。

  html的import、template

  process標籤,webGL等內容。

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

  1.doctype的作用。

  2.unicode、utf8等編碼的原理和區別。

  3.如何進行頁面性能優化。

  4.png、jpg、webp、gif等圖片格式的不同的優勢。

  5.HTML行內元素與塊級元素的區別。

  6.移動web端開發常用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-columnLayoutModule多列布局模型。

  ③文本字體

  1.強制換行與不換行,清除空白。

  2.文本對齊、大小(如何設置chrome小於12px的字體)、縮進、轉換。

  3.單位(em、rem、px等),顏色(rgb、rgba,hls)。

  ④變換、過渡和動畫

  1.transform的各種取值的作用與兼容性。

  2.transition過渡的動畫類型,貝塞爾曲線的原理。

  3.animation動畫的各種設置,@keyframes規則。

  4.瀏覽器的重繪與重排。

  ⑤選擇器

  1.選擇器的分類,權值和優先級。

  2.有哪些屬性可以被繼承,哪些屬性沒法繼承。

  3.偽類和偽元素分別是什麼,有什麼作用。

  上面這些都是基礎的東西,除了這些基礎的內容之外需要了解Less、Sass、stylus等css預處理器,這將會大幅度提升你的css開發效率,也需要了解一下Autoprefixer、PostCSS等css後處理器。

  三、JavaScript部分

  在這裡就不說js的基礎知識了,我把js按照語法的層次和使用的層次分為了兩大塊。

  按照語法的層次來說:

  首先是javascript的面向對象方面的內容:在javascript中實現封裝、繼承和多態。

  ①封裝:在js中可以通過閉包、作用域和作用域鏈來實現封裝,ES6的const、let的作用。

  ②繼承:基於原型鏈的繼承、基於構造函數的繼承、組合式繼承、寄生式繼承等,外加ES6的class關鍵字,prototype和proto。

  ③多態:在javascript中多態是使用arguments來實現的,關於arguments會引申出來很多內容:

  1.arguments的caller、callee等方法的作用。

  2.方法的apply和call的作用和不同。

  3.使用Array.prototype.slice.call來把一個數組對象轉化為數組。

  4.array的各種方法,如shift、splice、push、filter、map、reduce、forEach等等。

  然後是Js的設計模式,比如說那三種工廠模式啊,建造者模式啊等等。

  有多少人不知道電腦上東西是這樣生產出來的,web前端必學知識點

  然後是在不同情況下的this分別都代表什麼。

  按照使用的層次來說:

  首先主要的就是ajax,ajax的原理,ajax跨域的方法:jsonp、使用iframe的location.hash、postMessageAPI、websocket、服務器代理等等。

  然後是tcp協議、udt協議以及http協議的協議頭、狀態碼等內容。瀏覽器的緩存,客戶端存儲方面的內容:localstorage、sessionstorage、indexDB、cookie等等。

然後是一些新的js的API,例如文件讀取(fileReader)、fetch、Promise、WebSockets等等內容,可以去caniuse上面看一下有哪些新的東西。


全棧開發訓練營


在互聯網IT編程開發設計培訓類課程中,Web前端培訓開發相對而言是比較簡單,並且工作以及發展前景都是比較不錯的,因此許多想要轉行的情況下都比較偏重web前端培訓學習。那麼Web前端培訓內容是什麼?小編今天就為大家來簡單的來解答一下。

綜合來講,Web前端培訓分為HTML5+CSS3、JS交互設計、移動端、服務器、前端框架、小程序六大模塊,下面就為大傢俱體介紹每個階段學什麼。

第一階段前端核心基礎,讓學員掌握前端基礎知識包括HTML5與CSS的基礎知識和代碼的撰寫會學習PC端網站佈局以及jQuery框架。

第二階段HTML5 + CSS3 + 移動端核心,HTML+css3新特性,css進階,CSS3實例演練完成頁面特效的製作。

第三階段移動端,會學到CSS像素與物理像素的關係,佈局視口,移動端適配,移動端特效滑屏、滾動以及點觸等。

第四階段服務器端,服務器端開發Node,數據庫操作,前後端交互核心,微信公眾號開發。

第五階段JavaScript高級

第六階段前端框架中,會學習前端高級框架Vue、React、Angular,讓學員會使用主流框架開發門戶網站、管理系統等相關知識。

第七階段小程序開發,將學習微信小程序、開發工具使用,原生小程序API使用,小程序框架Mpvue應用。

以上就是Web前端培訓的內容,想要了解更多Web前端培訓的具體課程內容,可以到尚硅谷官網進行諮詢瞭解,有專職的老師為大家解答,而且還可以下載免費視頻學習。

2020web前端學習路線圖:


尚硅谷教育


一.首先告訴大家前端工程師主要做什麼?

前端工程師主要利用HMTL與CSS建構頁面,用JavaScript完善交互以及用戶體驗。互動效果包括,彈出層,頁籤切換,圖片滾動,ajax異步互動等。

二.那麼具體的要掌握哪些技術呢?

1.HTML

掌握HTML是網頁的核心,HTML主要是完成用戶可見的頁面及UI佈局。

2.CSS

是程序員的畫筆,可以為html標籤自定義樣式,通過設置html標籤的樣式,來改變其外觀,達到美化與排版web頁面的目的。

3.JavaScript

實現網頁實時的、動態的、可交互式的表達能力。作為一種網頁腳本語言,它可以在html中運行,設置並修改瀏覽器中的對象與變量。及數據的加載,與用戶的交互等邏輯上的處理。

4.切圖技術(一般公司都有UI設計師,這個不是必須的,會一些簡單的切圖即可)

一般是用PS,AL來做切圖,因為在網頁設計製作過程中經常要用到不同尺寸的圖片,一般你是沒有辦法直接找到合適的圖片的,所以你也需要自己對圖片進行處理再使用。

三. 我們應該怎樣學習web前端呢?

學習HTML,CSS首先應該跟著書,資料進行基礎系統的學一遍。作為前端,html+css,是基礎中的基礎。只有先把基礎學紮實了,再來談餘下的。理論知識學透了,就要開始來進行實戰演練,只有大量的練習,做各種各樣的佈局練習來鞏固自己所學的理論知識,將理論得到實現。

而學習JavaScript。記住大部分JavaScript的函數,知道如何實現,並多加練習,花大量的時間在瀏覽器控制檯上寫代碼,這一步是關鍵只有大量的實踐才會把你的理論知識發揮出來從而達到精通的目的。

不管學習什麼計算機技術,首先要做到基礎紮實,要先往廣度研究(就是多瞭解一些知識點),等積累一定經驗再往深度研究(你的經驗多了,你就要研究為什麼要這樣用,這樣用的實際原理是什麼)。

我的理解大概就是這些,希望對您有幫助。


I偉


在回答這個問題之前,先給一些不太懂或者想學習web前端的小夥伴們解釋一下什麼是web前端開發?需要掌握哪些知識?web前端開發能做什麼?以及web前端開發的前景怎麼樣?

當你真正瞭解了這些之後,自然就知道了掌握web前端開發需要的知識技能。

一、什麼是web前端開發?

所謂的前端,主要網站頁面/app等以最直觀的方式呈現給用戶看到的界面,就是我們日常生活中通過瀏覽器或者網址的形式打開的網站看到的當前頁面,而前端開發,則是需要HTML(超文本標記語言)、CSS(層疊樣式表)、JS(JavaScript是一門解釋型編程語言,作為web頁面的腳本語言)以及衍生出來的各種技術框架等來實現網頁網站與瀏覽用戶進行交互功能的技術。

一句話簡單的說,就是你打開網站看到的就是前端,而看不到的就是前端開發(當然,瞭解前端開發的人都能查看到當前頁面的前端源代碼)。

二、web前端需要掌握哪些知識?

簡單說,至少熟練掌握基礎的HTML+CSS(以及HTML5、CSS3)、JavaScript,保證UI設計的頁面能以最完美的方式展示在用戶面前,初學者能做到以上基本就算一個web前端開發的初學者了。

不過,為了在實際開發中代碼編寫的更加簡潔、規範,那麼還需要web前端開發人員能熟練掌握各種前端框架,常用的前端框架有bootstrap框架、Vue框架、Angular框架、React框架等。

三、web前端開發能做什麼?

其實前端就是網站的前臺部分。主要運行在PC端、移動端等瀏覽器或者相關設備上給用戶所瀏覽的網頁。

我們日常在瀏覽器中打開訪問的所有網站基本都是由HTML/5、CSS/3、JS以及各種前端框架組成的。

那麼它能做什麼?當然主要就是網站,各種各式各樣五花八門的網站。

三、web前端開發的前景如何?

web前端開發在it行業一直都是比較熱門的職業,也是互聯網產品研發中不可或缺的角色,隨著互聯網的迅速發展,對web前端開發的需求也越來多,薪酬也自然是水漲船高,因為web前端開發需要經常與美工UI設計的職位溝通視覺交互的問題,所以現在很多公司招聘前端開發工作基本都需要有美工的基礎,或者是美工都還需要有前端開發的能力。

以上就是個人對關於“學習web前端需要掌握的知識”,希望能幫助到大家。


分享到:


相關文章: