前端语言 ｜ 青训营

攻城狮的大师兄
60 阅读5分钟

这是参加第六届青训营第一次笔记，以下是课程纲要以及知识要点，以及一丢丢自己的理解。简单的记录一下，方便后面回头复盘。复盘再深入更新思考吧。至于我说的东西可能不对，但不喜勿喷。如果，愿意帮忙纠正，还是很欢迎的。

第一部分 HTML，CSS，JavaScript（前端三剑客）

  1. HTML

之前好像是HTML4，现在是HTML5。但是接触最多的还是H5.

  1. CSS

css博大精深啊，也很有趣。
css，css3还有预处理器sass和less。

  1. javascript 基本类型

- String
- Number
- Boolean
- Null
- Underfined
- Symbol
- Object

  1. Borwser

我通常使用 chrome ,还有IE，Edge，Firefox，Quark等等，就不一一列举了。

第二部分

  1. Trending

  2. CSS in HTML

- 内部样式表（嵌入式）
- 行内样式表（行内式）
- 外部样式表（链接式）

  1. Javascript in HTML

- 单线程  
- 微任务队列 micTask queue  
- 宏任务队列 macTask queue

  1. CSS in JavaScript - 主要是React中使用

- 浏览器渲染后dom中查看CSS Module - 后补充小hash

第三部分 HTML DTD

  1. HTM并非图灵完备，它知识一门标记语言。

  2. HTML全部标签分类

标签不多说，看用记住就可以了。
  • 文档型

<!DOCTYPE> <head> <body>

  • 闭合型

    闭合标签
    <p></p>
    空标签
    <br> <img> <input>

  • 换行型

    块级标签
    <div> <h1> <h2> ... <h6>
    行内标签
    <span> <a>

  • H5新元素
  • 语义化标签
  • 媒体标签

<video> <audio> <embed>

  • 表单标签

<input type="date"> <input type="color">

  • 功能标签

<canvas> <progress>

  1. HTML head 标签

  • title 标题，全局唯一
  • base 向页面所有相对URL提供前缀
  • *全局唯一，不建议使用 *
  • meta 通常是约定好的键值对
  • 例外：charset，http-equiv
  • link rel决定类型，href决定引入地址
  • script type指定MIME类型
  • *可内嵌代码，可外链文件 *

  1. HTML body功能性标签

  2. HTML ARIA（这里还真的没有重视过，不过我还是无法感受它的重要性）

    了解ARIA并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义。

  3. HTML5

  4. HTML5 语义化标签。（用对 比 不用好，不用 比 用错好。）

  5. HTML5 表单增强

  6. HTML5 存储（本地存储-少数据量）

  • Cookies 4kb html4/html5
  • Local Storage 10mb html5
  • SessionStorage 5mb Same tab

  1. HTML5 IndexedDB（本地存储 - 多数据量）

    IndexedDB是在浏览器中保存结构化数据的一种数据库
    Cookies key-values 4kb
    Web Storage only strings 5mb-25mb
    IndexedDB Object 50mb

  2. HTML5 PWA

    Progressive Web App 渐进式web应用程序,简单来说,就是可以让你的WEB App,带来与原生App相媲美的用户体验

    之前了解过一点，就是把一些资源拉到本地，在桌面显示一个图标，类似App icon。使用方式就和App差不多。但是，不知道国内用的人多不多。就没深入了。
    Service Worker ?
    HTML5 AMP(AMP cache)
    AMP Service ? 至于不懂的地方，回头再来学学，先留了解基础的地址。

  3. HTML5 Audio

    字面意思

  4. HTML5 Video

    字面意思

  5. HTML5 二进制 - 通常是值文件

    这个真的没怎么了解过，貌似应该没用过。

  6. HTML5 API dataTransfer - 拖拽api

    知道有这个，但没用过。

  7. HTML5 Web Worker - 多线程

    知道有这个，但没用过。（不确定什么时候应该使用）

  8. HTML5 Web Socket - 长连接

    这个知道，也用过。不多就是简单的使用，没有深入学习。

  9. HTML5 Shadow DOM

    Shadow DOM 是一个 HTML 的规范,其允许开发者封装自己的 HTML 标签、CSS 样式和 JavaScript代码* 这个第一次看到。比较新奇。

  10. HTML5 Web Component ？？？

    Web Components是HTML5提供的一种原生组件封装集成的方式,我们可以通过这种技术封装一些类似Vue自定义组件的元素,在html中直接使用。

    这个第一次看到。比较新奇。

  11. HTML5 SVG & Canvas

    Canvas接触多一丢丢，也用过一点（印象中就几个要素，没别的了。）主要是轻度使用。了解不太深刻。但是canvas能弄出一些比较好玩的东西。 至于SVG，这个用的真的比较少，只能停留在icon上。但是，svg随着浏览器页面放大缩小都不会失真。

  12. WebGL & WebGPU

    至于WebGL，我只能停留在Threejs。别的真的不清楚。

  13. HTML WebAssembly ？？？

    WebAssembly（WASM）是一种新的编码方式，可以直接在浏览器运行。WASM可以与JavaScript并存,WASM更类似一种低级的汇编语言。 先留个链接，回头再来扒一扒

  14. 大前端

    所有前端的统称，Android、iOS、web、Watch、小程序等

  15. 交互方式 MVC & MVVM & MVP

    这个理解也不是很深刻，MVC以前学Java的时候了解过一点。三种架构介绍来源，回头再来扒一扒

    • MVC的目的就是将M和V的代码分离，且MVC是单向通信，必须通过Controller来承上启下。
    • MVP是模型-视图-表示器，它比MVC框架大概晚出现20年，是从MVC模式演变而来的。它们的基本思想有相同之处：Model层提供数据，View层负责视图显示，Controller/Presenter层负责逻辑的处理。将Controller改名为Presenter的同时改变了通信方向。
    • MVVM是模型-视图-视图模型。MVVM与MVP框架区别在于：MVVM采用双向绑定：View的变动，自动反映在ViewModel，反之亦然。
学习建议以及三剑客的总结：前端三剑客是至关重要的，HTML入门可能比较简单；
css可玩性比较高很多新奇的属性以及制作酷炫的效果都很让人有成就感（这个只是表现问题）；
JavaScript有点难度，上手还好，但是它真的很重要很重要，就是要深入才行。不然，平平无奇。
我就比平平无奇还平平无奇。

不要急，慢慢来。

avatar
文章
阅读
粉丝