一.邂逅軟件開發(fā)
1.1 對(duì)于軟件的認(rèn)識(shí)
- 軟件是什么?
- 軟件就是application,我們?nèi)粘Ｊ謾C(jī)上安裝的qq,微信都是軟件
- 一個(gè)完整的軟件體系應(yīng)該是什么樣的?
- 服務(wù)器 (用后端語(yǔ)言,諸如java/node/python/php開發(fā)的能為各種客戶端提供服務(wù)的電腦)
- 客戶端:用戶訪問數(shù)據(jù)的各種終端,如,安卓端,iPhone端,ipad端,pc網(wǎng)頁(yè)端,windows,mac上的客戶端等等
- 一個(gè)完整的軟件體系應(yīng)該具備以上所說的所有
1.2 對(duì)于前端開發(fā)的認(rèn)識(shí)
- 處于什么樣的行業(yè)?
- IT互聯(lián)網(wǎng),軟件開發(fā)
- who are you ?
- 前端開發(fā)工程師,軟件 開發(fā)工程師
- 開發(fā)者,程序員,碼農(nóng)等
- developer,coder,programmer
- 前端開發(fā)的主要內(nèi)容是什么?
- 前端開發(fā)
- 也可以做后端開發(fā)(Node.js)
1.3 疑惑解答:是否適合學(xué)習(xí)前端?
- 英文水平的要求?
- 學(xué)習(xí)前期,只要求會(huì)一些基本的詞匯就可以,遇到不會(huì)的單詞多用翻譯軟件翻譯,學(xué)習(xí),平時(shí)沒事時(shí)多背單詞,英語(yǔ)對(duì)于編程還是很重要的
- 是否要求是計(jì)算機(jī)專業(yè)?
- 并不要求,只要是會(huì)使用計(jì)算機(jī)就可以,當(dāng)然是計(jì)算機(jī)專業(yè)就更好了
- 學(xué)習(xí)難度?
- 在軟件開發(fā)的領(lǐng)域中算是簡(jiǎn)單的了,但是東西很多,很雜,技術(shù)更新速度也快,需要不斷地學(xué)習(xí)
- 智商要求?
- 不管學(xué)習(xí)什么,智商都不是決定性因素,認(rèn)真努力才是王道
- 行業(yè)發(fā)展前景?
- 前景非常的好,學(xué)就完了
二.對(duì)網(wǎng)頁(yè)的認(rèn)識(shí)
2.1 網(wǎng)頁(yè)和網(wǎng)站的關(guān)系?
- 一個(gè)網(wǎng)站有N個(gè)網(wǎng)頁(yè)組成(N>=1)
2.2 什么是網(wǎng)頁(yè)?
- 上網(wǎng)瀏覽的頁(yè)面
- 用戶從網(wǎng)頁(yè)上可以獲取信息(類似新聞,報(bào)紙等)
2.3 怎樣瀏覽網(wǎng)頁(yè)?
- 瀏覽器
2.4 前端工程師要做的工作?
- 在自己的電腦上進(jìn)行網(wǎng)站的開發(fā)
- 將開發(fā)的出來的內(nèi)容進(jìn)行打包(webpack/gulp)
- 上傳和部署 -> 服務(wù)器
- 用戶通過瀏覽器 -> URL -> 下載資源 -> 瀏覽器解析
2.5 網(wǎng)頁(yè)的組成?
- HTML:超文本標(biāo)記語(yǔ)言,用來描述網(wǎng)頁(yè)的基本結(jié)構(gòu)和骨架
- CSS:層疊樣式表,用于對(duì)網(wǎng)頁(yè)樣式的美化
- JavaScript:網(wǎng)頁(yè)的交互處理
2.6 瀏覽器的內(nèi)核?
- 瀏覽器最核心的部分就是渲染引擎,也就是瀏覽器的內(nèi)核
- 負(fù)責(zé)解析網(wǎng)頁(yè)語(yǔ)法,渲染顯示網(wǎng)頁(yè)
- 不同瀏覽器渲染規(guī)則不同,所以同一個(gè)網(wǎng)頁(yè)在不同瀏覽器也會(huì)有不同的展現(xiàn)形式
2.7 常見的瀏覽器內(nèi)核?
- trident: IE
- gecko: Firefox
- presto ->blink: Opera
- webkit -> Safari/Android/iOS(webview)
- blink -> Chrome
建議使用chrome瀏覽器
三.開發(fā)第一個(gè)網(wǎng)頁(yè)
3.1 使用記事本開發(fā)第一個(gè)網(wǎng)頁(yè)
- 新建一個(gè)文本文檔
- 編寫文檔結(jié)構(gòu),如下:
<!doctype html>
<head>
<title>使用記事本開發(fā)第一個(gè)網(wǎng)頁(yè)</title>
</head>
<body>
<h1>開始學(xué)習(xí)前端的內(nèi)容</h1>
</body>
</html>
- 保存文件,更改后綴名為.html,在瀏覽器中預(yù)覽效果
3.2 開發(fā)工具的選擇 vscode
- 插件安裝
- Chinese
- open in browser
- atom
- vscode-icons
- 設(shè)置
- 自動(dòng)保存(延遲時(shí)間)
- 字體大小
- wrap 換行
- 空格渲染 -> 點(diǎn)
- tab -> 4/2
3.3 元素的使用
- 對(duì)HTML的理解
- Hyper Text Mark Language ,超文本標(biāo)記語(yǔ)言,頁(yè)面中可以包含普通的文本,圖片,鏈接,甚至可以是媒體元素,如音頻和視頻等,以.htm或者.html結(jié)尾,一般的,html文件也叫網(wǎng)頁(yè)文件
- 元素的基礎(chǔ)
- 雙標(biāo)簽 <開始標(biāo)簽>內(nèi)容</結(jié)束標(biāo)簽>,如<head></head>,<body></body>等
- 單標(biāo)簽 <標(biāo)簽名> 如<img>,<input>等
- 元素是可以相互嵌套的,代碼如下:
<!doctype html> <html> <head> <title>元素的基本使用</title> </head> <body> <div> <h2>標(biāo)題1</h2> <p>哈哈哈哈</p> <ul> <li>面飯</li> <li>面包</li> <li>饅頭</li> <li> <strong>面條</strong> </li> </ul> </div> <div> <h2>標(biāo)題2</h2> <p>呵呵呵呵</p> </div> </body> </html> - 元素的屬性
- <開始標(biāo)簽 屬性1="值1" 屬性2="值2">
- 有些屬性是共有的,如id,class,title
- 有些屬性是特殊元素才具有的,如img的src,alt和input的placeholder等
3.4 注釋的使用
- 注釋的定義
- 簡(jiǎn)單來說,注釋就是一段代碼說明,程序執(zhí)行時(shí)會(huì)跳過,是給開發(fā)者閱讀的
- html中注釋是這樣的:
<!-- 注釋內(nèi)容 --> - 注釋的重要性
- 幫助我們理解代碼的思路,方便以后查閱
- 與他人合作開發(fā)時(shí),添加適當(dāng)?shù)淖⑨尶梢怨?jié)省溝通成本
- 開發(fā)自己的框架時(shí),添加適當(dāng)?shù)淖⑨?有利于別人的使用和學(xué)習(xí)(開源精神)
- 適當(dāng)?shù)淖⑨層欣诖a的調(diào)試
- 注意:
- 注釋不能相互嵌套
