從零開始學 Web 系列教程

你們好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新……

• github：https://github.com/Daotin/Web
• 微信公衆號：前端隊長
• 博客園：http://www.cnblogs.com/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！

前言

昨天收到一個朋友的留言反饋，意思是說文章太多，找起來很麻煩，作個索引頁就行了。

這個建議特別好，因而下面就是整個《從零開始學 Web 開發》全部內容的索引，而且按照知識點的分類排列好，每一篇文章的主要內容也簡單的列舉出來。

本索引將長期不按期更新……

索引

從零開始學 Web 之 HTML

從零開始學 Web 之 HTML（一）認識前端

• 什麼是前端
• 網頁組成
• Web 標準
• 瀏覽器內核
• 認識 HTML
• HTML 結構標準
• 標籤分類
• 開發工具

從零開始學Web之HTML（二）標籤、超連接、特殊符號、列表、音樂、滾動、head等

• 標籤
• 超連接
• 特殊字符
• 列表
• 音樂標籤
• 滾動標籤
• head裏面相關

從零開始學 Web 之 HTML（三）表單

• 表格
• 表單
• 標籤語義化

從零開始學 Web 之 CSS

從零開始學 Web 之 CSS（一）選擇器

• CSS概念
• 選擇器

從零開始學 Web 之 CSS（二）文本、標籤、特性

• 文本元素
• 標籤分類
• CSS 三大特性

從零開始學 Web 之 CSS（三）連接僞類、背景、行高、盒子模型、浮動

• 連接僞類
• 背景屬性
• 行高
• 盒子模型
• 浮動

從零開始學 Web 之 CSS（四）CSS初始化、定位、overflow、標籤規範

• CSS 初始化
• overflow 屬性
• 定位
• 標籤包含規範
• 規避脫標流
• 圖片和文字垂直居中對齊

從零開始學 Web 之 CSS（五）可見性、內容移除、精靈圖、屬性選擇器、滑動門

• CSS 可見性
• CSS 以內容移除
• CSS 精靈圖
• 屬性選擇器
• CSS 滑動門

從零開始學 Web 之 JavaScript

從零開始學 Web 之 JavaScript（一）JavaScript概述

• JavaScript 簡介
• JavaScript 做用
• 語言類型
• 前端組成
• JS 組成
• JS 書寫位置
• JS 基礎知識

從零開始學 Web 之 JavaScript（二）變量

• 變量的聲明和初始化
• 命名規則
• 數據類型
• Number
• String
• Boolean
• undefined 和 null
• 數據類型轉換

從零開始學 Web 之 JavaScript（三）函數

• 函數的定義
• 函數的調用
• 函數名
• 形參和實參
• 返回值
• 變量和做用域

從零開始學 Web 之 JavaScript（四）數組

• 數組的定義
• 數組的操做
• 數組高級 API
• 迭代方法
• 清空數組

從零開始學 Web 之 JavaScript（五）面向對象

• 對象建立方式
• 訪問對象屬性
• 訪問對象方法
• JSON

從零開始學 Web 之 DOM

從零開始學 Web 之 DOM（一）DOM的概念，對標籤操做

• DOM 概念
• DOM 做用
• DOM 初體驗

從零開始學 Web 之 DOM（二）對樣式的操做，獲取元素的方式

• 對樣式的操做
• 獲取元素的方式
• 案例：模擬搜索框

從零開始學 Web 之 DOM（三）innerText與innerHTML、自定義屬性

• 封裝 innerText 和 TextContent
• innerText 和 innerHTML
• 自定義屬性操做

從零開始學 Web 之 DOM（四）節點

• 節點的概念
• 節點的相關屬性
• 獲取相關節點
• 經過節點操做元素
• 封裝節點兼容代碼

從零開始學 Web 之 DOM（五）元素的建立

• 元素建立的三種方式
• 其餘操做元素的方法

從零開始學 Web 之 DOM（六）爲元素綁定與解綁事件

• 爲元素綁定多個事件
• 爲元素解綁事件

從零開始學 Web 之 DOM（七）事件冒泡

• 什麼是事件冒泡
• 阻止事件冒泡
• 小案例：爲同一個元素綁定多個不一樣的事件指向相同的事件處理函數
• 百度搜索小項目

從零開始學 Web 之 BOM

從零開始學 Web 之 BOM（一）BOM的概念，一些BOM對象

• BOM 的概念
• BOM 頂級對象
• 系統對話框
• 頁面加載對象
• location 對象
• history 對象
• navigator 對象

從零開始學 Web 之 BOM（二）定時器

• 定時器的兩種方式

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

• 直接使用 document 獲取的元素
• offset 系列
• scroll 系列
• 變速動畫函數
• 獲取任意元素的任意屬性值
• 變速動畫函數加強

從零開始學 Web 之 BOM（四）client系列

• client 系列

從零開始學 Web 之 JS 高級

從零開始學 Web 之 JS 高級（一）原型，貪吃蛇案例

• 原型相關知識
• 貪吃蛇案例

從零開始學 Web 之 JS 高級（二）原型鏈，原型的繼承

• 原型鏈
• 原型的繼承

從零開始學 Web 之 JS 高級（三）apply與call，bind，閉包和沙箱

