前端連載

[前端連載] 開發環境IDE和初探html

簡介

上三次介紹了網路發展史上留到現在的一些技術,現在終於要進入寫程式的部分了。在寫那些密密麻麻的程式之前,我想要先介紹一下開發環境(IDE,Integrated Development Environment),也就是我們寫程式的環境。

時常有人在說,世界上最好學的語言就是html和css,初學者建議從這個下手,而沒一村我,也是這些「有人」之一,理所當然也是這麼認為。至於為什麼這麼容易上手,接著看下去就知道。

身為一個前端工程師,雖然不必像寶傑一樣上知天文下知地理,但懂的內容也可以算是包山包海。話雖如此,前端工程師的工作內容還是可以歸結到一些最基本的工具。還記得前端最重要的三個技術html、css、javascript三兄弟嗎?我就是在說他們!而今天,我們就要從他們的大哥——html開始介紹起。

開始囉!

打仗要兵器,考試靠運氣

俗話說「打仗要兵器,考試靠運氣」,打仗靠的是什麼?兵器。兵器好的一方,贏的機會就比較大!那考試要靠什麼呢?運氣,運氣好的人,高分的機會就比較大!(等一下,這不太對吧)

巧婦難為無米之炊,所以,在開始寫出好的程式之前,你需要一個適合的開發環境或編輯器來編輯你的程式。

關於編輯器這一點,如果要仔細寫的話,又可以寫一大篇。開放各位碼農和鄉民們來表達意見和看法,我想大概戰個三天三夜也戰不完。使用Vim 和 Emacs的工程師們會先吵一輪,然後兩者的擁護派又都不屑跟別人吵XD。使用Atom的、使用SublimeText的和使用Notepad++的工程師會被Vim和Emacs排除在外,自成一國的吵。最後,使用記事本的,會窩在牆角,自己討論的很開心。

別懷疑,這就是工程師的日常生活,跟別人吵架:)

那我該選擇什麼樣的IDE呢?拜託不要跟我吵架,我是非常和平的。

放心,我最討厭跟別人吵架了(挑眉)。關於IDE的選擇,我倒是可以給你一些建議。

關於編輯器的選擇,就有上述那麼多種。Windows上,你可以選擇最簡單的記事本來撰寫,但我非常不建議你這麼做。為什麼呢?因為記事本上各種除錯功能都沒有,也沒有程式碼不同顏色的標亮,寫起程式來,可以說是非常吃力。我們剛剛說過打仗靠兵器,想像一下,你現在要去打仗,那麼windows記事本就相當於是給你一把漢陽造。可以打嗎?可以打,但是不能連擊,動不動還會給你炸膛。若拿其它的編輯器相比,大概就是AK47、M16這種等級吧XD

再者,如果你的作業系統使用的是Windows,那我建議你可以使用Sublime Text、Atom或者Notepad++。Notepad++是三者之中較早出現的編輯器,而且是由台灣人開發的!由台灣人開發的!由台灣人開發的!這點非常的重要,所以要說三次,因為是很早就開始發展的編輯器,相關的plugin也算蠻足的。而Sublime Text是近幾年來在前端工程師間較為興盛的,同樣plugin很多。至於Atom,又算是更為新潮的編輯器,使用人數不斷地在上升。

如果使用Linux或OS X這兩個作業系統,也可以考慮使用Vim和Emacs。這兩個分別被稱為「編輯器之神」和「神的編輯器」,不過這兩個名稱有什麼差別,這我也無法給出確切原因:)。這兩個編輯器的學習曲線雖然都很高(應該不是很高,是超級高),但是彈性都很大,可以非常客製化。此外,他們和terminal(如果不知道是什麼,他長的就類似Windows的命令提示字元,可以用來下很多指令)的整合十分良好,若使用的習慣的話,開一個terminal可以同時做很多的事。

至於沒一村我,在Ubuntu Linux和Mac OS X上,都是使用Vim。然後,我沒有使用Windows來做開發。

下面附上各編輯器的搜尋趨勢,或許可以看出各編輯器的消長,也可以讓你來做判斷。(圖的部分,感謝網友rplus指正)

idetrend

由圖可以看出Emacs的搜尋人數大降,這主要是因為他學習曲線很高的緣故。至於Atom沒有放上來,是因為沒有辦法準確搜尋到該字詞,所以就不放了。

編輯器的介紹就到這裡,因為沒一村我也沒有使用過所有的編輯器,當然也無法給出所有編輯器的安裝方法。如果想要學習某一個編輯器的使用和設定,可以上網搜尋資料,內容都會很豐富喔:)

大哥是對的!

等等,你為什麼說html是大哥呢?難道他比較早誕生?

沒錯,他的確比較早誕生,這點你可以查一下資料。

就這樣?但我同學也比我大,可我就不會叫他大哥,事實上,我還把他踩在腳底下哈哈。

欸欸欸⋯⋯「友善校園,你我有責」。不過,我會說他是三個之中的大哥,不是沒有原因的,這是因為三者之中他最重要!嘿,可以給我來罐綠茶嗎?

為什麼三者之中,他最為重要呢?這是因為沒有html,就沒有css和javascript。以人體來說,html是骨架,css和javascript則是外層衣服裝飾。

事實上,html也真的如骨架般,是非常有層次和架構的。因此要學習網頁,得要先從最簡單的html開始。照著以下的步驟操作,就可以得到一個最初步的網頁雛形。

  1. 使用編輯器在電腦上新開一個檔案「XXX.html」,XXX可自訂。
  2. 在編輯器中打入下圖的程式碼並儲存。
  3. 點擊該檔案,使用瀏覽器看我們最後的成果。

