html

第一章 ：HTML模板

• HTML是什麽（超文本標記語言）
• HTML網頁主體結構
• doctype標簽
• head標簽
• meat標簽
• title標簽
• body標簽

第二章：HTML標題

• h1標題標簽
• h2標題標簽
• h3標題標簽
• h4標題標簽
• h5標題標簽
• h6標題標簽
• hr水平線標簽

第三章：HTML 段落

• p段落標簽
• br換行標簽

第四章：HTML 樣式

• center定義居中內容
• font和basefont定義HTML字體
• s和strike定義刪除線文本
• u定義下劃線文本

第五章：HTML格式化

• b定義粗體文本
• big定義大號字
• em定義著重文本
• i定義斜體字
• small定義小號字
• strong定義加重語氣
• sub定義下標字
• sup定義上標字
• ins定義插入字
• del定義刪除字

第六章：HTML CSS

• style定義樣式定義
• link定義資源引用
• div盒子模型
• span定義文本區域

第七章：鏈接

• a超鏈接標簽

第八章：HTML圖像

• img插入圖片標簽
• map定義圖像地圖
• area定義圖像地圖中的可點擊區域

第九章：HTML表格

• table定義表格
• caption定義表格標題
• th定義表格的表頭
• tr定義表格的行
• thead定義表格的頁眉
• tbody定義表格的主體
• tfoot定義表格的頁腳
• col定義用於表格列的屬性

第十章：HTML列表

• ul無序列表
• li列表項
• ol有序列表
• dl定義列表
• dd定義的描述

css

第一章 ：認識CSS

• CSS的作用
• CSS的位置及關系
• CSS如何引入

第二章：CSS基礎語法

• CSS語法結構
• CSS選擇器初步認識
• CSS聲明、屬性、值

第三章：CSS高級語法

• CSS選擇器分組
• CSS繼承及其問題

第四章：CSS ID選擇器

• 什麽是ID選擇器
• ID選擇器權重問題
• ID選擇器常用在什麽地方

第五章：CSS類選擇器

• 什麽是類(class)選擇器
• ID選擇器和類選擇器的對比
• 類選擇器常用在什麽地方

第六章：CSS屬性選擇器

• 屬性選擇器
• 值選擇器
• 多個值選擇器

第七章：CSS背景樣式

• background背景復合樣式
• Background-color背景顏色
• Background-image背景圖片
• Background-position背景定位
• Background-repeat背景是否平鋪
• Background-attachment背景圖像是否固定

第八章：CSS文本

• Color設置顏色
• Direction設置文本方向
• Line-height設置行高
• Letter-spacing設置字符間距
• Text-align文本居中對齊
• Text-decoration文本添加修飾
• Text-indent首行縮進
• Text-shadow文本陰影
• Text-transform控制元素中的字母
• White-space設置元素中空白的處理方式
• Word-spacing設置字間距

第九章：CSS字體

• Font添加文字樣式
• Font-family設置字體
• Font-size設置字體大小
• Font-weight設置字體粗細
• Font-variant以小型大寫字體
• Font-style設置字體風格
• Font-stretch對字體進行水平拉伸

第十章：CSS列表

• List-style設置列表所有屬性 list-style:none：列表樣式：無
• List-style-image將圖像設置為列表項標誌
• List-style-position設置列表中列表項標誌位置
• List-style-type設置列表項標誌類型

第十一章：CSS表格

• Border-collapse設置是否把表格邊框合並為單一的邊框
• Border-spacing設置分隔單元格邊框的距離
• Caption-side設置表格標題的位置
• Empty-cells設置是否顯示表格中的空單元格
• Table-layout設置顯示單元、行和列的算法

第十二章：CSS輪廓

• Outline設置所有輪廓屬性
• Outline-color設置輪廓顏色
• Outline-style設置輪廓樣式
• Outline-width設置輪廓寬度

第十三章：CSS內邊距

• Padding內邊距及後邊值
• Padding-bottom下內邊距
• Padding-left左內邊距
• Padding-right右內邊距
• Padding-top上內邊距

第十四章：CSS外邊距

• Margin外邊距及後邊值
• Margin-bottom下外邊距
• Margin-left左外邊距
• Margin-right右外邊距
• Margin-top上外邊距

第十五章：CSS邊框

• border簡寫屬性，用於把針對四個邊的屬性設置在一個聲明
• border-style用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式
• border-width 簡寫屬性，用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度
• border-color簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色
• border-bottom簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中
• border-bottom-color設置元素的下邊框的顏色
• border-bottom-style設置元素的下邊框的樣式
• border-bottom-width設置元素的下邊框的寬度
• border-left簡寫屬性，用於把左邊框的所有屬性設置到一個聲明中
• border-left-color設置元素的左邊框的顏色
• border-left-style設置元素的左邊框的樣式
• border-left-width設置元素的左邊框的寬度
• border-right簡寫屬性，用於把右邊框的所有屬性設置到一個聲明中
• border-right-color設置元素的右邊框的顏色
• border-left-style設置元素的右邊框的樣式
• border-left-width設置元素的右邊框的寬度
• border-top簡寫屬性，用於把上邊框的所有屬性設置到一個聲明中
• border-top-color設置元素的上邊框的顏色
• border-top-style設置元素的上邊框的樣式
• border-top-width設置元素的上邊框的寬度

