木子小屋

Talk is cheap. Show me the code.

0%

前端学习历程

(注1:现在是2021年1月10日,现在是越来越焦虑了,昨天突然陷入到了恐慌与迷茫之中,面对还没有学的知识点,一点没做的简历,紧迫的时间,于是昨天自己彻底慌了神,昨天是周六,而自己只学习了1个多小时,完全学不进去了,晚上11点的时候,重新下载了王者荣耀,然后一直玩到第二天早上7点多,然后才睡的。睡了7,8个小时,一直到今天的下午2点多自己才起来,洗漱了一下,本想洗个澡的,可是热水器好像有点问题没洗成,现在是下午的2点半,我在敲这些文字。)

(注2:不行,稳住啊,自己接下来要做的事情虽然又多又杂又急迫,但是如此自乱阵脚只会让事情变得更糟。不要慌,事情总是一步一步慢慢来的,要把这些事情”化整为零、化难为易”,生活中的事情也是可以用组件化思想来解决的啊。)

(注3:自己现在要开启双线程模式了,要开始做自己的简历,招聘软件上查看有关公司,查看他们的要求,然后梳理自己的技术栈,进行相关的查漏补缺和面试题的准备了。)

(注4:自己一定要走出第一步,就今天吧,先快速把自己的简历给完成,然后和公司主动进行沟通。刚开始可以试试水,先降低要求,找一些招聘前端实习的公司,水平不限的公司,先看看怎么说。通过他们大概了解一下就业市场和就业难度吧。)

(注5:因为自己非科班出生,半路出家而且现在还有很多东西没有学习,所以可以预见到转行之路注定无法一帆风顺。我想着自己先联系10家公司先说吧,一定会遇到很多根本就不搭理我,说我不符合他们公司要求的,而且数量肯定不少,自己要做好这方面的心理准备啊!)

开场白

打算在Boss在进行沟通时先给HR发一段开场白,大概讲述一下自己的情况,如果他感兴趣就可以聊下去,不感兴趣就算了,这样可以实现有效沟通。

开场白如下:

面试官好,我叫李明,94年生人,今年27岁,来自于安徽芜湖。

2017年毕业于铜陵学院,本科学历,金融学专业。

毕业后做了4年的财务工作,包括会计、审计等。

2018年8月在学习Excel VBA的时候偶然接触了一些编程知识,然后仔细考虑了一下自己的未来和职业规划,产生了转行的想法,在网上看了一系列视频:C语言、Java、数据库、计算机网络、计算机组成原理等,因为非科班出生,所以这些课程对我来说十分晦涩难懂,2018年8月-2019年1月就处于一种瞎学乱学的阶段,一直到2019年8月份才真正开始决定学习前端作为自己今后的职业发展方向,然后就开始一边上班一边自学的生涯,一直到现在。

经过1年半的学习,感觉前端的基本知识已经差不多都过了一遍,于是21年2月23日正式离职,准备转行了。

我上家公司是一家科技型中介,主要给一些科技公司申报高新技术企业,软件著作权,注册商标等。我主要负责做审计报告,也兼任了一些出纳工作,因为工作比较轻松,朝九晚五,做五休二,所以我有比较充足的时间学习。

我的博客地址:www.lm1018.top

我的大体学习时间线如下:

自学前端历程

