Web前端開(kāi)發(fā)技術(shù)怎么使用

本篇內(nèi)容介紹了“Web前端開(kāi)發(fā)技術(shù)怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

開(kāi)發(fā)環(huán)境設(shè)置

安裝vs-code，并安裝前端開(kāi)發(fā)工程師常用的插件。

vscode-icon：文件圖標(biāo)
Class autocomplete for HTML：自動(dòng)補(bǔ)全html代碼
beautify：格式化代碼，使javascript、JSON、CSS、Sass、HTML代碼更美觀
HTML Snippets：超級(jí)實(shí)用且初級(jí)的H5代碼片段以及提示
HTML CSS Support：讓html標(biāo)簽上寫(xiě)class智能提示當(dāng)前項(xiàng)目所支持的樣式
debugger for chrome：讓vscode映射chrome的debug功能，靜態(tài)頁(yè)面都可以使用vscode打斷點(diǎn)調(diào)試
Path Intellisense：路徑自動(dòng)補(bǔ)全
jQuery Code Snippets：jQuery提示插件
ESLint：JavaScript代碼檢測(cè)工具
HTMLHint：html代碼檢測(cè)
bootstrap 3 sinnpet：bootstrap代碼提示

web前端開(kāi)發(fā)基本介紹

• web前端開(kāi)發(fā)工程師是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開(kāi)始受到重視的時(shí)間不超過(guò)10年。

• web前端開(kāi)發(fā)是從網(wǎng)頁(yè)制作演變而來(lái)的。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁(yè)制作是web1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。

• 2005年以后，互聯(lián)網(wǎng)進(jìn)入web2.0時(shí)代，各種類似桌面軟件的web應(yīng)用大量涌現(xiàn)(網(wǎng)站客戶端)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁(yè)不再只是承載單一的文字和圖片，各種豐富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。

web前端工作內(nèi)容

• HTML進(jìn)行頁(yè)面的結(jié)構(gòu)排版

• CSS進(jìn)行頁(yè)面的整體布局與樣式設(shè)計(jì)

• Javascript實(shí)現(xiàn)頁(yè)面的交互效果

• Ajax技術(shù)進(jìn)行數(shù)據(jù)的請(qǐng)求

IT公司網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程

• 視覺(jué)設(shè)計(jì)photoshop UI/美工

• 切圖美工或者前端

• 頁(yè)面布局排版前端(html、css)

• 頁(yè)面效果前端(javascript)

• 前后臺(tái)交互前端(ajax)

• 數(shù)據(jù)存儲(chǔ)分析、復(fù)雜邏輯后臺(tái)(java、php等)

開(kāi)發(fā)工具

• VS Code

• sublime

• Hbuilder

• webStorm

• Dreamweaver

運(yùn)行環(huán)境/瀏覽器

WEB瀏覽器的作業(yè)是讀取HTML文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示HTML標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容。

常見(jiàn)瀏覽器：Chrome、Safari、Firefox、Internet Explorer

WEB的起源與發(fā)展

• WEB的起源及發(fā)展

• web的起源可以追溯到1980年Tim Berners-Lee構(gòu)建的ENQUIRE項(xiàng)目

• 1980年Tim Berners-Lee在歐洲核子物理實(shí)驗(yàn)室工作時(shí)提議建立一個(gè)以超文本系統(tǒng)為基礎(chǔ)的項(xiàng)目，使得科學(xué)家之間能夠分享和更新他們的研究成果。他與Robert Cailliau一起建立了一個(gè)叫ENQUIRE的原型系統(tǒng)。

• 1984年Tim Berners-Lee蒂姆.伯納斯.李重返歐洲核子物理實(shí)驗(yàn)室創(chuàng)造了萬(wàn)維網(wǎng)。他寫(xiě)了世界上第一個(gè)網(wǎng)頁(yè)瀏覽器(World Wide Web)和第一個(gè)網(wǎng)頁(yè)服務(wù)器(httpd)。

• Tim Berners-Lee建立了第一個(gè)網(wǎng)站(也是世界上第一個(gè)網(wǎng)站)：http://info.cern.ch/ 。

• 萬(wàn)維網(wǎng)WWW及W3C

