從零學前端第一講：前端開發是什麼？給初學者有什麼建議？

時間 2019-11-14

標籤前端第一開發什麼初學者建議简体版

原文原文鏈接

初識前端javascript

一、前端開發是什麼？css

二、前端開發有前途嗎？html

三、前端開發哪裏學？前端

四、前端發展html5

五、對初學者的建議java

六、學習html入門node

七、學習css入門jquery

1.前端開發是什麼？
css3

前端開發是從網頁製做演變而來。程序員

早期的網頁製做主要內容都是靜態的，以文字圖片爲主，用戶使用網站也以瀏覽爲主。

隨着互聯網的發展，現代網頁更佳美觀，交互效果顯著，功能更增強大。

所以如今的前端開發的主要技術一般是指html、css、js技術和一些開發框架的使用。

直播錄屏版

傳送門：https://v.qq.com/x/page/i0726y4r0o5.html

2.前端開發有前途嗎？
若是在8年10年之前這麼問，或許不少人會思考一下，說：不知道，應該沒後端編程有前途吧

或者直接說：web前端有啥啊？不就是個美工嗎不就是個頁面仔嗎？不就寫個網頁、js嗎？工資又低。。。。

然而如今？

隨着html5的崛起，css3的風靡，隨着nodejs 的出現，JavaScript這個最容易被人誤解的語言，終於散發了它本該有的光芒。

Javascript這個牛X的歷史產物，如今真的能夠說是萬能的，至少在web層面是這樣，交互、效果、數據操做、娛樂遊戲、操做文件io等等。

並且因爲如今是web應用時代，各類尺寸的電子設備增加式的爆發，只要和屏幕有關的就是顏值，顏值表明了一切，能夠說是前途一片光明；

html五、網頁遊戲風靡全球，須要頁面展示的東西都是前端範疇，前途一片光明；

目前世界上最多的可視化物質是什麼？是網頁，網頁，網頁，據統計如今全世界有億級別的網頁，這是什麼概念，前途一片光明；

最最直觀的：前端的工資從前幾年的平均幾K，到如今的10k、20k ，真的是前途一片光明！

3.前端開發哪裏學？

前端開發應該在哪裏學怎麼學？

一般有3種選擇：

一是報班，效果好但價格貴對時間要求高，不是全部人都能拿得出那麼多時間和金錢去學習的。

二是自學，經濟實惠但缺點是缺乏指導缺乏方向，若是沒有出衆的意志力規劃力是很難學下去的；

三是報名線上課程，優勢是價格相對便宜，一般有一個集體能夠探討問題，有老師指導方向，效果要比自學好不少

但缺點就是可能沒有報班效果顯著，比自學要貴一點。

所以到底該怎麼去選擇仍是要看我的具體的狀況去對症下藥了。

還有許多人老是愛問，我如今多少歲什麼學歷什麼專業什麼性別我適合學XXX嗎？

這種問題其實沒太大意義，最重要的是知道一句話：

種一棵樹最好的時間是在十年前，其次是如今。只要當即去學，比什麼都強。

4.前端發展
前端的發展是經歷了一些階段性的發展的：

在最開始那些年是一個先後端不分的蠻荒時代，那個時候先後端沒有分離，程序員是又當爹又當媽，要作前端又要作後端。

代碼各類耦合在一塊兒，服務器壓力巨大，由於服務器會受到各類http的請求

例如靜態的css，js，圖片等，一旦服務器出現問題，先後臺一塊兒玩兒完，用戶體驗特別差。

並且開發上也是，UI出好設計圖以後，必須先切html頁面，再來套jsp等數據化的內容。開發時間變長，出錯率也很是高

若是html發生變動，就更慘了，能夠說是開發效率奇低。

後來隨着開發和應用的需求變化，逐漸進入到了先後端分離的文明時代。

在文明時代的第一階段，js一般使用原生js，但這樣作的缺點也很明顯：

首先是js語言設計比較草率，一些原生的api並很差用，所以須要更多代碼來解決瀏覽器的兼容問題，須要大量的時間精力，對開發人員要求也比較高。

所以在第二階段，爲了解決原生js晦澀難懂還很差用的問題，出現了jquery等框架解救了萬千開發人員。

和js相比，這些庫的語法更簡單，能夠很容易地瀏覽文檔，選擇元素，處理事件等，也下降了開發人員的門檻。

到了第三階段，由於隨着互聯網的發展，項目愈來愈大，先後端分離後的開發工做量愈來愈多的轉移到前端上來。

一個簡單的jquery庫或者是underscore庫等等已經難以管理控制整個項目了，代碼變得愈來愈複雜難以修改。

這個時候就迫切的須要將代碼更合理的劃分以便於開發和管理，所以誕生了MVC這種取自於後端的概念沿用到前端來。

M是模型model用於數據保存

V是視圖view用於用戶界面繪製

C是控制器controller用於業務邏輯

這就將代碼分層，成爲了咱們基本的MVC框架。

固然還有一些框架提出了MVVM模式，其實就是用View Model代替了Controller，成爲了簡化的Controller

這樣作惟一的做用就是爲view提供處理好的數據，不含其它任何邏輯，實現視圖與數據模型的強耦合，數據的變化會實時反映在view上，再也不須要手動處理。

5.對初學者的建議
第一，梳理信心，堅決目標。只要相信本身能夠就必定能夠。

第二，多練習多寫，好的代碼是寫出來不是看出來的。

第三，不要中止學習，互聯網的發展特別快，可能快過其餘任何領域，所以不要有一次學習就能夠工做終身的想法。

第四，開放的心態，去擁抱變化，不斷嘗新，而且中止爭論語言和工具，把精力投放在更合適的領域。

