<b>前言</b>
從此篇文章開始，我將跳進(jìn)前端的大坑中，以此來作為紀(jì)念。希望各位路過的大神能夠給小弟指點迷津，同時也希望能夠和正在學(xué)習(xí)前端開發(fā)的各位伙伴一起并肩前行。
一、前端認(rèn)知
- 前端是做什么的
說的高大上一點，前端就是做IT系統(tǒng)工程的，主要負(fù)責(zé)信息化系統(tǒng)的設(shè)計、建設(shè)，包括設(shè)備、系統(tǒng)、數(shù)據(jù)庫、應(yīng)用系統(tǒng)的建設(shè)。說簡單一點，其實就是做網(wǎng)頁的。 - 開發(fā)流程
每個公司都有自己的一套開發(fā)流程，但基本上大同小異，主要可以分為下面幾個步驟。- 產(chǎn)品需求
產(chǎn)品需求都是需要經(jīng)過市場調(diào)查的，然后由產(chǎn)品經(jīng)理指定需求文檔。需求文檔制定好了之后就需要開第一次例會，去掉一些不合理的需求。接下來就是開始設(shè)計 UI 了。 - 項目設(shè)計
項目設(shè)計由視覺設(shè)計師設(shè)計項目界面以及交互設(shè)計師設(shè)計交互邏輯。當(dāng)項目設(shè)計完成后，就會有各種PSD文件了。這時候一般就會開第二次例會了。主要是給前后端開發(fā)排工期的。 - 前后端開發(fā)
前端開發(fā)包括：HTML5、iOS、Android、Unity-3D 等。后端開發(fā)主要是給我們前端提供數(shù)據(jù)。 - 測試
通過測試后就可以上線運營了。
- 產(chǎn)品需求
二、前端開發(fā)的核心語言
-
HTML 『結(jié)構(gòu)層』
超文本標(biāo)記語言( hyper text markup language )- 超文本：包括文字、圖片、視頻、音頻等，最重要的一點是可以包含超鏈接，使各個頁面連接起來。
- 標(biāo)記語言：當(dāng)我們把特定的英文單詞放入我們的標(biāo)記當(dāng)中，我們的標(biāo)記具有了新的語義，而由具有特定語義的標(biāo)記的規(guī)范，我們可以稱之為標(biāo)記語言。當(dāng)我們將英語單詞放入標(biāo)記當(dāng)中，這時候我們可以稱之為“標(biāo)簽”。標(biāo)簽又分為 單標(biāo)簽 </> 和 雙標(biāo)簽 <></> 。
- 基本結(jié)構(gòu)
<!-- 文檔頭（類型）聲明，代表的是 HTML 5 的標(biāo)準(zhǔn)，文檔頭聲明 不是標(biāo)簽 --> <!DOCTYPE html> <html> <!-- head --> <!--里面包含絕大部分內(nèi)容都是不可見的，里面的內(nèi)容主要用于輔助頁面的展示--> <head> <!-- title： 雙標(biāo)簽 定義頁面標(biāo)題--> <title>頁面標(biāo)題</title> <!--meta：單標(biāo)簽，定義頁面的元數(shù)據(jù)，屬性：charset，針對搜索引擎和解析格式的屬性--> <meta charset="uft-8" /> </head> <!--body--> <!--里面包含的絕大部分在頁面中都是可見的，主要用于搭建 HTML 結(jié)構(gòu)--> <body></body> </html>-
檢查元素
CSS 『表現(xiàn)層』
層疊樣式表( Cascading Style Sheets )-
CSS 的引入方式
CSS 的引入方式有三種，包括內(nèi)聯(lián)樣式表、內(nèi)部樣式表以及外部樣式表。
* 內(nèi)聯(lián)樣式表
`<div style="width:100px;height:100px;background-color:red;"></div>`
* 內(nèi)部樣式表
```
<haed>
<title></title>
<meta charset="utf-8"/>
<style>
div{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
```
* 外部樣式表
`<link rel="stylesheet" type="text/css" href="css/style.css">`
引入方式的優(yōu)先級
內(nèi)聯(lián) > 內(nèi)部 和 外部，內(nèi)部和外部誰生效。如果選擇器優(yōu)先級相同，誰后引入誰生效；如果選擇器優(yōu)先級不同，選擇器優(yōu)先級高的生效。-
CSS 選擇器
?選擇器用在內(nèi)部樣式表或外部樣式表中。
JavaScript 『行為層』
JavaScript 負(fù)責(zé)頁面的交互，一開始不會用到 JS 編程，所以我們只需要把 HTML 和 CSS 的基礎(chǔ)知識學(xué)習(xí)牢固就可以了！
三、小練習(xí)
這篇文章就到這里，小練習(xí)的代碼已上傳到我的GitHub上。
如果文章對你有所幫助，那么請您點一下?
由于本人水平有限，如有錯誤，歡迎大家指正。如果你在操作過程中發(fā)現(xiàn)一些沒有講到的錯誤或者問題，歡迎在評論留言，一起探討，共同學(xué)習(xí)進(jìn)步！
