最近有同學私信我，表示要學習網頁開發了，但是老師不好好講...正好我一琢磨，不如把我實習前，自學H5時候寫的那些小玩意兒放上來算了，萬一以後再有朋友問我呢，直接甩個鏈接多帥哈哈哈哈！雖然沒有什麼厲害的地方，不過也算是一個開頭吧。之後的話，各位還要加油哈！我準備按照我學習的路子來寫了，所以會有很多不嚴謹但是便於理解的情況，主要看氣質～

針對沒接觸過網頁開發的同學們，我首先建議各位理解一下概念。大家可能聽過HTML+CSS+JS的組合（如果沒聽過，現在就聽過啦），但是具體每部分都是什麼不是特別清楚。這一篇文章就是希望各位能夠大致理解這三個部分都是什麼，以及三個部分大概長什麼樣子。我之前在一個問題里回答過，現在把這三個部分節選出來：

Web建站就像是過年去買賀卡。

  1. HTML寫的是這張賀卡裡面都有什麼文字，有什麼圖畫，有什麼音樂。可以是幾乎所有種類的賀卡。HTML5是第5代HTML，就是什麼二維碼音樂跑馬燈什麼都有的目前最新版賀卡，花樣特別多。其實都是在說明賀卡的內容有哪些，有什麼東西。
  2. CSS是說，賀卡里的所有東西，都是怎麼排版的。圖畫放在左上角轉45度，文字放在下面要小四宋體，送給誰的名字是大紅色，等等。也稱為"樣式"。
  3. Javascript是賀卡裡面的小機關。一打開賀卡，就放音樂啦，一按下按鈕就爆炸啦（誤），隔三秒鐘開始跑馬燈啦，類似的邏輯問題。

之前還給我的朋友比喻成做剪貼報（就是小時候把報紙雜誌剪了，粘成一份新的，不知道現在還有沒有。。。）。HTML就是剪子，想要什麼內容就剪什麼內容。剪個圖片剪個笑話，啥好看剪啥；CSS就是膠水。拿起剛剛剪下來的東西，想一想粘哪好看，順手再描個邊，哎這個大姑娘照片得放中間；JS就是個高級貨了，那就是我！我一看老師皺眉頭了，趕緊給老師解釋這個大姑娘是我妹，我得把我妹放在最好的位置！還得跟老師說，老師老師，這笑話特好玩你多看看。JS是個聰明傢伙，有邏輯，可以根據不同的輸入（老師的表情）作出反應。

舉個例子。下面我將用代碼進行演示，看不懂的地方可以直接忽略，現在講那些太沒意思了，一點都不好玩，後面再說吧～

我首先新建了三個文件：一個HTML、一個CSS、一個JS，還準備了一張圖片。接下來我分別演示他們的作用。

一、HTML

我用的工具在新建HTML的時候會自動寫一些東西，然後我又把HTML、CSS、JS關聯起來了。如下：

這些我們都不用管。這裡我們只需要暫時知道一點就行了：HTML是個大肚子的傢伙，如果想在它上面寫點什麼，就要寫在body上～可以看到第9行和第13行之間有很多空行，我們就在這個上面搞一搞～

這個HTML現在是沒有內容的，打開網頁的話就是完完全全的空白頁。節省流量不放圖啦～那麼接下來我就給他的肚子上放點東西，先來幾個文字吧。注意第10行：

第10行我寫了一句話。至於左右的<p>和</p>是幹啥的，暫時可以不用管～不過看起來好像在這兩個東東裡面可以寫文字。這個時候如果打開網頁是什麼效果？當然就是多了一句話。

如果我再放個圖片呢？

第11行，我添加了一張圖片。這行寫的是什麼，好像直接看大概能看出來，img大概是圖片的意思，後面好像跟的是圖片的路徑。優秀～這個時候是什麼效果？

當然是多了張圖片（圖片網上隨便下的，不是我妹妹。。。侵刪）。

看到這其實對HTML文件就有大概的認識了。HTML是一個非常實在的小夥子，往他肚子上放啥，頁面上就會多出個什麼東西。

二、CSS

CSS文件現在是空白的，什麼都沒有。剛才我們說到，CSS可以決定頁面上的東西都是怎麼排列的，也稱為樣式。那我們接下來就整點樣式出來。

看我幹了什麼事？第2行寫的看起來是字體大小，第三行貌似是顏色。一個大括弧，頭上跟個p，好像和前面HTML里的<p>有關係...看看實際效果：

對比一下以前的，好像確實是<p></p>之間的那句話變了！還能不能變呢？當然！

一下子寫了三行，對它的位置也規划了一下，效果如下：

對吧！位置變了！那我們對圖片也做點什麼吧？

看看效果？

一個旋轉，一個邊框。為啥把文字蓋住了？啊哈哈哈以後再說吧，這都不重要～重要的是，CSS像一個指揮的，讓網頁中的內容咋搞就能咋搞。所以為啥CSS叫樣式？因為他就管這些內容的樣子～

三、JS

看起來HTML和CSS兩個人就能把網頁畫的挺好看的了，那JS是幹啥的。。。JS就比較高級了。比如說我這麼寫：

啥意思呢，大概解釋一下：網頁載入完之後，檢查那段文字。如果說我妹不好看，就提示NO，並且強行改成最好看！看看效果？如果誇我妹了，風平浪靜（我把文字遮擋問題搞了下）：

如果我把HTML里的那句話改成不好看：

那就會。。

先來一波抗議！然後強行修正錯誤：

看見沒！JS就像一個正直的青年。它可以有自己的邏輯，自己的思考，並且可以操縱網頁。

好了，HTML、CSS、JS的作用應該有點清楚了吧～那就先到這吧～下一期（如果有）我們試著做一些簡單又炫酷的小東西，開始學習具體怎麼寫，省的像現在一樣，只知道有變化，但壓根不懂是啥情況。。。

再見～


推薦閱讀：
相关文章