一、HTML相關內容

?

- ?<img>?標簽：

- 用于在網頁中嵌入圖像，?src?屬性指定圖像的路徑，可以是絕對路徑（如?D:\Git\java115_java116\課堂代碼\前端代碼\pic\cat.jpg?）、相對路徑（如?./pic/cat.jpg?，表示當前目錄下的?pic?文件夾中的?cat.jpg?）或網絡路徑（如?https://hbimg.huaban.com/33c21fbe73e4bd967dfeae4cf56f26382d5c285-e6epw6_fw658?）。

- ?title?屬性是鼠標懸停在圖片上時顯示的提示文本。

- ?alt?屬性是圖像加載失敗時顯示的替代文本。

- ?width?和?height?屬性用于設置圖像的寬度和高度，如果只設置其中一個，圖像會按比例縮放；如果兩個都設置，圖像會按指定的大小顯示。

- ?<a>?標簽：

- 用于創建超鏈接，?href?屬性指定鏈接的目標地址，?target="_blank"?表示在新的瀏覽器窗口中打開鏈接。例如?<a href="https://www.baidu.com/" target="_blank">百度</a>?會在新窗口打開百度網站。

- ?<table>?標簽：

- 用于創建HTML表格，?<tr>?標簽定義表格中的行，?<td>?標簽定義表格中的單元格。例如：

?

<table>

? ? <tr>

? ? ? ? <td>aaa</td>

? ? ? ? <td>111</td>

? ? </tr>

? ? <tr>

? ? ? ? <td>bbb</td>

? ? ? ? <td>222</td>

? ? </tr>

? ? <tr>

? ? ? ? <td>ccc</td>

? ? ? ? <td>333</td>

? ? </tr>

</table>

?

- HTTP請求：

- 示例?http://127.0.0.1:8080/register?userName=zhangsan&password=123456?展示了一個GET請求的URL，其中???后面的部分是查詢字符串，用于向服務器傳遞參數，這里傳遞了用戶名?zhangsan?和密碼?123456?到?/register?路徑。

- ?<form>?標簽：

- 用于創建表單，用于收集用戶輸入的數據并提交到服務器。?action?屬性指定表單提交的目標URL，?method?屬性指定提交數據的HTTP方法（這里是?get?）。表單中可以包含各種表單元素，如文本框（?<input type="text">?）、密碼框（?<input type="password">?）和提交按鈕（?<input type="submit">?）。例如：

?

<form action="demo.html" method="get">

? ? 文本框：<input type="text" name="userName" id="userName"><br>

? ? 密碼框：<input type="password" name="password" id="password"><br>

? ? <input type="submit" value="提交">

</form>

?

- 塊級元素和行內元素：

- 塊級元素（如?div?、?p?、?h1?-?h6?等）會獨占一行，默認寬度為父元素的100%，可以設置寬高。

- 行內元素（如?span?、?a?、?input?等）不會獨占一行，多個行內元素可以在同一行顯示，寬高由內容決定，一般不能直接設置寬高。

- 列表：

- 無序列表（?<ul>?）：使用?<ul>?標簽定義，列表項使用?<li>?標簽，默認項目符號是圓點。例如：

?

<ul>

? ? <li>aaa</li>

? ? <li>bbb</li>

? ? <li>ccc</li>

</ul>

?

?

- 有序列表（?<ol>?）：

使用?<ol>?標簽定義，列表項使用?<li>?標簽，默認項目符號是數字。例如：

?

<ol>

? ? <li>aaa</li>

? ? <li>bbb</li>

? ? <li>ccc</li>

</ol>

?

?

二、CSS相關內容

?

- CSS選擇器：

- 標簽選擇器：通過HTML標簽名來選擇元素，例如?p?選擇所有?<p>?元素。

- 類選擇器：通過元素的?class?屬性來選擇元素，以?.?開頭，例如?.box?選擇所有?class="box"?的元素。

- ID選擇器：通過元素的?id?屬性來選擇元素，以?#?開頭，例如?#header?選擇?id="header"?的元素。

- 通配符選擇器：?*?選擇所有元素。

- 復合選擇器：由多個簡單選擇器組合而成，例如?div.box?選擇所有?class="box"?的?<div>?元素。

- 復合屬性：

- 以?border-width?為例，可以分別設置?border-top-width?（上邊框寬度）、?border-right-width?（右邊框寬度）、?border-bottom-width?（下邊框寬度）和?border-left-width?（左邊框寬度），也可以使用簡寫形式?border-width: 10px 5px 2px 1px;?，分別對應上、右、下、左四個方向的邊框寬度。

- 盒模型：

- ?margin?：外邊距，控制元素與其他元素之間的距離。

- ?padding?：內邊距，控制元素內容與元素邊框之間的距離。

- 示例中用學校和樓的關系形象地說明了內外邊距，學校到樓的距離可以類比為外邊距，樓內部的空間可以類比為內邊距。

- CSS樣式規則：

- 由選擇器和聲明塊組成，聲明塊包含在花括號?{}?中，每個聲明由屬性和值組成，以分號?;?結尾。例如：

?

p {

? ? color: blue;

}

?

?

這里?p?是選擇器，?color: blue;?是聲明，將所有?<p>?元素的文本顏色設置為藍色。

- 還可以通過外部樣式表（使用?<link rel="stylesheet" href="css.css">?引入）或內部樣式表（在?<style>?標簽內編寫CSS代碼）來應用樣式。

?

三、JavaScript和Java對比

?

- JavaScript：是一種動態類型的腳本語言，主要用于網頁的前端交互，例如表單驗證、動態內容更新等。它的變量類型在運行時確定，不需要提前聲明類型。

- Java：是一種靜態類型的編程語言，需要在編譯前聲明變量類型，具有嚴格的類型檢查，常用于后端開發、Android應用開發等。

?

?