web前端開發自學路線是怎樣的?html+css+JavaScript的學習方法?

来源:https://www.cnblogs.com/dou485/archive/2019/09/03/11453412.html
-Advertisement-
Play Games

不廢話,直接乾貨 學習前端的幾個個階段: 一階段:html標簽、html5新增標簽、css樣式、css3樣式、媒體查詢等 二階段:JavaScript、jQuery、ajax、面向對象、http傳輸協議等 三階段:canvas、js高級應用、JS-SDK、H5新增技術 四階段:node.js、vue ...


不廢話,直接乾貨

學習前端的幾個個階段:

一階段:html標簽、html5新增標簽、css樣式、css3樣式、媒體查詢等

二階段:JavaScript、jQuery、ajax、面向對象、http傳輸協議等

三階段:canvas、js高級應用、JS-SDK、H5新增技術

四階段:node.js、vue.js

 

 

 

第一階段——HTML的學習

超文本標記語言(HyperText Mark-up Language 簡稱HTML)是一個網頁的骨架,無論是靜態網頁還是動態網頁,最終返回到瀏覽器端的都是HTML代碼,瀏覽器將HTML代碼解釋渲染後呈現給用戶。因 此,我們必須掌握HTML的基本結構和常用標記及屬性

HTML 的學習是一個記憶和理解的過程,在學習過程中可以藉助Dreamweaver的“拆分”視圖輔助學習。在“設計”視圖中看效果,在“代碼”視圖中學本質, 將各種視圖的優勢發揮到極致,這種對照學習的方法彌補了單純識記HTML標簽和屬性的枯燥乏味,想必對各位初學的小盆友們來說,必定是極好的!

在學習了HTML之後,我們只是掌握了各種“原材料”的製作方法,要想蓋一幢樓房就還需要把這些“原材料”按照我們設計的方案組合佈局在一起併進行一些樣式的美化。

 

 

 

第二個階段——CSS的學習

CSS是英文Cascading Style Sheets的縮寫,叫做層疊樣式表,是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言其樣式是可以復用的,這樣就極大地提高了我們開發的速度,降低了維護的成本。

同時CSS中的盒子模型、相對佈局、絕對佈局等能夠實現對網頁中各對象的位置排版進行像素級的,精確控制。通過此階段的學習,我們就可以順利完成“一幢樓房”的建設。

“樓房”建設完成之後,我們可以交給用戶使用,但是如果想讓用戶獲得更佳的體驗,我們還可以對“樓房”進行更深一步的“裝修”,讓它看起來更“豪華”一些。

 

 

 

第三個階段——JavaScript的學習

JavaScript是一種在客戶端廣泛使用的腳步語言,在JavaScript當中為我們提供了一些內置函數、對象和DOM操作,藉助這些內容我們可以來實現一些客戶端的特效、驗證、交互等,使我們的頁面看起來不那麼呆板,屌絲瞬間逆襲高富帥!有麽有?

此時,也許你還沉浸在JavaScript給你帶來的驚喜之中,但你的項目經理卻突然對你大吼道

這個效果在××瀏覽器下不相容,重新搞……”

“不相容?”瞬間石化了有木有?

我擦,坑爹啊!那可是花了我一個晚上寫了幾百行代碼搞定的啊,吐血了都!”

JavaScript的相容性和複雜性有時候的確讓我們頭疼,還好有“大神”幫我們做了封裝。

 

 

Web前端的學習建議

最後給大家聊聊在學習Web前端中的一些建議和方法:

在CSS佈局時需要註意的一個問題是很多同學缺乏對頁面佈局進行整體分析,不能夠從巨集觀上對頁面中盒子間的嵌套關係進行把握,就急於動手去做,導致頁面中各元素間的關係很混亂,容易出現盒子在浮動時錯位等情況。建議大家在佈局時採用“自頂向下,逐步細化”的思想,先用幾個盒子將頁面從整體上劃分,然後逐步在盒子中繼續嵌套盒子。

“君子生非異也,善假於物也”,在學習的過程中還要多瀏覽一些優秀的網站,善於分析借鑒其設計思路和佈局方法,見多方能識廣,進而才可以融會貫通,取他人之長為我所用。

