前言
這里筑夢師,是一名正在努力學(xué)習(xí)的iOS開發(fā)工程師,目前致力于全棧方向的學(xué)習(xí),希望可以和大家一起交流技術(shù),共同進(jìn)步,用簡書記錄下自己的學(xué)習(xí)歷程.
個(gè)人學(xué)習(xí)方法分享
整體學(xué)習(xí)路線分享
全棧開發(fā)自學(xué)筆記 已開源
本文閱讀建議
1.一定要辯證的看待本文.
2.準(zhǔn)備進(jìn)行系統(tǒng)的前端學(xué)習(xí).
3.本人學(xué)習(xí)前端的路線可能偏向全棧方向(不是純前端)
4.本文只闡述學(xué)習(xí)路線和學(xué)習(xí)當(dāng)中的重點(diǎn)問題.需要讀者自己使用百度進(jìn)行拓展學(xué)習(xí).
5.覺得哪里不妥請(qǐng)?jiān)谠u(píng)論留下建議~
6.覺得還行的話就點(diǎn)個(gè)小心心鼓勵(lì)下我吧~
目錄
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世界 (涉及知識(shí)點(diǎn)較深)網(wǎng)站:張鑫旭個(gè)人博客(CSS世界作者)
網(wǎng)站:在線文檔API查詢
這里只列出本人已經(jīng)讀過的書籍,因?yàn)檫@些書籍我本人有體會(huì),可以和大家交流意見,后期我會(huì)更新新的書籍.
為什么會(huì)推薦HeadFirst系列書籍,這些書真的適合零基礎(chǔ)入門閱讀,講的通俗易懂,面面俱到.如果你真的會(huì)學(xué)習(xí),那么你可以通過這些基礎(chǔ)書籍延伸很多知識(shí)點(diǎn).
如果你有心去查這些書評(píng),會(huì)發(fā)現(xiàn),一些人對(duì)Head First系列書籍褒貶不一,覺得這書很沒有,太基礎(chǔ).沒錯(cuò),恰恰就是因?yàn)榛A(chǔ),過來人才會(huì)覺得這書沒什么用,作為一個(gè)零基礎(chǔ)開始學(xué)習(xí)的我,我可以保證,這是入門前端最好最快的書籍.
而CSS世界這本書是作者經(jīng)過十年使用體會(huì)提煉而成,我經(jīng)驗(yàn)?zāi)壳安⒉怀浞?閱讀至45頁便止步不前,因?yàn)樯婕吧疃戎?不是我目前可以駕馭的.
建議大家在看書時(shí),不要一上來就去搜那些難懂的書籍,這樣會(huì)失去讀書的興趣,從而導(dǎo)致自己看不進(jìn)去書.
HTML & CSS
學(xué)習(xí)前端網(wǎng)頁開發(fā),第一個(gè)重點(diǎn)當(dāng)然是HTML & CSS.
在這里首先說一下,前端涉及面之廣,涉及知識(shí)之多最好先通過學(xué)習(xí)路線大致了解一下,做好準(zhǔn)備.這是需要一定時(shí)間成本學(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)簽在以后會(huì)重點(diǎn)使用.
文字標(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)先性.
屬性
顏色屬性镀岛、文字屬性、盒子屬性友驮、布局屬性
盒子屬性和布局屬性為重點(diǎn)
我個(gè)人單獨(dú)抽出時(shí)間對(duì)display漂羊、position、float卸留、以及flex布局進(jìn)行了嵌套對(duì)比,請(qǐng)自行使用抽樣考察體會(huì)其不同情況下的效果.列表和表格樣式
總結(jié)
在閱讀完第一本Head First HTML&CSS書以后,你會(huì)對(duì)HTML網(wǎng)頁有一個(gè)大致了解,可以通過實(shí)踐實(shí)現(xiàn)一個(gè)簡單的靜態(tài)網(wǎng)頁.
請(qǐng)重點(diǎn)學(xué)習(xí)Div和Span 以及float走越、其display的不同屬性和定位position不同情況下的嵌套,達(dá)到實(shí)現(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)用
盒子新特性
盒子陰影、圓角邊框艾猜、圖像邊框买喧、背景圖高級(jí)特性、漸變背景
多欄布局
彈性布局
2D變換
3D變換
過渡效果
動(dòng)畫效果
光標(biāo)設(shè)置
縮放
文本溢出
CSS初始化
CSS精靈技術(shù)
盒子模型
因?yàn)槟壳罢谶M(jìn)行這方面的學(xué)習(xí),所以在兼容性這方面目前并不會(huì)提及,在日后學(xué)習(xí)中,我會(huì)更新并總結(jié),目前只提及其知識(shí)點(diǎn).
總結(jié)
在進(jìn)行了HTML5以及CSS3的學(xué)習(xí)完以后,你應(yīng)該進(jìn)行階段總結(jié),應(yīng)該可以體會(huì)到,HTML5是用來給網(wǎng)頁定型定框架,CSS3則是美化網(wǎng)頁顯示,但是如果你想實(shí)現(xiàn)絢麗的交互效果,就需要進(jìn)行JavaScript的學(xué)習(xí),在<<HeadFirst HTML5 Programming>>一書的后半部分,已經(jīng)提及基礎(chǔ)的JavaScript.
如果你暫時(shí)不想學(xué)習(xí)JavaScript交互,可以跟我一樣先進(jìn)行PHP和MySQL的學(xué)習(xí).
JavaScript & jQuery
眾所周知,HTML5與CSS3做的都是靜態(tài)網(wǎng)頁,而絢麗豐富交互效果是需要用到JavaScript.
JavaScript
JavaScript一種直譯式腳本語言匆赃，是一種動(dòng)態(tài)類型淤毛、弱類型、基于原型的語言算柳，內(nèi)置支持類型低淡。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分瞬项，廣泛用于客戶端的腳本語言蔗蹋，最早是在HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動(dòng)態(tài)功能囱淋。
目前沒有進(jìn)行系統(tǒng)的學(xué)習(xí),日后更新所屬知識(shí)點(diǎn)
jQuery
jQuery是一個(gè)快速猪杭、簡潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫（或JavaScript框架）妥衣。jQuery設(shè)計(jì)的宗旨是“write Less皂吮，Do More”戒傻，即倡導(dǎo)寫更少的代碼，做更多的事情蜂筹。它封裝JavaScript常用的功能代碼需纳，提供一種簡便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作艺挪、事件處理不翩、動(dòng)畫設(shè)計(jì)和Ajax交互。
目前沒有進(jìn)行系統(tǒng)的學(xué)習(xí),日后更新所屬知識(shí)點(diǎn)
總結(jié)
在學(xué)習(xí)了JavaScript和jQuery以后,你已經(jīng)可以做出擁有豐富的交互效果的網(wǎng)頁了,那么如果想使網(wǎng)站發(fā)布以及數(shù)據(jù)存儲(chǔ)功能還需要學(xué)到下面的知識(shí).
PHP & MySQL & Apache
沒有數(shù)據(jù)庫的網(wǎng)站,就沒有靈魂.又或者還有一句話:一個(gè)應(yīng)用的核心就是后臺(tái).如果想使你的網(wǎng)站擁有靈魂,你就需要進(jìn)行后端知識(shí)的學(xué)習(xí).
準(zhǔn)備一下,開始后端知識(shí)的學(xué)習(xí).
如果你想要快速開發(fā)的話(純前端學(xué)習(xí)),可以直接跳到最后的集成環(huán)境安裝一欄進(jìn)行學(xué)習(xí).
這里只提及知識(shí)點(diǎn),詳細(xì)的環(huán)境搭建文章鏈接在本文最后.
PHP
PHP（外文名:PHP: Hypertext Preprocessor麻裳，中文名：“超文本預(yù)處理器”）是一種通用開源腳本語言口蝠。語法吸收了C語言、Java和Perl的特點(diǎn)津坑，利于學(xué)習(xí)亚皂，使用廣泛，主要適用于Web開發(fā)領(lǐng)域国瓮。PHP 獨(dú)特的語法混合了C、Java狞谱、Perl以及PHP自創(chuàng)的語法乃摹。它可以比CGI或者Perl更快速地執(zhí)行動(dòng)態(tài)網(wǎng)頁。
PHP個(gè)人理解就是用來傳遞數(shù)據(jù),修改數(shù)據(jù)的服務(wù)器腳本語言,我們使用PHP語言就是為了實(shí)現(xiàn),網(wǎng)頁與數(shù)據(jù)庫的交互.
PHP語言是需要Apache驅(qū)動(dòng),才能運(yùn)行.在Apache一欄中會(huì)詳細(xì)解釋他們之間的關(guān)系.
Apache
Apache是世界使用排名第一的Web服務(wù)器軟件跟衅。它可以運(yùn)行在幾乎所有廣泛使用的計(jì)算機(jī)平臺(tái)上孵睬，由于其跨平臺(tái)和安全性被廣泛使用，是最流行的Web服務(wù)器端軟件之一伶跷。
不要上來就覺得Apache這個(gè)名字,就覺得又是一個(gè)知識(shí)點(diǎn),肯定很難的樣子,他其實(shí)就是一個(gè)用來發(fā)布網(wǎng)頁的軟件而已.需要操作的就是配置文件和指令
PHP文件和Apache之間的關(guān)系:
打個(gè)比方,有些軟件可以在windows xp運(yùn)行,但是在win10上面就不支持.
PHP文件可以使用文本編輯器編寫,但是沒有服務(wù)器環(huán)境就無法解析,計(jì)算機(jī)根本不知道PHP文件是什么,這時(shí)Apache就擔(dān)當(dāng)了這個(gè)角色,提供了對(duì)PHP文件的解析支持.
所以這就是對(duì)PHP是一門服務(wù)器腳本語言最好的理解.
只有在服務(wù)器環(huán)境下,才能運(yùn)行PHP文件
MySQL
MySQL是什么,是數(shù)據(jù)庫的一種,數(shù)據(jù)庫有很多種,因?yàn)閯倓偛饺雽W(xué)習(xí),所以暫時(shí)不討論各個(gè)數(shù)據(jù)庫之間的區(qū)別,后續(xù)學(xué)習(xí)到即會(huì)討論.
MySQL和PHP以及Apache可謂是黃金搭檔,因?yàn)锳pache當(dāng)中自帶了PHP模塊,而PHP語言中又有MySQL的預(yù)定義函數(shù),可以直接進(jìn)行MySQL數(shù)據(jù)庫的增刪改查操作.
數(shù)據(jù)庫,很簡單就是用來存儲(chǔ)數(shù)據(jù)的,在此只作為知識(shí)點(diǎn)了解,后面會(huì)詳細(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下一個(gè)集成環(huán)境軟件.
每個(gè)軟件都有安裝教程,在此不贅述.
總結(jié)
windows下大多都有圖形界面,但后端遠(yuǎn)程服務(wù)器,現(xiàn)在多數(shù)為Linux系統(tǒng),因?yàn)橐獮楣緶p少開發(fā)成本,而且Linux系統(tǒng)下,環(huán)境配置與軟件都較為方便,所以希望讀者可以進(jìn)行Linux系統(tǒng)的學(xué)習(xí).
知識(shí)拓展
MySQL數(shù)據(jù)庫操作 以及各種錯(cuò)誤處理.
CMD & Shell 操作指令大全
Git操作指令
Navicat 數(shù)據(jù)庫軟件
Linux系統(tǒng)下的環(huán)境配置
web服務(wù)器軟件:Nginx掰读、IIS.
服務(wù)器腳本語言:Python、Java.
數(shù)據(jù)庫:NoSQL叭莫、Or
這些知識(shí)以后逐一開文章說明,在此僅供各位拓展了解.
詳細(xì)的前端環(huán)境配置請(qǐng)看這篇文章:
深入淺出學(xué)習(xí)前端開發(fā)(環(huán)境搭建篇);
結(jié)束語
如果您對(duì)這篇文章有什么意見或者建議,請(qǐng)?jiān)u論與我討論.
如果您覺得還不錯(cuò)的話~可以點(diǎn)個(gè)喜歡鼓勵(lì)我哦.
如果您想和我一起學(xué)習(xí),請(qǐng)毫不吝嗇的私信我吧~
介個(gè)是我的個(gè)人博客,歡迎參觀哦~
