一、HTML 布局標簽（含 H5 語義化標簽）
傳統布局多使用div標簽，H5 新增語義化標簽增強可讀性：
核心知識點
header：替代div#header，用于頁面頭部（如標題、導航）。footer：替代div#footer，用于頁面底部（如版權信息）。main：替代div#main，用于主要內容區域。nav：替代div#nav，用于導航區域（如菜單）。section：替代普通div，用于獨立區塊（如章節）。article：替代普通div，用于獨立內容（如文章）。aside：替代普通div，多用于側邊欄或廣告位。
代碼實例
<!-- 傳統div布局 -->
<div id="header">網站標題</div>
<div id="nav">導航菜單</div>
<div id="main">主要內容</div>
<div id="aside">側邊廣告</div>
<div id="footer">?2024 版權所有</div><!-- H5語義化布局 -->
<header>網站標題</header>
<nav>導航菜單</nav>
<main>主要內容</main>
<aside>側邊廣告</aside>
<footer>?2024 版權所有</footer>
二、表單（form）及相關元素
表單用于向服務器提交數據，包含核心標簽和屬性：
核心知識點
form 標簽屬性：
action：服務器地址（如https://www.baidu.com）。method：提交方式（GET默認，推薦POST）。enctype：數據格式（application/x-www-form-urlencoded默認，multipart/form-data用于文件上傳）。
label 標簽：行內元素，用于解釋表單元素（可選
for屬性關聯表單元素id）。常見表單元素：
input：通過type改變類型（文本、密碼、單選、復選等）。textarea：多行文本輸入框。select：下拉列表（配合option和optgroup）。
代碼實例
<form action="https://www.baidu.com" method="post" enctype="multipart/form-data"><!-- 文本輸入框 --><p><label for="username">用戶名:</label><input type="text" id="username" name="username" placeholder="請輸入用戶名" required></p><!-- 密碼框 --><p><label for="password">密碼:</label><input type="password" id="password" name="password" required></p><!-- 單選框（互斥需相同name） --><p><label>性別:</label><input type="radio" name="gender" value="m" checked>男<input type="radio" name="gender" value="w">女</p><!-- 下拉列表 --><p><label>學歷:</label><select name="xl"><option value="高中">高中</option><option value="本科" selected>本科</option></select></p><!-- 復選框 --><p><label>愛好:</label><input type="checkbox" name="hobby" value="游泳">游泳<input type="checkbox" name="hobby" value="吃飯" checked>吃飯</p><!-- 文件上傳（需配合post和multipart/form-data） --><p><label>上傳頭像:</label><input type="file" name="head_png" accept="image/jpeg/png"></p><!-- 多行文本 --><p><label>個人簡介:</label><textarea name="intro" rows="3" cols="30"></textarea></p><!-- 按鈕 --><p><input type="submit" value="注冊"><input type="reset" value="重置"></p>
</form>
三、多媒體標簽
用于在網頁中嵌入音頻和視頻：
核心知識點
audio：音頻播放器，屬性包括src（路徑）、controls（顯示控制欄）、loop（循環）。video：視頻播放器，屬性類似audio，額外支持width/height設置尺寸。
代碼實例
<!-- 音頻播放器 -->
<audio src="music.mp3" controls loop>您的瀏覽器不支持音頻播放
</audio><!-- 視頻播放器 -->
<video src="video.mp4" controls width="500" height="300">您的瀏覽器不支持視頻播放
</video>
四、CSS 基礎（層疊樣式表）
用于美化網頁，包括引入方式、選擇器和樣式屬性：
核心知識點
引入方式：
- 行內樣式：標簽內
style屬性（如<p style="color: red;">）。 - 內聯樣式：
<head>中用<style>標簽定義。 - 外聯樣式：通過
<link>引入外部.css文件。
- 行內樣式：標簽內
選擇器：
- 通用選擇器：
*（選中所有元素）。 - 標簽選擇器：標簽名（如
p）。 - ID 選擇器：
#id值（如#app）。 - 類選擇器：
.class值（如.p1）。 - 后代選擇器：
選擇器1 選擇器2（如#app a）。
- 通用選擇器：
常用樣式：字體（
font-*）、顏色（color）、背景（background-*）等。
代碼實例
<!-- 行內樣式 -->
<p style="color: white; background-color: red; font-size: 20px;">行內樣式示例</p><!-- 內聯樣式 -->
<style>/* 通用選擇器：初始化樣式 */* {margin: 0;padding: 0;}/* 類選擇器：復用樣式 */.p1 {width: 500px;height: 50px;background-color: red;color: white;}/* 后代選擇器：選中#app內的a標簽 */#app a {color: blue;text-decoration: none; /* 去掉下劃線 */}
</style><!-- 應用內聯樣式 -->
<p class="p1">類選擇器示例1</p>
<p class="p1">類選擇器示例2</p><div id="app"><a href="#">后代選擇器示例</a>
</div><!-- 外聯樣式引入（需提前創建style.css文件） -->
<link rel="stylesheet" href="style.css" type="text/css">
五、其他實用細節
- 超鏈接
<a>：默認帶下劃線，可通過text-decoration: none去除。 - 列表（
ul/ol）：默認帶符號，可通過list-style: none去除。 - 單選框 / 復選框：需設置
name屬性（單選框name相同實現互斥）。 - 文件上傳：必須設置
form的method="POST"和enctype="multipart/form-data"。
一、CSS 樣式設置題（h1 標簽樣式）
題目要求
為標題<h1>設置以下樣式：
- 字體大小：32px
- 字體顏色：#333
- 字體家族：Arial，sans-serif
- 行高：1.5
- 字體加粗
答案分析
<style>h1{font-size: 32px;color: #333;font-family: Arial, sans-serif;line-height: 1.5;font-weight:600; }
</style>
知識點總結
- 字體大小：使用
font-size屬性，單位 px - 字體顏色：使用
color屬性，支持十六進制值（#333） - 字體家族：
font-family可指定多個字體，用逗號分隔，優先級從左到右 - 行高：
line-height設置行間距，1.5 表示當前字體大小的 1.5 倍 - 字體加粗：
font-weight可用數值（400 正常，600-700 加粗）或關鍵詞（bold）
二、CSS 類選擇器樣式設置
題目要求
為.text-example類設置：
- 字體：Times New Roman（優先），其次 Georgia
- 字體大小：18px
- 行高：1.8
答案分析
<style>.text-example{font-family: 'Times New Roman',Georgia;font-size: 18px;line-height: 1.8;}
</style>
知識點總結
- 類選擇器：使用
.類名定義樣式，可復用在多個元素 - 字體聲明：帶空格的字體名稱需要用引號包裹（如 'Times New Roman'）
- 字體備選機制：當第一個字體不可用時，自動使用后面的備選字體
- 行高單位：未指定單位時，是相對于當前元素的字體大小的倍數
三、注冊頁面編寫
題目要求
創建包含以下信息的注冊頁面：
- 用戶名、密碼、確認密碼
- 郵箱、手機號、出生日期
- 用戶頭像（文件上傳）
- 性別（單選）、愛好（多選）
- 個人介紹（多行文本）
答案分析
<table cellspacing="0"><caption>注冊</caption><!-- 表單項內容 -->
</table>
優點
- 使用表格
<table>進行布局，使表單元素排列整齊 - 正確使用了各種表單控件類型：
- 文本輸入框（用戶名、手機號）
- 密碼框（密碼、確認密碼）
- 郵箱輸入框（type="email"）
- 日期選擇框（type="date"）
- 文件上傳框（type="file"）
- 單選按鈕（性別）
- 復選框（愛好）
- 文本域（個人介紹）
- 為單選按鈕設置了相同的
name屬性，實現互斥效果 - 使用
checked屬性設置默認選中項
可改進點
- 建議使用
<form>標簽包裹所有表單項，便于數據提交 - 可添加
required屬性實現基本表單驗證 - 密碼框可添加
placeholder提示文本 - 手機號可使用
type="tel"類型 - 表格布局在響應式設計中不夠靈活，可考慮使用 CSS 布局
四、登錄頁面編寫
題目要求
創建包含以下元素的登錄頁面：
- 用戶名輸入框
- 密碼輸入框
- "記住我" 復選框
- 登錄按鈕
答案分析
<table><caption>登錄</caption><!-- 表單項內容 -->
</table>
優點
- 使用表格布局使表單整齊有序
- 正確使用了
<caption>標簽設置表單標題 - 使用
colspan="2"使按鈕和復選框跨列顯示 - 包含了登錄功能所需的核心元素
可改進點
- 建議添加
<form>標簽，并設置action和method屬性 - 輸入框可添加
placeholder提示文本 - 登錄按鈕建議使用
type="submit" - "記住我" 復選框可添加關聯的
<label>標簽 - 可添加 "忘記密碼" 等輔助鏈接
總結
- CSS 基礎語法與選擇器使用
- 字體相關樣式屬性的應用
- 表單元素的正確使用與屬性設置
- 基本頁面布局能力（表格布局）
技術支持高速串行數據傳輸，支持1080p/60Hz高分辨率傳輸)
 ——通用端口)
=＞UAC+STM32 ADC+PWM實現錄音和播放)
)
)