• 英國(guó)計(jì)算機(jī)科學(xué)家萬(wàn)維網(wǎng)的發(fā)明者：Tim Berners-Lee

• 1994年10月，非營(yíng)利性的萬(wàn)維網(wǎng)聯(lián)盟W3C(World Wide Web Consortium)在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立。

• W3C是什么？

• W3C指萬(wàn)維網(wǎng)聯(lián)盟(World Wide Web Consortium)

• W3C創(chuàng)建于1994年10月

• W3C由Tim Berners-Lee創(chuàng)建

• W3C是一個(gè)會(huì)員組織

• W3C的工作是對(duì)web進(jìn)行標(biāo)準(zhǔn)化

• W3C創(chuàng)建并維護(hù)WWW標(biāo)準(zhǔn)

• W3C標(biāo)準(zhǔn)被稱為W3C推薦(W3C Recommendations)

• 什么是WWW？

• WWW指萬(wàn)維網(wǎng)(World Wide Web)

• 萬(wàn)維網(wǎng)也常被稱為Web

• Web是由遍布全球的計(jì)算機(jī)所組成的網(wǎng)絡(luò)

• 所有Web中的計(jì)算機(jī)都可以彼此通信

• 所有這些計(jì)算機(jī)都使用名為HTTP的通信標(biāo)準(zhǔn)

• WWW是如何工作的？

• Internet Explorer (IE內(nèi)核)

• Mozilla Firefox (Fiefox內(nèi)核)

• 360 (IE內(nèi)核+Webkit內(nèi)核，雙核瀏覽器)

• Google瀏覽器 (webkit內(nèi)核)

• Web信息存儲(chǔ)于被稱為網(wǎng)頁(yè)的文檔中

• 網(wǎng)頁(yè)存儲(chǔ)于被稱為Web服務(wù)器的計(jì)算機(jī)上

• 讀取網(wǎng)頁(yè)的計(jì)算機(jī)稱為Web客戶端

• Web客戶端通過(guò)瀏覽器來(lái)查看網(wǎng)頁(yè)

• 主要的瀏覽器有

• 什么是瀏覽器(brower)？

• 什么是服務(wù)器(server)？

Web工作原理

web工作原理是基于請(qǐng)求和響應(yīng)的模式，客戶端瀏覽器發(fā)送http請(qǐng)求，web服務(wù)器響應(yīng)http。

網(wǎng)頁(yè)靜態(tài)內(nèi)容：就是網(wǎng)頁(yè)中固定不變的內(nèi)容。

網(wǎng)頁(yè)動(dòng)態(tài)內(nèi)容：就是從數(shù)據(jù)庫(kù)中讀取的或JavaScript動(dòng)態(tài)生成的。

• URL網(wǎng)址結(jié)構(gòu)：

  http://localhost:8888/hello

  http指的是網(wǎng)絡(luò)協(xié)議

  localhost指的是域名

  8888指的是端口號(hào)

  hello指的是路徑

• HTTP響應(yīng)(HTTP Response)

  http version(http版本號(hào))，如http/1.1

  http status code(http狀態(tài)碼)：200，ok

  http response body(http響應(yīng)主體)：Hello,world!

web特點(diǎn)

1. web是易導(dǎo)航和圖形化

2. web是具有平臺(tái)無(wú)關(guān)性

3. web是支持分支式結(jié)構(gòu)

4. web是具有動(dòng)態(tài)性

5. web是具有交互性

web標(biāo)準(zhǔn)

• web規(guī)則的制訂主題是W3C

• W3C指萬(wàn)維網(wǎng)聯(lián)盟(World Wide Web Consortium)

• web標(biāo)準(zhǔn)即W3C的各種規(guī)范

• 最核心的web標(biāo)準(zhǔn)是HTML、CSS、XML

• 最新的HTML標(biāo)準(zhǔn)是XHTML1.1

網(wǎng)站

• 網(wǎng)站(website)是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用HTML等工具制作的用于展示特定內(nèi)容相關(guān)網(wǎng)頁(yè)的集合。

• 網(wǎng)頁(yè)：構(gòu)成網(wǎng)站的基本元素。

