精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
Web前端小白入門指迷

大前端之旅

大前端有很多種,Shell 前端,客戶端前端,App 前端,Web 前端和可能接下來很會火起來的 VR 前端等。當然在這篇文章,集中討論一下身為小白,我們怎樣去了解 Web 前端,以至達到一種入門級別的水平。

前端篇: 前端演進史


大前端

這同時也可作為任何一門編程語言入門之旅的小參考,不足之處歡迎指出。

為什么學 Web 前端

互聯網的快速發展和激烈競爭,用戶體驗成為一個重要的關注點,導致專業前端工程師成為熱門職業,各大公司對前端工程師的需求量都很大,要求也越來越高,優秀的前端工程師更是稀缺。個人感覺前端入門相對容易,但是也需要系統地認真學習,在打好基礎后堅持學習,成為優秀前端工程師也只是時間問題。

當然,學 Web 前端的源動力也可以僅僅是想在瀏覽器上跑一個自己寫的小游戲,或者好奇一下這個互聯網的工作原理咯。

瀏覽器上的頁面

在瀏覽器中輸入 www.jianshu.com 訪問可愛的簡書,?服務器就會發來簡書網頁的源代碼和一些圖片,接著瀏覽器執行這些代碼并將結果顯示在瀏覽器窗口中,我們便可以進一步操作。


簡書

查看頁面源代碼

打開簡書后,在( Chrome )瀏覽器窗口任意位置點擊右鍵 -> 檢查(快捷鍵 Ctrl + Alt + I 或 Alt + Commd + I)即可打開開發者模式,可見每一個我們能夠看到的界面都是源代碼被處理的結果。而這個源代碼便是 Web 前端要去入手了解的第一步。


打開瀏覽器開發者模式

Web 前端小白技能點

那么都該學什么才可以做出這么好看有趣的網頁呢?可以從@ Phodal 大神之前寫過的 Web 技能樹看出Web 前端的技能三大基石 -- HTML,CSS,JavaScript。


Web 技能樹 -- Phodal

以及幾年前一個很流行的前端工程師技能圖譜可以借鑒學習。


前端工程師技能圖譜

其中,HTML 是超文本標記語言,文件以 .htm 或 .html 為擴展名,每當有一個 HTTP 請求(可以先理解為瀏覽器要訪問網頁的標準請求),服務器便根據請求發送相應的 HTML 文檔到客戶端進行解析,我們便可以看到相應的網頁。


一個簡單的 HTML 頁面

CSS 指層疊樣式表 (Cascading Style Sheets),樣式定義如何顯示HTML 元素,我們可以把 CSS 寫到 HTML 頁面的具體元素中、<head> </head> 標簽中,或者直接引入外部以 .css 為拓展名的文件(外部樣式表)到 HTML 頁面中,外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。


W3School 上一個簡單的 CSS 實例

JavaScript 是因特網上最流行的腳本語言,可以在不刷新整個 HTML 的頁面時根據具體事件動態的更改頁面內容,使網頁真正的“活”了起來。這里不得不說的是,由于 JavaScript 近年來火熱發展,覆蓋已經不僅僅局限于 Web 前端而涉及到服務端(Node.JS 等)甚至物聯網(例:致JavaScript也將征服的物聯網世界)和 VR 設備(例:打造VR世界: Oculus + Node.js + Three.js)上了。


JavaScript 在網頁上的一個驗證輸入功能

編程語言的概念在這里只做引導,具體點進下方“去哪兒入門 Web 前端編程語言”推薦的網址進行深入理解~

去哪兒入門 Web 前端編程語言概念

這里按類別直接上幾個推薦學習 Web 開發(不只是前端)的學習網站:

更多精彩盡在我的 Github 倉庫 Coding-Full-Stack-Intro之中。

在哪兒了解 Web 前端編程語言動態

這里是一些較為經典的 IT 新聞網站,可以及時關注最新的技術改變

更多精彩盡在我的 Github 倉庫 Coding-Full-Stack-Intro之中。

基本開發工具

寫 Web 前端源碼用什么工具寫?難道就用文本編輯器編輯 .txt 文件后將后綴改為 .html 才能打開并運行嗎?當然不是,這里有很多很棒的前端開發工具作為推薦。根據個人信仰,選擇其一就好。

WebStorm

WebStorm 一度被廣大中國 JS 開發者譽為“ Web 前端開發神器”、“最強大的 HTML5 編輯器”、“最智能的 JavaScript IDE ”等,有智能的代碼補全,代碼格式化,html提示,聯想查詢,代碼重構,代碼檢查和快速修復,代碼調試,代碼結構瀏覽,代碼折疊和包裹或者去掉外圍代碼等等等等特點??梢约?Git ,隨時將自己的代碼提交到遠程代碼托管平臺。


WebStorm

Sublime Text 3

Sublime 是程序員Jon Skinner于2008年1月份所開發出來的一款跨平臺輕量級文本編輯器。Sublime Text具有漂亮的用戶界面和強大的功能,例如代碼縮略圖,Python的插件,代碼段等。還可自定義鍵綁定,菜單和工具欄。配合上各種開發插件,便可達到高效開發的狀態。


Sublime Text 3

Atom

Atom 是由 Github 官方發布,專門為程序員推出的一個跨平臺文本編輯器。具有簡潔和直觀的圖形用戶界面,并有很多有趣的特點:支持CSS,HTML,JavaScript等網頁編程語言。它支持宏,自動完成分屏功能,集成了文件管理器。


Atom 編輯器

安利一個 Atom 上的一個插件 -- activate-power-mode,打開會有震撼的敲擊代碼的效果。效果演示地址。

Web 前端前期書籍推薦

好的學習道理離不開實體書的陪伴。好的書籍便是節約學習時間、拓展視野的一個高效道具。從 HTML + CSS + JavaScript 出發推薦一些書籍。

節選自 FKS 前端書籍推薦

遇到問題怎么辦


當然這么辦咯

難道這就完了嗎

說了這么多,這也僅僅才是開始。Web 前端開發之路也是認知整個計算機科學之路,這一路技術底蘊必不可少。如果能再做到下面幾點就更好了。

HTML 5.1

9 月份就要發布 HTML 5.1 了,這么重大的新聞,還在等什么。。?


THE FUTURE IS LANDING

沒有最快的捷徑,只有堅持下去才能找到意義。



文/icorvoh(簡書作者)
原文鏈接:http://www.jianshu.com/p/d74f8f6e0917
著作權歸作者所有,轉載請聯系作者獲得授權,并標注“簡書作者”。

本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請點擊舉報
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Web前端開發入門(一)簡介
黑馬程序員:前端和UI應該學哪個好呢?
WebStorm 2022(Web前端開發工具) v2022.3.2中文Mac版
Web前端開發HTML5、Javascript、CSS等書籍
如何才能自學Web前端?
2012年度最佳 Web 前端開發工具和框架《下篇》
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯系客服!

聯系客服

主站蜘蛛池模板: 岑溪市| 霍山县| 天津市| 故城县| 达孜县| 莱州市| 兴安盟| 砚山县| 崇义县| 东乡| 奉节县| 东宁县| 马尔康县| 济阳县| 紫阳县| 玉环县| 蒲城县| 顺昌县| 革吉县| 太湖县| 庆阳市| 海淀区| 济宁市| 东兴市| 盐亭县| 大港区| 贡山| 萍乡市| 罗平县| 高阳县| 南靖县| 秭归县| 沾益县| 株洲市| 马龙县| 万州区| 淳化县| 阳春市| 巧家县| 安西县| 琼海市|