項目1 初識前端開發
任務1.1 安裝配置前端開發環境
1.1.1 Web基礎
1.1.2 Web標準
1.1.3 主流瀏覽器
1.1.4 前端開發工具
[實戰記錄活頁手冊]
[學生活動手冊]
任務1.2 利用VSCode快速建立「我的第一個網頁」
1.2.1 認識網頁
1.2.2 規劃網站目錄
[實戰記錄活頁手冊]
[學生活動手冊]
思政引領
項目2 網頁框架HTML
任務2.1 使用HTML搭建導航欄及banner結構
2.1.1 HTML簡介
2.1.2 HTML發展歷史
2.1.3 HTML文檔結構
2.1.4 HTML語法
2.1.5 標題標籤
2.1.6 段落標籤
2.1.7 圖像標籤
2.1.8 超鏈接標籤
2.1.9
和標籤
[實戰記錄活頁手冊]
[學生活動手冊]
[學生活動手冊]
任務2.2 網頁進階標籤的使用
2.2.1 文本格式化標籤
2.2.2 列表標籤
2.2.3 音頻標籤
2.2.4 視頻標籤
[實戰記錄活頁手冊]
[學生活動手冊]
任務2.3 了解HTML表格
2.3.1 表格的作用
2.3.2 表格標籤
[實戰記錄活頁手冊]
[學生活動手冊]
思政引領
項目3 網頁樣式CSS
任務3.1 認識CSS
3.1.1 CSS簡介
3.1.2 CSS發展歷史
3.1.3 CSS的使用方式
3.1.4 CSS基本語法
[實戰記錄活頁手冊]
[學生活動手冊]
任務3.2 修改網頁文字樣式
3.2.1 文字大小
3.2.2 文字加粗
3.2.3 文字樣式
3.2.4 行高
[實戰記錄活頁手冊]
[學生活動手冊]
任務3.3 改變網頁文本樣式
3.3.1 文本顏色
3.3.2 文本對齊
3.3.3 文本修飾
3.3.4 文本縮進
3.3.5 CSS 3新增文本屬性
[實戰記錄活頁手冊]
[學生活動手冊]
思政引領
項目4 網頁樣式CSS進階
任務4.1 CSS盒模型應用
4.1.1 認識盒模型
4.1.2 寬度屬性和高度屬性
4.1.3 邊框屬性
4.1.4 圓角屬性
4.1.5 內邊距
4.1.6 外邊距
4.1.7 背景,
[實戰記錄活頁手冊]
[學生活動手冊]
任務4.2 清除瀏覽器默認樣式,
4.2.1 瀏覽器常見默認祥式
4.2.2 清除瀏覽器默認樣式的方法
4.2.3 reset.css和normalize.css的區別
[實戰記錄活頁手冊]
[學生活動手冊]
任務4.3 定位技巧,
4.3.1 元素的定位屬性
4.3.2 相對定位
4.3.3 絕對定位
4.3.4 固定定位
4.3.5 粘性定位
[實戰記錄活頁手冊
[學生活動手冊]
任務4.4 登錄頁面布局
4.4.1 表單的作用
4.4.2 創建表單
4.4.3 標籤
4.4.4 標籤的不同類型
4.4.5 下拉框
4.4.6 文本域
4.4.7 按鈕
4.4.8 偽類
[實戰記錄活頁手冊]
[學生活動手冊]
思政引領
項目5 CSS 3高級應用
任務5.1 網頁布局
5.1.1 常見的網頁布局
5.1.2 彈性盒子布局
5.1.3 網格布局
[實戰記錄活頁手冊]
[學生活動手冊]
任務5.2 網頁過渡和動畫效果
5.2.1 過渡屬性
5.2.2 轉換屬性
5.2.3 動畫屬性
[實戰記錄活頁手冊]
[學生活動手冊]
思政引領
項目6 移動端網頁開發
任務6.1 移動端布局
6.1.1 移動端適配
6.1.2 視口
6.1.3 viewport方案
[實戰記錄活頁手冊]
[學生活動手冊]
任務6.2 移動端網站開發
6.2.1 設備模擬模式
6.2.2 進入設備模擬模式
[實戰記錄活頁手冊]
[學生活動手冊]
思政引領
擴展 前端開發知識延伸
知識點1 Web網頁優化的基本原則
知識點2 樣式合併與壓縮
知識點3 兼容性解決方案
知識點4 高效的開發設計協作平台