前言
這里筑夢師,是一名正在努力學(xué)習(xí)的iOS開發(fā)工程師,目前致力于全棧方向的學(xué)習(xí),希望可以和大家一起交流技術(shù),共同進(jìn)步,用簡書記錄下自己的學(xué)習(xí)歷程.
本文閱讀建議
1.一定要辯證的看待本文.
2.準(zhǔn)備進(jìn)行系統(tǒng)的前端學(xué)習(xí).
3.本人學(xué)習(xí)前端的路線可能偏向全棧方向(不是純前端)
4.本文只闡述學(xué)習(xí)路線和學(xué)習(xí)當(dāng)中的重點問題.需要讀者自己使用百度進(jìn)行拓展學(xué)習(xí).
5.覺得哪里不妥請在評論留下建議~
6.覺得還行的話就點個小心心鼓勵下我吧~
目錄
1.HTML & CSS
2.HTML5 & CSS3
3.JavaScript & jQuery
4.PHP & MySQL & Apache
推薦書籍 & 網(wǎng)站推薦
Head First HTML&CSS
Head First HTML5 Programming
Head First PHP&MySQL
Head First JavaScript
Head First jQuery
圖解HTTP選讀書籍
CSS世界 (涉及知識點較深)
這里只列出本人已經(jīng)讀過的書籍,因為這些書籍我本人有體會,可以和大家交流意見,后期我會更新新的書籍.
為什么會推薦HeadFirst系列書籍,這些書真的適合零基礎(chǔ)入門閱讀,講的通俗易懂,面面俱到.如果你真的會學(xué)習(xí),那么你可以通過這些基礎(chǔ)書籍延伸很多知識點.
如果你有心去查這些書評,會發(fā)現(xiàn),一些人對Head First系列書籍褒貶不一,覺得這書很沒有,太基礎(chǔ).沒錯,恰恰就是因為基礎(chǔ),過來人才會覺得這書沒什么用,作為一個零基礎(chǔ)開始學(xué)習(xí)的我,我可以保證,這是入門前端最好最快的書籍.
而CSS世界這本書是作者經(jīng)過十年使用體會提煉而成,我經(jīng)驗?zāi)壳安⒉怀浞?閱讀至45頁便止步不前,因為涉及深度之深,不是我目前可以駕馭的.
建議大家在看書時,不要一上來就去搜那些難懂的書籍,這樣會失去讀書的興趣,從而導(dǎo)致自己看不進(jìn)去書.
HTML & CSS
學(xué)習(xí)前端網(wǎng)頁開發(fā),第一個重點當(dāng)然是HTML & CSS.
在這里首先說一下,前端涉及面之廣,涉及知識之多最好先通過學(xué)習(xí)路線大致了解一下,做好準(zhǔn)備.這是需要一定時間成本學(xué)習(xí)的.
HTML基礎(chǔ)
HTML簡史
HTML規(guī)范
CSS基礎(chǔ)
什么是CSS?
為什么需要CSS?
CSS基本語法:格式、選擇器、屬性
HTML應(yīng)用
注釋
meta標(biāo)簽
結(jié)構(gòu)/格式
標(biāo)簽結(jié)構(gòu)標(biāo)簽
<html> <head> <body> <title> <h1~h6> <div> <span> <br> <hr> <p> <pre> <blockquote>
其中div、span標(biāo)簽在以后會重點使用.
文字標(biāo)簽
<i> <u> <sub> <sup> <s> <em> <strong> <b> <del> <font>
列表標(biāo)簽
<ul> <li>
<ol> <li>
<dl> <dt> /<dd>
表格標(biāo)簽
<table> <tr> <tr> <th> <caption> <thead> <tbody> <tfoot>
表單標(biāo)簽
<form> <input> <select> <option> <textarea> <button>
鏈接標(biāo)簽
<a> <link>
圖像標(biāo)簽
<img>特殊字符
"空格","<",">","&"," " ","'","?","?"
CSS應(yīng)用
內(nèi)聯(lián)&外聯(lián)
選擇器基礎(chǔ)選擇器
標(biāo)簽選擇器、類選擇器、id選擇器、通配符選擇器.
關(guān)系選擇器
子代選擇器S1>S2、后代選擇器 S1 S2、相鄰選擇器 S1+S2、兄弟選擇器 S1~S2.
屬性選擇器
給定[attr]、給定屬性名&值[attr="val"]、完全包含值[attr~="val"]、部分包含值[attr*="val"]、給定字符開頭[attr^="val"]、給定字符結(jié)尾[attr$="val"]
偽類選擇器
link、visited、hover、active.特定,有很多建議查文檔.
偽元素選擇器
after、before等 建議查文檔.
選擇器組合
行內(nèi)樣式
CSS特性層疊性、繼承性、優(yōu)先性.
屬性
顏色屬性、文字屬性、盒子屬性、布局屬性
盒子屬性和布局屬性為重點
我個人單獨抽出時間對display、position、float、以及flex布局進(jìn)行了嵌套對比,請自行使用抽樣考察體會其不同情況下的效果.列表和表格樣式
總結(jié)
在閱讀完第一本Head First HTML&CSS書以后,你會對HTML網(wǎng)頁有一個大致了解,可以通過實踐實現(xiàn)一個簡單的靜態(tài)網(wǎng)頁.
請重點學(xué)習(xí)Div和Span 以及float、其display的不同屬性和定位position不同情況下的嵌套,達(dá)到實現(xiàn)各種不同的靜態(tài)頁面布局.
HTML5 & CSS3
HTML5應(yīng)用
結(jié)構(gòu)變化
結(jié)構(gòu)化標(biāo)簽(語義標(biāo)簽)
多媒體標(biāo)簽
input新增類型&屬性
CSS3應(yīng)用
盒子新特性
盒子陰影、圓角邊框、圖像邊框、背景圖高級特性、漸變背景
多欄布局
彈性布局
2D變換
3D變換
過渡效果
動畫效果
光標(biāo)設(shè)置
縮放
文本溢出
CSS初始化
CSS精靈技術(shù)
盒子模型
因為目前正在進(jìn)行這方面的學(xué)習(xí),所以在兼容性這方面目前并不會提及,在日后學(xué)習(xí)中,我會更新并總結(jié),目前只提及其知識點.
總結(jié)
在進(jìn)行了HTML5以及CSS3的學(xué)習(xí)完以后,你應(yīng)該進(jìn)行階段總結(jié),應(yīng)該可以體會到,HTML5是用來給網(wǎng)頁定型定框架,CSS3則是美化網(wǎng)頁顯示,但是如果你想實現(xiàn)絢麗的交互效果,就需要進(jìn)行JavaScript的學(xué)習(xí),在<<HeadFirst HTML5 Programming>>一書的后半部分,已經(jīng)提及基礎(chǔ)的JavaScript.
如果你暫時不想學(xué)習(xí)JavaScript交互,可以跟我一樣先進(jìn)行PHP和MySQL的學(xué)習(xí).
JavaScript & jQuery
眾所周知,HTML5與CSS3做的都是靜態(tài)網(wǎng)頁,而絢麗豐富交互效果是需要用到JavaScript.
JavaScript
JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
目前沒有進(jìn)行系統(tǒng)的學(xué)習(xí),日后更新所屬知識點
jQuery
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計模式，優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互。
目前沒有進(jìn)行系統(tǒng)的學(xué)習(xí),日后更新所屬知識點
總結(jié)
在學(xué)習(xí)了JavaScript和jQuery以后,你已經(jīng)可以做出擁有豐富的交互效果的網(wǎng)頁了,那么如果想使網(wǎng)站發(fā)布以及數(shù)據(jù)存儲功能還需要學(xué)到下面的知識.
PHP & MySQL & Apache
沒有數(shù)據(jù)庫的網(wǎng)站,就沒有靈魂.又或者還有一句話:一個應(yīng)用的核心就是后臺.如果想使你的網(wǎng)站擁有靈魂,你就需要進(jìn)行后端知識的學(xué)習(xí).
準(zhǔn)備一下,開始后端知識的學(xué)習(xí).
如果你想要快速開發(fā)的話(純前端學(xué)習(xí)),可以直接跳到最后的集成環(huán)境安裝一欄進(jìn)行學(xué)習(xí).
這里只提及知識點,詳細(xì)的環(huán)境搭建文章鏈接在本文最后.
PHP
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本預(yù)處理器”）是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特點，利于學(xué)習(xí)，使用廣泛，主要適用于Web開發(fā)領(lǐng)域。PHP 獨特的語法混合了C、Java、Perl以及PHP自創(chuàng)的語法。它可以比CGI或者Perl更快速地執(zhí)行動態(tài)網(wǎng)頁。
PHP個人理解就是用來傳遞數(shù)據(jù),修改數(shù)據(jù)的服務(wù)器腳本語言,我們使用PHP語言就是為了實現(xiàn),網(wǎng)頁與數(shù)據(jù)庫的交互.
PHP語言是需要Apache驅(qū)動,才能運行.在Apache一欄中會詳細(xì)解釋他們之間的關(guān)系.
Apache
Apache是世界使用排名第一的Web服務(wù)器軟件。它可以運行在幾乎所有廣泛使用的計算機(jī)平臺上，由于其跨平臺和安全性被廣泛使用，是最流行的Web服務(wù)器端軟件之一。
不要上來就覺得Apache這個名字,就覺得又是一個知識點,肯定很難的樣子,他其實就是一個用來發(fā)布網(wǎng)頁的軟件而已.需要操作的就是配置文件和指令
PHP文件和Apache之間的關(guān)系:
打個比方,有些軟件可以在windows xp運行,但是在win10上面就不支持.
PHP文件可以使用文本編輯器編寫,但是沒有服務(wù)器環(huán)境就無法解析,計算機(jī)根本不知道PHP文件是什么,這時Apache就擔(dān)當(dāng)了這個角色,提供了對PHP文件的解析支持.
所以這就是對PHP是一門服務(wù)器腳本語言最好的理解.
只有在服務(wù)器環(huán)境下,才能運行PHP文件
MySQL
MySQL是什么,是數(shù)據(jù)庫的一種,數(shù)據(jù)庫有很多種,因為剛剛步入學(xué)習(xí),所以暫時不討論各個數(shù)據(jù)庫之間的區(qū)別,后續(xù)學(xué)習(xí)到即會討論.
MySQL和PHP以及Apache可謂是黃金搭檔,因為Apache當(dāng)中自帶了PHP模塊,而PHP語言中又有MySQL的預(yù)定義函數(shù),可以直接進(jìn)行MySQL數(shù)據(jù)庫的增刪改查操作.
數(shù)據(jù)庫,很簡單就是用來存儲數(shù)據(jù)的,在此只作為知識點了解,后面會詳細(xì)講到.
MAMP & LAMP & WAMP & PHPStudy
那么如果你是一名純前端開發(fā)者,或者不想要這些瑣碎的后端環(huán)境配置,你可以百度這些關(guān)鍵詞,下載安裝集成環(huán)境.
其意思分別為
MAMP: Mac +Apache +MySQL +PHP;
LAMP: Linux +Apache +MySQL +PHP;
WAMP: Windows +Apache +MySQL +PHP;
PHPStudy: windows下一個集成環(huán)境軟件.
每個軟件都有安裝教程,在此不贅述.
總結(jié)
windows下大多都有圖形界面,但后端遠(yuǎn)程服務(wù)器,現(xiàn)在多數(shù)為Linux系統(tǒng),因為要為公司減少開發(fā)成本,而且Linux系統(tǒng)下,環(huán)境配置與軟件都較為方便,所以希望讀者可以進(jìn)行Linux系統(tǒng)的學(xué)習(xí).
知識拓展
MySQL數(shù)據(jù)庫操作 以及各種錯誤處理.
CMD & Shell 操作指令大全
Git操作指令
Navicat 數(shù)據(jù)庫軟件
Linux系統(tǒng)下的環(huán)境配置
web服務(wù)器軟件:Nginx、IIS.
服務(wù)器腳本語言:Python、Java.
數(shù)據(jù)庫:NoSQL、Or
這些知識以后逐一開文章說明,在此僅供各位拓展了解.
詳細(xì)的前端環(huán)境配置請看這篇文章:
深入淺出學(xué)習(xí)前端開發(fā)(環(huán)境搭建篇);
結(jié)束語
如果您對這篇文章有什么意見或者建議,請評論與我討論.
如果您覺得還不錯的話~可以點個喜歡鼓勵我哦.
如果您想和我一起學(xué)習(xí),請毫不吝嗇的私信我吧~
介個是我的個人博客,歡迎參觀哦~
