前端入門——day1（簡介及推薦書籍和網站）

包子吃多會變蠢發表於2018-10-18
前端網站

html5-css-javascript-logos

寫給誰

這篇文章寫給想要入門前端或者剛入門前端的小白~ 如果是已經工作好幾年的小夥伴們可以直接跳過這一系列文章啦。

為啥寫這篇文章

終於決定給自己挖這個坑了，之前一直沒打算寫這樣的系列文章。回想起自己的前端歷程，走了不少彎路，希望這個系列的文章可以幫小白們少走彎路，快速入門。

不同的地方

  • 不會一天一更，因為白天要上班，晚上回去還要忙著準備一些其他的事情，會盡量做到兩到三天一更，大家見諒啦~
  • 不會有很多很複雜的概念，我會用自己的語言表達出來，儘量精簡，容易理解。
  • 會結合自己實際開發中用到的一切，講自己踩過的坑，要注意的點，儘量做到把我會的都教給大家。
  • 不講太舊的東西，像IE6相容的問題之類的，需求已經很少很少了。
  • 會推薦合適的書，合適的網站給大家學習

開始咯

什麼是前端，前端要做什麼

嘿嘿嘿，簡單來說，你正在瀏覽的這個網頁，上面的按鈕，文字，圖片之類的，都是前端工程師展現給你看的。這樣的頁面又叫H5頁面，通常來說，前端負責頁面的展示和頁面邏輯，後端負責提供資料，比如資料庫的增刪改查等等。

前端要學哪些東西

說實話，很多，目前實際開發中，一個前端要學以下東西（甚至更多）：

  • 基礎： HTML + CSS + Javascript
  • 框架： Vue或者React或者Angular （一般學一個即可，建議可學Vue, 後面的文章也只會講Vue）
  • 打包工具： webpack或者gulp或者grunt （主流是Webpack）
  • npm: 包管理（會用就行，不必深究）
  • git: 版本控制工具（多人協作開發時）

是不是有點慌，哈哈哈不著急，一個一個來。

事實上當你學會了基礎，那麼就可以進行網頁開發了，而且也能在很短的時間內學會框架，而一旦掌握了基礎和框架，那麼正式開發中所需要的技能就基本上都具備了，其他的東西都是一些工具。

所以，基礎最重要。今天就講講基礎，該怎麼學，有哪些好的學習資源以及要看哪些書。

準備工作

下載並安裝Vscode，Vscode是一款超讚的IDE，所謂IDE就是用來寫程式碼的工具，提供程式碼高亮補全之類的功能，反正就是前端開發必備啦！

關於HTML，Javascript，CSS的關係

這三個代表三種不同的語言，也對應著三種不同的檔案，分別以.html, .js, .css結尾。這三種檔案組合起來就形成了我們所看到的網頁。相輔相成，負責不同的功能。 拿蓋房子來類比：

  • HTML就是搭建好的毛坯房，搭好了架子，樣子醜醜的，裡邊也住不了人，因為裡邊啥也沒有，電器啥的都沒有。
  • CSS就是搞裝修，把網頁整的漂漂亮亮的。
  • Javascript就是控制房子裡的邏輯，比如說開啟門，開啟空調，開啟電視機等等等等。

所以:

  • HTML負責網頁的基本架構，你想要在頁面上有個按鈕，就需要在HTML檔案裡寫一個<button>點我</button>標籤
  • css負責網頁的美化，比如設定按鈕的背景色，background-color: red;
  • Javascrip負責控制點選按鈕發生的事情，比如點選時出現一個警告窗。

把三種檔案連線起來

  • 新建一個資料夾，用vscode開啟這個資料夾，然後在該資料夾下分別新建day1.html, day1.css, day1.js三個檔案。
  • 在day1.html裡輸入一個感嘆號!然後按下tab鍵（注意該感嘆號是英文的感嘆號，而不是中文的），會自動生成下面的HTML程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
複製程式碼
  • 然後在<body></body>之間新增一個button標籤<button class="my-button">點我</button>,這樣就可以顯示出一個按鈕。
  • 在title的下面新增<link rel="stylesheet" href="./day1.css">,這樣就引入了CSS檔案。
  • 在</body>的上面一行新增<script src="./day1.js"></script>,這樣就引入了Js檔案。得到的最終程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./day1.css">
</head>
<body>
	<button class="my-button">點我</button>
	<script src="./day1.js"></script>
</body>
</html>
複製程式碼