6.學習html入門
學習html首先認識一下運行於瀏覽器上幾門語言：

html，css和javascript。

html是一門標記性語言，負責描述網頁的骨架，簡單來講就是把網頁分割成一個個的矩形，而後把這些矩形嵌套起來，造成層級關係。

CSS是一門裝飾性的語言，負責描述這裏面矩形的大小位置背景等外觀。

javascript則是一門腳本語言。負責定義網頁的行爲，定義了哪一個矩形在何時作什麼事情。

值得開心的是js是一門很是容易入門的弱類型語言，但值得引發警戒的是，js也屬於一門複雜的語言

它的複雜度即便是放在非腳本語言中來衡量，也是不容小覷的。所以學習它的過程當中千萬不能掉以輕心。

首先來看一下html元素的語法：

<p>this is content</p>

元素一般是由開始標籤加閉合標籤加上內容組成，標籤由英文尖括號<>括起來

好比<html><p>這些就是標籤，結束標籤要比開始標籤多一個斜槓。

另外元素能夠防止於其餘元素之中，無限極的嵌套。接下來看一個最簡單的網頁代碼：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>this is a head title</h1>

<h6>this is a head title too</h6>

<p>this is a param</p>

<ul>

</ul>

</body>

</html>

首先是doctype文檔類型。

在html剛剛出現的時期，文檔類型是用來鏈接一些應該遵照的規則，有點像是自動校訂等。

然而如今你們都不用管文件類型，只是由於歷史緣由還必須包含在代碼中。

html，這個元素包含了整個頁面的內容，有時也被稱爲根元素。

head，這個元素能夠包含想添加的任意內容，可是不會被用戶所看到。

一般包括想讓搜索引擎搜索到的關鍵字、頁面描述、css樣式表和字符編碼聲明等等。

body，這個元素包含了想被用戶看到的內容，無論是文本，圖片仍是多媒體等等。

meta charset=「UTF-8」，這個元素指定了字符編碼，能夠避免出現亂碼等問題。

title，這個元素設置了頁面的標題，顯示在瀏覽器標籤頁上。

h1-h6，標題元素，指定文章的標題和子標題，它包括6個級別從1到6.

p，這個元素用來指定段落內容的。

ul/ol，列表元素

其中ul是無序列表，其中的順序並不重要好比購物清單，這種就放在ul中；

ol是有序列表，每一項li都會默認自帶數字。

元素還分爲塊級元素和內聯元素。

塊級元素在頁面中以塊的形式展示，一個塊級元素會新開始一行而且儘量撐滿容器。

好比div p h1-h6 header footer section等。

一個以block形式展示的塊級元素不會被嵌套進內聯元素中，但能夠嵌套在其它塊級元素中。

內聯元素也叫行內元素，一般出如今塊級元素中幷包裹文檔內容的一小部分，而不是一整個段落或者一組內容。

內聯元素不會致使文本換行：

它一般出如今一堆文字之間例如超連接元素<a>或<span>包裹一些文字，或者強調元素<em>和 <strong>。

7.學習css入門
在css中，選擇器是一種模式，用於選擇須要添加樣式的元素。最多見的選擇有：

選擇器說明例子*選擇全部元素*id選擇id爲intro的元素#introclass選擇class名爲navs的元素.navselement選擇全部p元素p結構選擇全部的div和p元素

選擇div內部的全部p元素

選擇父元素爲div元素的全部p元素

選擇緊鄰在div元素以後的全部p元素div, p

div p

div > p

div + p

學習css首先要學習的概念是盒子模型

盒子模型有5種主要屬性：

寬和高讓盒子有基本的形狀大小；

border是盒子的邊框，能夠設置厚度和基本形態以及顏色；

padding是沿着border在內部產生的一個邊距，讓盒子內部的內容和邊框產生距離；

margin則是沿着border在外部產生的一個邊距，讓盒子之間產生距離。

其次是知道浮動的概念，浮動在文檔佈局中是一個很是重要的概念。

一般塊級元素在頁面中獨佔一行，自上而下成爲流。

元素浮動以後，會被移出正常的文檔裏，根據設置向左或者向右平移，直到碰到了所處容器的邊框，或者是另一個浮動的元素。

當一個元素浮動以後，不會影響到塊級元素的佈局只會影響到內聯元素好比文本的排列。

浮動有3個屬性值，left，right以及none，分別表示向左向右浮動和不浮動。

元素浮動以後一般會產生一個高度塌陷的問題，由於浮動的元素已經脫離文檔流，沒法撐開父級元素的高度，所以出現高度塌陷。

也就是說浮動元素的父級元素不會自動伸縮來閉合浮動元素。

爲了解決這個問題就須要清除浮動：

.container::after {

content: 「";

display: block;

clear: both;

}

這樣來讓元素盒子的邊不能和前面的浮動元素相鄰。

或者是用overflow的方式：

.content {

overflow: hidden;

height: auto;

}

這樣作的原理是觸發BFC。

BFC的意思是block format content，塊級格式化上下文，也就是產生一塊獨立的不受外界影響的盒子區域。

其觸發以下：

該元素爲根元素，即HTML元素

該元素float的值不爲none

該元素overflow的值不爲visible

該元素display的值爲inline-block、table-cell、table-caption

該元素position的值爲absolute或fixed

運用舉例：

職業選擇、求職輔導、學習規劃、困難答疑、技術交流等等，均可以加入IT交流羣828691304

或者加大師姐微信諮詢也能夠喲

微信號：it_xzy

技能樹.IT修真院http://www.jnshu.com

「咱們相信人人均可以成爲一個工程師，如今開始，找個師兄，帶你入門，學習的路上再也不迷茫。這裏是技能樹.IT修真院，初學者轉行到互聯網行業的彙集地。"

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。