从零开始学 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盒子水平垂直居中方法

 

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

 

posted @ 2018-09-26 11:02  Daotin  阅读(2347)  评论(0编辑  收藏  举报