前端基礎-什麼是前端

• 1、 web1.0時代的網頁製做
• 2、 web2.0時代的前端開發
• 3、 Web前端能作什麼？
• 4、 爲何要學習前端開發
• 5、 前端開發都有哪些內容
• 6、 開發環境

1、 web1.0時代的網頁製做

網頁製做是web1.0時代的產物，那個時候的網頁主要是靜態網頁，所謂的靜態網頁就是沒有與用戶進行交互而僅僅供讀者瀏覽的網頁，咱們當時稱爲「牛皮癬」網頁。

例如一篇QQ日誌、一篇博文等展現性文章。在web1.0時代，用戶能作的惟一事情就是瀏覽這個網站的文字圖片內容，這時用戶也不能像如今在大多數網站均可以評論交流（缺少交互性）。

相信可能大多數人都聽過「網頁三劍客 Dreamweaver+Fireworks+Flash」吧，這個組合就是web1.0時代額產物

2、 web2.0時代的前端開發

「前端開發」是從「網頁製做」演變而來的。

從2005年開始，互聯網進入web 2.0時代，由單一的文字和圖片組成的靜態網頁已經不能知足用戶的需求，用戶須要更好的體驗。

在web 2.0時代，網頁有靜態網頁和動態網頁。

所謂動態網頁，就是用戶不只僅能夠瀏覽網頁，還能夠與服務器進行交互。舉個例子，你登錄新浪微博，要輸入帳號密碼，這個時候就須要服務器對你的帳號和密碼進行驗證經過才行。

web2.0時代的網頁不只包含炫麗的動畫、音頻和視頻，還可讓用戶在網頁中進行評論交流、上傳和下載文件等（交互性）。這個時代的網頁，若是是用「網頁三劍客Dreamweaver+Fireworks+Flash」製做的，那是遠遠不能知足需求。

如今網站開發不管是開發難度，仍是開發方式上，都更接近傳統的網站後臺開發，因此如今再也不叫「網頁製做」，而是叫「web前端開發」。

因此，處於web2.0時代的你，若是要學習網站開發技術，就不要再相信所謂的「網頁三劍客Dreamweaver+Fireworks+Flash」，由於這個組合已是上個互聯網時代的產物。並且這個組合開發出來的網站問題也很是多，例如代碼冗餘、網站維護困難（學習到後期，你會知道爲何不用這個組合了

3、 Web前端能作什麼？

公司官網（在PC經過瀏覽器來訪問公司網站）移動端網頁（在手機上來瀏覽公司信息、小遊戲等）移動端APP（例如：淘寶、去哪兒旅遊、攜程等）微信小程序（微信最新推出的功能，隨用隨裝，不佔用手機空間）。前端開發所學技術由簡單到難，因此在不少網站上你會看到「七天入門前端」的視頻博客等等，也就是說一星期就學會了HTML+CSS。最基本的頁面你就能夠書寫了。

4、 爲何要學習前端開發

咱們爲何要學習前端開發，由於咱們的課程定位是Python全棧開發，也就是說咱們不只要掌握後端開發的技術還要掌握必定程度的前端開發技術。 經過前面課程的學習，相信你們都已經掌握了Python基礎語法、函數、面向對象、網絡編程及數據庫相關的內容。上面說的那些內容都是屬於後端開發範疇的，在接下來的這個章節咱們將一塊兒來學習一下前端部分的內容，

5、 前端開發都有哪些內容

咱們知道，用所謂的網頁三劍客已經不能知足需求了，那前端開發究竟要學習什麼技術呢？網頁最主要由3部分組成：結構、表現和行爲。網頁如今新的標準是W3C，目前模式是HTML、CSS和JavaScript。

（1）HTML是什麼？

HTML，全稱「Hyper Text Markup Language（超文本標記語言）」，簡單來講，網頁就是用HTML語言製做的。HTML是一門描述性語言，是一門很是容易入門的語言。

（2）CSS

CSS，全稱「（層疊樣式表）」。之後咱們在別的地方看到「層疊樣式表」、「CSS樣式」，指的就是CSS。

（3）JavaScript

JavaScript是一門腳本語言。

HTML、CSS和JavaScript的區別 咱們都知道前端技術最核心的是HTML、CSS和JavaScript這三種。可是這三者到底是幹嗎的呢？

「HTML是網頁的結構，CSS是網頁的外觀，而JavaScript是頁面的行爲

若是咱們把前端開發的過程比喻成「建房子」，作一個網頁就像蓋一棟房子

一、先把房子結構建好（HTML）

二、建好房子以後給房子裝修（CSS），例如往窗戶安上窗簾、往地板鋪上漂亮的瓷磚

三、最後呢，裝修完了以後，當夜幕降臨的時候，咱們要開燈（JavaScript），這樣才能看得見裏面。

 

咱們先用HTML搭建網頁結構，這時候默認狀況下，字體、字體顏色、字體大小和背景顏色以下圖，僅僅使用HTML的文字

而後咱們經過CSS修飾一下，改變其字體、字體大小、字體顏色和背景顏色，獲得以下的效果圖

最後，咱們經過JavaScript定義鼠標一個行爲，就是鼠標移動到上面的時候，背景顏色會變爲深綠色，效果以下：

6、 開發環境

市面上有不少的HTML編輯器能夠選擇，常見的Hbuild、Sublime Text、Dreamweare均可以用來開發HTML。 固然PyCharm也支持HTML開發。

一、瀏覽器

瀏覽器在本地也能打開html文件，瀏覽器就跟解釋器同樣，從上倒下，從左到右

全球共有五大瀏覽器廠商，咱們主要以chrome爲主

ie
chrome
firfox
safri
presto
瀏覽器內核不一樣，瀏覽器渲染引擎不一樣（後期考慮兼容性問題），其餘瀏覽器都是使用這5款瀏覽器內核 

二、瀏覽器歷史：

世界最先瀏覽器，網景瀏覽器（Netscape ）
後來它想作操做系統，動了微軟的奶酪，微軟就想弄死他，
微軟作的也特別的絕情，微軟利用windows操做系統的市場佔有率，提供了免費瀏覽器ie,並且windows
操做系統裏還必須有

中國最先瀏覽器ie6，國企內就用ie6，

瀏覽器不一樣，解析的標籤標準不一樣，微軟太霸道，就不改標準，堅持不更新，後來谷歌和火狐搶佔了市場，IE就傻逼了，目前也只有傻逼才用IE。。。

市場愈加地混亂，因而w3c（萬維網聯盟（World Wide Web Consortium，W3C））成立，用來制定你們的統一標準

須知：學前端一半工做在考慮兼容性，目前html5在兼容性方面解決的比較好

三、文件後綴名規範

.htm和.html擴展名的區別

#一、DOS系統（win95或win98）下只能支持長度爲3的後綴名，因此老版本的系統一直在用.htm後綴

#二、但在windows後綴長度能夠大於3位，因此windows下無所謂htm與html，html是爲長文件的格式命名的

#三、若是文件後綴是.htm，毫無疑問，瀏覽器也能夠兼容，但推薦使用.html