时间 技术栈 学习途径 相关博客
2019.08.01-2019.09.20 HTML、CSS 黑马刘晓强视频 CSS知识点查漏补缺
2019.09.21-2019.11.09 JavaScript 尚硅谷李立超视频 JavaScript知识点查漏补缺
2019.11.09-2020.02.07 JavaScript 看书《JS高程》 读书笔记:JS高程序01(第3版)读书笔记:JS高程02(第3版)
2021.01.01-2021.02.19 Vue 王红元Vue视频 Vue框架入门——囫囵吞枣看完基础知识点,后来发现没法吸收,功力不够,后放弃学习Vue,巩固基础知识去了。
2020.01.12-2020.02.14 HTML、CSS 重新复习CSS、写小案例 CSS小案例
2020.02.15-2020.03.25 DOM、BOM、jQuery、PHP 看视频 快速看了DOM、BOM、PHP、jQuery视频(后来又重新学习了,当时看的太快了,还没来得及消化,学得囫囵吞枣。)
2020.04.15-2020.06.10 网络运维、Linux 千峰网络安全兄弟连Linux 当时学习前端感觉遇到了瓶颈期,一点也不想学了,后来就学了一些网络安全之类的课程,学了差不多2个月,网络安全看了65集,Linux看了20几集,没有写有关博客。
2020.06.28-2020.07.15 DOM、BOM 黑马刘晓强DOM DOM、BOM操作复习——重新学习。
2020.06.30-2020.08.10 PHP PHP零基础入门 PHP入门——这个视频只是简要介绍了一下PHP,没有十分详细,学得也不算很深。
2020.07.20-2020.08.15 jQuery 黑马4天从零玩转jQuery jQuery入门——现在很久没看过jQuery了,好多东西不用都快忘了。
2020.08.05-2020.08.19 Bootstrap 撩课学院 Bootstrap入门——学了基础知识,用Bootstrap跟着视频做了一个静态页面,之后再也没用过它了。
2020.08.05-2020.08.20 AJAX 汪磊AJAX教程 AJAX入门——AJAX感觉自己掌握的也不算特别好吧,也是跟着视频过了一遍,之后也基本没有再用到过了,所以好多知识也开始慢慢遗忘了。
2020.08.22-2020.09.12 JavaScript高级 黑马刘晓强JS JavaScript高级——这个视频真的很不错,通俗易懂,我看了后对JS原型、闭包、面向对象这些概念的理解更深了一步,以后有时间再重新复习一遍。
2020.08.25-至今 HTML5、CSS3 黑马H5C3 HTML5、CSS3入门——没看完,106集视频,看到第50集,差不多一半,后面的就没有再看了,想着遇到哪个API就当时学一下吧。
2020.09.12-2020.12.15 Flex布局 黑马刘晓强Flex Flex布局入门——视频只有26集,基础知识点很快看完,16集的案例迟迟没有看,一直拖了有3个月才终于把案例看完。我还有别的布局没有学,比如Grid,流式布局等,这个也要找个间隙把它学了。
2020.10.12-至今 Node.js 黑马李鹏周 Node.js入门——没看完,总共7天课程,我只看了一半,没有时间看了,不过也算大体了解了一下什么是Node和模块化的概念了。
2020.09.04-2020.11.21 Vue 王红元Vue视频 Vue框架入门——花了2个半月的时间,又把Vue基础知识点(不包括项目视频)认认真真的学习了一遍,比2020年元旦第一次学的时候效果好多了。
2020.11.23-2021.01.07 Vue实战项目 王红元Vue视频 Vue实战项目1:商城(王红元)——花了1个多月的时间看完,不过这个项目还没做完,还有”分类”和”我的”2个页面没做,想着以后复习这个项目的时候再做完。这算是我写的第一个大型项目了,这个项目以后真的要再重新写一遍,因为还有很多细节自己还没有完全理解。
2020.12.14-2021.02.25 小程序 王红元小程序 小程序入门Vue实战项目3-商城小程序版-王红元
2021.01.08-2021.02.10 Vue实战项目 黑马后台管理系统 Vue实战项目2:后台管理系统-黑马

学习过的知识点

趁着这个机会把以前的博文拿过来系统复习一遍,梳理一下知识点,找一些经典面试题。

