前言
寫在前面的話
爲什麼寫這篇文章
當然是爲了幫（應）助（付）社團成員們的學習啦。
分類的問題
目前我們常見的開發崗位有前端，後端，全棧，移動端開發。另外還有很多的開發崗位，但是我閱歷不夠，接觸的不是很多。今天我講解的網頁入門，即前端的一個方向。
前端的重要性
無論是我們常用的網頁還是小程序，都屬於我們說的前端。前端的重要性在於除了提供我們日常所需的訪問外，它在替代app中起到了重要的作用。以我們現在天天刷的天貓蓋樓爲例，假設我們要用原生的方式實現功能，我們需要在軟件中加入不少的功能，這不是代碼量的問題，這更加涉及到了軟件的耦合性問題。採用web/小程序配合原生，可以大幅度降低軟件系統的耦合性，既解決了技術上可能發生的問題，也兼顧了用戶的體驗。
講解內容概覽
可能有不少人已經瞭解或者接觸過前端的開發了。但是爲了考慮到一部分同學，這是一個入門講解，文章的主要內容都是基礎，後續少量內容會涉及到進階以及發展的方向。
你需要掌握的基礎
三大基本語言
一、HTML
html全稱爲 HyperText Markup Language ，超文本標記語言。
在html中，我們最常用的東西叫做標籤，先來看一個代碼示範：
<div>
hello html world!
</div>
在這個示範中，我們可以見到<div>和</div>，這兩個就是我們所說的標籤，往往他們是成對出現的，當然也有單獨出現的情況：
<img id="" class="" src="">
在這個示範中，我用了一個叫<img>的標籤，它是用來顯示圖片的一個標籤，src爲圖片的路徑，<img>標籤在使用中便是單獨出現的，它不需要閉合。
二、CSS
css全稱爲 Cascading Style Sheets ，層疊樣式表。
html可以說是網頁的骨架，那麼css就是網頁的血肉，讓網頁不再那麼醜陋。
比如你想實現一個導航欄，即一直在頂部固定的那個欄目，如果你只寫一個<div>，隨着你頁面的滾動，它消失在了屏幕中。此時，你需要將導航欄固定在屏幕上：
<style>
#header {
position: fixed;
top: 0;
heigth: 50px;
width: 100%;
background-color: blue;
}
</style>
<body>
<div id="header">
導航欄
</div>
</body>
css應用在html中有三種方式：id、class、內嵌。這三種方式具體如何實現，希望不瞭解的同學可以自己去查詢一下。
三、JavaScript
JavaScript是一種腳本語言（以下簡稱js），它和Java沒一點關係。
web有了骨肉，配上神經，它就能動了，JavaScript就起到這個作用，它可以負責邏輯的處理，數據的交互等等，缺少js的網頁，就是沒有靈魂的網頁。
比如你有個需求，你要在屏幕第一屏放一個圖片，鋪滿整個瀏覽器的可視區域。不同電腦的分辨率不同，不同瀏覽器的windowsheader不同，不同用戶的放大倍數不同，於是我們要進行相應的處理。最簡單的方法就是獲取屏幕的高度並設置圖片的height：
// 以jQuery爲示範
$(document).ready(function () {
var bodyHeigh = window.innerHeight;
$('#img').css('height', bodyHeigh);
})
爲什麼不用heigth: 100%呢，因爲這樣只能保證圖片的比例不變化，但是不能保證屏幕的覆蓋。在實際的生產環境中，這個需求的解決方案一般是採用微縮加裁剪的方式實現。
js有原生，也有框架，目前企業常用的有React，Vue。不僅用在前端，後端也可以使用js，比如Node.js，特別是React，還有React Native。具體的文檔大家可以看官方文檔或者菜鳥教程，都有詳細的中文文檔。
框架
一、ui框架
如Bootstrap，Weui，還有國人開發的Layui。
二、js框架
如React，用戶構建用戶界面的js庫，Vue，同樣所構造用戶界面的js庫。他們的設計思想和jQuery差距很大，可以更加高效的構建用戶組件，實現網頁的交互功能。
深入學習
推薦方向
一、學習js
推薦大家先從原生入手瞭解js的基礎語法，然後看看jQuery。最後，早React早超生，不過我不走前端，沒系統學過React，這是一個攜程學長跟我說的。爲什麼進階看js？因爲html和css實在是太基礎了（相對而言），當然，寫網頁寫的多的老6往往可以寫出整潔的DOM和風騷的CSSOM。我們來用React在網頁上打出hello world。首先打開網頁CodeSandbox，點擊右上角Create Sandbox，選擇React，然後將以下代碼覆蓋原來的index.js。
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
這樣，在網頁的右邊就會出現一個大大的Hello World！
二、學習小程序
目前小程序也非常火熱，特別是微信和支付寶小程序。但是作爲個人開發者，微信小程序是最適合我們開發的平臺。微信小程序有着一套非常詳細的開發文檔，詳細內容大家可以點擊微信開發文檔進行查看。小程序開發整體上和網頁開發類似，配合完整的文檔，可以快速出貨。更高級的方向就是小程序的性能優化和代碼的健壯性了，這方面還是很困難的。