前端语言|青训营笔记

草莓提提
65 阅读5分钟

前端语言

HTML

HTML只是一门标记语言

基本语法：

  • 标签Element <>
  • 文本Text
  • 注释Comment
  • DTD Document Type Defination
  • 处理信息 ProcessingInstruction

image.png

head里面的标签

一般是功能性的，用户是看不到的 image.png

Body的标签

image.png

AREA

标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。

area 元素总是嵌套在 标签中。

HTML5

定义了一些规范，第五次重大修改版本

语义化标签

看见标签就知道里面应该保存的是什么内容的是语义化标签，语义化的代码结构更清晰、简洁

表单增强

H5中新增的一些表单元素：datalist/progress/meter/output

存储

提供了3种全新的存储方法

localStorage（本地存储）

  • 用于永久存储客户端的少量数据

  • 所用到的方法（五种）

sessionStorage（窗口存储）

  • 用于临时保存客户端的少量数据

  • 该存储方式所用的方法跟localStorage一模一样

indexedDB（数据库）

  • 用于永久保存客户端的大量数据

  • 该数据库是HTML5新增的一种存储在客户端本地的NoSQL数据库，用于在本地存储大量数据

  • indexedDB是“对象型数据库”，而不是“关系型数据库”，它的功能相对于传统的数据库来说会简单很多

  • HTML5标准废除了 Web SQL Database

媒体标签

  • video：视频；•audio：音频；•embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF

Web Worker

多线程

CSS

CSS1-CSS2-CSS2.1-CSS3

CSS3规范模块化发展、样式丰富、性能提升

基础知识

  • 层叠、优先级：解决冲突

    建议：选择器少用id减少复用，尽量不要用！important（级别较高），自己的样式加载到引用的样式中去

1.jpg

  • 继承：从父到子去继承

  • css值与单位：值：文字类/数字类/函数生成；单位：时间/长度/角度/分辨率

  • 盒模型：是视觉格式化模型的基础（负margin不建议常用）

布局

常规流布局

中的盒子只会参与一种格式化上下文（块级/内联级），块级会出现外边距塌陷的问题

解决方法： image.png

弹性盒子布局（Flex）

一维布局，基于内容，浏览器兼容性更好，小面积或组件中适用

网格布局

二维布局，元素放置在网格中，元素可以只占一个单位格，也可以多行多列，大面积或整体布局适用

定位

relative、absolute、fixed、sticky

层叠上下文

一个新的层叠上下文会对应一个浏览器渲染的渲染层

层叠顺序

不仅是不同层叠上下文顺序，同一个层叠上下文，元素间也有顺序

建议：使用css变量或者预处理语言的变量，管理z-index的值

预设隔间设为10或者100，方便后续插入

变形、过渡、动画

变形

变形3D -preserve3D

过渡

transition

动画

关键帧-定义关键样式

animation*相关属性

建议：尽量不用触发reflow属性、遇到性能时触发硬件加速（不要滥用），如设置will-change属性、设置transform3d，

尽量使用transform和opacity去写动画

响应式设计

dpi：每英寸多少点

ppi：每英寸多少像素

css像素：视角单位，1css像素是从1点（1/96英寸的视角）

移动端-viewport（常见设置：保持scale为1，保持scale放缩参数是1/dpr

rem:根元素的字体大小

语言增强

预处理器——less最好上手

后处理器——打包相关、面向未来css、编程增强、代码增强，常用postcss

工程架构

css模块化——解决全局污染

CSS in JS——将css写在JavaScript里

原子CSS——一种架构方式，倾向于小巧单一的class

JavaScript

**背景：**1995年诞生-2015转折ES6

JS基本概念

特点：

单线程（GUI线程与JS线程是互斥的）

动态、弱类型（变量在使用时无需指定类型）

面向对象、函数式（参数—结果）

解释类语言（不是纯的）、JIT

安全、性能差

6个基本类型：

  • String
  • Number
  • Boolean
  • Null
  • Undefined
  • Symbol 注：基本类型给的是值，复杂类型给的是地址

对象类型：

  • Array

  • Function

作用域—变量的可访问性和可见性

静态作用域，全局作用域，函数作用域，块级作用域（ES6加入）

变量提升

var有变量提升

let、const没有变量提升，提前访问会报错

function函数可以先调用再定义（把整个函数都提升）

赋值给变量的函数无法提前调用

JS如何执行

image.png

执行上下文

也叫执行环境，当JS引擎解析到可执行代码片段的时候，需要做一些执行前的准备工作，这个准备工作叫做执行上下文，包括变量环境、词法环境、绑定This、可执行代码。

词法环境：基于ESMAScript代码的词法嵌套结构来定义标识符和具体变量和函数的关联，用来存储函数声明和变量

变量环境：只存储var变量绑定

outer：指向外部变量环境的一个指针，形成了作用域链

种类：全局、函数、Eval

全局执行上下文：代码开始执行时被创建，将他压执行栈的栈底，每个生命周期只有一份

函数执行上下文：当执行一个函数时，函数代码会被编译，生成变量环境，词法环境，当函数执行结束的时候该执行环境从栈顶弹出

ESP：记录当前指向状态的指针

JS进阶知识点

闭包

特点内存不容易被回收，本质是没有被回收的对象

This

普通函数的this指向window

apply（改变this指向）

  • 对象调用指向对象

  • 先赋值再调用，再调用看地方

new ： 创建临时对象

将this指向临时对象

指向构造函数

返回临时对象

垃圾回收

堆分为2个空间，一个新生代空间1M-8M，存放小的变量，一个老生代，主垃圾回收器

新生代垃圾回收将划分为2个区域，对象区域，活跃对象，操作步骤：垃圾标记—对象复制—区域翻转；空闲区域

事件循环

微任务队列先于宏任务队列执行

总结

image.png

avatar
文章
阅读
粉丝