JavaWeb學習筆記——第一天

zgg1h發表於2024-03-22
JavaWeb筆記

Web開發

什麼是Web

Web：全球廣域網，也稱為全球資訊網(www World Wide Web)，能夠透過瀏覽器訪問的網站。

Web網站的工作流程

使用者透過瀏覽器訪問Web網站

服務端的程式分為三部分：執行前端程式的前端伺服器、執行Java後端程式的後端伺服器和資料庫伺服器。

  1. 使用者透過瀏覽器對網站發起請求後，瀏覽器會將請求傳送給前端伺服器，隨後前端伺服器會響應一端前端程式碼給瀏覽器，此時瀏覽器可以解析獲得網站的外形結構，但是沒有具體的資料。
  2. 然後瀏覽器透過前端程式碼裡的請求路徑向後端伺服器發起請求，後端伺服器會收到請求後又會向根據瀏覽器的請求向資料庫伺服器發起請求，以獲得對應的資料。
  3. 資料庫伺服器收到請求後，會將相應的資料響應給後端伺服器，然後後端伺服器又會將這些資料響應給瀏覽器，此時瀏覽器就能顯示出完整的網頁了。

Web網站的開發模式

  • 前後端分離開發：前端程式和後端程式的開發和部署互相分離，由不同的人來分別開發前端程式和後端程式，並分別部署在前端伺服器和後端伺服器上。
  • 混合開發：前端程式和後端程式的開發和部署是混合在一起的，由相同的人來同時開發前端程式和後端程式，並部署在同一臺伺服器上。
  • 當前，主流的開發模式是前後端分離開發模式。

Web網站開發課程安排

Web前端開發

  • HTML、CSS、JavaScript
  • Vue、Element、Nginx

Web後端開發

  • Maven
  • SpringBoot Web 基礎篇
  • MySQL
  • SpringBoot Mybatis
  • SpringBoot Web開發篇
  • SpringBoot Web進階篇

VS Code開發工具

  • Visual Studio Code（簡稱 VS Code ）是 Microsoft 於2015年4月釋出的一款程式碼編輯器。
  • VS Code 對前端程式碼有非常強大的支援，同時也其他程式語言（例如：C++、Java、Python、PHP、Go等）。
  • VS Code 提供了非常強大的外掛庫，大大提高了開發效率。

一、VS Code的安裝

  1. 在官網： https://code.visualstudio.com下載安裝包。

官網下載

  1. 雙擊開啟安裝包，選擇我同意此協議，再點選下一步。

安裝1

  1. 選擇安裝位置，然後點選下一步。

安裝2

  1. 點選下一步。

安裝3

  1. 根據需求選擇，然後點選下一步。

安裝4

  1. 點選安裝，等待安裝完成。

  2. 點選完成。

安裝5

二、VS Code外掛安裝

  1. 外掛安裝步驟：點選圖中最左邊紅框中的圖示，然後在上方輸入外掛名，最後在點選目標外掛的Install，等待安裝完成即可。

外掛安裝

  1. 安裝Chinese (Simplified) Language Pack：適用於 VS Code 的中文（簡體）語言包。

  2. 安裝Code Spell Checker：拼寫檢查器。比如 banana 單詞寫錯成 banane ，會提示你是否修改成 banana ，也可以將 banane 新增至檢查器的字典中。

  3. 安裝HTML CSS Support：在編寫樣式表的時候，自動補全功能大大縮減了編寫時間。

  4. 安裝JavaScript (ES6) code snippets：支援ES6語法提示。

  5. 安裝Mithril Emmet：一個能大幅度提高前端開發效率的一個工具，用於補全程式碼。

  6. 安裝Path Intellisense：路徑提示外掛。

  7. 安裝Vue 3 Snippets：在 Vue 2 或者 Vue 3 開發中提供程式碼片段，語法高亮和格式化的 VS Code 外掛，能極大提高你的開發效率。

  8. 安裝VueHelper：vscode最好的vue程式碼提示外掛，不僅包括了vue2所有api，還含有vue-router2和vuex2的程式碼。

  9. 安裝Auto Close Tag：自動閉合HTML/XML標籤。

  10. 安裝Auto Rename Tag：自動完成另一側標籤的同步修改。

  11. 安裝Beautify：格式化 html ,js,css。

  • 安裝過程中, 如果提示是否需要繼續安裝, 選擇 "仍要安裝"。

  1. 安裝Bracket Pair Colorizer：給括號加上不同的顏色，便於區分不同的區塊，使用者可以定義不同括號型別和不同顏色 。

  2. 安裝open in browser：vscode不像IDE一樣能夠直接在瀏覽器中開啟html，而該外掛支援快捷鍵與滑鼠右鍵快速在瀏覽器中開啟html檔案，支援自定義開啟指定的瀏覽器，包括：Firefox，Chrome，Opera，IE以及Safari。

  3. 安裝Vetur：Vue多功能整合外掛，包括：語法高亮，智慧提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue外掛，Vue開發者必備。

  4. 安裝File Utils：File Utils外掛,可以方便快捷的來建立、複製、移動、重新命名檔案和目錄。

  5. 安裝IntelliJ IDEA Keybindings：安裝VSCode的外掛 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷鍵。

