前端是什么
- 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更方便,需要对程度进行把控。