1-1 學習路線

1-2 HTML簡介

1-3 網頁的相關概念

1-4 常用瀏覽器以及內核

1-5 web標準

2-1 HTML標籤導讀

2-2 HTML語法規範

2-3 HTML基本結構標籤

2-4 VSCode工具建立頁面

2-5 DOCTYPE和lang以及字元集的作用

3-1 標籤語義

3-2 標題標籤

3-3 段落標籤和換行標籤

3-4 體育新聞案例

3-5 文字格式化標籤

3-6 div和span標籤

3-7 圖像標籤（上）

3-8 圖像標籤（下）

3-9 圖像標籤注意點

4-1 目錄資料夾和根目錄

4-2 相對路徑（上）

4-3 相對路徑（下）

4-4 絕對路徑

5-1 連結標籤（上）

5-2 連結標籤（下）

5-3 錨點連結

5-4 註釋標籤和特殊字符

6-1 綜合案例（上）

6-2 綜合案例（下）

7-1 HTML標籤（下）導讀

7-2 表格標籤基本上使用

7-3 表頭單元格標籤

7-4 表格相關屬性（了解）

7-5 小說排行榜案例

7-6 表格結構標籤

7-7 合併儲存格

7-8 表格總結

8-1 無序列表

8-2 有序列表

8-3 自訂列表

8-4 列表總結

9-1 表單使用場景以及分類

9-2 表單域

9-3 input之type屬性文字方塊與密碼框

9-4 input之type屬性單選按鈕與複選框

9-5 input之name和value屬性

9-6 input之checked和maxlength屬性

9-7 input表單元素四個屬性使用場景課堂問答

9-8 input之type屬性提交與重置按鈕

9-9 input之type屬性普通按鈕與檔案域

9-10 label標籤

9-11 select下拉表單

9-12 textarea文字域標籤

9-13 表單元素幾點總結

10-1 註冊頁面（一）

10-2 註冊頁面（二）

10-3 註冊頁面（三）

10-4 註冊頁面（四）

10-5 學會查閱文檔

11-1 CSS層疊樣式表導讀

11-2 CSS簡介

12-1 體驗CSS文法規範

12-2 CSS程式碼風格

13-1 css選擇器的作用

13-2 標籤選擇器

13-3 類別選擇器

13-4 使用類別選擇器畫盒子

13-5 類別選擇器特殊使用-多類別名

13-6 id選擇器

13-7 通配符選擇器

14-1 font-family設定字體系列

14-2 font-size字號大小

14-3 font-weight字體粗細

14-4 font-style字體樣式

14-5 font複合屬性寫法

14-6 字體屬性總結

15-1 文字顏色color

15-2 文字對齊text-align

15-3 文字裝飾text-decoration

15-4 文字縮排text-indent

15-5 行間距line-height

15-6 css文字屬性總結

16-1 內部樣式表

16-2 行內樣式表

16-3 外部樣式表

16-4 css引入方式總結

17-1 新聞頁面

17-2 修改樣式（一）

17-3 修改樣式（二）

17-4 修改樣式（三）

17-5 chrome調試工具使用

18-1 css第二天導讀

18-2 emmet語法產生html標籤

18-3 emmet語法快速產生css樣式

18-4 快速格式化程式碼

19-1 複合選擇器簡介

19-2 後代選擇器

19-3 子元素選擇器

19-4 課堂練習

19-5 並集選擇器

19-6 連結偽類選擇器（上）

19-7 連結偽類選擇器（下）

19-8 focus偽類選擇器

19-9 複合選擇器總結

20-1 什麼是元素顯示模式

20-2 塊元素

20-3 行內元素

20-4 行內塊元素

20-5 元素顯示模式總結

20-6 顯示模式的轉換

21-1 一個小工具snipaste的使用

21-2 簡潔版小米側邊欄案例

21-3 單行文字垂直居中的原理

21-4 背景顏色

21-5 背景圖片

21-6 背景平鋪

21-7 背景位置-方位名詞

21-8 背景位置案例一

21-9 背景位置案例二-王者榮耀背景圖片

21-10 背景位置-精確單位

21-11 背景位置-混合單位

21-12 背景固定

21-13 背景屬性複合寫法

21-14 背景顏色半透明

21-15 背景總結

21-16 綜合案例五彩導航（上）

21-17 綜合案例五彩導航（二）

22-1 層疊性

22-2 繼承性

22-3 行高的繼承

22-4 優先權

22-5 優先註意的問題

22-6 CSS權重的疊加

22-7 權重兩個練習題

23-1 盒子模型導讀

23-2 看透網頁佈局本質

23-3 盒子模型組成部分

23-4 盒子模型邊框border

23-5 邊框的複合寫法

