前端是什么
- web标准技术
HTML、CSS、JavaScript、SVG、HTTP - 运行环境
- 界面与交互
考虑什么？
- 功能
- 美观
- 无障碍
- 安全：保护用户数据
- 性能：流畅
- 兼容性
前端的边界
nodeJS、ELECTRON、React Native、Web RTC、Web GL、WEBASSEMBLE、autoCAD
HTML
- <!doctype html>的作用
- 语义化：提升可读性、搜索引擎优化、提升无障碍（盲人-图片）
- html的扩展性：meta、data-、link、JSON-LD
meta：
渲染器：renderder标签，内核的问题，css和js渲染与交互的方式、双核？不支持则直接忽略掉
指定ie的渲染模式：ie=edge
data-
data-id=“1”//自定义属性
dataset API：获取属性
link -
css、浏览器预加载、favicon、rss
JSON-LD：描述格式化的数据，使搜索引擎以更高效的方式来进行信息提取。如果是动态的呢？？？？？？？ - web无障碍：可访问性（Accessibility/ALLY）；任何人都可；排除生理、心理障碍。
我们应该看的东西：ACAG、ARIA
为img提供alter属性
noscript//不支持js的时候显示的内容
input和label对应//一：label包input；二：label for+input_id
图形验证码和语音验证码
文字和背景有足够对比度
键盘可操作
工具：W3C validator、emment、markdown
CSS
作用：布局和涂鸦
盒模型、文档流
文本
文本模式：writing-mode
文本方向：最好直接使用html中的dir属性——可以自动识别是什么语言
float布局——主要用于图片式的
shape-outsize
https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside
清除浮动：1、zoom；2、clear标签
position布局
absolute（完全脱离）与float（半脱离)
sticky!//看得见的时候是relative，看不见是fixed
body的默认高度是0，所有使用%对子元素进行布局的时候，要设置为100%
section启用如rotate的新属性的时候，有独立的上下文。
格式上下文
BFC、IFC：垂直高度不生效
行内标签的高度由kine-geight决定
table：tale-layout和cologroup的属性实现边加载边渲染
Flex布局：瓜分父容器的宽度
grid布局:内部平台
怎么看分层：先打开控制台，然后ctrl+shift+p打开工具搜索栏，搜索show layer~
讲闭包要从作用域开始讲。
JavaScript
JS不只是工具？注重可读性。
不要用js来实现css的功能。注重代码的可读性。
少写js，用css来代替js有优势也有劣势
封装不一定是class，封装到一个function里面也是可以的。
console.log(“a”);
console.log(“b”);
console.log(“c”);
抽象包括数据抽象和过程抽象。
函数返回函数-》高阶函数
await?
过度设计？维护起来很麻烦。少点嵌套，不要把状态和数据暴露在外面，封装性和可扩展性，使得第三方使用api更方便，需要对程度进行把控。