第十六章：外邊距合並問題

第十七章：CSS定位

• CSS定位概述
• CSS相對定位
• CSS絕對定位
• CSS固定定位

第十八章：浮動

• Float浮動及文檔流概念
• Float清除浮動的幾種方法
• Float和定位的區分用法

第十九章：CSS選擇器

• CSS元素選擇器
• CSS選擇器分組
• CSS後代選擇器
• CSS子元素選擇器
• CSS相鄰兄弟選擇器
• CSS偽類選擇器
• CSS偽元素

js

第一階段

第一章：學習設計模式的準備

• js面向對象回顧
• 什麽是設計模式
• 為什麽我們要學習設計模式？
• 設計模式的分類

第二章：創建型設計模式

• 單例模式
• 簡單工廠模式
• 工廠方法模式
• 抽象工廠模式
• 原型模式
• 創建者模式

第三章：創建型設計模式

• 裝飾者模式
• 外觀模式
• 代理模式
• 適配器模式
• 亨元模式

第四章：行為型設計模式

• 叠代器模式
• 中介者模式
• 訪問者模式
• 觀察者模式
• 策略模式
• 命令模式

第五章：技巧性設計模式

• 委托模式
• 節流模式
• 數據訪問對象模式
• 參與者模式
• 等待者模式

第六章：架構型設計模式

• 同步模塊模式
• 異步模塊模式
• MVC模式
• MVP模式
• MVVM模式

第二階段

DOM操作+BOM操作+cookie操作+regExp正則表達式+ajax

第一章：DOM操作

• dom簡介、dom結構、querySelector、querySelectorAll
• node節點類型 12種，重點介紹三種（元素、屬性、文本）
• node屬性常用操作 getAttribute、setAttribute、removeAttribute、getAtttibuteNode、childNodes、firstChild、lastChild、nextSibling、previousSibling、parentNode
• 常用的方法DOM元素創建以及節點追加 createElement、 appendChild、 createTextNode、insertBefore、removeChild
• offsetWidth,clientWidth,scrollWidth(height同理)
• offsetTop,offsetLeft,offsetParent
• 可視區大小滾動高度 clientWidth / clientHeight 、innerWidth /innerHeight 、scrollTop / scrollLeft

第二章：BOM操作

• BOM(Brower Object Model) 核心對象window
• 表單中的操作 onfocus()、onblur（）、 onchange（）
• event事件對象 每個瀏覽器中的event 、event.pageX / event.pageY 、event.clientX / event.clientY
• 事件綁定 attachEvent、addEventListener 事件捕獲、事件冒泡 、定義事件解綁 、定義on方法
• 滾輪事件 wheelDelta、detail 、nmousewheel 滾輪事件兼容
• 事件冒泡 onmouseover/onmouseout和onmouseenter/onmouseleave區別 表格操作點擊、cancelBubble、stopPropagation()
• 鍵盤事件 keyCode、onkeydown、 onkeypress、onkeyup、altKey、ctrlKey、shiftKey、which等
• 阻止瀏覽器默認事件 preventDefault 、屏蔽瀏覽器的右鍵菜單、禁止選中復制
• window其他的補充 open()、close()、location.href/search/hash

第三章：cookie操作

• 什麽是cookie 、存儲/獲取cookie 、 封裝方法 getCookie(key)、 setCookie（key,value,time）、removeCookie(key)

第四章：正則表達式

• 什麽是正則表達式
• 創建正則表達式常用方法 / /、 new RegExp()、test（）、exec（）
• String中正則表達式方法 match、replace、 search、 split
• 標識符 \n \r \t .\s \S \d \D \w \W ^a a$
• 量詞 * + ? {m,n}
• 貪婪和惰性
• 子集 () |
• replace應用

第五章：ajax

• 什麽是ajax
• 本地服務器環境的搭建
• Ajax工作流程及代碼 、創建ajax對象 、open方法 、send方法、最終接受
• HTTP狀態碼 status屬性返回值所代表的意思
• Ajax封裝
• 簡單實例運用
• jsonp
• 實例：跨域調用百度搜索數據
• jQuery裏面的ajax

第三階段

JavaScript精品學習視頻

• 第一階段
• 第二階段
• 第三階段
• 第四階段
• 第五階段

面向對象

第一章：面向對象（上）

• 什麽叫面向對象 面向過程、面向對象、兩者區別
• 構造函數 什麽叫構造函數 、什麽是工廠模式
• 原型prototype
• 實例：面向對象寫輪播

第二章：面向對象（中）

• 方法鏈
• 包裝對象
• 原型鏈
• 原型的默認屬性和方法
• 繼承的多種方式 、 類繼承 、 復制繼承、對象繼承、更多繼承方式省

第三章：面向對象（下）

• 閉包 什麽叫閉包 、閉包有什麽特點
• 遞歸 什麽是遞歸、哪些時候會用遞歸
• 如何開發插件

