从零开始学 Web 系列教程

大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新……

• github：https://github.com/Daotin/Web
• 微信公众号：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盒子水平垂直居中方法

————————— 未完待续... ————————