前端三件套｜青训营笔记

小镇做题家想去大厂
364 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

HTML、CSS、JS

Structure.png

Class_1:前端与HTML

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如 input、meta
  • 属性值推荐用双引号包裹
  • 某些属性值可以省略，比如 required、readonly

HTML具体标签自行查阅文档。

内容划分

content.jpg

语义化

是什么？

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应遵循语义来编写HTML

好处：

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化？

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

HTML规范：MDN文档、W3C文档

Class_2:理解CSS

课前准备：CSS基本概念

一、了解CSS

CSS是什么？

  • Cascading Style Sheets
  • 用来定义页面元素的样式
    • 设置字体和颜色
    • 设置位置和大小
    • 添加动画效果
使用方式：
  • 外链
  • 嵌入
  • 内联

选择器Selector

  • 找出页面中的元素，以便给他们设置样式

  • 使用多种方式选择元素：

    • 按照标签名、类名或id

    • 按照属性

    • 按照DOM树中的位置

"*" 代表通配选择器

Combinators.png

颜色

RGB模型、HSL模型

HSL：

  • Hue：色相，色彩的基本属性。取值0-360
  • Saturation：饱和度是指色彩的鲜艳程度，越高越鲜艳。取值0-100%
  • Lightness：亮度值颜色的明亮程度，越高颜色越亮。取值0-100%

透明度alpha：1不透明，0透明

字体

font-family

通用字体族：Serif衬线体、Sans-Serif无衬线体、Cursive手写体、Fantasy、Monospace等宽字体。

Web Fonts：下载Web上的字体来用。

font-size：

  • 关键字：small、medium、large
  • 长度：px、em
  • 百分数：相对于父元素字体大小

font-tyle：设置斜体

font-weight：字体粗细（100-900）

  • bold：700
  • normal：400

line-height：设置字体下端到上一行下端距离

tip：英文写在中文前面，white-space挺有用

二、深入CSS

选择器的特异度（specificity）

特异度越高，优先级越高。

id(#)>类或伪类(.)>标签(E)

继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。一般文字相关的属性会继承。

显式继承：inherit

CSS每一个元素都有一个初始值，initial可将属性重置为初始值。

CSS求值

value.svg

布局

含义：确定内容的大小和位置的的算法。依据元素、容器、兄弟结点和内容等信息来计算

布局方式：常规流，浮动、绝对定位

常规流（Normal Flow）：

行级、块级、Table布局、FlexBox、Grid布局

盒子模型：

  • content-box：

image.png

  • border-box：

image.png

overflow：visible、hidden、scroll

块级(Block Level Box)：

不和其他盒子并列摆放，适用所有盒模型属性。

块级元素：生成块级盒子

eg：body、article、div、main、section、h1-6、p、ul、li等

display：block

行级(Inline Level Box)：

和其他行级盒子一起放在一行或者拆开成很多行。盒模型中的width，height不可用。

行级元素：生成行级盒子，内容分散在多个行盒中

eg：span、em、strong、cite、code等

display：inline

display：block、inline、inline-block、none

行级排版上下文：

  • Inline Formatting Context（IFC）：
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则
    • 盒子在一行内水平摆放
    • 一行放不下是，换行显示
    • text-align决定一行内盒子的水平对齐
    • vertical-align决定一个盒子在行内的垂直对齐
    • 避开浮动(float)元素

块级排版上下文：

  • Block Formatting Context（BFC）

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display：flow-root

  • BFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内的盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

Class_3:如何写好JavaScript

写好JS的一些原则：各司其职、组件封装、过程抽象

  • 各司其职
    • HTML/CSS/JS各司其职
    • 应当避免不必要的由JS直接操作样式
    • 可以用class来表示状态
    • 纯展示类交互寻求零JS方案

image-20220727193718896.png

  • 组件封装
    • 组件指Web网页上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。
    • 组件设计原则：封装性、正确性、扩展性、复用性。
    • 基本方法（实现组件步骤）：
      • 结构设计
      • 展示效果
      • 行为设计
        • API（功能）
        • Event（控制流）
    • 三次重构：
      • 插件化
      • 模版化
      • 抽象化（组件框架）
  • 过程抽象
    • HOF（高阶函数）/装饰器
    • 命令式/声明式

写代码应该关注什么？

风格、效率、约定、使用场景、设计

关于分红包的一个疑问：

既然需要一个最小值的话，能否先给每个人分0.01.然后剩下的钱去random？这样的方法是否可行？相对于其他方法的优劣

avatar
文章
阅读
粉丝