初學MWA(Modern Web App）那些事-2-Basic HTML & CSS

---

---

前言

MWA，即Modern Web App（現代Web應用），是指一類采用了最新Web技術和方法論構建的Web應用。這類應用旨在提供接近原生應用的用戶體驗，同時利用Web平臺的優勢，如跨平臺兼容性、無需安裝、實時更新等特性。
MWA的設計和開發重點在于優化性能、提高響應速度、增強用戶交互，并確保應用可以在各種設備和瀏覽器上運行良好。
MWA的概念體現了Web開發領域的持續進步，旨在提供更高效、更靈活和更用戶友好的Web應用。隨著技術的發展，MWA的實現方式和最佳實踐也在不斷演進。

---

一、本節學習目標

• 理解HTML語法
• 理解CSS語法
• 掌握基本定位
• 掌握基本形狀
• 掌握基本文本

二、HTML基礎內容

2.1關鍵元素

：聲明文檔類型和html版本。 ：html文檔的根元素。 ＜head＞：包含元信息（標題、字符集、到樣式表的鏈接）。 ＜title＞：設置網頁的標題（顯示在瀏覽器選項卡中）。 ＜meta charset＞：定義文檔的字符集。 ：包含用戶可見的內容（標題、段落、圖像）。 ＜style＞：定義CSS內容和/或外部CSS文件的路徑名  ## 2.2 新建文檔 在VSCode中輸入“**！**”后，按回車鍵即可 !  ## 2.3 HTML 按鈕和容器

按鈕標簽：＜button＞：

• 用于創建可點擊按鈕
• 可以使用CSS和觸發器JavaScript函數進行樣式設置
• 可以使用“src”屬性鏈接外部腳本

容器CONTAINERS：用于對齊和打包頁面上的元素

• 網格：用于創建復雜的二維布局
  • 允許將項目放置在行和列中
  • 提供對布局結構的精確控制
• Flexbox：用于創建一維布局（行或列）
  • 最適合較小規模的布局，如對齊導航欄中的項目、居中設置內容或在頁面中創建響應組件

2.4 Scripts

腳本標簽：

• 用于在HTML文檔中包含JavaScript
• 可以放置在或部分
• 可以使用“src”屬性鏈接外部腳本
  例：

三、CSS 基礎內容

3.1 級聯樣式表-用于設置網頁樣式和布局

• 目的：**CSS用于設計和布局網頁，使其在視覺上具有吸引力和用戶友好性
• 關注點分離：**CSS將內容（HTML）與表示（CSS）分離，允許更清晰、更可維護的代碼
• 關系：CSS規則應用于HTML元素以控制其外觀
• **結構：**每個CSS規則由一個選擇器和一個聲明塊組成

3.2 CSS規則語法：

• 選擇器：指定規則應用于哪些HTML元素，定義要設置樣式的HTML元素（層次規則）
  元素選擇器：p｛｝
  類選擇器：.className｛｝
  ID選擇器：#idName｛｝
• 聲明塊：包含一個或多個用分號分隔的聲明
• 聲明：由屬性和值組成，用冒號分隔
• 屬性：定義要設置的元素的樣式
  color:設置文本顏色
  font-style：設置字體的大小
  background-color：設置背景顏色
  margin：設置元素外部的間距
  padding：設置元素內部的空格
  

3.3 CSS 框模型

概念：網頁上的每個元素都被分配了一個矩形范圍箱式模型組件
箱式模型組件：
border：元素的邊緣
content：元素的實際內容
margin：邊界外的空間
padding：內容和邊框之間的空格

3.4 CSS 定位

CSS啟用（4）種在網頁上定位項目的主要方法。
**屬性：**頂部、右側、底部和左側
**絕對：**將元素錨定在網頁上的特定X、Y位置；可以根據窗口的大小進行剪裁。
固定：元素相對于視口定位。即使頁面滾動，它也會保持在屏幕上的同一位置。
**相對：**相對于HTML文檔（網頁）中的順序定位。
**STICKY：**根據網頁的滾動位置在“相對”和“固定”定位之間切換。行為類似于“相對”，直到達到定義的滾動位置，然后“固定”在該位置。

3.5 CSS 文本樣式和顏色

文本屬性：

• font-family：指定字體名稱
• font size：指定字體高度
• font-weight：指定字體粗細
• 文本對齊：指定對齊方式（左、中、右）
  顏色屬性
• color: 設置文本顏色
• background-color: 背景顏色、 設置元素形狀的背景顏色
• Color Values：命名顏色（“藍色”）、十六進制值、RGB值
  

四、VScode：使用Open with Live Server

創建網頁（應用程序）的有效方法是使用“Open with Live Server”直接從VSCode（記得要安裝Live Server插件）啟動web瀏覽器。


Web瀏覽器檢查窗口：

• 按F12功能鍵，可以打開檢查窗口。
  

---

總結

以上就是今天分享的關于MWA的基礎內容，主要介紹了HTML & CSS基本內容 。后續會再深入研究學習MWA。【贈人玫瑰，手留余香】歡迎各位小伙伴關注、贊贊、留言和收藏。