2024信息工程Web開發(fā)技術(shù)復(fù)習(xí)概要_第1頁
2024信息工程Web開發(fā)技術(shù)復(fù)習(xí)概要_第2頁
2024信息工程Web開發(fā)技術(shù)復(fù)習(xí)概要_第3頁
2024信息工程Web開發(fā)技術(shù)復(fù)習(xí)概要_第4頁
2024信息工程Web開發(fā)技術(shù)復(fù)習(xí)概要_第5頁
已閱讀5頁，還剩11頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

2024信息工程Web開發(fā)技術(shù)復(fù)習(xí)概要?一、Web開發(fā)基礎(chǔ)（一）Web基本概念1.Web的定義與組成Web即萬維網(wǎng)，是一個(gè)由許多互相鏈接的超文本組成的系統(tǒng)，通過互聯(lián)網(wǎng)進(jìn)行訪問。它主要由網(wǎng)頁、網(wǎng)站服務(wù)器和瀏覽器三部分組成。網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，通常包含文本、圖像、鏈接、音頻、視頻等多種元素。網(wǎng)站服務(wù)器負(fù)責(zé)存儲和提供網(wǎng)頁資源。瀏覽器則用于解析和顯示網(wǎng)頁內(nèi)容。2.URL與域名URL（統(tǒng)一資源定位符）：用于在網(wǎng)絡(luò)上定位和訪問資源的地址。格式通常為：協(xié)議://主機(jī)名:端口號/路徑/文件名。例如，`.example/index.html`，其中`https`是協(xié)議，`.example`是主機(jī)名，`index.html`是具體的資源文件名。域名：是主機(jī)名的一種便于記憶的形式。它通過DNS（域名系統(tǒng)）將域名轉(zhuǎn)換為對應(yīng)的IP地址，從而實(shí)現(xiàn)對服務(wù)器的訪問。例如，`.example`最終會被解析為服務(wù)器的IP地址，瀏覽器通過該IP地址與服務(wù)器建立連接獲取網(wǎng)頁。

（二）HTML（超文本標(biāo)記語言）1.HTML基本結(jié)構(gòu)HTML文檔由`<html>`標(biāo)簽開始，包含`<head>`和`<body>`兩大部分。`<head>`標(biāo)簽用于包含文檔的元數(shù)據(jù)，如頁面標(biāo)題（`<title>`標(biāo)簽）、樣式表鏈接（`<link>`標(biāo)簽）、腳本引用（`<script>`標(biāo)簽）等。例如：```html<html><head><title>我的網(wǎng)頁</title><linkrel="stylesheet"type="text/css"href="styles.css"></head><body><!網(wǎng)頁主體內(nèi)容></body></html>````<body>`標(biāo)簽包含了網(wǎng)頁實(shí)際顯示的內(nèi)容，如文本段落（`<p>`標(biāo)簽）、標(biāo)題（`<h1>``<h6>`標(biāo)簽）、列表（`<ul>`無序列表、`<ol>`有序列表）、鏈接（`<a>`標(biāo)簽）、圖像（`<img>`標(biāo)簽）等。2.標(biāo)簽與元素標(biāo)簽：HTML標(biāo)簽用于定義網(wǎng)頁元素的開始和結(jié)束。例如`<p>`標(biāo)簽表示段落的開始，`</p>`表示段落的結(jié)束。元素：由標(biāo)簽及其包含的內(nèi)容組成。例如`<p>這是一個(gè)段落</p>`就是一個(gè)段落元素。3.常見HTML元素文本元素：`<p>`：用于創(chuàng)建段落，瀏覽器會在段落前后自動添加適當(dāng)?shù)拈g距。`<h1>``<h6>`：分別表示不同級別的標(biāo)題，`<h1>`最大，`<h6>`最小。標(biāo)題有助于組織網(wǎng)頁結(jié)構(gòu)，搜索引擎也會根據(jù)標(biāo)題來理解頁面內(nèi)容的層次。列表元素：`<ul>`：無序列表，使用圓點(diǎn)作為列表項(xiàng)的標(biāo)記。例如：```html<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li></ul>````<ol>`：有序列表，使用數(shù)字作為列表項(xiàng)的標(biāo)記。例如：```html<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li></ol>```鏈接元素：`<a>`標(biāo)簽用于創(chuàng)建鏈接。通過`href`屬性指定鏈接的目標(biāo)地址。例如：`<ahref=".example">訪問示例網(wǎng)站</a>`，點(diǎn)擊鏈接文本會跳轉(zhuǎn)到指定的網(wǎng)址。圖像元素：`<img>`標(biāo)簽用于插入圖像。通過`src`屬性指定圖像的源文件路徑，`alt`屬性提供圖像的替代文本，用于在圖像無法顯示時(shí)向用戶說明圖像的內(nèi)容。例如：`<imgsrc="image.jpg"alt="示例圖片">`。

