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

站在用戶的角度思考問題，與客戶深入溝通，找到無為網(wǎng)站設(shè)計與無為網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋無為地區(qū)。

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

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

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

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

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

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

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

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

• HTML進行頁面的結(jié)構(gòu)排版

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

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

• Ajax技術(shù)進行數(shù)據(jù)的請求

IT公司網(wǎng)頁開發(fā)過程

• 視覺設(shè)計photoshop UI/美工

• 切圖美工或者前端

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

• 頁面效果前端(javascript)

• 前后臺交互前端(ajax)

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

開發(fā)工具

• VS Code

• sublime

• Hbuilder

• webStorm

• Dreamweaver

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

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

常見瀏覽器：Chrome、Safari、Firefox、Internet Explorer

WEB的起源與發(fā)展

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

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

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

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

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

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

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

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

• W3C是什么？

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

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

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

• W3C是一個會員組織

• W3C的工作是對web進行標準化

• W3C創(chuàng)建并維護WWW標準

• W3C標準被稱為W3C推薦(W3C Recommendations)

• 什么是WWW？

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

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

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

• 所有Web中的計算機都可以彼此通信

• 所有這些計算機都使用名為HTTP的通信標準

• WWW是如何工作的？

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

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

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

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

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

• 網(wǎng)頁存儲于被稱為Web服務(wù)器的計算機上

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

• Web客戶端通過瀏覽器來查看網(wǎng)頁

• 主要的瀏覽器有

• 什么是瀏覽器(brower)？

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

Web工作原理

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

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

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

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

  http://localhost:8888/hello

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

  localhost指的是域名

  8888指的是端口號

  hello指的是路徑

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

  http version(http版本號)，如http/1.1

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

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

web特點

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

2. web是具有平臺無關(guān)性

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

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

5. web是具有交互性

web標準

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

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

• web標準即W3C的各種規(guī)范

• 最核心的web標準是HTML、CSS、XML

• 最新的HTML標準是XHTML1.1

網(wǎng)站

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

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

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

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

• HTML、CSS、Javascript

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

• 后臺、數(shù)據(jù)庫、其他

Web服務(wù)器

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

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

IP地址、端口號

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

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

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

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

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

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

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

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

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

• 默認的端口號可以被省略

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

• https://www.baidu.com

• 實例：

• https是協(xié)議

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

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

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

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

• 協(xié)議類型

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

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

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

• mailto：電子郵件地址

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

• news：Usenet新聞組

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

• gopher：gopher協(xié)議

• 超鏈接

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

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

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

• HTML 4.01&HTML5

• CSS的使用(樣式表)

• XHTML

• XML和XSLT

• 客戶端腳本

• 服務(wù)器端腳本

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

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

前端Front End：HTML5、Javascrip、CSS

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

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

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

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

技術(shù)棧

客戶端：Javascript、CSS、HTML

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

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

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

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

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

HTML

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

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

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

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

一個簡單的HTML頁面

• my0.html

  
  
  
      
      
      
  
  
      
  歡迎大家學(xué)習(xí)web前端技術(shù)
      
  
  

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

• ：文檔申明，此類型doctype申明HTML5文檔

• ：HTML頁面的根元素

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

• ：包含了頁面的隱式信息，如charset="utf-8"中文等

•              alert("第一個JS頁面");         document.write("歡迎大家學(xué)習(xí)web前端技術(shù)")          

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

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

• my2.html

  
  
  
      
      
      
      
      
          var now = new Date(); //創(chuàng)建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(); //獲取秒數(shù)
          var time = year+"年"+month+"月"+day+"日"+hour+"時"+minutes+"分"+sec+"秒";
          alert(time);
          document.write(time);
          var arrayWeek = new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期天");
          var week = arrayWeek[day];
          alert(week);
      
  
  
      
  
  

HTML DOM

• HTML DOM是Document Object Model文檔對象模型

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

AJAX

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

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

jQuery

• jQuery定義：

• jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。

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

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

• jQery庫的引用：

• 通過script標記的src屬性引入外部jQuery文件庫。

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

• Microsoft Internet Explorer (IE)

• Mozilla Firefox

• Google Chrome

• Opera

• Safari

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

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

• 開發(fā)工具

• SublimeText3

• VS Code

• Hbuilder

• webStorm

• Dreamweaver

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

綜合案例

• my3.html

  
  
  
      
      
      
          p{
              font-size:20px;
              color: red;
              text-indent: 2em;
  
          }
          h4{
              font-size:24px;
              font-style: bolder;
              color: #000099;
          }
      
  
  
      
  Web前端開發(fā)技術(shù)
      
  HTML
      
  CSS
      
  JavaScript
      
  網(wǎng)絡(luò)學(xué)習(xí)資源
      HTML教程
      
          alert("Web前端開發(fā)工程師就業(yè)前景好、待遇高！");
      
  
  

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