Web前端開發技術怎么使用

本篇內容介紹了“Web前端開發技術怎么使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

開發環境設置

安裝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是如何工作的？

• Internet Explorer (IE內核)

• Mozilla Firefox (Fiefox內核)

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

• Google瀏覽器 (webkit內核)

• Web信息存儲于被稱為網頁的文檔中

• 網頁存儲于被稱為Web服務器的計算機上

• 讀取網頁的計算機稱為Web客戶端

• Web客戶端通過瀏覽器來查看網頁

• 主要的瀏覽器有

• 什么是瀏覽器(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特點

1. web是易導航和圖形化

2. web是具有平臺無關性

3. web是支持分支式結構

4. web是具有動態性

5. 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(端口號)：邏輯意義上的數據傳輸通道，或者說模擬通道。

• 例如：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

• 協議類型

• 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前端開發的三層結構

1. HTML是網頁信息結構基礎；

2. CSS是網頁表現技術，對網頁布局、字體、顏色、背景和其它效果實施更加精確的控制：

3. Javascript和HTMLDOM是網頁行為，實現網頁的動態、交互功能。

HTML

HTML全稱是Hyper Text Markup Language(超文本標記語言)，用來描述頁面的內容和結構。

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

HTML超文本標記語言的發展歷史

從初期的網絡誕生后，已經出現了許多HTML版本：

一個簡單的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;
  
          }
          h4{
              font-size:24px;
              font-style: bolder;
              color: #000099;
          }
      </style>
  </head>
  <body>
      <h4>Web前端開發技術</h4>
      <p>HTML</p>
      <p>CSS</p>
      <p>JavaScript</p>
      <h4>網絡學習資源</h4>
      <a href="https://w3school.com.cn/html/index.asp">HTML教程</a>
      <script type="text/JavaScript">
          alert("Web前端開發工程師就業前景好、待遇高！");
      </script>
  </body>
  </html>

  
  

“Web前端開發技術怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！