這樣我們便把這三種不同的檔案連線起來了，雖然目前CSS和JS裡什麼都沒有，後面再具體往裡邊加東西。現在你可以用瀏覽器開啟day1.html看下樣子了

ps: script標籤和link標籤裡的./代表當前目錄下，如果想表示上一層目錄則要用../

HTML

HTML入門真的花不了多少時間，要明白以下幾點就好了。

  • HTML是一門標籤語言，即由一個個標籤組成，通常是一對組成一個元素，比如<button>點我</button>，注意後面的button前有個斜槓，代表是閉合。
  • 也有不需要閉合的標籤，比如<link rel="stylesheet" href="./day1.css">
  • 標籤是可以巢狀的，比如link標籤就是巢狀在head標籤裡的。
  • 你如果想增加頁面的內容，那就在body標籤裡新增標籤，head裡內嵌的標籤是不會顯示在頁面上的，因此我們通常只需要在body標籤裡寫東西。

推薦入門網站:

HTML-如果你英文還可以，能翻牆，點這裡

HTML-如果你喜歡看中文，點這裡

學習方法很簡單，照著教程，一個一個敲，然後看效果,大概一天能看完。

推薦書籍： 不推薦，這麼簡單的東西看看文件就可以搞定了。

CSS

先在day1.css中寫下以下程式碼:

.my-button {
    background-color: #add8e6;
}
複製程式碼

然後在瀏覽器中開啟day1.html，會發現我們按鈕背景色變成了淺藍色。解釋一下：

  • 在HTML的button上新增的class叫類，類的名字叫my-button
  • css中的.my-button中的“.”表示類選擇器，意思是選中類名為my-button的元素。
  • #add8e6是16進製表示顏色的方法，也可以使用rgb的表示法，還可以使用一些內建的顏色，比如red。

推薦入門網站：

CSS-英文教程

CSS-中文教程

一些需要著重注意的點：

  • 要搞懂盒子模型,即下面這張圖：

    default

  • 要搞懂選擇器有很多種，但是最常用的是類選擇器和id選擇器，還有nth-child選擇器很實用，你可以都瞭解一下。

  • 要搞懂display屬性，尤其注意inline, inline-block, block之間的區別

  • 要搞懂定位的影響，即position屬性，搞懂相對於誰定位。

  • 初期少用浮動（float），因為很多人用錯地方，也不懂怎麼清除浮動。

  • 教程裡的的內容，可以先跳過一些，看完CSS Tutorial和CSS Advanced就可以了，節約時間，剩下的有空再看。另外彈性佈局(flex)也可以先跳過，雖然非常非常好用！！！後面單獨拿一章講。

在過教程看到相關內容時，要帶著上面這些問題去看。

Javascript

開啟day1.js,新增以下程式碼:

document.querySelector('.my-button').addEventListener('click', function () {
  alert('Hello, World!!')
})
複製程式碼

解釋一下：

  • document.querySelector('.my-button')表示找到HTML中，類名為my-button的元素
  • addEventListener表示給這個元素新增事件監聽器，事件名為click，即點選事件。當這個元素被點選時，呼叫後面的匿名函式，彈出警示窗。

相對於HTML，CSS來說，Javascript才更像一門真正的語言，就像C語言那樣。 對前端來說，核心中的核心是Javascript，因為它控制整個頁面的邏輯，從而與使用者進行互動。

推薦網站：

Javascript-英文教程

Javascipt-中文教程

推薦書籍：

  1. 《JavaScript DOM程式設計藝術 （第2版）》 這本書很薄，很容易讀完，入門書最佳。
  2. 《JavaScript高階程式設計（第3版）》 傳說中的紅寶書，比較厚，耐心閱讀。

ps: 推薦新人《Javascript權威指南》這本書的人通通亂棍打死，這本書絕對絕對不適合作為入門書籍，以上兩本書就足夠入門到較合格的前端開發了

ps: 請先跳過閉包！！難度較大，而且初級開發中用到的地方很少，需要的時候再去深入。適當的退步是為了更快的前進

最後

安利一個線上程式設計學習網站，也是英文的，很適合入門。Codecademy 總結下學習方法：

  • 對於基礎的東西，去我推薦的網站，一個一個看，一個一個敲，不需要強記，留個印象，後面會越用越熟練。

  • 不同的階段看不同的書，入門前端只需要過完我推薦的網站，同時看推薦的兩本書 ，就夠了，越專注入門越快。

  • 進步最快的方式永遠是跟著敲，不要滿足於看了。

  • 遇到問題先谷歌，實在不懂了可以來提問，有時間會幫大家解答。

相關文章