我才開始學javaweb（重點不在這）可能學的比較慢，勿說
HTML 基礎結構
HTML 文檔的基本結構包含 <!DOCTYPE html> 聲明、<html> 根元素、<head> 頭部和 <body> 主體部分。<head> 中包含頁面元信息，如標題、字符編碼和視口設置。<body> 用于放置頁面可見內容。
<!DOCTYPE html>
<html>
<head><title>頁面標題</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><!-- 頁面內容 -->
</body>
</html>
排版與格式
<h1> 到 <h6> 用于定義標題，數字越小級別越高。<p> 定義段落，<span> 為行內文本容器，<strong> 和 <em> 分別用于加粗和斜體文本。<br> 和 <hr> 用于換行和水平分隔線。
<h1>一級標題</h1>
<p>這是一個段落 <strong>加粗文本</strong> 和 <em>斜體文本</em>。</p>
<span>行內文本</span>
<br>
<hr>
特殊字符
HTML 使用實體代碼顯示特殊字符，如 表示空格，> 和 < 分別代表 > 和 <。
<p>使用 < 和 > 表示尖括號。</p>
布局元素
塊級元素如 <div>、<section> 和 <article> 獨占一行，常用于頁面布局。行內元素如 <span> 和 <a> 僅占用必要寬度。
<div>塊級容器</div>
<section>文檔章節</section>
<span>行內容器</span>
<a href="#">超鏈接</a>
超鏈接
<a> 標簽的 href 屬性指定鏈接地址，target 控制打開方式（_self 為當前窗口，_blank 為新窗口）。
<a href="https://example.com" target="_blank">示例鏈接</a>
表格
表格由 <table> 定義，<tr> 為行，<td> 為單元格，<th> 為表頭。<caption> 添加表格標題。
<table border="1"><caption>表格標題</caption><tr><th>表頭1</th><th>表頭2</th></tr><tr><td>數據1</td><td>數據2</td></tr>
</table>
表單
<form> 用于收集用戶輸入，action 指定提交地址，method 定義 HTTP 方法（GET 或 POST）。表單項包括文本框、單選/復選框、下拉列表等。
<form action="/submit" method="post"><label for="username">用戶名：</label><input type="text" id="username" name="username"><input type="submit" value="提交">
</form>
多媒體
<img> 嵌入圖片，<audio> 和 <video> 分別用于音頻和視頻，controls 屬性顯示播放控件。
<img src="image.jpg" alt="圖片描述">
<audio src="music.mp3" controls></audio>
<video src="video.mp4" controls width="400"></video>
CSS 基礎語法
CSS（層疊樣式表）由選擇器和聲明塊組成。選擇器用于定位 HTML 元素，聲明塊包含屬性和值，用于定義樣式。
selector {property: value;
}
選擇器類型
元素選擇器：直接使用 HTML 標簽名作為選擇器。
p {color: blue;
}
類選擇器：以點（.）開頭，匹配 class 屬性相同的元素。
.highlight {background-color: yellow;
}
ID 選擇器：以井號（#）開頭，匹配 id 屬性相同的元素。
#header {font-size: 24px;
}
屬性選擇器（*了解）：根據元素的屬性及屬性值來選擇元素。
input[type="text"] {border: 1px solid gray;
}
偽類選擇器（*了解）：用于定義元素的特殊狀態。
a:hover {color: red;
}
偽元素選擇器（*了解）：用于選擇元素的特定部分。
p::first-letter {font-size: 150%;
}
盒模型
CSS 盒模型由內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成。
.box {width: 200px;padding: 20px;border: 5px solid black;margin: 10px;
}
布局方式
浮動布局：使用 float 屬性讓元素向左或向右浮動。
.left {float: left;width: 50%;
}
Flex 布局：通過 display: flex 創建彈性容器，子元素可以靈活排列。
.container {display: flex;justify-content: space-between;
}
Grid 布局：通過 display: grid 創建網格布局，適合復雜布局需求。
.grid {display: grid;grid-template-columns: 1fr 1fr 1fr;
}
定位方式
靜態定位：默認定位方式，元素遵循正常文檔流。
.static {position: static;
}
相對定位：相對于元素原來的位置進行偏移。
.relative {position: relative;top: 10px;left: 20px;
}
絕對定位：相對于最近的已定位祖先元素進行偏移。
.absolute {position: absolute;top: 0;right: 0;
}
固定定位：相對于瀏覽器窗口進行定位，不隨滾動條移動。
.fixed {position: fixed;bottom: 0;left: 0;
}
盒子模型的概念
盒子模型（Box Model）是CSS布局的核心概念，描述每個HTML元素被看作一個矩形盒子，包含內容、內邊距、邊框和外邊距四部分。
盒子模型的組成部分
內容區（Content）
顯示元素的文本、圖片等實際內容，可通過width和height屬性設置大小。div {width: 200px;height: 100px; }內邊距（Padding）
內容區與邊框之間的透明區域，控制元素內部空間。div {padding: 10px; /* 統一設置 */padding-top: 5px; /* 單獨設置 */ }邊框（Border）
圍繞內邊距和內容的邊界線，可設置樣式、寬度和顏色。div {border: 1px solid #000; /* 簡寫 */border-radius: 5px; /* 圓角 */ }外邊距（Margin）
盒子與其他元素之間的透明區域，控制外部間距。div {margin: 20px; /* 統一設置 */margin-left: auto; /* 水平居中 */ }
標準模型與怪異模型
標準盒子模型（content-box）
width和height僅定義內容區大小，總寬度需加上padding和border。div {box-sizing: content-box; /* 默認值 */ }總寬度公式：
$總寬度 = width + padding-left + padding-right + border-left + border-right$怪異盒子模型（border-box）
width和height包含內容、內邊距和邊框，布局計算更直觀。div {box-sizing: border-box; }總寬度公式：總寬度 = width（已包含 padding 和 border ）
實際應用技巧
- 水平居中：通過
margin: 0 auto實現塊級元素居中。 - 外邊距合并：相鄰垂直外邊距會合并為較大值，可通過
overflow或padding避免。 - 負外邊距：可調整元素位置或實現重疊效果，但需謹慎使用。
調試工具
瀏覽器開發者工具（如Chrome DevTools）的“Elements”面板可直觀查看盒子模型各部分尺寸，輔助調試布局問題。
