一、前言\n網(wǎng)頁設(shè)計(jì)與制作是前端開發(fā)的基礎(chǔ)技能，掌握HTML、CSS和JavaScript的核心用法，能夠快速搭建結(jié)構(gòu)清晰、樣式美觀、交互流暢的網(wǎng)頁。本教程以“響應(yīng)式導(dǎo)航欄”為實(shí)例，循序漸進(jìn)地講解HTML結(jié)構(gòu)、CSS樣式、響應(yīng)式布局與簡單的交互實(shí)現(xiàn)，適合初學(xué)者跟隨練習(xí)。\n\n## 二、實(shí)例目標(biāo)\n- 掌握HTML語義化標(biāo)簽組織頁面頭部與導(dǎo)航。\n- 學(xué)會(huì)使用Flexbox完成導(dǎo)航欄的橫向布局。\n- 使用媒體查詢實(shí)現(xiàn)移動(dòng)端自適應(yīng)菜單（漢堡按鈕）。\n- 用少量JavaScript實(shí)現(xiàn)菜單的展開與收起。\n- 理解基礎(chǔ)可訪問性（停用菜單tab順序等）。\n\n## 三、準(zhǔn)備工作\n- 編輯器：VS Code或任何文本編輯器。\n- 瀏覽器：Chrome/Edge用于調(diào)試預(yù)覽。\n- 創(chuàng)建項(xiàng)目文件夾nav-demo，包含三個(gè)文件：index.html、style.css、script.js。\n- 準(zhǔn)備一張圖標(biāo)（漢堡按鈕可用CSS繪制或字符，例如三級(jí)菜單可用三條橫線）。\n\n## 四、步驟實(shí)操\n\n### 1. HTML結(jié)構(gòu)：語義化搭建頁面\n先寫導(dǎo)航結(jié)構(gòu)：使用 <header> 包裹整體，內(nèi)部有品牌名與導(dǎo)航菜單；移動(dòng)端的漢堡按鈕使用 <button> 并帶有 aria-label。\n\n`html\n