計思路和佈局方法,見多方能識廣,進而才可以融會貫通,取他人之長為我所用。面,另一方面我們可以使用Firebug方便地查看、分析別人網站的源代碼,“偷”也是一種技能!

每個人的成長與基礎不一樣,結合自己的實際情況,在執行。還是重覆一下,前端的核心是html,js,css不難,但需要來積累。對前端我是這麼看的

 

 前端技術的更新如此迅速,在這樣的大環境下,前端工程師保持自學能力就顯得尤其重要了。因此,“學什麼”“怎麼學”就是我們要迫切解決的問題。這是我的前端交流學習qun:前面是四八四,中間是七五七,後面是七六零。如果需要學習資料在裡面下載。我做這行十多年,有問題隨時來問我,學習方法,學習效率等等問題。

html,css就像一瓶酒,得品。

html,css總共就那些標簽跟選擇器屬性什麼的,但是要寫一個有擴展性,健壯性或維護性的頁面不容易。現在寫頁面基本條件反射,不是如何快速的完成,而是思考如果有界面需求修改,怎麼在修改代碼最少的情況下快速完成需求任務。這是對前端耐力,體力,智力的三重考驗。

js就像一把劍,得磨。

js剛開始只是為了較驗,隨便技術社會的發展,承擔的角色越來越重,剛開始玩玩jQuery感覺已經會js了,其實只是冰山一角。隨著對js的瞭解越來越多,他即變態又可愛,即好玩又難控,即有很多相容問題,但解決相容是我們基本生存之道。從ajax到jsmvc一路走一路看,高載潮一浪高過一浪。

人生就是一場夢,得作。

技術只是生活的一部分,曾經雄心鬥志,如今低頭寫碼。改變能改變的,接受不能改變的。人生有限,只爭朝夕啊。人生學習的態度是:不急不躁,不快不慢。持之以恆,相信自己。不求能改變世界,但求能改變自己的生活。不求健步如飛,但求一步一腳印。感謝磨難,他使我們內心更為堅強。感謝挫折,他使我們不斷的成長,感謝bug,他使我們的思維更加深邃。感謝前端,他使我們更加的相信,撐起一片天空需要十八般武藝。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • javascript時間戳轉換,支持自定義格式,可以顯示年,月,周,日,時,分,秒多種形式的日期和時間。 推薦一個JavaScript常用函數庫 jutils jutils JavaScript常用函數庫 在日常工作生活中,會經常用到一些日期格式化,url相關操作,瀏覽器類型判斷,常用驗證格式等等函 ...
  • 動態綁定height: v-if、v-else例: ...
  • 右擊文件 > 驗證本文檔語法(V)後報錯 解決: 項目右鍵->”屬性”->”語法&框架”界面中配置項目的javaScript版本,將ECMAScript5.1 修改為6。 ...
  • 一:安裝 方式1: 腳手架安裝 方式2: 直接引入對應的js文件 二:Vue基礎知識 三:組件化 四、自定義指令 ...
  • <html lang="en"> <head> <meta charset="UTF-8"> <title>自適應頁面</title> <style type="text/css"> .div1{ position: relative;} .div2{ position: absolute; tex ...
  • 定義: less是一種動態樣式語言,對css賦予了動態語言的特性,比如變數、繼承、運算、函數,既可以運行在客戶端,也可以運行在伺服器端,依賴JavaScript sass是一種動態語言,屬於縮排語法,比css多出很多功能,比如變數、嵌套、運算、混入、繼承、函數等,更容易閱讀; sass與scss關係 ...
  • 為什麼要用webpack? 現今的很多網頁其實可以看做是功能豐富的應用,它們擁有著複雜的JavaScript代碼和一大堆依賴包。 模塊化,讓我們可以把複雜的程式細化為小的文件; 類似於TypeScript這種在JavaScript基礎上拓展的開發語言:使我們能夠實現目前版本的JavaScript不能 ...
  • python 大蟒蛇 downloads 下載 install 安裝 customize 自定義 path 環境變數:路徑 optional 可選的 feature 特性特點 documentation 文檔 doc associate 關聯 shortcuts 快捷方式 setup 安裝 succ ...
一周排行
    -Advertisement-
    Play Games
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...