HTML、CSS

  • 浏览器内核(渲染引擎、JS引擎),常见浏览器的内核。

  • 常见标签的使用

    • div
    • span
    • hr
    • br
    • h1-h6
    • img及常用属性(src、alt、title、border等)
  • 链接标签a及常用属性(href、target)

    • 锚点定位
    • base标签(不熟)
    • 特殊字符标签(不熟)
    • 标签属性(key:value)
    • 路径(相对/绝对)
  • 列表标签

    • 无序列表ul>li
    • 有序列表ol>li
    • 自定义列表dl>dt+dd
  • 表格标签(table)

    • 不再用于布局,而是用来显示数据
    • table>tr>td
    • margin、padding、cellspacing、cellpadding的区别
    • 表头标签th
    • 表格结构:table>(thead>th)+tbody(>td)
    • 表格标题caption
    • 合并单元格(跨行rowspan、跨列colspan)
  • 表单标签

    • 表单三要素:表单控件、提示信息、表单域
    • input控件(重点)
    • label标签(方便客户获得输入焦点,for与id对应)
    • textarea控件
    • 下拉菜单:select>option
    • 表单域(action[url地址]、method[get或post]、name[表单名称])
  • 引入CSS样式表(重点)

    • 内部样式(style标签,在head头部里面)
    • 行内式(style属性)
    • 外部样式表(外链式)
    • 外部样式表(导入式)
  • 基础选择器

    • 标签选择器

    • 类选择器、多类名选择器

      • 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关
    • id选择器

    • 通配符选择器

    • 复合选择器

      • 交集选择器(标签选择器.class选择器)

      • 并集选择器(选择器,选择器,选择器,…,通常用于集体声明)

      • 后代选择器(父选择器 后代选择器)

        • 后代选择器指所有后代,儿子,孙子,重孙子
      • 子元素选择器(父选择器>子选择器)

        • 子选择器只包括亲儿子
      • 伪类选择器

        • 类选择器一个点,伪类选择器是两个点,就是一个冒号
      • 链接伪类选择器(由爱生恨记忆法Link-Visited-Hover-Active)

  • CSS字体样式属性

    • font-size:字号大小

    • font-family:字体

      • CSS Unicode字体
    • font-weight:字体粗细(400正常,700加粗)

    • font-style:字体风格(斜不斜)

    • font:综合设置字体样式 (重点:斜粗大体,必须大体)

  • CSS外观属性

    • color:文本颜色
    • line-height:行间距(不熟)
    • text-align:水平对齐方式(只适用于块级元素,里面的内容对齐方式,无法让块级元素对齐)
    • text-indent:首行缩进
    • text-decoration文本的装饰(下划线)
  • 标签显示模式(display)

    • 块级元素(block-level)
    • 行内元素(inline-level)
    • 行内块元素(inline-block)
    • 标签显示模式转换 display
  • CSS书写规范

    • 空格规范
      • 选择器 与 { 之间必须包含空格。示例: .selector { }
      • 属性名与之后的 : 之间不允许包含空格,:与 属性值 之间必须包含空格。示例:font-size: 12px;
    • 选择器规范
      • 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行
      • 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
    • 属性规范
      • 属性定义必须另起一行
      • 属性定义后必须以分号结尾。
  • CSS三大特性(不太熟了)

    • 层叠性
    • 继承性
    • 优先级
  • CSS背景(background)

    • 背景颜色(background-color)

    • 背景图片(background-image)

    • 是否平铺(background-repeat)

    • 背景位置(background-position)

    • 背景固定还是滚动(background-attachment)

    • 背景透明(background:rgba(0,0,0,0.3))

    • 背景的合写(background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置)

    • CSS3的transform属性(只提了一下)

      • transform:translate(-50%,-50%)实现水平垂直居中
  • 盒子模型

    • 看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里面,然后利用CSS摆放盒子的过程,就是网页布局。

    • 盒子模型三要素(padding、border、margin)

      • 盒子边框border
        • 表格的细线边框border-collapse:collapse;
    • 内边距padding

    • 外边距margin

      • 外边距实现盒子居中:①块级元素 ②盒子必须指定了宽度 margin:0 auto
      • 文字水平居中(text-align)和盒子水平居中(margin:0 auto)区别
      • 清除元素的默认内外边距
      • 外边距合并
        • 相邻块元素垂直外边距
        • 嵌套块元素垂直外边距
    • content宽度和高度

    • 盒子模型布局稳定性(width > padding > margin)

    • 圆角边框(CSS3):border-radius: 50%;

    • 盒子阴影(不是文字阴影):box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;

  • 浮动

    • 标准流
    • 浮动
      • 什么是浮动
      • 浮动详细内幕特性
    • 版心和布局流程
      • 布局流程
      • 一列固定宽度且居中
      • 两列左窄右宽型
      • 通栏平均分布型
    • 清除浮动
      • 为什么要清除浮动
      • 清除浮动本质
      • 清除浮动的方法
    • overflow:hidden的几种使用方法
      • 文档溢出
      • 清除浮动
      • 解决外边距塌陷
  • 定位

    • 为什么要用定位
    • 元素定位属性(边偏移+定位模式)
    • 静态定位
    • 相对定位
    • 绝对定位
    • 固定定位
    • 叠放次序(z-index)
    • 四种定位总结
    • 定位模式转换(行内块模式)
  • CSS高级技巧

    • CSS用户界面样式
      • 鼠标样式cursor
      • 轮廓outline
      • 防止拖拽文本域resize
    • vertical-align 垂直对齐
      • 图片、表单和文字对齐
      • 去除图片底侧空白缝隙
  • 溢出的文字隐藏

    • word-break:自动换行
    • white-space:对象内文本显示方式
    • text-overflow:文字溢出
      • CSS精灵图技术
        • 精灵图技术产生的背景
        • 精灵图技术本质
        • 精灵图技术的使用
        • 制作精灵图
      • 滑动门技术
        • 滑动门出现的背景
        • 核心技术
      • Web字体
        • 字体格式
          • TureType(.ttf)格式
          • OpenType(.otf)格式
          • Web Open Font Format(.woff)格式
          • Embedded Open Type(.eot)格式
          • SVG(.svg)格式
      • 字体图标
        • 字体图标优点
        • 字体图标使用流程
          • 设计字体图标
          • 上传生成字体包
          • 下载兼容字体包
          • 字体引入到HTML
            • 第一步:在样式里面声明字体: 告诉别人我们自己定义的字体
            • 第二步:给盒子使用字体
            • 第三步:盒子里面添加结构
      • BFC(块级格式化上下文)——结界
        • 元素的显示模式
        • 哪些元素会具有BFC的条件
        • 什么情况下可以让元素产生BFC
        • BFC元素所具有的特性
        • BFC的主要用途
          • 清除元素内部浮动
          • 解决外边距合并问题
          • 制作右侧自适应的盒子问题
        • BFC 总结
      • 渐进增强和优雅降级
        • 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
        • 优雅降级:一开始就构建完整的功能,然后针对低版本浏览器进行兼容。
      • 浏览器前缀

HTML5、CSS3

后面的就暂时没有时间梳理了,等有空再复习一下吧。

JavaScript