• 首頁(yè)：也稱主頁(yè)，即一個(gè)網(wǎng)站的入口網(wǎng)頁(yè)，首頁(yè)往往會(huì)被編輯得易于了解該網(wǎng)站，并引導(dǎo)互聯(lián)網(wǎng)用戶瀏覽網(wǎng)站其他部分的內(nèi)容。這部分內(nèi)容一般被認(rèn)為是一個(gè)目錄性質(zhì)的內(nèi)容。大多數(shù)作為首頁(yè)的文件名是index、default、main或portal加上擴(kuò)展名。

• 靜態(tài)網(wǎng)站

• HTML、CSS、Javascript

• 動(dòng)態(tài)網(wǎng)站

• 后臺(tái)、數(shù)據(jù)庫(kù)、其他

Web服務(wù)器

• web服務(wù)器：指在Internet上提供Web訪問(wèn)服務(wù)的站點(diǎn)，是由計(jì)算機(jī)軟件和硬件組成的有機(jī)整體。

• 必須為Web服務(wù)器配置IP地址和域名，才能對(duì)外提供Web服務(wù)。

IP地址、端口號(hào)

• 在網(wǎng)絡(luò)上，計(jì)算機(jī)通過(guò)IP地址或主機(jī)名進(jìn)行標(biāo)識(shí)，這樣使得位于不同地理位置的計(jì)算機(jī)有可能互相訪問(wèn)和通信。

• ip是由32位數(shù)字表示的，通常被分為四部分。例如：192.168.0.1

• 本地回路的IP地址：127.0.0.1或localhost

• Port(端口號(hào))：邏輯意義上的數(shù)據(jù)傳輸通道，或者說(shuō)模擬通道。

• 例如：web服務(wù)使用端口80，ftp服務(wù)使用端口21等

• 端口號(hào)的范圍是0-65535之間，0-1023之間的端口號(hào)已被一些知名的網(wǎng)絡(luò)服務(wù)和應(yīng)用占據(jù)(我們一般不使用)。

統(tǒng)一資源定位器(URL)

• 統(tǒng)一資源定位器(Uniform Resourse Locator，URL)也被稱為網(wǎng)頁(yè)地址，如同在網(wǎng)絡(luò)上的門(mén)票，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址(Address)。

• 格式：協(xié)議類型://服務(wù)器地址(:端口號(hào))/路徑/文件名

• 默認(rèn)的端口號(hào)可以被省略

• https://www.sina.com.cn

• https://www.baidu.com

• 實(shí)例：

• https是協(xié)議

• zhidao.baidu.com是服務(wù)器名稱

• /question/1820387867264893668.html是目錄/文件名.文件后綴

• ?qbl=relate question 1&word=url是要傳到后臺(tái)的參數(shù)(鍵值對(duì))

• https://zhidao.baidu.com/question/1820387867264893668.html?qbl=relate question 1&word=url

• 協(xié)議類型

• http：超文本傳輸協(xié)議

• https：用加密傳送的超文本傳輸協(xié)議

• ftp：文件傳輸協(xié)議

• mailto：電子郵件地址

• ldap：輕型目錄訪問(wèn)協(xié)議搜索

• news：Usenet新聞組

• file：本地電腦或網(wǎng)上分享的文件

• gopher：gopher協(xié)議

• 超鏈接

• 指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同頁(yè)面上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址、一個(gè)文件、甚至是一個(gè)應(yīng)用程序。

• 超鏈接在本質(zhì)上屬于一個(gè)網(wǎng)頁(yè)的一部分，它是一種允許我們同其他網(wǎng)頁(yè)或站點(diǎn)之間進(jìn)行連接的元素。

網(wǎng)站構(gòu)建技術(shù)

• HTML 4.01&HTML5

• CSS的使用(樣式表)

• XHTML

• XML和XSLT

• 客戶端腳本

• 服務(wù)器端腳本

• 通過(guò)SQL管理數(shù)據(jù)

網(wǎng)站開(kāi)發(fā)全棧

前端Front End：HTML5、Javascrip、CSS

后端Back End：Java、Python、Node.js、Ruby on Rail

