WEB前端學(xué)習(xí)筆記 三

接上一篇，web學(xué)習(xí)筆記 三，web學(xué)習(xí)筆記剛剛發(fā)出，就發(fā)現(xiàn)被其他網(wǎng)站采集了，在此感謝您的采集和轉(zhuǎn)發(fā)，但請(qǐng)注明文章出自網(wǎng)知博學(xué)。

1.7  開發(fā)工具的選擇

增強(qiáng)文本編輯器：EditPlus、Notepad++

特點(diǎn)：比較小、占用系統(tǒng)資源比較少、代碼顏色高亮顯示、但沒有代碼自動(dòng)補(bǔ)功能

IDE：(Integrated Development Environment,集成開發(fā)環(huán)境)。IDE集成開發(fā)環(huán)境（簡(jiǎn)稱IDE）開發(fā)環(huán)境就是指在開發(fā)軟件的時(shí)候需要用到的軟件。這些軟件包括代碼編輯器、編譯器、調(diào)試工具和圖形用戶界面工具等。而一套擁有代碼編輯器、編譯器、調(diào)試工具和圖形用戶界面工具等軟件的套裝就是集成開發(fā)環(huán)境，又叫IDE

可選擇使用的IDE：Dreamweaver、WebStorm、PHPStorm、Zend Studio Visual Studio系列、有很多WEB前端開發(fā)IDE，這里提到的只是我曾使用過(guò)的。各有優(yōu)缺點(diǎn)，沒有什么好與不好，就看個(gè)人的使用習(xí)慣了！本來(lái)筆記中的IDE想用webstrom或是phpstrom，但是考慮到筆記是從最基礎(chǔ)的開始，還是選擇比較簡(jiǎn)單的Dreamweaver吧，畢竟是中文，看著會(huì)容易一些。

說(shuō)到開發(fā)工具，不得不多說(shuō)幾句，有些人，不贊同初學(xué)者使用具有代碼補(bǔ)全功能的IDE，理由有很多，比如，IDE自動(dòng)做了很多事情，讓初學(xué)者不知道編譯原理，讓初學(xué)者變懶，有代碼提示，離開了IDE，就不會(huì)寫代碼了。等等等等。乍一看，似乎很有道理，對(duì)于這樣的理論，在這里不做過(guò)多的評(píng)論，只想說(shuō)， 你在學(xué)習(xí)一門語(yǔ)言，學(xué)習(xí)的是語(yǔ)言和程序的設(shè)計(jì)，而不是寫了段代碼，還要知道這段代碼是如何編譯成匯編語(yǔ)言，然后再編譯成機(jī)器語(yǔ)言，然后再呈現(xiàn)出結(jié)果給你！

善于運(yùn)用工具，IDE的代碼智能提示，我認(rèn)為是很好的背單詞的工具，一個(gè)單詞你照著提示寫幾次，幾乎就可以背下來(lái)了，如果沒有提示呢？你打開一個(gè)記事本，寫什么？如果英文是你的第二母語(yǔ)，那么你可以嘗試下不使用IDE。所以初學(xué)者不要再就糾結(jié)這個(gè)問(wèn)題！！

1.8  自學(xué)了HTML、CSS、JavaScript和Jquery,為什么寫不出一個(gè)完整的網(wǎng)站。甚至是連一個(gè)頁(yè)面都完成不了

這個(gè)問(wèn)題，暫時(shí)想到以下2種情況

教程問(wèn)題：也就是說(shuō)你所學(xué)的教程（視頻，書），既然已經(jīng)自學(xué)過(guò)了，那么w3school的網(wǎng)站大家應(yīng)該都知道了，網(wǎng)站上的例子，即使全都能做出同樣效果了，那么也不一定寫出自己的作品！個(gè)人覺得w3c更像是手冊(cè)，當(dāng)你忘記了某個(gè)標(biāo)簽，某個(gè)樣式，可以去查詢，但并不適合做教材，有些視頻也是這個(gè)樣子，把例子都講了一遍，然后結(jié)束，你也感覺確實(shí)都會(huì)了，但其實(shí)并不是這樣，當(dāng)你照著這樣的教程學(xué)習(xí)的時(shí)候，你只是知道了這個(gè)例子，寫完后會(huì)有什么樣的效果呈現(xiàn)，其實(shí)并沒有學(xué)會(huì)！如果是這種情況，那么就要做些實(shí)際的項(xiàng)目案例。把所學(xué)的知識(shí)靈活的運(yùn)用結(jié)合到一起，就會(huì)有自己的作品了。

學(xué)習(xí)方法問(wèn)題：其實(shí)這里面還是有教程的問(wèn)題，在學(xué)習(xí)html的時(shí)候根據(jù)視頻教程學(xué)習(xí)了標(biāo)簽，并把所有標(biāo)簽的屬性也都學(xué)了一遍，結(jié)果在學(xué)Css的時(shí)候，你發(fā)現(xiàn)，你所學(xué)的那些標(biāo)簽屬性，再也用不到了，因?yàn)槿慷加肅SS實(shí)現(xiàn)了。在講Css的時(shí)候只用div和span標(biāo)簽來(lái)講CSS的樣式。結(jié)果就是當(dāng)你把CSS的例子都做完后，忽然發(fā)現(xiàn)HTML的其他標(biāo)簽?zāi)阋呀?jīng)有些生疏了。同樣在學(xué)JavaScript的時(shí)候，用了很長(zhǎng)時(shí)間，好不容易也按照例子做完了，忽然又發(fā)現(xiàn)你對(duì)CSS也生疏了，到了jquery，你發(fā)現(xiàn)用JavaScript寫了10幾行代碼才能實(shí)現(xiàn)的功能，在Jquery中只需要幾行代碼，甚至一行代碼就能實(shí)現(xiàn)。你可能會(huì)有些迷茫，但一咬牙你堅(jiān)持下去了，等你按照視頻教程做完了Jquery的例子，不再迷茫了，而是蒙圈了，因?yàn)槟愫鋈话l(fā)現(xiàn)雖然你都學(xué)了，卻好像是沒有記住什么，當(dāng)然寫不出完整頁(yè)面！！

