前端语言的基本能力|青训营笔记

404的front
128 阅读6分钟

前端必备三件套：

HTML

  1. 做好seo的关键基本点

  2. 基本语法

    • 标签
    • 文本
    • 注释
    • DTD
    • 处理信息

  3. 全部标签分类

    • 文档型
    • 闭合性
    • 换行型
    • H5新标签
    • Head标签
      • meta：通常约定好的键值对
      • base： 向页面所有相对URL提供前缀

  4. HTML ARIA

    • 供盲人阅读

  5. HTML语义化标签

  6. HTML的存储

    • cookie
      • 在请求的时候被发送
      • 存储空间较少
      • 可以存储在服务端
    • localstorage
      • 只能存储字符串
      • 存储在浏览器本地
      • 存储空间比较大
    • sessionStorage
      • 存储在浏览器本地
      • 关闭网页之后存储消失
    • 总体区别：
      • 在存储容量有区别：localStorage和sessionStorage有比较大的存储空间，通常是5MB，但是cookie的存储容量比较小，只有4KB
      • 生命周期：关于localStorage和sessionStorage的生命周期和浏览器的窗口保留，如果用户关闭浏览器窗口，那么sessionStorage就会清除，但是localStorage会一直保留，但是cookie可以设置相对应的过期时间，可以再过期之前一直存在。
      • 存储位置：localStorage和sessionStorage存储在浏览的本地存储中，cookie存储在客户端的cookie中，每次HTTP请求都会带上cookie
      • 安全性： 因为localStorage和SessionStorage存储在浏览器本地，可能就会被其他脚本和网站访问和修改，但是cookie有一些安全措施，比如HttpOnly和Secure属性，可以减少对cookie的攻击

  7. HEML5中 PWA和AMP

    • PWA主要是基于Web技术开发的应用程序，具有可靠性高、可安装、可离线访问、快速响应的优点
    • AMP就是一种加速移动页面技术，目的是提高移动页面的加载速度和性能。

  8. HTML5 Audio（音频）

    • HTML5 Audio是HTML5中的音频标签，可以用来在Web页面中播放音频。HTML5 Audio标签支持多种音频格式，包括MP3、Ogg、WAV等，具有可靠性高、兼容性好、易于使用等优点。

    • 除了src和controls属性外，<audio>标签还支持一系列其他属性，如下所示：

    • autoplay：表示是否自动播放音频。

    • loop：表示是否循环播放音频。

    • preload：表示是否在页面加载时预加载音频，取值可以是auto、metadata和none。

    • muted：表示是否静音播放音频。

    • volume：表示音频的音量大小，取值范围为0~1。

  9. HTML5 Vedio -除了src和controls属性外，<video>标签还支持一系列其他属性，如下所示：

    • autoplay：表示是否自动播放视频。
    • loop：表示是否循环播放视频。
    • preload：表示是否在页面加载时预加载视频，取值可以是auto、metadata和none。
    • muted：表示是否静音播放视频。
    • width和height：表示视频的宽度和高度，可以使用像素或百分比来指定。

  10. HTML5二进制

    • 主要是用于存储二进制数据

  11. HTML5 API

    • 拿到用户信息

  12. HTML5 Web Worker

    • 它可以在独立于主线程的上下文中执行代码，从而避免阻塞主线程的运行。

  13. HTML5 Web Socket

    • HTML5 Web Socket是一种全双工通信协议，它允许客户端和服务器之间建立持久性的连接，实现双向通信和实时数据传输。与传统的HTTP请求不同，Web Socket采用了基于TCP协议的通信方式，具有低延迟、高性能、高可靠性等特点，适合于需要实时通信和实时数据传输的应用场景。

  14. HTML5 Shawdow DOM

    • HML5 Shadow DOM是一种浏览器技术，用于创建封装的组件或自定义元素，并将其添加到文档中，以实现更加模块化、可复用、可维护的Web应用。Shadow DOM可以将组件内部的样式、脚本和结构隐藏在组件的内部，与文档中的其他元素隔离开来，从而避免了全局作用域和命名冲突等问题。

  15. HTML5 Web Component

  16. HTML SVG & Canvas

  17. Web GL 和WebGPU

  18. HTML5 WebAssembly

  19. 大前端

    • 前端工程师需要具备深厚的 Web 前端技术栈，包括 HTML、CSS、JavaScript、网络协议、浏览器原理、前端性能优化等方面的知识，同时还需要掌握各种框架、库、工具的使用和开发，如 React、Vue、Angular、Webpack、Babel等等。此外，大前端工程师还需要具备移动端开发、桌面端开发和物联网设备开发等方面的技能，包括 Android、iOS、Electron、React Native、Weex、IoT 等技术。

  20. MVC & MVVM & MVP

      1. MVC（Model-View-Controller）：MVC是最早被广泛应用的一种前端架构模式，将应用程序分成三个基本部分：模型（Model）、视图（View）和控制器（Controller）。模型用于管理应用程序的数据和业务逻辑，视图用于渲染用户界面，而控制器则是模型和视图之间的中介，负责接收和处理用户输入，并将结果反馈给视图。

    • MVVM（Model-View-ViewModel）：MVVM是由微软提出的一种前端架构模式，它在MVC的基础上引入了ViewModel。ViewModel是视图模型，它负责将模型的数据转换为视图可以使用的数据，同时也负责将视图的操作反馈到模型中。MVVM的核心是数据绑定，即将视图和ViewModel中的数据自动关联起来，当ViewModel中的数据发生变化时，视图会自动更新，从而实现了解耦和数据驱动。

    • MVP（Model-View-Presenter）：MVP是一种前端架构模式，它在MVC的基础上引入了Presenter。Presenter是视图和模型之间的中介，负责将视图的操作转换为模型可以处理的数据，并将模型的数据转换为视图可以展示的数据。Presenter和控制器的作用类似，但是它们的实现方式略有不同。在MVP中，Presenter与视图是一对一的关系，而控制器与视图是一对多的关系。

    • 总的来说，这三种前端架构模式都有其各自的优缺点和适用场景，开发者可以根据具体的需求和技术栈选择合适的架构模式。其中，MVVM在现代的前端框架（如Vue和Angular）中得到了广泛的应用，而MVP则在Android开发中比较流行。

CSS

  1. 语法简单
  2. 伪类选择器和伪元素选择器
  3. 在HTML标签中的使用

JavaScript

  1. 曾叫做叫做ECMAScript
  2. 借鉴了C语言、Java等语言
  3. JS的基本类型
  4. 关于js基本类型的运算以及判断
  5. js的工作流程（以v8为例）
  6. JS在HTML中的使用和解析
  7. JS单线程语言-相关的事件机制
    • 宏任务和微任务
  8. 关于JSX技术
  9. 用JS操作CSS
avatar
文章
阅读
粉丝