三、VS Code配置

配置

Web前端開發

概述

網頁有哪些部分組成

文字、圖片、音訊、影片、表格、超連結 …

網頁背後的本質是什麼

程式設計師寫的前端程式碼。

前端的程式碼是如何轉換成使用者眼中的網頁的

  • 透過瀏覽器轉化（解析和渲染）成使用者看到的網頁。
  • 瀏覽器中對程式碼進行解析渲染的部分，稱為瀏覽器核心。

Web標準

  • Web標準也稱為網頁標準，由一系列的標準組成，大部分由W3C（ World Wide Web Consortium，全球資訊網聯盟）負責制定。
  • Web標準有三個組成部分：
組成部分 對應的開發語言
網頁的結構（頁面元素和內容） HTML
網頁的表現（頁面元素的外觀、位置等頁面樣式，如：顏色、大小等） CSS
網頁的行為（互動效果） JavaScript

web前端開發課程安排

  • HTML、CSS
  • JavaScript 、Vue
  • Ajax、Axios、ElementUI、Nginx

HTML、CSS

什麼是HTML、CSS

  • HTML（HyperText Markup Language）：超文字標記語言。

    • 超文字：超越了文字的限制，比普通文字更強大。除了文字資訊，還可以定義圖片、音訊、影片等內容。
    • 標記語言：由標籤構成的語言。
      • HTML標籤都是預定義好的。例如：使用<a>展示超連結，使用<img>展示圖片，<video>展示影片。
      • HTML程式碼直接在瀏覽器中執行，HTML標籤由瀏覽器解析。

  • CSS（Cascading Style Sheet）：層疊樣式表，用於控制頁面的樣式（表現）。

HTML

HTML檔案書寫方式

  1. 新建文字檔案，字尾名改為 .html。
  2. 編寫 HTML 結構標籤。
  3. 在<body>中填寫內容。

HTML結構標籤

<!--文件型別為html-->
<!DOCTYPE html>
<html lang="en">
<html>
	<head>
        <!--字符集為UTF-8-->
        <meta charset="UTF-8">
        <!--設定瀏覽器相容性-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>標題</title>
	</head>
	<body>
    
	</body>
</html>

HTML語法特點

  • HTML標籤不區分大小寫。
  • HTML標籤屬性值單雙引號都可以。
  • HTML語法鬆散。

HTML、CSS語法

基礎標籤 & 樣式

標題排版

HTML標籤

  • 註釋：<!--註釋內容-->

  • 標題標籤：<h1> - <h6>（h1 → h6 重要程度依次降低）
    注意：HTML標籤都是預定義好的，不能自己隨意定義。

  • 圖片標籤：<img src="…" width="…" height="…">
    屬性：

    • src：指定影像的url：

      • 絕對路徑：絕對磁碟路徑（D:/xxxx）、絕對網路路徑（https://xxxx）。
      • 相對路徑：從當前檔案開始查詢。 （./ : 當前目錄，可以省略； ../ : 上級目錄）。

    • width：影像的寬度（畫素 / 相對於父元素的百分比）。

    • height：影像的高度（畫素 / 相對於父元素的百分比。只調整width或height時，height或width或等比例縮放）。

  • 水平線標籤：<hr>

標題樣式

HTML標籤

  • <span>標籤：

    • <span> 是一個在開發網頁時大量會用到的沒有語義的佈局標籤。
    • 特點：一行可以顯示多個(組合行內元素)，寬度和高度預設由內容撐開。
CSS
CSS引入方式
  • 行內樣式：寫在標籤的style屬性中（只在當前標籤有效，不推薦使用）
<h1 style="屬性名: 屬性值; 屬性名: 屬性值;"></h1>
  • 內嵌樣式：寫在style標籤中（可以寫在頁面任何位置，但通常約定寫在head標籤中）
<style>
  h1 {
     屬性名: 屬性值;
     屬性名: 屬性值;
  }
</style>
  • 外聯樣式：寫在一個單獨的.css檔案中（需要透過 link 標籤在網頁中引入）
<!--CSS檔案中-->
h1 {
   屬性名: 屬性值;
   屬性名: 屬性值;
}

<!--link標籤-->
<link rel="stylesheet" href="css/css.css">
顏色表示形式
表示方式 表示含義 取值
關鍵字 預定義的顏色名 red、green、blue...
rgb表示法 紅綠藍三原色，每項取值範圍：0-255 rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六進位制表示法 #開頭，將數字轉換成十六進位制表示 #000000、#ff0000、#cccccc，簡寫：#000、#ccc
CSS選擇器

用來選取需要設定樣式的元素(標籤)。

  • 元素選擇器：
元素名稱 {
    color: red;
}

<h1> Hello CSS </h1>
  • id選擇器：
#id屬性值 {
    color: red;
}

<h1 id="hid"> CSS id Selector</h1>
  • 類選擇器：
.class屬性值 {
    color: red;
}