所以說(shuō)自學(xué)在教程的選擇上是很重要的，同時(shí)學(xué)習(xí)的方法也很重要，在學(xué)習(xí)HTML的時(shí)候，標(biāo)簽樣式屬性只作為了解，因?yàn)橛辛薈SS，HTML的標(biāo)簽樣式屬性幾乎都被棄用了，你還在浪費(fèi)時(shí)間跟著視頻學(xué)個(gè)啥！！在JavaScript和Jquery的學(xué)習(xí)上，可以這樣選擇，JavaScrip基礎(chǔ)語(yǔ)法、變量、函數(shù)，匿名函數(shù)，常用的內(nèi)置對(duì)象，簡(jiǎn)單的數(shù)組能明白即可，其他知識(shí)點(diǎn)，如通過(guò)JavaScript選取并讀取節(jié)點(diǎn)、文檔遍歷以及增加節(jié)點(diǎn)、刪除節(jié)點(diǎn)、正則表達(dá)式、JSON、等等，這些在jquery中也都能實(shí)現(xiàn)，所以在JavaScript學(xué)完基礎(chǔ)，就直接學(xué)習(xí)Jquery，如果你精力旺盛，不計(jì)較學(xué)習(xí)的時(shí)間成本，那么再回過(guò)頭來(lái)去根據(jù)Jquery中的例子，用javaScript來(lái)實(shí)現(xiàn)。那么你在JavaScript方面就應(yīng)該成為高高手了。

為了避免學(xué)完后，還寫不出代碼，HTML、CSS、JavaScript、Jquery這幾個(gè)知識(shí)點(diǎn)，必須合理有效的結(jié)合學(xué)習(xí)，而不是單獨(dú)的學(xué)習(xí)。   

好了，寫完了，如果有什么問(wèn)題以后再慢慢補(bǔ)充，感謝您關(guān)注網(wǎng)知博學(xué)技術(shù)博客

1.9 正式學(xué)習(xí)之前的準(zhǔn)備

1. html的語(yǔ)法格式

2. html標(biāo)簽的屬性格式

3. 構(gòu)成HTML文檔（網(wǎng)頁(yè)）最基本的必須的標(biāo)簽

4. Dreamweaver的安裝與激活

現(xiàn)在正式開始學(xué)習(xí)，今天我們將學(xué)習(xí)html的語(yǔ)法格式，也就是這個(gè)Html的標(biāo)簽應(yīng)該用什么格式寫以及html標(biāo)簽的屬性格式（html標(biāo)簽的屬性不作為重點(diǎn)，只需了解即可）。

還有網(wǎng)頁(yè)的基本結(jié)構(gòu)，你發(fā)個(gè)郵件（大家都會(huì)發(fā)郵件吧~嗯，應(yīng)該會(huì)）不得有郵件的結(jié)構(gòu)嗎，什么發(fā)件人了，主題了，正文了，等等，好像應(yīng)該叫做格式，反正就是這個(gè)意思吧，那么網(wǎng)頁(yè)呢，一個(gè)完整的網(wǎng)頁(yè)也有它的結(jié)構(gòu)。

在學(xué)習(xí)html語(yǔ)法格式、網(wǎng)頁(yè)基本結(jié)構(gòu)和標(biāo)簽屬性我們先用記事本或是增強(qiáng)文本編輯器：EditPlus，讓大家快速的了解html的基礎(chǔ)知識(shí)。

還有一點(diǎn)，同學(xué)們要知道一下，HTML和XHTML，其實(shí)我們現(xiàn)在所學(xué)習(xí)的標(biāo)簽書寫規(guī)范都是XHTML的， XHTML又是什么呢，不要暈，其實(shí)就是重新定義的 HTML，是更嚴(yán)格更純凈的 HTML 版本，

我們只需知道，現(xiàn)在我們寫網(wǎng)頁(yè)的規(guī)范標(biāo)準(zhǔn)就兩個(gè)，XHTML和HTML5，不要問(wèn)可以不可以直接學(xué)HTML5，既然說(shuō)到了HTML5就簡(jiǎn)單說(shuō)一下,HTM5是用于取代html與xhtml 的新一代標(biāo)準(zhǔn)版本,。HTML5新增了新的標(biāo)簽和屬性，加強(qiáng)了網(wǎng)頁(yè)的標(biāo)準(zhǔn)、語(yǔ)義化與web表現(xiàn)性能，同時(shí)還增加了本地?cái)?shù)據(jù)庫(kù)等 Web 應(yīng)用的功能。），只是在html和xhtml的基礎(chǔ)上，所以還是要先把基礎(chǔ)學(xué)好，再去學(xué)HTML5就很簡(jiǎn)單了。了解這些就行了。

Dreamweaver下載地址：在此篇文章最下方，壓縮包中包含了注冊(cè)機(jī)和注冊(cè)方法。也可以參考：Adobe Dreamweaver CC 2015安裝及注冊(cè)方法

此篇學(xué)習(xí)筆記為網(wǎng)知博學(xué)原創(chuàng)，轉(zhuǎn)載請(qǐng)附上文章鏈接并注明： 網(wǎng)知博學(xué)-技術(shù)博客