Web第五講：Web前端開發技術概述

阿新 • • 發佈：2020-12-02

開發環境設定

安裝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指的是網路協議

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等

統一資源定位器(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是要傳到後臺的引數(鍵值對)
協議型別
- 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標準支援程度不同
檢視瀏覽器支援情況可以訪問如下網址：
- https://caniuse.com

如何學習HTML？

清楚瞭解每一個標籤和屬性的語義
HTML中只描述內容和結構，樣式留給CSS
手寫HTML，避免使用生成工具
HTML學習的參考網址：
- https://www.htmldog.com/guides/html/
- https://www.w3school.com.cn/

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權威指南