HTML标签语义化，值得收藏！

思维导图

学习路线

第一阶段：网页制作

HTML：常用标签，锚点，列表标签，表单标签，表格标签，标签分类，标签语义化，注释，字符实体

CSS：CSS介绍，全局样式，行内样式，内联样式，选择器，字体样式值，文本样式值，颜色样式值，盒模型，控制台使用，清除默认样式，盒模型居中，外部距塌陷，标准文档流，块元素，行内元素，行内块元素，多种伪类元素，浮动，定位

第二阶段：JavaScript动态交互

JavaScript初阶：变量与运算符，逻辑控制，Math类，函数，Object类，定时器，Array类，String类，Date类

JavaScript进阶：JavaScript DOM基础，this，事件，事件流，JavaScriptBOM基础，call&apply&bind，自定义属性，面向对象编程

ES6/7/8/9：ECMAScript6简介，let和const，ES6+的作用域，对象的扩展，函数的扩展，字符串的扩展，Symbol，Set&Map，Promise对象，async&awiat，箭头函数，模板字符串，rest参数，Class，Module模块

JavaScript高阶：闭包，立即执行函数，惰性函数，插件开发，多人协作，深复制与浅复制，数组扁平化，递归，正则表达式全解，函数防抖，函数节流

第三阶段：移动端开发技术实战

HTML5：HTML5简介，HTML5新语法，HTML5新语义化标签，HTML5新表单元素属性，HTML5新手机端新事件处理，HTML5新增多媒体实战，本地存储，Canvas，HTML5地理组件GeoLocation

CSS3：CSS3新增属性，圆角制作企业级方案，CSS3背景属性，过渡动画 transition，变化属性 transform，特效轮播图实战，企业级flex布局实战，grid布局实战

Bootstrap：响应式，媒体查询，栅格系统，栅格参数，组合模式，列偏移/列排序/自动列，列对齐/列嵌套，文本与颜色，按钮，导航，图文混排，模态框，轮播图

移动端开发：移动端简介，移动端视口约束，移动端flex移动端实践，rem，vw，flexible企业级实战

第四阶段：前后端分离技术及常用库类

Ajax：AJAX简介，AJAX作用，封装AJAX，创建XMLhttpRquest对象，同步和异步，AJAX分页

jQuery：jQuery介绍，jQuery链式语法，jQuery选择器，jQuery核心，jQuery工具，jQuery事件，jQuery事件对象，jQuery特效，jQuery回调函数，jQuery文档处理，jQuery筛选，jQuery属性，jQueryCSS

Echarts：Echarts概述，Echarts使用，坐标系，雷达图/饼状图/折线图

第五阶段：企业级高级WEB架构开发

Webpack：Webpack的安装和使用，项目模块打包，静态打包模块器，Webpack入口，Webpack输出，Webpack插件，webpack模块

Vue：Vue使用，Vue响应式，Vue双向数据绑定，Vue相关指令，vue-resource，axios，template选项，Vue生命周期，Vue组件，自定义指令，过滤器，computed属性，Vue-cli 2.x和3.x 脚手架配置，Vue-router，Vuex，Element UI

微信小程序：uni-app，mpvue，微信小程序注册，APPID申请，生命周期，小程序调试，微信小程序框架组件，微信小程序布局框架，微信小程序条件渲染和列表渲染，媒体组件audio，视图容器，网络api，相机api，地图api

【95页】初级前端模块笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。需要可以看文末领取完整版【95页】初级前端模块笔记和前端学习路线图。

html/css

html基本结构
标签属性
事件属性
文本标签
多媒体标签
列表 / 表格 / 表单标签
其他语义化标签
网页结构
模块划分
CSS代码语法
CSS 放置位置
CSS的继承
选择器的种类/优先级
背景样式
字体样式
文本属性
基本样式
样式重置
盒模型样式
浮动float
定位position
浏览器默认样式

html5/css3

HTML5 的优势
HTML5 废弃元素
HTML5 新增元素
HTML5 表单相关元素和属性
CSS3 新增选择器
CSS3 新增属性
新增变形动画属性
3D变形属性
CSS3 的过渡属性
CSS3 的动画属性
CSS3 新增多列属性
CSS3新增单位
弹性盒模型

JavaScript

JavaScript基础
JavaScript数据类型
算术运算
强制转换
赋值运算
关系运算
逻辑运算
三元运算
分支循环
switch
while
do-while
for
break和continue
数组
数组方法
二维数组
字符串

正则表达式

创建正则表达式
元字符
模式修饰符
正则方法
支持正则的 String方法

js对象

定义对象
对象的数据访问
JSON
内置对象
Math 方法
Date 方法

面向对象是一种编程思想

定义对象
原型和原型链
原型链
原型

常用的JavaScript设计模式

单体模式
工厂模式
例模式

函数

函数的定义
局部变量和全局变量
返回值
匿名函数
自运行函数
闭包

BOM

BOM概述
window方法
frames [ ] 框架集
history 历史记录
location 定位
navigator 导航
screen 屏幕
document 文档

DOM

DOM对象方法
操作DOM间的关系
DOM节点属性

事件

事件分类
事件对象
事件流
事件目标
事件委派(delegate)
事件监听

jQuery

jQuery 选择器
属性选择器
位置选择器
后代选择器
子代选择器
选择器对象
子元素
DOM操作
JQuery 事件
容器适应
标签样式操作
滑动
自定义动画

AJAX

工作原理
XMLHttpRequest对象
XML和HTML的区别
get() 和post()

HTTP

HTTP消息结构
url请求过程

性能优化

JavaScript代码优化
提升文件加载速度

webpack

webpack的特点
webpack的缺点
安装
webpack基本应用
配置文件入门

vue

MVC模式
MVVM模式
基础语法
实例属性/方法
生命周期
计算属性
数组的更新检查
事件对象
Vue组件
路由使用
路由导航
嵌套路由
命名视图

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取Web前端开发经典面试题

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

点击这里领取Web前端开发经典面试题