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

向右看齐 2022-10-18 01:44 155阅读 0赞

### 前言 ###

假如有那么残酷的一天，我不小心喝错了一瓶药，一下子抹掉了我这十多年的编程经验，把我变成了一只小白。我想自学 前端，并且想要找到一份工作，我预计需要 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

![04cbcc50547ab3d7eeeb7dab8f6440bc.png][]

--------------------

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

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

#### html/css ####

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

![3f69c409fe8b2bc6800dd4b90ead1e19.png][]

#### html5/css3 ####

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

![1431e512c2c67c2ccc6b4eb4b15d4104.png][]

#### JavaScript ####

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

![9e0173fc555c04423373e93da624afce.png][]

#### 正则表达式 ####

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

![691488e65f8ea6f5b86145fc9e4a9bd5.png][]

#### js对象 ####

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

![87a4041e44b5425d2bf871bd27fa5e43.png][]

#### 面向对象是一种编程思想 ####

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

#### 常用的JavaScript设计模式 ####

*  **单体模式**
 *  **工厂模式**
 *  **例模式**

![851552f4b240b6ad2e879fb890411803.png][]

#### 函数 ####

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

![61e46d441cbd4d5e05947ec893331ae4.png][]

#### BOM ####

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

![6ffcfdfc7bad0428c2ad6174f5038f07.png][]

#### DOM ####

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

#### 事件 ####

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

![8427754dff2e5de013f1868fd34eb7aa.png][]

#### jQuery ####

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

![93e947612d7681737ac09b867d6a6194.png][]

#### AJAX ####

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

#### HTTP ####

*  **HTTP消息结构**
 *  **url请求过程**

![069d91e2e2ba3b347e2a979e725f3547.png][]

#### 性能优化 ####

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

#### webpack ####

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

![253c048b02dbd21aaadad56aae68d8cc.png][]

#### vue ####

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

![040f51533b9375c20a948c58bc307026.png][]

####  ####

### 最后 ###

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

**[资料领取方式：点击这里免费领取前端全套学习资料][Link 1]**

![css源码pdf][css_pdf]

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

**[资料领取方式：点击这里免费领取前端全套学习资料][Link 1]**

\[外链图片转存中…(img-kmIaJwG7-1622802544334)\]

\[外链图片转存中…(img-HC6VMldy-1622802544334)\]

[04cbcc50547ab3d7eeeb7dab8f6440bc.png]: /images/20221014/e561a6bfe91746bcaece6e3e2f3c07c9.png
[3f69c409fe8b2bc6800dd4b90ead1e19.png]: /images/20221014/a3ec65e8006b49f5a8bc75df68c42571.png
[1431e512c2c67c2ccc6b4eb4b15d4104.png]: /images/20221014/8637b0db57f14bfb8997bd88bab62877.png
[9e0173fc555c04423373e93da624afce.png]: /images/20221014/89c73f8a872f45deaddb631316ecf7d2.png
[691488e65f8ea6f5b86145fc9e4a9bd5.png]: /images/20221014/10e196f82f39443898a7700acc41fd18.png
[87a4041e44b5425d2bf871bd27fa5e43.png]: /images/20221014/332d14a22eb346349b75eaffcffd9b83.png
[851552f4b240b6ad2e879fb890411803.png]: /images/20221014/947867e95caa472fb0262448ee3de8db.png
[61e46d441cbd4d5e05947ec893331ae4.png]: /images/20221014/d74b9232434647b2a420f396eae68a72.png
[6ffcfdfc7bad0428c2ad6174f5038f07.png]: /images/20221014/cfe20f55617147d39bd6f133303c5c9a.png
[8427754dff2e5de013f1868fd34eb7aa.png]: /images/20221014/dc9cd02690f746c191aa9b67121271d4.png
[93e947612d7681737ac09b867d6a6194.png]: /images/20221014/616f3053aaf34cdebee0855d576a5d9f.png
[069d91e2e2ba3b347e2a979e725f3547.png]: /images/20221014/7e767dfc491b48e4b5329534f993a5a4.png
[253c048b02dbd21aaadad56aae68d8cc.png]: /images/20221014/4d5503aba4734104b284783ec4b5ae63.png
[040f51533b9375c20a948c58bc307026.png]: /images/20221014/3f80f7cee4904f7e895b561f9975bc2c.png
[Link 1]: https://docs.qq.com/doc/DSmRnRGxvUkxTREhO
[css_pdf]: /images/20221014/b6e0f3447f55441c8b5f25467755841e.png
[JavaScript]: /images/20221014/3794d369ba574913b7ad64b98850d8c3.png