開發環境設置
安裝vs-code，並安裝前端開發工程師常用的插件。
vscode-icon：文件圖標
Class autocomplete for HTML：自動補全html代碼
beautify：格式化代碼，使javascript、JSON、CSS、Sass、HTML代碼更美觀
HTML Snippets：超級實用且初級的H5代碼片段以及提示
HTML CSS Support：讓html標簽上寫class智能提示當前項目所支持的樣式
debugger for chrome：讓vscode映射chrome的debug功能，靜態頁面都可以使用vscode打斷點調試
Path Intellisense：路徑自動補全
jQuery Code Snippets：jQuery提示插件
ESLint：JavaScript代碼檢測工具
HTMLHint：html代碼檢測
bootstrap 3 sinnpet：bootstrap代碼提示
web前端開發基本介紹
- web前端開發工程師是一個很新的職業，在國內乃至國際上真正開始受到重視的時間不超過10年。
- web前端開發是從網頁制作演變而來的。在互聯網的演化進程中，網頁制作是web1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。
- 2005年以后，互聯網進入web2.0時代，各種類似桌面軟件的web應用大量涌現(網站客戶端)，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種豐富媒體讓網頁的內容更加生動，這些都是基於前端技術實現的。
web前端工作內容
- HTML進行頁面的結構排版
- CSS進行頁面的整體布局與樣式設計
- Javascript實現頁面的交互效果
- Ajax技術進行數據的請求
IT公司網頁開發過程
- 視覺設計photoshop UI/美工
- 切圖美工或者前端
- 頁面布局排版前端(html、css)
- 頁面效果前端(javascript)
- 前后台交互前端(ajax)
- 數據存儲分析、復雜邏輯后台(java、php等)
開發工具
- VS Code
- sublime
- Hbuilder
- webStorm
- Dreamweaver
運行環境/瀏覽器
WEB瀏覽器的作業是讀取HTML文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示HTML標簽，而是使用標簽來解釋頁面的內容。
常見瀏覽器：Chrome、Safari、Firefox、Internet Explorer
WEB的起源與發展
- WEB的起源及發展
- web的起源可以追溯到1980年Tim Berners-Lee構建的ENQUIRE項目
- 1980年Tim Berners-Lee在歐洲核子物理實驗室工作時提議建立一個以超文本系統為基礎的項目，使得科學家之間能夠分享和更新他們的研究成果。他與Robert Cailliau一起建立了一個叫ENQUIRE的原型系統。
- 1984年Tim Berners-Lee蒂姆.伯納斯.李重返歐洲核子物理實驗室創造了萬維網。他寫了世界上第一個網頁瀏覽器(World Wide Web)和第一個網頁服務器(httpd)。
- Tim Berners-Lee建立了第一個網站(也是世界上第一個網站)：http://info.cern.ch/ 。
- 萬維網WWW及W3C
- 英國計算機科學家萬維網的發明者：Tim Berners-Lee
- 1994年10月，非營利性的萬維網聯盟W3C(World Wide Web Consortium)在麻省理工學院計算機科學實驗室成立。
- W3C是什么？
- W3C指萬維網聯盟(World Wide Web Consortium)
- W3C創建於1994年10月
- W3C由Tim Berners-Lee創建
- W3C是一個會員組織
- W3C的工作是對web進行標准化
- W3C創建並維護WWW標准
- W3C標准被稱為W3C推薦(W3C Recommendations)
- 什么是WWW？
- WWW指萬維網(World Wide Web)
- 萬維網也常被稱為Web
- Web是由遍布全球的計算機所組成的網絡
- 所有Web中的計算機都可以彼此通信
- 所有這些計算機都使用名為HTTP的通信標准
- WWW是如何工作的？
- Web信息存儲於被稱為網頁的文檔中
- 網頁存儲於被稱為Web服務器的計算機上
- 讀取網頁的計算機稱為Web客戶端
- Web客戶端通過瀏覽器來查看網頁
- 主要的瀏覽器有
- Internet Explorer (IE內核)
- Mozilla Firefox (Fiefox內核)
- 360 (IE內核+Webkit內核，雙核瀏覽器)
- Google瀏覽器 (webkit內核)
- 什么是瀏覽器(brower)？
- 什么是服務器(server)？
Web工作原理
web工作原理是基於請求和響應的模式，客戶端瀏覽器發送http請求，web服務器響應http。
網頁靜態內容：就是網頁中固定不變的內容。
網頁動態內容：就是從數據庫中讀取的或JavaScript動態生成的。
-
URL網址結構：
http指的是網絡協議
localhost指的是域名
8888指的是端口號
hello指的是路徑
-
HTTP響應(HTTP Response)
http version(http版本號)，如http/1.1
http status code(http狀態碼)：200，ok
http response body(http響應主體)：Hello,world!
web特點
- web是易導航和圖形化
- web是具有平台無關性
- web是支持分支式結構
- web是具有動態性
- web是具有交互性
web標准
- web規則的制訂主題是W3C
- W3C指萬維網聯盟(World Wide Web Consortium)
- web標准即W3C的各種規范
- 最核心的web標准是HTML、CSS、XML
- 最新的HTML標准是XHTML1.1
網站
-
網站(website)是指在因特網上根據一定的規則，使用HTML等工具制作的用於展示特定內容相關網頁的集合。
-
網頁：構成網站的基本元素。
-
首頁：也稱主頁，即一個網站的入口網頁，首頁往往會被編輯得易於了解該網站，並引導互聯網用戶瀏覽網站其他部分的內容。這部分內容一般被認為是一個目錄性質的內容。大多數作為首頁的文件名是index、default、main或portal加上擴展名。
-
靜態網站
- HTML、CSS、Javascript
-
動態網站
- 后台、數據庫、其他
Web服務器
- web服務器：指在Internet上提供Web訪問服務的站點，是由計算機軟件和硬件組成的有機整體。
- 必須為Web服務器配置IP地址和域名，才能對外提供Web服務。
IP地址、端口號
- 在網絡上，計算機通過IP地址或主機名進行標識，這樣使得位於不同地理位置的計算機有可能互相訪問和通信。
- ip是由32位數字表示的，通常被分為四部分。例如：192.168.0.1
- 本地回路的IP地址：127.0.0.1或localhost
- Port(端口號)：邏輯意義上的數據傳輸通道，或者說模擬通道。
- 端口號的范圍是0-65535之間，0-1023之間的端口號已被一些知名的網絡服務和應用占據(我們一般不使用)。
- 例如：web服務使用端口80，ftp服務使用端口21等
- 端口號的范圍是0-65535之間，0-1023之間的端口號已被一些知名的網絡服務和應用占據(我們一般不使用)。
統一資源定位器(URL)
- 統一資源定位器(Uniform Resourse Locator，URL)也被稱為網頁地址，如同在網絡上的門票，是因特網上標准的資源的地址(Address)。
- 格式：協議類型://服務器地址(:端口號)/路徑/文件名
- 默認的端口號可以被省略
- https://www.sina.com.cn
- https://www.baidu.com
- 實例：
- https://zhidao.baidu.com/question/1820387867264893668.html?qbl=relate question 1&word=url
- https是協議
- zhidao.baidu.com是服務器名稱
- /question/1820387867264893668.html是目錄/文件名.文件后綴
- ?qbl=relate question 1&word=url是要傳到后台的參數(鍵值對)
- https://zhidao.baidu.com/question/1820387867264893668.html?qbl=relate question 1&word=url
- 協議類型
- http：超文本傳輸協議
- https：用加密傳送的超文本傳輸協議
- ftp：文件傳輸協議
- mailto：電子郵件地址
- ldap：輕型目錄訪問協議搜索
- news：Usenet新聞組
- file：本地電腦或網上分享的文件
- gopher：gopher協議
- 超鏈接
- 指從一個網頁指向另一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同頁面上的不同位置，還可以是一個圖片、一個電子郵件地址、一個文件、甚至是一個應用程序。
- 超鏈接在本質上屬於一個網頁的一部分，它是一種允許我們同其他網頁或站點之間進行連接的元素。
網站構建技術
- HTML 4.01&HTML5
- CSS的使用(樣式表)
- XHTML
- XML和XSLT
- 客戶端腳本
- 服務器端腳本
- 通過SQL管理數據
網站開發全棧
前端Front End：HTML5、Javascrip、CSS
后端Back End：Java、Python、Node.js、Ruby on Rail
數據庫Data sets：Mysql、MongoDB
架構Infrastructure：Servers(服務器)、Cloud(阿里雲、AWS)(雲)、Container(容器)
BS架構：brower、server，請求與響應
技術棧
客戶端：Javascript、CSS、HTML
服務端：Programming Language(編程語言)、database(數據庫)、web server(服務器)、operating system(操作系統)
Web前端開發的三層結構
- HTML是網頁信息結構基礎；
- CSS是網頁表現技術，對網頁布局、字體、顏色、背景和其它效果實施更加精確的控制：
- Javascript和HTMLDOM是網頁行為，實現網頁的動態、交互功能。
HTML
HTML全稱是Hyper Text Markup Language(超文本標記語言)，用來描述頁面的內容和結構。
HTML是構成Web頁面(Page)的基礎，最新版本是HTML5。
HTML超文本標記語言的發展歷史
從初期的網絡誕生后，已經出現了許多HTML版本：
| 版本 | 發布時間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
一個簡單的HTML頁面
-
my0.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>歡迎大家學習web前端技術</p> <!-- 注解 --> </body> </html>
HTML基本結構
- <!doctype html>：文檔申明，此類型doctype申明HTML5文檔
- <html>：HTML頁面的根元素
- <head>：包含了文檔的元數據
- <meta>：包含了頁面的隱式信息，如charset="utf-8"中文等
- <title>：文檔標題，顯示在頁眉部分
- <body>：包含了頁面的可見內容
以上結構多數是成對出現的。例如：<head>和</head>等。
瀏覽器兼容性
- 不同的瀏覽器對於HTML標准支持程度不同
- 查看瀏覽器支持情況可以訪問如下網址：
如何學習HTML？
- 清楚了解每一個標簽和屬性的語義
- HTML中只描述內容和結構，樣式留給CSS
- 手寫HTML，避免使用生成工具
- HTML學習的參考網址：
CSS
- 層疊樣式表CSS(Cascading Style Sheet) 級聯樣式表。
- CSS作用：可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。
CSS發展歷史
- CSS1：1996年12月17日發布，W3C推薦標准，1999年1月11日重新修訂；
- CSS2：1999年1月11日發布，W3C推薦標准，CSS2添加了對媒介(打印機和聽覺設備)、可下載字體的支持；
- CSS3：將CSS划分為更小的模塊，這些模塊包括：
- 盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。
JavaScript
- JavaScript的出現使得網頁和用戶之間實現了一種實時性的、動態的、交互性的關系，使網頁包含更多活躍元素和更加精彩的內容。
- JavaScript由來：JavaScript最初由網景公司(Netscape)的Brendan Eich設計，是由Netscape的LiveScript發展而來的客戶端腳本語言，主要目的是為了解決為服務器語言提供數據驗證的基本功能。
- JavaScript組成，一個完整的JavaScript實現是由以下3個不同部分組成的。
- 核心(ECMAScript)
- 文檔對象模型(DOM)
- 瀏覽器對象模型(BOM)
JavaScript案例
-
my1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script language="javascript"> alert("第一個JS頁面"); document.write("歡迎大家學習web前端技術") </script> </head> <body> </body> </html>js代碼可以加在head也可以加在body，一般加在head內。
body實現了內容，script實現了交互。
-
my2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>一個測試頁面</title> <script language="javascript"> var now = new Date(); //創建Date對象 var year = now.getFullYear(); //獲取年份 var month = now.getMonth()+1; //獲取月份 var day = now.getDate(); //獲取日期 var hour = now.getHours(); //獲取小時 var minutes = now.getMinutes(); //獲取分鍾 var sec = now.getSeconds(); //獲取秒數 var time = year+"年"+month+"月"+day+"日"+hour+"時"+minutes+"分"+sec+"秒"; alert(time); document.write(time); var arrayWeek = new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期天"); var week = arrayWeek[day]; alert(week); </script> </head> <body> </body> </html>
HTML DOM
-
HTML DOM是Document Object Model文檔對象模型
-
DOM結構：以層次結構組織節點或信息片段
AJAX
- AJAX即“Asynchronous Javascript +XML” (異步JavaScript和XML)，是指一種創建交互式網頁應用的網頁開發技術。
- 傳統的網頁(不使用AJAX)如果需要更新內容，必須重載整個網頁。AJAX是一種用於創建快速動態網頁的技術，通過在后台與服務器進行少量數據交換，AJAX可以使網頁實現異步更新。這意味着可以在不重新加載整個頁面的情況下，對網頁的某部分進行更新。
jQuery
-
jQuery定義：
- jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。
- 由John Resig在2006年1月的BarCamp NYC上發布第一個版本。
- 目前是由Dave Methvin領導的開發團隊進行開發。全球前一萬個訪問最高的網站中，有59%使用了jQuery，它是目前最受歡迎的JavaScript庫。
-
jQery庫的引用：
-
通過script標記的src屬性引入外部jQuery文件庫。
<script type="text/javascript" scr=" jquery-2.1.1.min.js"></script>
-
開發環境/瀏覽器
- Microsoft Internet Explorer (IE)
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
開發與debug建議在谷歌瀏覽器或火狐瀏覽器下進行。
Web前端開發工具及環境配置
- 開發工具
- SublimeText3
- VS Code
- Hbuilder
- webStorm
- Dreamweaver
- 環境配置及實例
綜合案例
-
my3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web前端開發技術初步應用</title> <style type="text/css"> p{ font-size:20px; color: red; text-indent: 2em; } h3{ font-size:24px; font-style: bolder; color: #000099; } </style> </head> <body> <h3>Web前端開發技術</h3> <p>HTML</p> <p>CSS</p> <p>JavaScript</p> <h3>網絡學習資源</h3> <a href="https://w3school.com.cn/html/index.asp">HTML教程</a> <script type="text/JavaScript"> alert("Web前端開發工程師就業前景好、待遇高！"); </script> </body> </html>Web歷史大事記錄
-
Web1.0紀元：1994年-2001年
- 關鍵詞：
- 網頁制作、三劍客、特效300例
- 職業名稱：
- 網頁設計師、頁面仔、搞前台的、網頁編輯
- 主要技術：
- HTML、CSS、Dreamweaver、Fireworks、Flash
- 市場需求：
- 門戶網站、企業網站、個人網站
- 前端與后端比較(2003年)
- 前端與后端配比是1:6，薪水比是1:2
- 工作內容：
- PC瀏覽器：IE6、7，FF，
- 需求，設計，網頁。
- 關鍵詞：
-
Web2.0紀元：2004年-2006年
- 關鍵詞：
- JavaScript、Ajax、Div+CSS、Web標准
- 職業名稱：
- 網頁制作工程師、前端開發工程師
- 主要技術：
- HTML、CSS、JavaScript
- 市場需求：
- 互聯網公司、IT軟件公司等
- 前端與后端比較(2008年)
- 前端與后端配比是1:3，薪水比是3:4
- 工作內容：
- PC瀏覽器：IE6、7、8、Webkit，FF
- 需求、設計、網頁、數據、交互。
- 關鍵詞：
-
HTML5紀元：
- 關鍵詞：
- JavaScript、Ajax、Web標准、HTML5、CSS3、移動Web、多終端適配
- 職業名稱：
- 前端開發工程師、全棧工程師
- 主要技術：
- HTML、CSS、JavaScript、服務端腳本
- 市場需求：
- 互聯網公司、IT軟件公司、電商、金融、智能硬件……
- 前端與后端比較(2008年)
- 前端與后端配比是2:3，薪水比是1:1
- 工作內容：
- PC瀏覽器：IE6、7、8、Webkit，FF
- 移動端：Android、IOS、Webkit、Chrome、Hybrids、微信
- 需求、設計、網頁、數據、交互、服務端、多媒體、游戲。
- 關鍵詞：
-
前端行業未來發展
- 雲服務
- 微信平台
- 智能硬件
- 移動HTML5
- HTML5游戲
-
關於前端技術
- 必修技能：HTML、CSS、JavaScript
- 擴展技能：
- HTTP協議
- 前端性能優化
- 網絡安全與攻擊防范
- 服務端開發(Node.js)
-
前端技術的參考書
- HTML5與CSS3基礎教程
- 深入淺出node.js
- HTML5游戲開發實戰
- Web性能
- JavaScript高級程序設計
- JavaScript性能優化
- 移動網頁設計與開發HTML5+CSS3+JavaScript
- HTTP權威指南
-