（三）CSS（層疊樣式表）1.CSS基本概念CSS用于控制HTML元素的樣式，包括字體、顏色、布局、背景等方面。它可以使網(wǎng)頁的外觀更加美觀和一致。CSS樣式可以直接寫在HTML文檔的`<style>`標(biāo)簽內(nèi)，也可以通過`<link>`標(biāo)簽引入外部的CSS文件。2.選擇器元素選擇器：通過元素名稱來選擇元素。例如，`p`選擇器可以選中所有的段落元素，然后對其應(yīng)用樣式。類選擇器：以點(diǎn)號（`.`）開頭，用于選擇具有特定類名的元素。例如，`.highlight`可以選中所有具有`highlight`類的元素。ID選擇器：以井號（``）開頭，用于選擇具有特定ID的元素。例如，`maincontent`可以選中ID為`maincontent`的元素。3.樣式屬性字體樣式：`fontfamily`：設(shè)置字體。例如，`fontfamily:Arial,sansserif;`表示優(yōu)先使用Arial字體，如果瀏覽器沒有安裝Arial字體，則使用無襯線字體。`fontsize`：設(shè)置字體大小?？梢允褂孟袼兀╬x）、百分比（%）等單位。例如，`fontsize:16px;`。`fontweight`：設(shè)置字體粗細(xì)。例如，`fontweight:bold;`表示加粗字體。顏色樣式：`color`：設(shè)置文本顏色。例如，`color:FF0000;`表示紅色，也可以使用顏色名稱，如`red`。背景樣式：`backgroundcolor`：設(shè)置背景顏色。例如，`backgroundcolor:f0f0f0;`表示淺灰色背景。`backgroundimage`：設(shè)置背景圖像。例如，`backgroundimage:url(bg.jpg);`，將`bg.jpg`作為背景圖像。布局樣式：`width`和`height`：設(shè)置元素的寬度和高度。例如，`width:300px;height:200px;`可以設(shè)置一個(gè)元素的大小。`margin`：設(shè)置元素的外邊距，控制元素與其他元素之間的距離。例如，`margin:10px;`表示上下左右外邊距都為10像素。`padding`：設(shè)置元素的內(nèi)邊距，控制元素內(nèi)容與邊框之間的距離。例如，`padding:5px;`表示內(nèi)邊距為5像素。

（四）JavaScript1.JavaScript基本概念JavaScript是一種腳本語言，用于為網(wǎng)頁添加交互性和動態(tài)效果。它可以在網(wǎng)頁瀏覽器中直接運(yùn)行，不需要服務(wù)器端的支持。JavaScript代碼可以嵌入到HTML文檔中，通常放在`<script>`標(biāo)簽內(nèi)。例如：```html<html><head><title>JavaScript示例</title></head><body><buttononclick="alert('你點(diǎn)擊了按鈕')">點(diǎn)擊我</button><script>//這里也可以寫JavaScript代碼</script></body></html>```2.變量與數(shù)據(jù)類型變量：用于存儲數(shù)據(jù)。使用`var`、`let`或`const`關(guān)鍵字聲明變量。例如：`varnum=10;`聲明一個(gè)名為`num`的變量并賦值為10。`letage=25;`聲明一個(gè)塊級作用域的變量`age`。`constPI=3.14159;`聲明一個(gè)常量`PI`，其值不能再被修改。數(shù)據(jù)類型：數(shù)字類型：如整數(shù)（`10`）、浮點(diǎn)數(shù)（`3.14`）。字符串類型：用單引號（`'`）或雙引號（`"`）括起來的文本。例如，`'Hello,World!'`。布爾類型：只有兩個(gè)值`true`和`false`。數(shù)組類型：用于存儲多個(gè)值的有序集合。例如，`letarr=[1,'two',true];`。對象類型：用于存儲鍵值對的無序集合。例如，`letperson={name:'John',age:30};`。3.控制結(jié)構(gòu)if語句：用于條件判斷。例如：```javascriptletnum=15;if(num>10){console.log('數(shù)字大于10');}else{console.log('數(shù)字小于等于10');}```for循環(huán)：用于重復(fù)執(zhí)行一段代碼。例如：```javascriptfor(leti=0;i<5;i++){console.log(i);}```while循環(huán)：只要條件為真就重復(fù)執(zhí)行代碼。例如：```javascriptletcount=0;while(count<3){console.log(count);count++;}```4.函數(shù)函數(shù)是一段可重復(fù)使用的代碼塊。使用`function`關(guān)鍵字定義函數(shù)。例如：```javascriptfunctionadd(a,b){returna+b;}letresult=add(3,5);console.log(result);//輸出8```函數(shù)可以有參數(shù)和返回值，參數(shù)用于傳遞數(shù)據(jù)給函數(shù)，返回值用于將函數(shù)處理后的結(jié)果返回給調(diào)用者。

