2024信息工程Web開發技術復習概要_第1頁
2024信息工程Web開發技術復習概要_第2頁
2024信息工程Web開發技術復習概要_第3頁
2024信息工程Web開發技術復習概要_第4頁
2024信息工程Web開發技術復習概要_第5頁
已閱讀5頁，還剩11頁未讀， 繼續免費閱讀

VIP免費下載

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

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

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

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

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

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

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

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

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

（三）Web開發中的交互與優化1.表單處理HTML表單元素：`<form>`標簽用于創建表單。例如：```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">`）、復選框（`<inputtype="checkbox">`）等。JavaScript表單驗證：可以使用JavaScript對表單數據進行驗證。例如：```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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論