HTML标签语义化，分分钟搞定!

2021-06-04 19:00:39 阅读：183 来源： 互联网

标签：jQuery 搞定标签 JavaScript 语义 HTML HTML5 选择器属性

前言

假如有那么残酷的一天，我不小心喝错了一瓶药，一下子抹掉了我这十多年的编程经验，把我变成了一只小白。我想自学前端，并且想要找到一份工作，我预计需要 6 个月的时间，前提条件是每天都处于高效率的学习状态当中，并且每天的学习时间至少在 12 个小时以上。

即便是这样，我敢肯定，找到的工作肯定不会太好，勉强能够维持生活吧，毕竟是零基础入门啊。

如果想更进一步，真正成为一名不可或缺的高级前端工程师，时间需要更久，两年、三年、五年，直到秃的那天。

想着想着，我就觉得有必要为那一天做点准备，以备不时之需。

学习路线

第一阶段：网页制作

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组件
路由使用
路由导航
嵌套路由
命名视图

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

资料领取方式：点击这里免费领取前端全套学习资料

css源码pdf

JavaScript知识点
，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。