數(shù)據(jù)庫(kù)Data sets：Mysql、MongoDB

架構(gòu)Infrastructure：Servers(服務(wù)器)、Cloud(阿里云、AWS)(云)、Container(容器)

BS架構(gòu)：brower、server，請(qǐng)求與響應(yīng)

技術(shù)棧

客戶端：Javascript、CSS、HTML

服務(wù)端：Programming Language(編程語(yǔ)言)、database(數(shù)據(jù)庫(kù))、web server(服務(wù)器)、operating system(操作系統(tǒng))

Web前端開(kāi)發(fā)的三層結(jié)構(gòu)

1. HTML是網(wǎng)頁(yè)信息結(jié)構(gòu)基礎(chǔ)；

2. CSS是網(wǎng)頁(yè)表現(xiàn)技術(shù)，對(duì)網(wǎng)頁(yè)布局、字體、顏色、背景和其它效果實(shí)施更加精確的控制：

3. Javascript和HTMLDOM是網(wǎng)頁(yè)行為，實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)、交互功能。

HTML

HTML全稱是Hyper Text Markup Language(超文本標(biāo)記語(yǔ)言)，用來(lái)描述頁(yè)面的內(nèi)容和結(jié)構(gòu)。

HTML是構(gòu)成Web頁(yè)面(Page)的基礎(chǔ)，最新版本是HTML5。

HTML超文本標(biāo)記語(yǔ)言的發(fā)展歷史

從初期的網(wǎng)絡(luò)誕生后，已經(jīng)出現(xiàn)了許多HTML版本：

一個(gè)簡(jiǎn)單的HTML頁(yè)面

• 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>歡迎大家學(xué)習(xí)web前端技術(shù)</p>
      <!-- 注解 -->
  </body>
  </html>

  
  

HTML基本結(jié)構(gòu)

• <!doctype html>：文檔申明，此類型doctype申明HTML5文檔

• <html>：HTML頁(yè)面的根元素

• <head>：包含了文檔的元數(shù)據(jù)

• <meta>：包含了頁(yè)面的隱式信息，如charset="utf-8"中文等

• <title>：文檔標(biāo)題，顯示在頁(yè)眉部分

• <body>：包含了頁(yè)面的可見(jiàn)內(nèi)容

以上結(jié)構(gòu)多數(shù)是成對(duì)出現(xiàn)的。例如：<head>和</head>等。

瀏覽器兼容性

• 不同的瀏覽器對(duì)于HTML標(biāo)準(zhǔn)支持程度不同

• 查看瀏覽器支持情況可以訪問(wèn)如下網(wǎng)址：

• https://caniuse.com

如何學(xué)習(xí)HTML？

• 清楚了解每一個(gè)標(biāo)簽和屬性的語(yǔ)義

• HTML中只描述內(nèi)容和結(jié)構(gòu)，樣式留給CSS

• 手寫(xiě)HTML，避免使用生成工具

• HTML學(xué)習(xí)的參考網(wǎng)址：

• https://www.htmldog.com/guides/html/

• https://www.w3school.com.cn/

CSS

• 層疊樣式表CSS(Cascading Style Sheet) 級(jí)聯(lián)樣式表。

• CSS作用：可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。

CSS發(fā)展歷史

• CSS1：1996年12月17日發(fā)布，W3C推薦標(biāo)準(zhǔn)，1999年1月11日重新修訂；

• CSS2：1999年1月11日發(fā)布，W3C推薦標(biāo)準(zhǔn)，CSS2添加了對(duì)媒介(打印機(jī)和聽(tīng)覺(jué)設(shè)備)、可下載字體的支持；

• CSS3：將CSS劃分為更小的模塊，這些模塊包括：

• 盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。

JavaScript

• JavaScript的出現(xiàn)使得網(wǎng)頁(yè)和用戶之間實(shí)現(xiàn)了一種實(shí)時(shí)性的、動(dòng)態(tài)的、交互性的關(guān)系，使網(wǎng)頁(yè)包含更多活躍元素和更加精彩的內(nèi)容。

