前端小白零基礎入門HTML5+CSS3

• 第1章 課程導讀與電腦基本知識
• 1-1 學習路線
• 1-2 HTML簡介
• 1-3 網頁的相關概念
• 1-4 常用瀏覽器以及內核
• 1-5 web標準
• 第2章 HTML基本語法與結構
• 2-1 HTML標籤導讀
• 2-2 HTML語法規範
• 2-3 HTML基本結構標籤
• 2-4 VSCode工具建立頁面
• 2-5 DOCTYPE和lang以及字元集的作用
• 第3章 HTML標籤
• 3-1 標籤語義
• 3-2 標題標籤
• 3-3 段落標籤和換行標籤
• 3-4 體育新聞案例
• 3-5 文字格式化標籤
• 3-6 div和span標籤
• 3-7 圖像標籤（上）
• 3-8 圖像標籤（下）
• 3-9 圖像標籤注意點
• 第4章 相對路徑與絕對路徑
• 4-1 目錄資料夾和根目錄
• 4-2 相對路徑（上）
• 4-3 相對路徑（下）
• 4-4 絕對路徑
• 第5章 連結與錨點
• 5-1 連結標籤（上）
• 5-2 連結標籤（下）
• 5-3 錨點連結
• 5-4 註釋標籤和特殊字符
• 第6章 綜合案例
• 6-1 綜合案例（上）
• 6-2 綜合案例（下）
• 第7章 HTML表格
• 7-1 HTML標籤（下）導讀
• 7-2 表格標籤基本上使用
• 7-3 表頭單元格標籤
• 7-4 表格相關屬性（了解）
• 7-5 小說排行榜案例
• 7-6 表格結構標籤
• 7-7 合併儲存格
• 7-8 表格總結
• 第8章 HTML清單
• 8-1 無序列表
• 8-2 有序列表
• 8-3 自訂列表
• 8-4 列表總結
• 第9章 HTML表單
• 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章 綜合案例
• 10-1 註冊頁面（一）
• 10-2 註冊頁面（二）
• 10-3 註冊頁面（三）
• 10-4 註冊頁面（四）
• 10-5 學會查閱文檔
• 第11章 css層疊演示表簡介
• 11-1 CSS層疊樣式表導讀
• 11-2 CSS簡介
• 第12章 css語法規範與程式碼風格
• 12-1 體驗CSS文法規範
• 12-2 CSS程式碼風格
• 第13章 css選擇器
• 13-1 css選擇器的作用
• 13-2 標籤選擇器
• 13-3 類別選擇器
• 13-4 使用類別選擇器畫盒子
• 13-5 類別選擇器特殊使用-多類別名
• 13-6 id選擇器
• 13-7 通配符選擇器
• 第14章 css字體
• 14-1 font-family設定字體系列
• 14-2 font-size字號大小
• 14-3 font-weight字體粗細
• 14-4 font-style字體樣式
• 14-5 font複合屬性寫法
• 14-6 字體屬性總結
• 第15章 css文字
• 15-1 文字顏色color
• 15-2 文字對齊text-align
• 15-3 文字裝飾text-decoration
• 15-4 文字縮排text-indent
• 15-5 行間距line-height
• 15-6 css文字屬性總結
• 第16章 css樣式表
• 16-1 內部樣式表
• 16-2 行內樣式表
• 16-3 外部樣式表
• 16-4 css引入方式總結
• 第17章 綜合案例
• 17-1 新聞頁面
• 17-2 修改樣式（一）
• 17-3 修改樣式（二）
• 17-4 修改樣式（三）
• 17-5 chrome調試工具使用
• 第18章 emmet語法
• 18-1 css第二天導讀
• 18-2 emmet語法產生html標籤
• 18-3 emmet語法快速產生css樣式
• 18-4 快速格式化程式碼
• 第19章 複合選擇器
• 19-1 複合選擇器簡介
• 19-2 後代選擇器
• 19-3 子元素選擇器
• 19-4 課堂練習
• 19-5 並集選擇器
• 19-6 連結偽類選擇器（上）
• 19-7 連結偽類選擇器（下）
• 19-8 focus偽類選擇器
• 19-9 複合選擇器總結
• 第20章 元素顯示模式
• 20-1 什麼是元素顯示模式
• 20-2 塊元素
• 20-3 行內元素
• 20-4 行內塊元素
• 20-5 元素顯示模式總結
• 20-6 顯示模式的轉換
• 第21章 側邊欄小案例
• 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章 CSS三大特性
• 22-1 層疊性
• 22-2 繼承性
• 22-3 行高的繼承
• 22-4 優先權
• 22-5 優先註意的問題
• 22-6 CSS權重的疊加
• 22-7 權重兩個練習題
• 第23章 盒子模型
• 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章 綜合案例
• 24-1 ps的基本操作
• 24-2 綜合案例-產品模組佈局分析
• 24-3 綜合案例-box佈局
• 24-4 綜合案例-圖片和段落製作
• 24-5 綜合案例-評估與詳情製作
• 24-6 綜合案例-垂直線細節製作
• 24-7 老師解惑
• 24-8 快報模組佈局分析
• 24-9 快報模組頭部製作
• 24-10 快報模組列表製作
• 第25章 圓角邊框
• 25-1 圓角邊框原理
• 25-2 圓角邊框的使用
• 第26章 陰影
• 26-1 盒子陰影
• 26-2 文字陰影
• 第27章 浮動
• 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章 清除浮動
• 28-1 為什麼清除浮動
• 28-2 清除浮動本質以及額外標籤法
• 28-3 清除浮動之父元素overflow
• 28-4 清除浮動之after偽元素
• 28-5 清除浮動之雙偽元素
• 28-6 清除浮動
• 第29章 ps切圖
• 29-1 常見的圖片格式
• 29-2 圖層切圖（上）
• 29-3 圖層切圖（下）
• 29-4 切片工具
• 29-5 cutterman安裝
• 29-6 cutterman使用技巧
• 第30章 學成線上案例
• 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章 定位
• 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章 淘寶焦點圖
• 32-1 佈局分析
• 32-2 大盒子製作
• 32-3 左側箭頭按鈕製作
• 32-4 右側箭頭按鈕製作
• 32-5 ul盒子模組製作
• 32-6 li小圓點模組製作
• 32-7 網頁佈局總結
• 第33章 馬鈴薯案例
• 33-1 display顯示隱藏元素
• 33-2 visibility顯示隱藏元素
• 33-3 overflow溢出顯示隱藏
• 33-4 馬鈴薯案例（上）
• 33-5 馬鈴薯案例（下）
• 第34章 CSS進階技巧
• 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章 HTML5新增
• 35-1 HTML5CSS3提高導讀
• 35-2 新增語義化標籤
• 35-3 新增影片標籤
• 35-4 新增音訊標籤
• 35-5 新增input表單
• 35-6 新增表單屬性
• 第36章 CSS3新增
• 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章 品優購項目
• 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 申請免費空間以及網站上傳