二、Web開發(fā)進(jìn)階（一）前端框架1.Vue.js基本原理：Vue.js是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。它采用虛擬DOM（文檔對象模型）技術(shù)，通過對比新舊虛擬DOM的差異，高效地更新實(shí)際的DOM。使用示例：首先在HTML中引入Vue.js庫，可以通過CDN鏈接或本地下載的文件。例如：```html<scriptsrc="/npm/vue@2.6.14/dist/vue.js"></script>```然后在HTML中創(chuàng)建Vue實(shí)例：```html<divid="app"><p>{{message}}</p><button@click="message='按鈕被點(diǎn)擊了'">點(diǎn)擊我</button></div><script>newVue({el:'app',data:{message:'初始消息'}});</script>```在上述代碼中，Vue實(shí)例通過`el`選項(xiàng)掛載到`id`為`app`的元素上，`data`選項(xiàng)定義了一個(gè)響應(yīng)式的數(shù)據(jù)`message`，在HTML中使用雙花括號插值（`{{}}`）顯示數(shù)據(jù)，通過`@click`指令綁定一個(gè)點(diǎn)擊事件，在事件處理函數(shù)中修改`message`的值。2.React基本原理：React使用虛擬DOM來提高渲染效率。它將UI拆分成多個(gè)獨(dú)立的、可復(fù)用的組件，通過組件之間的組合來構(gòu)建整個(gè)用戶界面。使用示例：首先創(chuàng)建一個(gè)React組件。例如：```jsximportReactfrom'react';

functionMyComponent(){return(<div><p>這是一個(gè)React組件</p></div>);}

exportdefaultMyComponent;```然后在主應(yīng)用中使用該組件：```jsximportReactfrom'react';importReactDOMfrom'reactdom';importMyComponentfrom'./MyComponent';

ReactDOM.render(<MyComponent/>,document.getElementById('root'));```在上述代碼中，`MyComponent`是一個(gè)函數(shù)式組件，返回一個(gè)包含段落的`<div>`元素。通過`ReactDOM.render`函數(shù)將組件渲染到`id`為`root`的HTML元素上。

（二）后端技術(shù)基礎(chǔ)1.服務(wù)器概述服務(wù)器的作用：服務(wù)器是提供網(wǎng)絡(luò)服務(wù)的計(jì)算機(jī)系統(tǒng)。它接收來自客戶端的請求，處理請求并返回響應(yīng)。例如，Web服務(wù)器接收瀏覽器的HTTP請求，根據(jù)請求提供相應(yīng)的網(wǎng)頁文件。常見服務(wù)器類型：ApacheHTTPServer：是一個(gè)開源的Web服務(wù)器軟件，功能強(qiáng)大，穩(wěn)定性高，廣泛應(yīng)用于各種規(guī)模的網(wǎng)站。Nginx：一款輕量級的高性能Web服務(wù)器、反向代理服務(wù)器及電子郵件（IMAP/POP3）代理服務(wù)器。它在處理高并發(fā)連接方面表現(xiàn)出色。2.數(shù)據(jù)庫基礎(chǔ)數(shù)據(jù)庫概念：數(shù)據(jù)庫是用于存儲和管理數(shù)據(jù)的軟件系統(tǒng)。它由多個(gè)數(shù)據(jù)表組成，每個(gè)數(shù)據(jù)表包含多個(gè)記錄，每個(gè)記錄又由多個(gè)字段組成。關(guān)系型數(shù)據(jù)庫：MySQL：是最流行的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一。它使用SQL（結(jié)構(gòu)化查詢語言）來操作數(shù)據(jù)。例如，創(chuàng)建一個(gè)名為`users`的數(shù)據(jù)表：```sqlCREATETABLEusers(idINTAUTO_INCREMENTPRIMARYKEY,nameVARCHAR(50),ageINT);```插入數(shù)據(jù)：```sqlINSERTINTOusers(name,age)VALUES('John',25);```查詢數(shù)據(jù)：```sqlSELECT*FROMusers;```非關(guān)系型數(shù)據(jù)庫：MongoDB：是一個(gè)基于分布式文件存儲的數(shù)據(jù)庫。它使用BSON（二進(jìn)制JSON）格式存儲數(shù)據(jù)。例如，創(chuàng)建一個(gè)文檔：```javascriptdb.users.insertOne({name:'Jane',age:30,hobbies:['閱讀','旅行']});```查詢文檔：```javascriptdb.users.find({age:30});```

（三）Web開發(fā)中的交互與優(yōu)化1.表單處理HTML表單元素：`<form>`標(biāo)簽用于創(chuàng)建表單。例如：```html<formaction="submit.php"method="post"><labelfor="name">姓名：</label><inputtype="text"id="name"name="name"><br><labelfor="email">郵箱：</label><inputtype="email"id="email"name="email"><br><inputtype="submit"value="提交"></form>```表單元素包括文本框（`<inputtype="text">`）、下拉框（`<select>`）、單選框（`<inputtype="radio">`）、復(fù)選框（`<inputtype="checkbox">`）等。JavaScript表單驗(yàn)證：可以使用JavaScript對表單數(shù)據(jù)進(jìn)行驗(yàn)證。例如：```javascriptconstform=document.querySelector('form');form.addEventListener('submit',function(event){constnameInput=document.getElementById('name');constemailInput=document.getElementById('email');if(nameInput.value===''){alert('姓名不能為空');event.preventDefault();}if(!emailInput.value.match(/^[azAZ09_.+]+@[azAZ09]+\.[azAZ09.]+$/)){alert

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論