23-6 表格細線邊框

23-7 邊框會影響盒子實際大小

23-8 盒子模型內邊距padding

23-9 padding複合屬性

23-10 padding會影響盒子實際大小

23-11 padding應用程式-新浪導覽列（上）

23-12 padding應用程式-新浪導航（下）

23-13 小米側邊欄修改

23-14 padding不會撐開盒子的情況

23-15 盒子模型外邊距margin

23-16 外邊距典型應用--塊級盒子水平居中對齊

23-17 行內元素和行內塊元素水平居中

23-18 外邊距合併-相鄰塊元素垂直外邊距

23-19 外邊距合併-巢狀區塊元素塌陷

23-20 清除內外邊距

24-1 ps的基本操作

24-2 綜合案例-產品模組佈局分析

24-3 綜合案例-box佈局

24-4 綜合案例-圖片和段落製作

24-5 綜合案例-評估與詳情製作

24-6 綜合案例-垂直線細節製作

24-7 老師解惑

24-8 快報模組佈局分析

24-9 快報模組頭部製作

24-10 快報模組列表製作

25-1 圓角邊框原理

25-2 圓角邊框的使用

26-1 盒子陰影

26-2 文字陰影

27-1 浮動導讀

27-2 傳統網頁版面三種方式

27-3 為什麼需要浮動

27-4 什麼是浮動

27-5 浮動特性-脫標

27-6 浮動特性-浮動元素一行顯示

27-7 浮動特性-浮動元素具有行內塊特性

27-8 浮動元素經常搭配標準流的父元素

27-9 浮動版面練習-1

27-10 浮動版面練習-2

27-11 浮動練習-手機模組（上）

27-12 浮動練習-手機模組（下）

27-13 常見的網頁佈局

27-14 浮動的兩個注意點

28-1 為什麼清除浮動

28-2 清除浮動本質以及額外標籤法

28-3 清除浮動之父元素overflow

28-4 清除浮動之after偽元素

28-5 清除浮動之雙偽元素

28-6 清除浮動

29-1 常見的圖片格式

29-2 圖層切圖（上）

29-3 圖層切圖（下）

29-4 切片工具

29-5 cutterman安裝

29-6 cutterman使用技巧

30-1 準備工作

30-2 css屬性書寫順序（重要）

30-3 頁面佈局整體思路

30-4 header區域製作

30-5 logo區域製作

30-6 導覽列nav區域製作（上）

30-7 導覽列nav區域製作（中）

30-8 導覽列nav區域製作（下）

30-9 搜尋search模組input製作

30-10 搜尋search模組button製作

30-11 使用者user模組製作

30-12 banner模組製作

30-13 subnav模組製作（上）

30-14 subnav模組製作（下）

30-15 course模組製作（上）

30-16 course模組製作（中）

30-17 course模組製作（下）

30-18 精品推薦模組（上）

30-19 精品推薦模組（中）

30-20 精品推薦模組（下）

30-21 box-hd模組製作

30-22 box-bd模組製作

30-23 box模組完成

30-24 footer模組製作

30-25 copyright模組製作

30-26 links模組製作

31-1 定位導讀

31-2 為什麼需要定位

31-3 定位組成

31-4 相對定位

31-5 絕對定位-沒有父級或父級無定位狀況

31-6 絕對定位-父級有定位狀況

31-7 絕對定位脫標的不佔有原來位置

31-8 子絕父相的由來

31-9 子絕父相案例-hot模組

31-10 固定定位

31-11 固定定位小技巧-固定到版心右側

31-12 黏性定位（了解）

31-13 定位總結

31-14 定位的疊放順序

31-15 絕對定位的盒子居中演算法

31-16 定位的特殊特性

31-17 浮動元素不會壓住標準流的文字定位會

32-1 佈局分析

32-2 大盒子製作

32-3 左側箭頭按鈕製作

32-4 右側箭頭按鈕製作

32-5 ul盒子模組製作

32-6 li小圓點模組製作

32-7 網頁佈局總結

33-1 display顯示隱藏元素

33-2 visibility顯示隱藏元素

33-3 overflow溢出顯示隱藏

33-4 馬鈴薯案例（上）

33-5 馬鈴薯案例（下）

34-1 導讀

34-2 為什麼需要精靈技術

34-3 精靈圖使用（原理）

34-4 精靈圖使用（程式碼）

34-5 精靈圖案例-拼出自己名字

34-6 字體圖示產生和優點

34-7 字型圖示下載

34-8 字體圖示的使用

34-9 字體圖示的追加與載入原理

34-10 CSS三角的做法

34-11 CSS三角應用-京東效果

34-12 使用者介面-滑鼠樣式

