摘要:上期回顧在上一節我們已了解前端開發是做什么的,現在的問題是,如何才能成為一名合格的前端開發工程師相信這個問題是大家比較關心的。
上期回顧
在上一節我們已了解前端開發是做什么的,現在的問題是,如何才能成為一名合格的前端開發工程師? 相信這個問題是大家比較關心的。
前端開發工程師
如果大家在一些搜索引擎上搜索“前端開發工程師”需要具備什么技能?可以看到搜索結果中會出現許多諸如要掌握:
“HTML” “CSS” “JavaScript” “DOM” “Ajax” “React.js” “vue. js” “node.js” 等技術的信息。一些想入行的朋友看到要學習這么多東西,可能會望而卻步,不敢去了解它。
其實前面所搜索到的結果,很多都是由前端開發的核心技術衍變而來的。不管前端開發技術怎么發展,萬變不離其宗,它的核心都是 HTML、CSS 和 JavaScript 這三大技術。
只要把這些核心技術的知識體系掌握扎實, 就可以順利地進行前端開發了,至于“React.js” “vue.js” “node.js”這些技術,不妨等基礎穩妥扎實后,再慢慢地學習,畢竟很多“框架”或“類庫”都是流行一時,沒準正在看本書的你在學完本書后發現,有些技術早不流行了,而那些原生語言卻依然有著強悍的生命力,仍然活躍在各類商業應用中。因此,從這個意義上來說,作為開發者掌握原生語言的開發技能才是重點。
在人類社會,語言是人與人之間用來溝通的方式
比如和英國人說話需要用英語,和俄羅斯人說話就得用俄語。在計算機世界,我們要與計算機進行信息的交流同樣需要語言,這個語言稱為計算機語言。
人類語言存在不同的類型,計算機語言也同樣存在不同類型。針對不同的應用,我們需要使用不同的計算機語言, 比如針對服務端進行業務邏輯和數據的處理需要 Java、C#、C++ 等計算機語言,而針對在瀏覽器中展現網頁以及實現用戶與網頁的交互等效果的應用,則需要使用 HTML、CSS、JavaScript 等計算機語言。
HTML 超文本標記語言:搭建網頁“結構”
HTML(Hypertext Markup Language)
中文意思是超文本標記語言。為了方便記憶和理解,我們將 HTML 中的 3 個單詞拆分開來,分別解釋其中含義。
Hypertext(超文本)
指的是頁面中的各種內容。在一個網頁中,有文字、超鏈接、圖片、音頻、視頻等, 這些內容共同構成了網站信息,這些信息以計算機語言的形式編寫而成,因此稱它們為“超文本”內容。
Markup(利潤。在這里指標記或標簽)
HTML 語言在大多情況下,使用一對標簽“<>>”來 表示,其中“<>”為開始標簽,“>”為結束標簽。標簽的尖括號內放置著各種英文關鍵詞,例如:“
妙味課堂是國內知名的 IT 培訓機構
”,它將會把“妙味課堂是國內知名的 IT 培訓機構”作為一段文字放置在網頁中。Language(語言)
HTML 就是由各種各樣的標簽組成的語言,在這套語言體系內,描述著網頁的“視頻、 音樂、文字、圖片”等內容。
HTML 從誕生到現在經歷多個版本,依次是
HTML2.0
HTML3.2
HTML4.0
HTML4.01
HTML5
HTML5 相比于其他版本,增加了許多語義化標簽,如 header、nav 等文檔結構標簽,音頻和視頻以及 canvas 畫布等標簽。
CSS 層疊樣式表:給網頁添加“樣式”
CSS(Cascading Style Sheets)
中文意思是層疊樣式表,以下簡稱為“樣式表”。樣式表的作用就是給網 頁加樣式。使用 HTML 標簽搭建頁面結構時,標簽使用的都是自己本身在瀏覽器中的“模樣”,即默認樣式。 這些默認樣式大部分情況下都毫無美感。而 CSS 樣式就相當于“化妝師”,把頁面上的內容“梳妝打扮”一番, 然后將美好的狀態呈現在用戶面前。
例如:
圖 1-8 就是瀏覽器默認顯示的樣式,
圖 1-9 則是使用 CSS 稍加修 飾以后的樣式。
圖 1-8 默認樣式輸出結果
圖 1-9 CSS 樣式輸出結果 從圖 1-9 中可以看到,使用 CSS 樣式可以修改頁面內容的對齊方式、顏色以及背景顏色等樣式。兩圖相比較,圖 1-9 更加豐富多彩,更能突出重點,也更吸引人。
JavaScript:讓網頁響應某種“行為”
JavaScript(簡稱 JS)
一種腳本式語言,它可以讓網頁響應某些“行為”。例如用戶在網頁中用鼠標單擊某個按鈕以后,如果他希望瀏覽器能夠切換下一張圖片,這樣的想法就可以通過 JS 來實現。在圖 1-10 中, 用戶可以通過單擊圖片左、右兩邊的 < 和 > 箭頭來實現圖片的切換。
又或者我們希望在搜索框中輸入部分內容時能在彈出的下拉框中顯示出所有相關的數據供用戶選擇,如 圖 1-11 所示。這種根據部分內容彈出下拉框并顯示出所有相關數據的效果使用 JS 將很容易實現。
圖 1-10 單擊圖片兩邊向左和向右箭頭切換圖片
圖 1-11 根據部分內容實現相關數據的下拉顯示
綜上所述
我們可以看到:HTML、CSS 和 JavaScript 各司其職,分工合作,共同構建 Web 頁面。
HTML 用于搭建頁面結構,就像人的骨骼,有了骨骼才能支撐起身體;
CSS 樣式表相當于“化妝師”,讓頁面內容以美好的狀態呈現在用戶面前,這就如同每個人都有不同的穿衣風格一樣;
JS 能讓頁面具備響應各種“行為”的能力,產生各種交互效果,使頁面真正的“鮮活”起來,就如同讓一個原本靜止的模特開始活動,他可以微笑、可以表演。
本文連載更新中,敬請關注后續文章發表~
訂閱號ID:Miaovclass
關注妙味訂閱號:“妙味前端”,為您帶來優質前端技術干貨;
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/99037.html
摘要:面對這些較高的要求,前端在開發環節中的作用也變得越來越重要因而近幾年來前端工程師備受青睞一般水平的前端工程師平均年薪可達萬元資深前端工程師年薪高達萬元。這種用戶體驗的細節問題是否處理妥當是判斷一名前端工程師是否優秀的因素。 本文是為了給那些想要了解前端開發是什么,或者剛剛打算開始學習前端的朋友們準備,希望可以幫助準備入行的你;showImg(https://segmentfault.c...
摘要:番茄工作法簡約而不簡單,本書亦然。在番茄工作法一個個短短的分鐘內,你收獲的不僅僅是效率,還會有意想不到的成就感。 @author ASCE1885的 Github 簡書 微博 CSDN 知乎本文由于潛在的商業目的,不開放全文轉載許可,謝謝! showImg(/img/remote/1460000007319503?w=728&h=792); 廣而告之時間:我的新書《Android 高...
摘要:其中負載均衡那一節,基本上是參考的權威指南負載均衡的內容。開發指南讀了一半,就是看這本書理解了的事件循環。哈哈創京東一本騙錢的書。 歡迎大家前往騰訊云+社區,獲取更多騰訊海量技術實踐干貨哦~ 本文由騰訊IVWEB團隊 發表于云+社區專欄作者:link 2014年一月以來,自己接觸web前端開發已經兩年多了,記錄一下自己前端學習路上看過的,以及道聽途說的一些書,基本上按照由淺入深來介紹...
閱讀 1860·2021-09-29 09:35
閱讀 2721·2021-09-22 15:25
閱讀 1979·2021-08-23 09:43
閱讀 2056·2019-08-30 15:54
閱讀 3357·2019-08-30 15:53
閱讀 2394·2019-08-30 13:50
閱讀 2406·2019-08-30 11:24
閱讀 2277·2019-08-29 15:37