• JavaScript由來(lái)：JavaScript最初由網(wǎng)景公司(Netscape)的Brendan Eich設(shè)計(jì)，是由Netscape的LiveScript發(fā)展而來(lái)的客戶端腳本語(yǔ)言，主要目的是為了解決為服務(wù)器語(yǔ)言提供數(shù)據(jù)驗(yàn)證的基本功能。

• JavaScript組成，一個(gè)完整的JavaScript實(shí)現(xiàn)是由以下3個(gè)不同部分組成的。

• 核心(ECMAScript)

• 文檔對(duì)象模型(DOM)

• 瀏覽器對(duì)象模型(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("第一個(gè)JS頁(yè)面");
          document.write("歡迎大家學(xué)習(xí)web前端技術(shù)")
      </script>
  </head>
  <body>
      
  </body>
  </html>

  
  

  js代碼可以加在head也可以加在body，一般加在head內(nèi)。

  body實(shí)現(xiàn)了內(nèi)容，script實(shí)現(xiàn)了交互。

• 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>一個(gè)測(cè)試頁(yè)面</title>
      <script language="javascript">
          var now = new Date(); //創(chuàng)建Date對(duì)象
          var year = now.getFullYear(); //獲取年份
          var month = now.getMonth()+1; //獲取月份
          var day = now.getDate(); //獲取日期
          var hour = now.getHours(); //獲取小時(shí)
          var minutes = now.getMinutes(); //獲取分鐘
          var sec = now.getSeconds(); //獲取秒數(shù)
          var time = year+"年"+month+"月"+day+"日"+hour+"時(shí)"+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文檔對(duì)象模型

• DOM結(jié)構(gòu)：以層次結(jié)構(gòu)組織節(jié)點(diǎn)或信息片段

AJAX

• AJAX即“Asynchronous Javascript +XML” (異步JavaScript和XML)，是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。

• 傳統(tǒng)的網(wǎng)頁(yè)(不使用AJAX)如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)。AJAX是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)，通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)頁(yè)面的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。

jQuery

• jQuery定義：

• jQuery是一套跨瀏覽器的JavaScript庫(kù)，簡(jiǎn)化HTML與JavaScript之間的操作。

• 由John Resig在2006年1月的BarCamp NYC上發(fā)布第一個(gè)版本。

• 目前是由Dave Methvin領(lǐng)導(dǎo)的開(kāi)發(fā)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。全球前一萬(wàn)個(gè)訪問(wèn)最高的網(wǎng)站中，有59%使用了jQuery，它是目前最受歡迎的JavaScript庫(kù)。

• jQery庫(kù)的引用：

• 通過(guò)script標(biāo)記的src屬性引入外部jQuery文件庫(kù)。

  <script type="text/javascript" scr=" jquery-2.1.1.min.js"></script>

開(kāi)發(fā)環(huán)境/瀏覽器

• Microsoft Internet Explorer (IE)

• Mozilla Firefox

• Google Chrome

• Opera

• Safari

開(kāi)發(fā)與debug建議在谷歌瀏覽器或火狐瀏覽器下進(jìn)行。

Web前端開(kāi)發(fā)工具及環(huán)境配置

• 開(kāi)發(fā)工具

• SublimeText3

• VS Code

• Hbuilder

• webStorm

• Dreamweaver

• 環(huán)境配置及實(shí)例

綜合案例

• my3.html

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Web前端開(kāi)發(fā)技術(shù)初步應(yīng)用</title>
      <style type="text/css">
          p{
              font-size:20px;
              color: red;
              text-indent: 2em;
  
          }
          h4{
              font-size:24px;
              font-style: bolder;
              color: #000099;
          }
      </style>
  </head>
  <body>
      <h4>Web前端開(kāi)發(fā)技術(shù)</h4>
      <p>HTML</p>
      <p>CSS</p>
      <p>JavaScript</p>
      <h4>網(wǎng)絡(luò)學(xué)習(xí)資源</h4>
      <a href="https://w3school.com.cn/html/index.asp">HTML教程</a>
      <script type="text/JavaScript">
          alert("Web前端開(kāi)發(fā)工程師就業(yè)前景好、待遇高！");
      </script>
  </body>
  </html>

  
  

“Web前端開(kāi)發(fā)技術(shù)怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！