第四章：面向對象實戰

• 開發類似jquery類庫插件(8節課)
• 推箱子遊戲(3節)
• 打飛機遊戲(3節)

第四階段

ECMAScript6

ECMAScript6

• ECMAScript 和 JavaScript 的關系
• ES6 與 ECMAScript 2015 的關系
• ECMAScript 的歷史
• 部署進度
• Babel 轉碼器
• Traceur 轉碼器

第一章：Let和const命令

• let 命令
• 塊級作用域
• const 命令
• 頂層對象的屬性
• global 對象

第二章：變量的解析賦值

• 數組的解構賦值
• 對象的解構賦值
• 字符串的解構賦值
• 數值和布爾值的解構賦值
• 函數參數的解構賦值
• 圓括號問題
• 用途

第三章：字符串的拓展

• 字符的 Unicode 表示法
• codePointAt()
• String.fromCodePoint()
• 字符串的遍歷器接口
• at()
• normalize()
• includes(), startsWith(), endsWith()
• repeat()
• padStart()，padEnd()
• 模板字符串
• 實例：模板編譯
• 標簽模板
• String.raw()
• 模板字符串的限制

第四章：正則的拓展

• RegExp 構造函數
• 字符串的正則方法
• u 修飾符
• y 修飾符
• sticky 屬性
• flags 屬性
• s 修飾符：dotAll 模式
• 後行斷言
• Unicode 屬性類
• 具名組匹配

第五章：數值的拓展

• 二進制和八進制表示法
• Number.isFinite(), Number.isNaN()
• Number.parseInt(), Number.parseFloat()
• Number.isInteger()
• Number.EPSILON
• 安全整數和Number.isSafeInteger()
• Math對象的擴展
• Math.signbit()
• 指數運算符
• Integer 數據類型

第六章：函數的拓展

• 函數參數的默認值
• rest 參數
• 嚴格模式
• name 屬性
• 箭頭函數
• 綁定 this
• 尾調用優化
• 函數參數的尾逗號

第七章：對象的拓展

• 擴展運算符
• Array.from()
• Array.of()
• 數組實例的 copyWithin()
• 數組實例的 find() 和 findIndex()
• 數組實例的 fill()
• 數組實例的 entries()，keys() 和 values()
• 數組實例的 includes()
• 數組的空位

第八章：Symbol

• 概述
• 作為屬性名的 Symbol
• 實例：消除魔術字符串
• 屬性名的遍歷
• Symbol.for()，Symbol.keyFor()
• 實例：模塊的 Singleton 模式
• 內置的Symbol值

第九章：Set和Map數據結構

• Set
• WeakSet
• Map
• WeakMap

第十章：Proxy

• 概述
• Proxy 實例的方法
• Proxy.revocable()
• this 問題
• 實例：Web 服務的客戶端

第十一章：Reflect

• 概述
• 靜態方法
• 實例：使用 Proxy 實現觀察者模式

第十二章：Promise對象

• Promise 的含義
• 基本用法
• Promise.prototype.then()
• Promise.prototype.catch()
• Promise.all()
• Promise.race()
• Promise.resolve()
• Promise.reject()
• 兩個有用的附加方法
• 應用
• Promise.try()

第十三章：Lterator和for...of循環

• Iterator（遍歷器）的概念
• 默認 Iterator 接口
• 調用 Iterator 接口的場合
• 字符串的 Iterator 接口
• Iterator接口與Generator函數
• 遍歷器對象的return()，throw()
• for...of循環

第十四章：Generator函數的語法

• 簡介
• next 方法的參數
• for...of 循環
• Generator.prototype.throw()
• Generator.prototype.return()
• yield* 表達式
• 作為對象屬性的Generator函數
• Generator 函數的this
• 含義
• 應用

第十五章：Generator函數的異步應用

• 傳統方法
• 基本概念
• Generator 函數
• Thunk 函數
• co 模塊

第十六章：async函數

• 含義
• 基本用法
• 語法
• async 函數的實現原理
• 與其他異步處理方法的比較
• 實例：按順序完成異步操作
• 異步遍歷器

第十七章：class的基本用法

第十八章：class的繼承

第十九章：Decorator

第五階段

JavaScript設計模式

第一章：學習設計模式的準備

• js面向對象回顧
• 什麽是設計模式
• 為什麽我們要學習設計模式？
• 設計模式的分類

第二章：創建型設計模式

• 單例模式
• 簡單工廠模式
• 工廠方法模式
• 抽象工廠模式
• 原型模式
• 創建者模式

第三章：創建型設計模式

• 裝飾者模式
• 外觀模式
• 代理模式
• 適配器模式
• 亨元模式

第四章：行為型設計模式

• 叠代器模式
• 中介者模式
• 訪問者模式
• 觀察者模式
• 策略模式
• 命令模式

第五章：技巧性設計模式

• 委托模式
• 節流模式
• 數據訪問對象模式
• 參與者模式
• 等待者模式

第六章：架構型設計模式

• 同步模塊模式
• 異步模塊模式
• MVC模式
• MVP模式
• MVVM模式

前端學習html css js