34-13 使用者介面-取消表單輪廓和防止拖曳文字域

34-14 vertical-align實作行內塊和文字垂直居中對齊

34-15 圖片底側空白縫隙解決方案

34-16 單行文字溢出省略號顯示

34-17 多行文字溢位省略號顯示

34-18 版面技巧-margin負值巧妙運用（上）

34-19 版面技巧-margin負值巧妙運用（下）

34-20 版面技巧-文字圍繞著浮動元素巧妙運用

34-21 佈局技巧-行內塊的巧妙運用

34-22 佈局技巧-CSS三角形巧妙運用（上）

34-23 佈局技巧-CSS三角形巧妙運用（下）

34-24 CSS初始化

35-1 HTML5CSS3提高導讀

35-2 新增語義化標籤

35-3 新增影片標籤

35-4 新增音訊標籤

35-5 新增input表單

35-6 新增表單屬性

36-1 屬性選擇器（上）

36-2 屬性選擇器（下）

36-3 結構偽類選擇器-選擇第n個元素

36-4 nth-child選擇器（上）

36-5 nth-child選擇器（下）

36-6 nth-child和nth-of-type的區別

36-7 偽元素選擇器使用場景和由來

36-8 偽元素選擇器基本使用

36-9 偽元素選擇器使用場景-配合字體圖標

36-10 偽元素使用場景-仿馬鈴薯效果

36-11 偽元素選擇器-偽元素清除浮動本質

36-12 CSS3盒子模型border-box

36-13 CSS3圖片模糊處理

36-14 計算盒子寬度calc函數

36-15 CSS3新增屬性轉場（上）

36-16 CSS3新增屬性轉換（下）

36-17 CSS3過渡練習

36-18 廣義的H5（了解）

37-1 導讀

37-2 網站製作流程

37-3 品優購項目規劃

37-4 品優購項目搭建

37-5 品優購項目-樣式的模組化開發

37-6 品優購項目-favicon圖示製作

37-7 品優購項目-TDK三大標籤SEO優化

37-8 品優購首頁-快捷導航shortcut結構搭建

37-9 品優購首頁-快捷導航左側製作

37-10 品優購首頁-快捷導航右側搭建

37-11 品優購首頁-快速導航右側字體圖標

37-12 品優購首頁-header頭部模組搭建

37-13 品優購首頁-logoSEO優化（上）

37-14 品優購首頁-logoSEO優化（下）

37-15 品優購首頁-search搜尋模組（上）

37-16 品優購首頁-search搜尋模組（下）

37-17 品優購首頁-hotwords熱詞模組

37-18 品優購首頁-shopcar模組製作

37-19 品優購首頁-count購物車統計模組

37-20 品優購首頁-nav導覽模組搭建

37-21 品優購首頁-dropdown模組製作

37-22 品優購首頁-導覽詳細分類製作（上）

37-23 品優購首頁-導覽詳細分類製作（下）

37-24 品優購首頁-navitems模組製作

37-25 品優購首頁-footer底部模組搭建

37-26 品優購首頁-mod-servecie模組製作（上）

37-27 品優購首頁-mod-servecie模組製作（下）

37-28 品優購首頁-mod_help模組製作

37-29 品優購首頁-mod_copyright模組製作

37-30 品優購首頁-main主體盒子搭建

37-31 品優購首頁-newsflash模組

37-32 品優購首頁-news-hd模組製作

37-33 品優購首頁-new-bd模組製作

37-34 優質購首頁-lifeservice製作（上）

37-35 品優購首頁-lifeservice製作（下）

37-36 品優購首頁-推薦模組recom（上）

37-37 品優購首頁-推薦模組recom（下）

37-38 品優購首頁-家用電器模組搭建

37-39 品優購首頁-家用電器模組頭部製作

37-40 tab欄選項卡原理佈局需求

37-41 品優購首頁-tab_list-item佈局（上）

37-42 品優購首頁-tab_list-item佈局（中）

37-43 品優購首頁-tab_list-item佈局（下）

37-44 品優購清單-結構搭建

37-45 品優購清單頁-秒殺模組製作

37-46 品優購清單頁-導覽模組修改

37-47 品優購列表頁-一個小問題

37-48 品優購清單頁-結束

37-49 品優購註冊頁-header製作

37-50 品優購清單頁-註冊主體模組頭部製作

37-51 品優購註冊頁-註冊主體製作（上）

37-52 品優購註冊頁-註冊主體製作（下）

37-53 品優購註冊頁-安全程度模組

37-54 品優購註冊頁-同意模組和完成註冊模組

37-55 品優購項目頁面相互跳轉以及作業安排

37-56 什麼是伺服器

37-57 申請免費空間以及網站上傳