螢幕快照 2016-05-07 下午7.14.02

螢幕快照 2016-05-07 下午7.06.33

因為是第一次,也為了解釋head tag和一一對應程式碼和網頁的DOM,我沒有選擇使用codepen來進行網頁的demo,不過之後都會盡量使用codepen,也方便馬上實驗進行更改。

讓我們來一一解釋一下,這些程式碼是怎麼一回事。html是以很多很多的tag組成的,我們在程式碼上面打的每一個「<>⋯⋯</>」都是一個tag。關於這個tag的內容,也會被包在這裡面。而這些tag,每一個都代表我們在瀏覽器上看到的一個DOM元素。此外也正因為這些tag有條理的一層層排列,使我們容易閱讀html檔。

耐著性子看喔:

  1. 第一行的<!DOCTYPE html>代表著我們希望瀏覽器以html5的標準來閱讀它。現在的網頁編寫,基本上都會加上這一行,原因無他,因為html5代表的是最新的標準。
  2. 第二行的<html>標記著我們所有的東西都被包在這個裡頭。lang="en"宣告著這份文檔的語言。不過細心的你可能己經發現,即便我們使用en,我們的中文字還是能夠正常顯示。這是因為這個屬性是用來協助browser還有搜尋引擎的,並非絕對。而browser也會根據內容下去自己做判斷。
  3. 第三行的<head> tag 代表著網頁的一些標頭。一些非DOM的tag,我們都會把它們集中在這裡。
  4. 第四行的<meta> tag定義著我們的文件的編碼,這裡我們使用的是UTF-8,因為這個編碼最通用,支援幾乎所有文字。而meta屬性也不只放文件編碼這個資訊,其它例如關鍵字、描述、FB分享的縮圖、分享時的顯示文字,都可以用meta tag來做設定。
  5. 第五行<link> tag引入一個css檔,rel="stylesheet" 明確的定義我們要引入的東西,可以拿來裝飾我們的網站。不過目前這個css檔沒有實作,所以我們的畫面是維持最原始的樣式。
  6. 第六行<script> tag引入一個javascript的檔案。這樣我們就可以使用這個js檔裡面的程式碼了。同css檔,這個js檔也還沒實作。在html5中,script tag 預設都是引入javascript的檔案,所以有個type="text/javascript"的屬性是預設可寫可不寫的。所以如果想要引入其它script的類型,就要定義其它種的type。例如使用reactjs來建構程式碼的話,我們就會需要定義<script type="text/jsx">。script tag除了放在head這邊以外,我們常常會把它移到最下面,也就是在</body>前。這是因為網頁瀏覽器是一行行讀下來的,有時候我們需要等所有的DOM都load完後,才去開啟javascript的功能,這時我們就會把它放在最下面。
  7. title tag宣告著我們的網頁標題。
  8. 接下來是html的重頭戲了,由上而下,我們依序有h1~h6,p、a、img這些tag,分別是各種標題大小、段落、連結和圖片。你可以試著一個一個去對應他在我們網頁上的位置,就會明白他們的用處和差異在哪裡囉!

稍等一下,我有一個問題!

請說。

為什麼tag是一階一階遞進,像樓梯一樣排列的,難道我們不能把它們全部置左,壓到最前面嗎?

當然可以壓,因為瀏覽器只看tag包來包去的相對關係(parent and child node,父元素和子元素)。如果你把它們通通塞到同一行,只要維持一樣結構的父元素和子元素關係,那麼瀏覽器就會顯示給你一模一樣的東西囉!

那我們把它們階梯排這麼做有什麼意義?

其實只是為了方便苦命的前端工程師們去看而已啦XD。你想想,這些苦命的工程師們,每天都要看瑩幕這麼久,你還不讓他們看的舒服一點,好留下體力去應付慣老闆,你這樣⋯⋯

夠了!我不想聽你抱怨。

可以再給我杯綠茶嗎?我喝完了⋯⋯

以上這些程式碼,就是一個網頁該有的基本架構。有時間的話,可以到各網站去開他們的原始碼起來看,大致上都是這個架構喔~~

結語

以上就是今天的內容。在進行程式碼撰寫之前,先選一個適合自己的編輯器是非常重要的。而各編輯器的plugin部分,可以先裝一些例如程式碼標亮、除錯的,而不用全部裝完沒關係,等到需要或覺得麻煩時,自然而然就會找資料,然後裝上去了。

html tag的部分,就簡單介紹這些最基本的形式。因為html tag的變化也大致上就如此,仔細看完這篇連載並操作,對於html的掌握度就會提升不少囉!

嘿等等,你前面關於head的部分,喇哩喇雜講了一大堆,關於內容的部分,以第8條幾行字就忽悠過了,這是什麼意思呢?

別急別急,其實html大體的概念已經都被我帶完了。而html的tag有非常非常的多,這次只是先給你一些概念而已,下次我們就會解釋一些常見的tag囉!

太棒惹,我以為你要落跑了!

>< >< >< ><

奇怪?這又是html裡面的什麼tag?

其實沒有這種tag,只是你願意留下來聽我說,我非常害羞罷了。

⋯⋯⋯

粉絲專頁

https://www.facebook.com/noootownnotes/

 

 

 

2 thoughts on “[前端連載] 開發環境IDE和初探html

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s