<h1 class="cls">CSS class Selector</h1>

優先順序：id選擇器 > 類選擇器 > 元素選擇器。

CSS屬性
  • color: 設定文字內容的顏色。
  • font-size：字型大小 （注意：記得加px）。

超連結

HTML標籤
  • 超連結標籤：<a href="..." target="...">文字</a>
    屬性：
    • href：指定資源訪問的url。
    • target：指定在何處開啟資源連結。
      • _self：在當前頁面開啟，預設值。
      • _blank：在空白頁面開啟。
CSS屬性
  • text-decoration：規定新增到文字的修飾，none表示定義標準的文字，underline表示對文字加上下劃線。

正文排版

HTML標籤
  • 影片標籤：<video>
    • src：規定影片的url。
    • controls：顯示播放控制元件。
    • width：播放器的寬度。
    • height：播放器的高度。
  • 音訊標籤：<audio>
    • src：規定音訊的url。
    • controls：顯示播放控制元件，完整寫法：controls="controls"，在HTML中，若屬性名和屬性值一癢，則可以省略等號和屬性值，只寫屬性名。
  • 換行標籤：<br>
  • 段落標籤：<p>
  • 文字加粗標籤: <b> / <strong>，<strong>有強調語義。
  • 在HTML中無論輸入多少個空格，只會顯示一個。 可以使用空格佔位符：&nbsp;
CSS屬性
  • line-height：設定行高。
  • text-indent：定義第一個行內容的縮排。
  • text-align：規定元素中的文字的水平對齊方式，center表示居中，left表示左對齊，right表示右對齊。

頁面佈局

盒子模型
  • 盒子：頁面中所有的元素（標籤），都可以看做是一個 盒子，由盒子將頁面中的元素包含在一個矩形區域內，透過盒子的視角更方便的進行頁面佈局
  • 盒子模型組成：內容區域（content）、內邊距區域（padding）、邊框區域（border）、外邊距區域（margin）。
盒子模型
佈局標籤

實際開發網頁中，會大量頻繁的使用 div 和 span 這兩個沒有語義的佈局標籤。

HTML標籤
  • <div>標籤：
    • 一行只顯示一個（獨佔一行）。
    • 寬度預設是父元素的寬度，高度預設由內容撐開。
    • 可以設定寬高（width、height）。
  • <span>標籤：
    • 一行可以顯示多個。
    • 寬度和高度預設由內容撐開。
    • 不可以設定寬高（width、height）。

CSS屬性

  • width：設定寬度。
  • height：設定高度。
  • box-sizing：值為content-box時寬度和高度分別為內容區域的寬度和高度，值為border-box時寬度和高度分別為邊框區域的寬度和高度。
  • border：設定邊框的屬性，如：1px solid #000；。
  • padding：內邊距，設定4個值時意為分別指定上，右，下，左的寬度；設定3個值時意為分別指定上，左右，下的寬度；設定2個值時意為分別指定上下，左右的寬度；設定1個值時意為同時指定上下左右的寬度；也可以使用auto來使瀏覽器自動計算內邊距。
  • margin：外邊距，用法同內邊距。

注意：如果只需要設定某一個方位的邊框、內邊距、外邊距，可以在屬性名後加上 –位置，如：padding-top、padding-left、padding-right …

表格、表單標籤

表格標籤

應用場景：在網頁中以表格（行、列）形式整齊展示資料，如：班級表等。語法如下：

標籤 描述 屬性/備註
<table> 定義表格整體，可以包裹多個<tr> border：規定表格邊框的寬度
width：規定表格的寬度
cellspacing: 規定單元之間的空間
<tr> 表格的行，可以包裹多個<td>
<td> 表格單元格(普通)，可以包裹內容 如果是表頭單元格，可以替換為<th>

表單標籤

  • 應用場景：在網頁中主要負責資料採集功能，如 註冊、登入等資料採集。
  • 標籤：<form>
  • 屬性：

    • action：表單資料提交的url地址，預設提交到當前頁面。

    • method：表單提交方式：

      • get：預設提交方式，在url後面拼接表單資料，比如：?username=Tom&age=12，url長度有限制，不能拼接太多資料。
      • post：在訊息體（請求體）中傳遞資料，引數大小無限制。

注意：表單項必須有name屬性才可以提交。

表單項
  • <input>：表單項，透過type屬性控制輸入形式，透過name屬性指定該表單項的名字。
  • <label>：有label標籤時，點選文字也可以選中當前表單項。
  • <select>：定義下拉選單，<option> 定義列表項，提交值為該<option>標籤中value屬性的值。
  • <textarea>：文字域。
type取值 說明
text 預設值，定義單行的輸入欄位
password 定義密碼欄位
radio 定義單選按鈕，同一組單選按鈕的name必須相同
checkbox 定義核取方塊
file 定義檔案上傳按鈕
date/time/datetime-local 定義日期/時間/日期時間
number 定義數字輸入框
email 定義郵件輸入框
hidden 定義隱藏域
submit / reset / button 定義提交按鈕 / 重置按鈕 / 可點選按鈕

相關文章