• apply 和 call 方法
• bind 方法
• 閉包
• 沙箱
• 區別僞數組和真數組

從零開始學 Web 之 jQuery

從零開始學 Web 之 jQuery（一）jQuery的概念，頁面加載事件

• jQuery 的概念
• jQuery 的頂級對象
• jQuery 對象和 DOM 對象互轉
• 頁面加載事件

從零開始學 Web 之 jQuery（二）獲取和操做元素的屬性

• jQuery 獲取和操做元素

從零開始學 Web 之 jQuery（三）元素操做，鏈式編程，動畫方法

• 使用 css 操做元素樣式
• 鏈式編程
• 使用類樣式操做元素樣式
• 動畫相關方法

從零開始學 Web 之 jQuery（四）元素的建立添加與刪除，自定義屬性

• 元素的建立、添加和刪除
• 元素 value 屬性的操做
• 自定義屬性

從零開始學 Web 之 jQuery（五）操做元素其餘屬性，爲元素綁定事件

• 操做元素的寬和高
• 操做元素的 left 和 top
• 操做元素捲曲出去的之值
• 爲元素綁定事件

從零開始學 Web 之 jQuery（六）爲元素綁定多個相同事件，解綁事件

• 爲元素綁定多個相同事件
• 元素綁定事件的區別
• 解綁事件

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

• 事件冒泡和阻止事件冒泡
• 事件的觸發
• 事件參數對象
• 鏈式編程的原理

從零開始學 Web 之 jQuery（八）each，多庫共存，包裝集，插件

• each 方法
• 多庫共存
• 包裝集
• 幾個元素的寬高屬性
• 插件

從零開始學 Web 之 Ajax

從零開始學 Web 之 Ajax（一）服務器相關概念

• 服務器和客戶端
• WAMP 的安裝配置
• 靜態網站和動態網站

從零開始學 Web 之 Ajax（二）PHP基礎語法

• 基本結構
• 打印語句
• 變量的聲明和使用
• 字符串的拼接
• PHP 執行原理
• 數組
• 函數
• 預約義變量

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

• Ajax 概述
• Ajax 快速上手
• 案例：點擊按鈕驗證用戶名是否存在

從零開始學 Web 之 Ajax（四）接口文檔，驗證用戶名惟一性案例

從零開始學 Web 之 Ajax（五）同步異步請求，數據格式

• 同步請求和異步請求
• 數據格式（XML、JSON）

從零開始學 Web 之 Ajax（六）jQuery中的Ajax

從零開始學 Web 之 Ajax（七）跨域

從零開始學 Web 之 HTML5

從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤

從零開始學 Web 之 HTML5（二）表單，多媒體新增內容，新增獲取操做元素，自定義屬性

從零開始學 Web 之 HTML5（三）網絡監聽，全屏，文件讀取，地理定位接口，應用程序緩存

從零開始學 Web 之 HTML5（四）拖拽接口，Web存儲，自定義播放器

從零開始學 Web 之 CSS3

從零開始學 Web 之 CSS3（一）CSS3概述，選擇器

從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

從零開始學 Web 之 CSS3（三）漸變，background屬性

從零開始學 Web 之 CSS3（四）邊框圖片，過渡

從零開始學 Web 之 CSS3（五）transform

從零開始學 Web 之 CSS3（六）動畫animation，Web字體

從零開始學 Web 之 CSS3（七）多列布局，伸縮佈局

從零開始學 Web 之 CSS3（八）CSS3三個案例

從零開始學 Web 之 移動Web

從零開始學 Web 之 移動Web（一）屏幕相關基本知識，調試，視口，屏幕適配

從零開始學 Web 之 移動Web（二）JD移動端網頁，移動觸屏事件

從零開始學 Web 之 移動Web（三）Zepto

從零開始學 Web 之 移動Web（四）實現JD分類頁面

從零開始學 Web 之 移動Web（五）touch事件的缺陷，移動端經常使用插件

從零開始學 Web 之 移動Web（六）響應式佈局

從零開始學 Web 之 移動Web（七）Bootstrap

從零開始學 Web 之 移動Web（八）Less

從零開始學 Web 之 移動Web（九）微金所案例

從零開始學 Web 之 ES6

從零開始學 Web 之 ES6（一）ES5嚴格模式

從零開始學 Web 之 ES6（二）ES5的一些擴展

從零開始學 Web 之 ES6（三）ES6基礎語法一

從零開始學 Web 之 ES6（四）ES6基礎語法二

從零開始學 Web 之 ES6（五）ES6基礎語法三

從零開始學 Web 之 ES6（六）ES6基礎語法四

從零開始學 Web 之 Vue.js

從零開始學 Web 之 Vue.js（一）Vue.js概述，基本結構，指令，事件修飾符，樣式

從零開始學 Web 之 Vue.js（二）過濾器，按鍵修飾符，自定義指令

從零開始學 Web 之 Vue.js（三）Vue實例的生命週期

從零開始學 Web 之 Vue.js（四）Vue的Ajax請求和跨域

從零開始學 Web 之 Vue.js（五）Vue的動畫

從零開始學 Web 之 Vue.js（六）Vue的組件

其餘總結

div盒子水平垂直居中方法

 

————————— 未完待續... ————————